Skip to content

Commit

Permalink
Refactor to use a more generic filter system.
Browse files Browse the repository at this point in the history
  • Loading branch information
Young Hahn committed Dec 20, 2011
1 parent 68aa27c commit 89156fb
Show file tree
Hide file tree
Showing 7 changed files with 180 additions and 136 deletions.
58 changes: 33 additions & 25 deletions assets/autopilot.css
View file
Expand Up @@ -55,7 +55,7 @@ ul.autopilot {
max-height:none;
}

ul.autopilot li {
ul.autopilot > li {
position:relative;
background:#eee;
padding:10px 30px 0px;
Expand Down Expand Up @@ -134,15 +134,13 @@ ul.autopilot li .aspects { padding:10px; }
position:relative;
background:#fff;
padding:0px 224px 0px 0px;
height:0px;
display:none;
border-top:1px solid #ccc;
margin:0px -30px 0px;
box-shadow:inset #ddd 0px 1px;
transition:height 100ms;
-moz-transition:height 100ms;
-webkit-transition:height 100ms;
min-height:200px;
}

.aspect.active { height:220px; }
.aspect.active { display:block }

.aspects a.active:after {
content:'';
Expand All @@ -158,22 +156,29 @@ ul.autopilot li .aspects { padding:10px; }
}

.aspect ul.form li.active { display:block; }
.aspect ul.form li { padding:5px 20px 4px 100px; }
.aspect ul.form li.text { padding:10px 20px 9px; }
.aspect ul.form li label { width:70px; margin-left:-80px; text-align:left; }
.aspect ul.form li { max-width:none; padding:5px 10px 4px 100px; }
.aspect ul.form li.text { padding:10px 10px 9px; }
.aspect ul.form li label { width:80px; margin-left:-90px; text-align:left; }
.aspect ul.form li:last-child { border:0px; }

.aspect .text .joined {
position:absolute;
top:10px;
right:10px;
#page .aspect ul.form li.filter {
padding-right:40px;
background-color:#ddd;
border-color:#ccc;
}
.aspect ul.form li.filter .ui-slider:before { background-color:#eee; }
.aspect ul.form li.filter label { font-size:11px; text-transform:uppercase; }
.aspect ul.form li.filter a.close { position:absolute; right:10px; top:5px; }

.aspect .text .filters { position:absolute; top:10px; right:10px; }
.aspect .text .filters select { width:80px; }
.aspect .text .filters > * { vertical-align:middle; }

.aspect .colorpicker {
position:absolute;
background:#fff;
z-index:1;
border-left:1px solid #ddd;
box-shadow:inset #ddd 0px 1px;
padding:10px;
}

Expand All @@ -187,7 +192,7 @@ ul.autopilot li .aspects { padding:10px; }
.aspect .ui-slider-handle {
width:40px;
color:#fff;
font-size:9px;
font-size:10px;
line-height:16px;
text-shadow:rgba(0,0,0,0.5) 0px 1px;
text-align:center;
Expand All @@ -197,24 +202,27 @@ ul.autopilot li .aspects { padding:10px; }

.aspect option.null { color:#999; }

.aspect .shades {
height:20px;
margin:0px 0px 5px;
overflow:hidden;
position:relative;
}
.aspect .shade-links { margin-top:5px; }

.aspect .swatch {
width:24px;
margin-right:1px;
float:none;
display:inline-block;
vertical-align:middle;
width:20px;
height:16px;
background:#888 url(/assets/tilemill-autopilot/autopilot.png) -40px -40px;
}

.aspect .swatch.active {
box-shadow:
#fff 0px 0px 0px 1px,
#888 0px 0px 0px 3px;
}

.aspect .swatch,
.aspect .swatch .fill {
border-radius:3px;
box-shadow:inset rgba(0,0,0,0.1) 0px 0px 0px 1px;
}

.aspect .swatch.active { display:block; }

53 changes: 45 additions & 8 deletions models/Chart.bones
View file
@@ -1,11 +1,48 @@
model = Backbone.Model.extend();

model.prototype.deepGet = function(key) {
var deepGet = function(attr, keys) {
var key = keys.shift();
if (keys.length) {
return deepGet(attr[key] || {}, keys);
} else {
return attr[key];
}
}
return deepGet(this.attributes, key.split('.'));
};

model.prototype.deepSet = function(key, val, options) {
var deepSet = function(attr, keys, val) {
var key = keys.shift();
if (keys.length) {
if (keys.length === 1 && !isNaN(parseInt(keys[0]))) {
attr[key] = attr[key] || [];
} else {
attr[key] = attr[key] || {};
}
attr[key] = deepSet(attr[key], keys, val);
} else {
attr[key] = val;
}
return attr;
}
var root = key.split('.').shift();
var attr = {};
attr[root] = this.attributes[root];
console.warn(attr[root]);
return this.set(deepSet(attr, key.split('.'), val), options)
.trigger('change')
.trigger('change:' + root);
};

model.prototype.compile = function(layer) {
function zoomRules(rules, scale, zoom, key, val) {
if (scale <= 1) {
rules[key] = val;
return;
}
zoom = zoom || [0,22];
for (var z = zoom[0], i = 0; z <= zoom[1]; z++, i++) {
rules['[zoom='+z+']'] = rules['[zoom='+z+']'] || {};
rules['[zoom='+z+']'][key] = val + '*' + Math.pow(scale,i).toFixed(2);
Expand Down Expand Up @@ -34,12 +71,12 @@ model.prototype.compile = function(layer) {
if (key === 'id') return memo;
if (key.indexOf('_') === 0) return memo;
var prefix = key.split('-')[0];
var zoom = this.get('_'+prefix+'-zoom') || [0,22];
var filters = this.get('_'+prefix+'-filters') || {};
var scale = this.get('_'+prefix+'-scale') || 1;
var group = _('::<%=p%>[zoom>=<%=z[0]%>][zoom<=<%=z[1]%>]').template({
z:zoom,
p:prefix
});
var group = '::' + prefix + _(filters).map(function(val, key) {
return _('[<%=k%>>=<%=v[0]%>][<%=k%><=<%=v[1]%>]')
.template({ k:key, v:val });
}).join('');
switch (prefix) {
case 'background':
memo[key] = val;
Expand All @@ -61,7 +98,7 @@ model.prototype.compile = function(layer) {
memo[group] = memo[group] || {};
switch (key) {
case 'line-width':
zoomRules(memo[group], scale, zoom, key, val);
zoomRules(memo[group], scale, filters.zoom, key, val);
break;
default:
memo[group][key] = val;
Expand All @@ -76,7 +113,7 @@ model.prototype.compile = function(layer) {
switch (key) {
case 'text-size':
case 'text-character-spacing':
zoomRules(memo[group], scale, zoom, key, val);
zoomRules(memo[group], scale, filters.zoom, key, val);
break;
default:
memo[group][key] = val;
Expand All @@ -90,7 +127,7 @@ model.prototype.compile = function(layer) {
switch(key) {
case 'marker-width':
case 'marker-line-width':
zoomRules(memo[group], scale, zoom, key, val);
zoomRules(memo[group], scale, filters.zoom, key, val);
break;
default:
memo[group][key] = val;
Expand Down
25 changes: 25 additions & 0 deletions templates/AspectFilters._
View file
@@ -0,0 +1,25 @@
<li class='text'>
<h2><%=type[0].toUpperCase() + type.substr(1)%></h2>
<span class='filters'>
<select data-key='_<%=type%>-filters'>
<option class='null' value=''>- Filter -</option>
<option value='zoom'>Zoom</option>
<% _(datasource.get('fields')).each(function(val, field) { %>
<% if (val.type === 'Number') { %>
<option value='<%=field%>'><%=field%></option>
<% } %>
<% }); %>
</select>
<a class='button' href='#filterAdd'><span class='icon plus reverse'></span></a>
</span>
</li>
<% _(model.get('_'+type+'-filters')||{}).each(function(filter, key) { %>
<% var info = datasource.get('fields')[key]; %>
<% if (info) { %>
<li class='filter'>
<label><%= key==='zoom' ? 'Zoom' : key %></label>
<div class='slider range' data-key='_<%=type%>-filters.<%=key%>' data-min='<%=info.min || 0%>' data-max='<%=info.max || 10000%>'></div>
<a href='#filterRemove' data-key='_<%=type%>-filters.<%=key%>' class='icon close'></a>
</li>
<% } %>
<% }); %>
8 changes: 1 addition & 7 deletions templates/Aspectline._
View file
@@ -1,12 +1,6 @@
<div class='colorpicker fill-e' data-key='line-color'></div>
<ul class='form'>
<li class='text'>
<h2>Line</h2>
</li>
<li>
<label>Visibility</label>
<div class='slider range' data-key='_line-zoom' data-min='0' data-max='22'></div>
</li>
<%=this.AspectFilters(obj)%>
<li>
<label>Scale</label>
<div class='slider value' data-key='_line-scale' data-step='0.1' data-min='1' data-max='2'></div>
Expand Down
28 changes: 12 additions & 16 deletions templates/Aspectpolygon._
View file
@@ -1,28 +1,22 @@
<div class='colorpicker fill-e' data-key='polygon-fill' data-index='0'></div>
<div class='colorpicker fill-e' data-key='polygon-fill.0'></div>
<ul class='form'>
<li class='text'>
<h2>Polygon</h2>
</li>
<li>
<label>Visibility</label>
<div class='slider range' data-key='_polygon-zoom' data-min='0' data-max='22'></div>
</li>
<%=this.AspectFilters(obj)%>
<li>
<label>Shades</label>
<div class='shades'>
<label>Colors</label>
<div class='shades swatches clearfix'>
<% _(model.get('polygon-fill')).each(function(color, index) { %>
<a class='swatch' data-key='polygon-fill.<%=index%>'><span class='fill' style='background-color:<%=color%>'></span></a>
<a class='swatch' href='#swatch' data-key='polygon-fill.<%=index%>'><span class='fill' style='background-color:<%=color%>'></span></a>
<% }); %>
</div>
<span class='buttons joined'>
<div class='shade-links buttons joined'>
<a class='button' href='#shadeRemove'><span class='icon minus reverse'></span></a>
<a class='button' href='#shadeAdd'><span class='icon plus reverse'></span></a>
<a class='button' href='#shadeFlip'><span class='icon autopilot-flip reverse'></span></a>
<a class='button' href='#shadeInterpolate'><span class='icon autopilot-interpolate reverse'></a>
</span>
</div>
</li>
<li>
<label>Field</label>
<label>Color by</label>
<select <% if ((model.get('polygon-fill')||[]).length <= 1) %>disabled='disabled'<%;%> name='_polygon-field'>
<option class='null' value=''>- No field -</option>
<% _(datasource.get('fields')||[]).each(function(val, field) { %>
Expand All @@ -31,8 +25,10 @@
<% } %>
<% }); %>
</select>
<% var range = model.get('_polygon-range')||[]; %>
<div class='slider range minmax' data-key='_polygon-range' data-min='<%=range[0]||0%>' data-max='<%=range[1]||10000%>'></div>
<% var info = datasource.get('fields')[model.get('_polygon-field')]; %>
<% if (info) { %>
<div class='slider range minmax' data-key='_polygon-range' data-min='<%=info.min%>' data-max='<%=info.max%>'></div>
<% } %>
</li>
</ul>
<div class='mask'></div>
10 changes: 2 additions & 8 deletions templates/Aspecttext._
View file
@@ -1,12 +1,6 @@
<div class='colorpicker fill-e' data-key='text-fill'></div>
<ul class='form'>
<li class='text'>
<h2>Text</h2>
</li>
<li>
<label>Visibility</label>
<div class='slider range' data-key='_text-zoom' data-min='0' data-max='22'></div>
</li>
<%= this.AspectFilters(obj) %>
<li>
<label>Scale</label>
<div class='slider value' data-key='_text-scale' data-step='0.1' data-min='1' data-max='2'></div>
Expand All @@ -20,7 +14,7 @@
<div class='slider value' data-key='text-character-spacing' data-min='0' data-max='10'></div>
</li>
<li>
<label>Field</label>
<label>Text field</label>
<select name='text-name'>
<option class='null' value=''>- No field -</option>
<% _(datasource.get('fields')||[]).each(function(val, field) { %>
Expand Down

0 comments on commit 89156fb

Please sign in to comment.