~iany/ Frontend

Responsive SVG

me@iany.me (Ian Yang) — Sun, 16 Jun 2013 00:00:00 +0000

SVG can use percentage as unit, but it is often more convenient to use px as unit. Framework such as d3 also uses px internally. However, it is still easy to scale an SVG using attributes viewBox and preserveAspectRatio even px is used as unit internally.

viewBox and preserveAspectRatio

The attribute viewBox specifies viewpoint dimension. SVG can be scaled along with the parent container without changing the internal coordinates.

For example, the SVG below defines a viewpoint with width 100 and height 100.

<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" fill="blue">
</svg>

The figure below shows the same SVG in different container sizes: 50x50, 100x50, 100x100, 100x200, 200x200 from left to right.

Same SVG in Different Size Containers

Attribute preserveAspectRatio controls how SVG is scaled according to parent container. There are many combinations, but the most frequently used are default (when the attribute is not specified, or set to xMidYMid meet explicitly) and none.

default, preserve ratio, align center of SVG to the center of the container, scaled up as much as possible but ensure the entire viewBox is visible within the container.
none, do not preserve ratio, scale SVG to fill the whole container.

See the figure similar to the previous one but setting preserveAspectRatio to none.

preserveAspectRatio="none"

Responsive SVG

First add following CSS:

svg {
width: 100%;
height: 100%;
}
svg * {
vector-effect: non-scaling-stroke;
}

The first rule ensures SVG always fills parent container. And the second one sets a default vector-effect that when SVG is scaled, leave stroke width untouched.

If the SVG does not need to preserve ratio, set preserveAspectRatio to none, and set the height of the container. For example, the SVG below has a fixed height 50px, and is half width of the whole page.

<div style="width:50%;height:50px;">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<circle cx="50" cy="50" r="50" fill="blue">
</svg>
</div>

Fixed With, Horizontal scalable

If the SVG must preserve ratio, then we need a bit of JavaScript to change container height when window is resized.

$.fn.preserveAspectRatio = function() {
this.each(function() {
var $this = $(this);
var ratioSpec = $this.attr('data-preserveAspectRatio').split(':');
var ratio = parseInt(ratioSpec[1], 10) / parseInt(ratioSpec[0], 10);
$this.height($this.width() * ratio);
});
};
var preserveAspectRatio = function() {
$('[data-preserveAspectRatio]').preserveAspectRatio();
};
$(function() {
preserveAspectRatio();
$(window).on('resize', preserveAspectRatio);
// Better to wrap preserveAspectRatio in underscore debounce or jquery-throttle-debounce.
// $(window).on('resize', _.debounce(preserveAspectRatio, 200));
});

Then set data-preserveAspectRatio on any container that needs preserve aspect ratio. Following example sets the width height ratio to 1:1:

<div style="width:50%;" data-preserveAspectRatio="1:1">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<circle cx="50" cy="50" r="50" fill="blue">
</svg>
</div>

See the demo in this pen.

References

Rails Compound Input

me@iany.me (Ian Yang) — Sat, 19 Jan 2013 00:00:00 +0000

When I implement time input feature for 19wu (an open source ticket sale system), I want to split the datetime into date and time parts, so JavaScript date picker and time picker can be used. This post introduces two methods I found.

Compound datetime input

composed_of utilizes assign_multiparameter_attributes trick like datetime_select, and fields_for mocks an association.

The github repository doitian/rails-compound-input-demo contains demos for both methods.

composed_of

Rails has built-in compound inputs date_select, time_select and datetime_select. They use trick that if parameter name has parentheses, they will be used in the attribute class constructor (see assign_multiparameter_attributes). However, datetime attribute is of type DateTime, which accepts 6 parameters year, month, day, hour, minute and second.

composed_of can be used here to represent the datetime attribute using value object, which class constructor accepts date and time strings. See CompoundDatetime#initialize below.

※ compound_datetime.rb

class CompoundDatetime
def self.from_datetime(datetime)
new.tap do |result|
result.datetime = datetime
end
end
attr_accessor :datetime
# Accepts date and time string. The form just need to submit params
#
# - compound_beginning_time(1s) for date
# - compound_beginning_time(2s) for time
def initialize(date = nil, time = nil)
if date.present?
@datetime = Time.zone.parse([date.presence, time.presence || ''].join(' '))
end
end
def date
@datetime.strftime('%Y-%m-%d') if @datetime
end
def time
@datetime.strftime('%H:%M') if @datetime
end
end

Then setup the mapping in model Event:

※ event.rb

class Event < ActiveRecord::Base
attr_accessible :beginning_time, :title
attr_accessible :compound_beginning_time
composed_of :compound_beginning_time, {
:class_name => 'CompoundDatetime',
:mapping => [ %w(beginning_time datetime) ],
:converter => Proc.new { |datetime| CompoundDatetime.from_datetime(datetime) }
}
end

The form view just needs set correct name:

※ events/_form.html.erb

<div class="field">
<%= f.label :compound_beginning_time, 'Begining Time' %><BR />
<%= text_field_tag 'event[compound_beginning_time(1s)]', @event.compound_beginning_time.date, :placeholder => 'yyyy-mm-dd' %>
<%= text_field_tag 'event[compound_beginning_time(2s)]', @event.compound_beginning_time.time, :placeholder => 'HH:MM' %>
</div>

fields_for

fields_for is usually used to embed associations in form. However, all it required was a method to return the named attribute, and then a <field>_attributes= writer to interpret the hash on the other side. See the section “Nested Attributes Examples” in the fields_for API document.

First create CompoundDatetime class which exposes date and time fields. assign_attributes handles the hash params passed from form. Method persisted? is required to quiet NoMethodError.

※ compound_datetime.rb

class CompoundDatetime
attr_accessor :datetime
def initialize(datetime)
@datetime = datetime
end
# accepts hash like:
#
# {
# 'date' => '2012-12-20',
# 'time' => '20:30'
# }
def assign_attributes(hash)
if hash[:date].present?
@datetime = Time.zone.parse([hash[:date].presence, hash[:time].presence || ''].join(' '))
end
self
end
def date
@datetime.strftime('%Y-%m-%d') if @datetime
end
def time
@datetime.strftime('%H:%M') if @datetime
end
def persisted?; false; end
end

The model just delegates the named attribute and <field>_attributes= method to CompoundDatetime.

※ event.rb

class Event < ActiveRecord::Base
attr_accessible :beginning_time, :title
attr_accessible :compound_beginning_time_attributes
def compound_beginning_time
CompoundDatetime.new(beginning_time)
end
def compound_beginning_time_attributes=(attributes)
self.beginning_time = compound_beginning_time.assign_attributes(attributes).datetime
end
end

The form view uses fields_for helper to nest fields of compound_begining_time.

※ events/_form.html.erb

<div class="field">
<%= f.label :beginning_time %><br />
<%= f.fields_for :compound_beginning_time do |fields| %>
<%= fields.text_field :date, :placeholder => 'yyyy-mm-dd' %>
<%= fields.text_field :time, :placeholder => 'HH:MM' %>
<% end %>
</div>