icon selector
Justin Richer
parent
e622202e9e
commit
88f2ea3e7e
|
|
@ -1141,17 +1141,66 @@
|
|||
if (!this.template) {
|
||||
this.template = _.template($('#tmpl-system-scope-form').html());
|
||||
}
|
||||
if (!this.iconTemplate) {
|
||||
this.iconTemplate = _.template($('#tmpl-system-scope-icon').html());
|
||||
}
|
||||
|
||||
// initialize our icon set into slices for the selector
|
||||
if (!this.bootstrapIcons) {
|
||||
this.bootstrapIcons = [];
|
||||
|
||||
var iconList = ['glass', 'music', 'search', 'envelope', 'heart', 'star',
|
||||
'star-empty', 'user', 'film', 'th-large', 'th', 'th-list', 'ok',
|
||||
'remove', 'zoom-in', 'zoom-out', 'off', 'signal', 'cog', 'trash',
|
||||
'home', 'file', 'time', 'road', 'download-alt', 'download',
|
||||
'upload', 'inbox', 'play-circle', 'repeat', 'refresh', 'list-alt',
|
||||
'lock', 'flag', 'headphones', 'volume-off', 'volume-down',
|
||||
'volume-up', 'qrcode', 'barcode', 'tag', 'tags', 'book',
|
||||
'bookmark', 'print', 'camera', 'font', 'bold', 'italic',
|
||||
'text-height', 'text-width', 'align-left', 'align-center',
|
||||
'align-right', 'align-justify', 'list', 'indent-left',
|
||||
'indent-right', 'facetime-video', 'picture', 'pencil',
|
||||
'map-marker', 'tint', 'share', 'move', 'fast-backward', 'backward',
|
||||
'pause', 'stop', 'forward', 'step-forward', 'eject',
|
||||
'chevron-right', 'plus-sign', 'minus-sign', 'remove-sign',
|
||||
'ok-sign', 'question-sign', 'info-sign', 'screenshot',
|
||||
'remove-circle', 'ok-circle', 'ban-circle', 'arrow-left',
|
||||
'arrow-right', 'arrow-down', 'share-alt', 'resize-full',
|
||||
'resize-small', 'plus', 'asterisk', 'exclamation-sign', 'gift',
|
||||
'leaf', 'fire', 'eye-close', 'plane', 'random', 'magnet',
|
||||
'chevron-up', 'chevron-down', 'retweet', 'shopping-cart',
|
||||
'folder-close', 'folder-open', 'resize-vertical',
|
||||
'resize-horizontal', 'hdd', 'bell', 'thumbs-up', 'hand-right',
|
||||
'hand-left', 'hand-down', 'circle-arrow-left', 'circle-arrow-up',
|
||||
'circle-arrow-down', 'globe', 'tasks', 'briefcase' ];
|
||||
|
||||
var size = 3;
|
||||
while (iconList.length > 0) {
|
||||
this.bootstrapIcons.push(iconList.splice(0, size));
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
events:{
|
||||
'click .btn-save':'saveScope',
|
||||
'click .btn-cancel': function() {app.navigate('admin/scope', {trigger: true}); }
|
||||
'click .btn-cancel': function() {app.navigate('admin/scope', {trigger: true}); },
|
||||
'click .btn-icon':'selectIcon'
|
||||
},
|
||||
|
||||
saveScope:function(event) {
|
||||
|
||||
var value = $('#value input').val()
|
||||
|
||||
if (value == null || value.trim() == "") {
|
||||
// error: can't have a blank scope
|
||||
return false
|
||||
}
|
||||
|
||||
var valid = this.model.set({
|
||||
value:$('#value input').val(),
|
||||
value:value,
|
||||
description:$('#description textarea').val(),
|
||||
icon:$('#iconDisplay input').val(),
|
||||
defaultScope:$('#defaultScope input').is(':checked'),
|
||||
allowDynReg:$('#allowDynReg input').is(':checked')
|
||||
});
|
||||
|
|
@ -1169,12 +1218,31 @@
|
|||
});
|
||||
}
|
||||
|
||||
return false;
|
||||
return false;
|
||||
},
|
||||
|
||||
selectIcon:function(event) {
|
||||
|
||||
var icon = event.target.value;
|
||||
|
||||
$('#iconDisplay input').val(icon);
|
||||
$('#iconDisplay span').html(icon);
|
||||
$('#iconDisplay i').removeClass();
|
||||
$('#iconDisplay i').addClass('icon-' + icon);
|
||||
|
||||
$('#iconSelector').modal('hide');
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
render: function(eventName) {
|
||||
this.$el.html(this.template(this.model.toJSON()));
|
||||
|
||||
_.each(this.bootstrapIcons, function (items) {
|
||||
$(".modal-body", this.el).append(this.iconTemplate({items:items}));
|
||||
}, this);
|
||||
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -606,6 +606,34 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group" id="icon">
|
||||
<label class="control-label">Icon</label>
|
||||
<div class="controls">
|
||||
|
||||
<span id="iconDisplay">
|
||||
<i class="icon-<%=icon%>"></i> <span class="uneditable-input"><%=icon%></span>
|
||||
|
||||
<input type="hidden" value="<%=icon%>">
|
||||
</span>
|
||||
|
||||
<a href="#iconSelector" role="button" class="btn btn-info" data-toggle="modal"><i class="icon-white icon-picture"></i> Select an icon</a>
|
||||
|
||||
<div id="iconSelector" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="iconSelectorLabel" aria-hidden="true">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h3 id="iconSelectorLabel">Select an Icon</h3>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="control-group" id="defaultScope">
|
||||
<div class="controls">
|
||||
<label class="checkbox">
|
||||
|
|
@ -632,3 +660,25 @@
|
|||
</fieldset>
|
||||
</form>
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="tmpl-system-scope-icon">
|
||||
|
||||
<div class="row-fluid">
|
||||
<div class="span4" style="margin-top: 5px; margin-bottom: 5px;">
|
||||
<% if (items[0]) { %>
|
||||
<button class="btn btn-block btn-icon" value="<%=items[0]%>"><i class="icon-<%=items[0]%>"></i> <%=items[0]%>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="span4" style="margin-top: 5px; margin-bottom: 5px;">
|
||||
<% if (items[1]) { %>
|
||||
<button class="btn btn-block btn-icon" value="<%=items[1]%>"><i class="icon-<%=items[1]%>"></i> <%=items[1]%>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="span4" style="margin-top: 5px; margin-bottom: 5px;">
|
||||
<% if (items[2]) { %>
|
||||
<button class="btn btn-block btn-icon" value="<%=items[2]%>"><i class="icon-<%=items[2]%>"></i> <%=items[2]%>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue