Permalink
Browse files

removing glyph support

  • Loading branch information...
1 parent 549304e commit b57c9948a372d12ab2b71f25410f36d50fa2d72e @joestelmach joestelmach committed May 18, 2012
View
13 src/css/button.css
@@ -21,14 +21,6 @@ a.button {
text-decoration:none;
}
-.button.has_glyph {
-
-}
-
-.button.has_glyph_right {
-
-}
-
.button .label {
line-height:28px;
padding:0;
@@ -46,11 +38,6 @@ a.button {
border-color:#999;
}
-.button.disabled .glyph {
- filter:alpha(opacity=50);
- opacity:0.5;
-}
-
.button.has_border:hover {
background-color:#ddd;
border-color:#222;
View
34 src/css/has_glyph.css
@@ -1,34 +0,0 @@
-.glyph {
- /* inline-block with IE7 hack */
- display: inline-block;
- zoom: 1;
- *display: inline;
- line-height:30px;
- text-align:center;
- color:#666;
- font-style:normal;
- font-size:11px;
- margin: 6px 8px 0 6px;
- vertical-align:top;
-}
-
-.glyph.right {
- margin:2px 6px 0 8px;
-}
-
-
-.glyph_right_wrapper {
- text-align:right;
-}
-
-.glyph_left_wrapper {
- text-align:left;
- float:left;
-}
-
-.glyph_content_wrapper {
- /* inline-block with IE7 hack */
- display: inline-block;
- zoom: 1;
- *display: inline;
-}
View
1 src/css/pulldown.css
@@ -18,4 +18,3 @@
color:#333;
text-decoration:none;
}
-
View
13 src/css/radio_group.css
@@ -56,16 +56,3 @@
zoom: 1;
*display: inline;
}
-
-.radio_group li .glyph_right_wrapper {
- /* inline-block with IE7 hack */
- display: inline-block;
- zoom: 1;
- *display: inline;
-}
-
-.radio_group .glyph {
- vertical-align:top;
- margin-top: 2px;
-}
-
View
4 src/css/text_area.css
@@ -21,7 +21,3 @@
font-size:14px;
background-color:#fff;
}
-
-.text_area.has_glyph .glyph {
- vertical-align:top;
-}
View
8 src/css/text_field.css
@@ -29,11 +29,3 @@
outline:none;
font-size:13px;
}
-
-.text_field.has_glyph .input_wrapper {
- padding-left: 24px;
-}
-
-.text_field.has_glyph_right .input_wrapper {
- padding-right: 24px;
-}
View
2 src/js/backbone_ui.js
@@ -23,8 +23,6 @@
KEY_INSERT: 45
},
- GLYPH_DIR : '/images/glyphs',
-
setSkin : function(skin) {
if(!!Backbone.UI.currentSkin) {
$(document.body).removeClass('skin_' + Backbone.UI.currentSkin);
View
4 src/js/button.js
@@ -75,9 +75,7 @@
}).appendTo(this.el);
}
- // insert glyphs and label
- var contentEl = this.insertGlyphLayout(this.options.glyph, this.options.glyphRight, this.el);
- contentEl.appendChild($.el.span({className : 'label'}, labelText));
+ this.el.appendChild($.el.span({className : 'label'}, labelText));
// add appropriate class names
this.setEnabled(!this.options.disabled);
View
10 src/js/has_alternative_property.js
@@ -11,15 +11,7 @@
// The property of the individual choice that represents the value to be stored
// in the bound model's property. Omit this option if you'd like the choice
// object itself to represent the value.
- altValueContent : null,
-
- // The property of the individual choice representing the glyph to be
- // displayed to the left of the item's label
- altGlyph : null,
-
- // The property of the individual choice representing the glyph to be
- // displayed to the right of the item's label
- altGlyphRight : null
+ altValueContent : null
},
_determineSelectedItem : function() {
View
76 src/js/has_glyph.js
@@ -1,76 +0,0 @@
-// A mixin for dealing with glyphs in widgets
-(function(){
-
- var loadGlyph = function(name){
-
- var className = 'glyph';
- if(name.length === 1) {
- var span = $.el.span({
- className : className,
- style : 'margin: 0 8px 0 0'
- }, name);
- return span;
- }
- else {
- var image = new Image();
- $(image).hide();
- image.onload = function() {
- // center the image inside a 28px square
- var topOffset = Math.max(1, ((28 - image.height) / 2));
- var leftOffset = Math.max(3, ((28 - image.width) / 2));
-
- $(image).css({
- border : 'none'
- });
- $(image).css('display','inline-block');
- };
-
- image.src = name.match(/(http:\/\/)|(https:\/\/)/) ? name :
- Backbone.UI.GLYPH_DIR + '/' + name + (name.indexOf('.') > 0 ? '' : '.png');
-
- image.className = className;
- return image;
- }
- };
-
- Backbone.UI.HasGlyph = {
- GLYPH_SIZE : 22,
-
- options : {
- // a glyph to show to the left
- glyph : null,
-
- // a glyph to show to the right
- glyphRight : null
- },
-
- insertGlyphLayout : function(glyph, glyphRight, parent) {
-
- var contentWrapper = $.el.div({className : 'glyph_content_wrapper'});
- var rightWrapper = glyphRight ? $.el.div({className : 'glyph_right_wrapper'}) : null;
- var leftWrapper = glyph ? $.el.div({className : 'glyph_left_wrapper'}, contentWrapper) : null;
-
- if(rightWrapper) {
- var contentParent = leftWrapper ? leftWrapper : rightWrapper;
- contentWrapper.appendTo(contentParent);
- if(leftWrapper) leftWrapper.appendTo(rightWrapper);
- rightWrapper.appendTo(parent);
- rightWrapper.appendChild(loadGlyph(glyphRight));
- }
-
- else if(leftWrapper) {
- leftWrapper.appendTo(parent);
- $(parent).addClass('has_glyph');
- leftWrapper.insertBefore(loadGlyph(glyph), contentWrapper);
- }
-
- else {
- contentWrapper.appendTo(parent);
- $(parent).addClass('has_glyph_right');
- }
-
- return contentWrapper;
- }
-
- };
-}());
View
5 src/js/link.js
@@ -32,9 +32,8 @@
$(this.el).empty();
- // insert glyphs and label
- var contentEl = this.insertGlyphLayout(this.options.glyph, this.options.glyphRight, this.el);
- contentEl.appendChild($.el.span({className : 'label'}, labelText));
+ // insert label
+ this.el.appendChild($.el.span({className : 'label'}, labelText));
// add appropriate class names
this.setEnabled(!this.options.disabled);
View
12 src/js/menu.js
@@ -8,7 +8,7 @@
},
initialize : function() {
- this.mixin([Backbone.UI.HasModel, Backbone.UI.HasAlternativeProperty, Backbone.UI.HasGlyph]);
+ this.mixin([Backbone.UI.HasModel, Backbone.UI.HasAlternativeProperty]);
_(this).bindAll('render');
@@ -63,22 +63,16 @@
},
width : function() {
- return $(this.el).width();
+ return $(this.scroller.el).innerWidth();
},
// Adds the given item (creating a new li element)
// to the given menu ul element
_addItemToMenu : function(menu, item, select) {
var anchor = $.el.a({href : '#'});
- // get glyph strings
- var glyphLeft = this.resolveContent(item, this.options.altGlyph);
- var glyphRight = this.resolveContent(item, this.options.altGlyphRight);
-
- // insert glyphs
var liElement = $.el.li(anchor);
- var contentEl = this.insertGlyphLayout(glyphLeft, glyphRight, anchor);
- $.el.span(this._labelForItem(item) || '\u00a0').appendTo(contentEl);
+ $.el.span(this._labelForItem(item) || '\u00a0').appendTo(anchor);
var clickFunction = _.bind(function(e, silent) {
if(!!this._selectedAnchor) $(this._selectedAnchor).removeClass('selected');
View
16 src/js/pulldown.js
@@ -27,7 +27,6 @@
},
initialize : function() {
- this.mixin([Backbone.UI.HasGlyph]);
$(this.el).addClass('pulldown');
var onChange = this.options.onChange;
@@ -72,12 +71,11 @@
$(this.el).empty();
var item = this._menu.selectedItem;
+ var label = this._labelForItem(item);
this.button = new Backbone.UI.Button({
className : 'pulldown_button',
- model : {label : this._labelForItem(item)},
- content : 'label',
- glyph : _(item).resolveProperty(this.options.altGlyph),
- glyphRight : '\u25bc',
+ model : {label : this._labelForItem(item)},
+ content : 'label',
onClick : _.bind(this.showMenu, this)
}).render();
this.el.appendChild(this.button.el);
@@ -98,7 +96,6 @@
setSelectedItem : function(item) {
this._setSelectedItem(item);
this.button.options.label = this._labelForItem(item);
- this.button.options.glyph = _(item).resolveProperty(this.options.altGlyph);
this.button.render();
},
@@ -115,7 +112,10 @@
var position = (this.options.alignRight ? '-right' : '-left') + (showOnTop ? 'top' : ' bottom');
$(this._menu.el).alignTo(anchor, position, 0, 1);
$(this._menu.el).show();
- $(this._menu.el).css({width : Math.max($(this.button.el).innerWidth(), this._menu.width())});
+
+ var menuWidth = this._menu.width();
+ var buttonWidth = $(this.button.el).innerWidth();
+ $(this._menu.el).css({width : Math.max(menuWidth, buttonWidth)});
if(this.options.onMenuShow) this.options.onMenuShow(e);
this._menu.scrollToSelectedItem();
},
@@ -124,8 +124,6 @@
if(!!this.button) {
$(this.el).removeClass('placeholder');
this.button.model = {label : this._labelForItem(item)};
- var glyphRight = _(item).resolveProperty(this.options.altGlyphRight);
- this.button.options.glyph = (!glyphRight) ? _(item).resolveProperty(this.options.altGlyph) : glyphRight;
this.button.render();
this.hideMenu();
}
View
10 src/js/radio_group.js
@@ -7,7 +7,7 @@
},
initialize : function() {
- this.mixin([Backbone.UI.HasGlyph, Backbone.UI.HasModel, Backbone.UI.HasAlternativeProperty]);
+ this.mixin([Backbone.UI.HasModel, Backbone.UI.HasAlternativeProperty]);
_(this).bindAll('render');
$(this.el).addClass('radio_group');
@@ -40,18 +40,14 @@
e.stopPropagation();
});
}
- // get glyph strings
- var glyphLeft = this.resolveContent(item, this.options.altGlyph);
- var glyphRight = this.resolveContent(item, this.options.altGlyphRight);
var li = $.el.li(
$.el.a({className : 'choice' + (selected ? ' selected' : '')},
$.el.div({className : 'mark' + (selected ? ' selected' : '')},
selected ? '\u25cf' : '\u00a0')));
- // insert glyphs and label into li then add to ul
- var contentEl = this.insertGlyphLayout(glyphLeft,glyphRight,li);
- $.el.div({className : 'label'}, label).appendTo(contentEl);
+ // insert label into li then add to ul
+ $.el.div({className : 'label'}, label).appendTo(li);
ul.appendChild(li);
$(li).bind('click', _.bind(this._onChange, this, item));
View
10 src/js/tab_set.js
@@ -8,7 +8,6 @@
},
initialize : function() {
- $.extend(true, this, Backbone.UI.HasGlyph);
$(this.el).addClass('tab_set');
},
@@ -36,13 +35,8 @@
var tab = $.el.a({href : '#', className : 'tab'});
if(tabOptions.className) $(tab).addClass(tabOptions.className);
- // get glyph strings
- var glyphLeft = this.resolveContent(tabOptions, this.options.altGlyph);
- var glyphRight = this.resolveContent(tabOptions, this.options.altGlyphRight);
-
- // insert glyphs and textNode
- var contentEl = this.insertGlyphLayout(glyphLeft,glyphRight,tab);
- contentEl.appendChild(document.createTextNode(tabOptions.label || ''));
+ // insert textNode
+ tab.appendChild(document.createTextNode(tabOptions.label || ''));
this._tabBar.appendChild(tab);
this._tabs.push(tab);
View
6 src/js/text_area.js
@@ -18,7 +18,7 @@
textArea : null,
initialize : function() {
- this.mixin([Backbone.UI.HasGlyph, Backbone.UI.HasModel]);
+ this.mixin([Backbone.UI.HasModel]);
$(this.el).addClass('text_area');
if(this.options.name){
@@ -45,9 +45,7 @@
content = this._scroller.el;
}
- // insert glyphs
- var contentEl = this.insertGlyphLayout(this.options.glyph,this.options.glyphRight,this.el);
- contentEl.appendChild(content);
+ this.el.appendChild(content);
this.setEnabled(!this.options.disabled);
View
7 src/js/text_field.js
@@ -25,7 +25,7 @@
input : null,
initialize : function() {
- this.mixin([Backbone.UI.HasGlyph, Backbone.UI.HasModel]);
+ this.mixin([Backbone.UI.HasModel]);
_(this).bindAll('_refreshValue');
$(this.el).addClass('text_field');
@@ -59,9 +59,8 @@
placeholder : this.options.placeholder,
value : value});
- // insert glyphs and text_wrapper
- var contentEl = this.insertGlyphLayout(this.options.glyph,this.options.glyphRight,this.el);
- contentEl.appendChild($.el.div({className : 'input_wrapper'}, this.input));
+ // insert text_wrapper
+ this.el.appendChild($.el.div({className : 'input_wrapper'}, this.input));
this.setEnabled(!this.options.disabled);
View
1 test/test-noglyphs.html
@@ -140,6 +140,7 @@
altLabelContent: 'label',
altValueContent: 'val'
}).render();
+ $(pulldownLeft.button.el).css({width : '200px'});
leftCol.appendChild($.el.div({'className':'clear'}));
leftCol.appendChild(pulldownLeft.el);

0 comments on commit b57c994

Please sign in to comment.