Permalink
Browse files

Merge branch 'master' of https://github.com/perka/backbone-ui

  • Loading branch information...
2 parents f1e1d5c + bde41c9 commit 994b797f11dc470b153e619c002cb0f5d3ffc022 @jcarrig jcarrig committed Jul 10, 2012
View
@@ -164,8 +164,9 @@ task :doc => [:build] do
`cp doc/src/script.js doc/dist/script.js`
`cp -r doc/lib doc/dist/`
`cp -r doc/src/images doc/dist/`
- `cp -r doc/src/themes doc/dist/`
+ `cp -r doc/src/skins doc/dist/`
`cp doc/src/test.html doc/dist/`
+ `cd doc/dist/skins && tar -zcvf perka.tgz perka`
end
desc "pushing docs to gh-pages"
View
@@ -15,7 +15,7 @@
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="lib/prettify.css">
- <link rel="stylesheet" href="themes/perka/perka.css">
+ <link rel="stylesheet" href="skins/perka/perka.css">
</head>
<body>
@@ -56,7 +56,8 @@
<h1>Dependencies</h1>
<p>Backbone UI depends on <a href='http://documentcloud.github.com/backbone/'>Backbone</a>,
- <a href='http://jquery.com/'>jQuery</a>, and <a href='http://joestelmach.github.com/laconic/'>Laconic</a>.
+ <a href='http://jquery.com/'>jQuery</a> (or <a href='http://zeptojs.com/'>Zepto</a>),
+ and <a href='http://joestelmach.github.com/laconic/'>Laconic</a>.
If you'd like to use the calendar or date picker components, than you'll
also need a copy of <a href='http://momentjs.com/'>moment.js</a>.
<p>
@@ -149,6 +150,17 @@
</section>
<section>
+ <h1>UI Skinning</h1>
+ <p>
+ Skinning of UI components should be done using CSS and image resources. The default skin is fully functional without any image resources, however; this documentation uses an <a href='./skins/perka.tgz'>example skin</a> as a reference for building your own. The following will enable this skin:
+
+ <div class="code"><pre class="prettyprint">Backbone.UI.setSkin('perka');</pre></div>
+
+ <p>
+
+ </section>
+
+ <section>
<h1>Browser Support</h1>
<p>
Backbone UI has been tested on most modern browsers, as well as IE8+. If you're using the HTML 5 Doctype, you may need to use the following <a href="http://msdn.microsoft.com/en-us/library/ie/cc288325(v=vs.85).aspx#SetMode">meta tag</a> to force IE into standards mode:
File renamed without changes.
View
@@ -1,7 +1,7 @@
body {
padding:120px 0 0 40px;
font-family:Georgia, serif;
- font-size:14px;
+ font-size:15px;
}
section {
@@ -87,7 +87,7 @@ a {
}
.components .result {
- width:240px;
+ width:238px;
}
.components .code {
View
@@ -0,0 +1,126 @@
+/*
+ jQuery `input` special event v1.2
+ http://whattheheadsaid.com/projects/input-special-event
+
+ (c) 2010-2011 Andy Earnshaw
+ forked by dodo (https://github.com/dodo)
+ MIT license
+ www.opensource.org/licenses/mit-license.php
+*/
+(function($, udf) {
+ var ns = ".inputEvent ",
+ // A bunch of data strings that we use regularly
+ dataBnd = "bound.inputEvent",
+ dataVal = "value.inputEvent",
+ dataDlg = "delegated.inputEvent",
+ // Set up our list of events
+ bindTo = [
+ "input", "textInput",
+ "propertychange",
+ "paste", "cut",
+ "keydown", "keyup",
+ "drop",
+ ""].join(ns),
+ // Events required for delegate, mostly for IE support
+ dlgtTo = [ "focusin", "mouseover", "dragstart", "" ].join(ns),
+ // Elements supporting text input, not including contentEditable
+ supported = {TEXTAREA:udf, INPUT:udf},
+ // Events that fire before input value is updated
+ delay = { paste:udf, cut:udf, keydown:udf, drop:udf, textInput:udf };
+
+ // this checks if the tag is supported or has the contentEditable property
+ function isSupported(elem) {
+ return $(elem).prop('contenteditable') == "true" ||
+ elem.tagName in supported;
+ };
+
+ $.event.special.txtinput = {
+ setup: function(data, namespaces, handler) {
+ var timer,
+ bndCount,
+ // Get references to the element
+ elem = this,
+ $elem = $(this),
+ triggered = false;
+
+ if (isSupported(elem)) {
+ bndCount = $.data(elem, dataBnd) || 0;
+
+ if (!bndCount)
+ $elem.bind(bindTo, handler);
+
+ $.data(elem, dataBnd, ++bndCount);
+ $.data(elem, dataVal, elem.value);
+ } else {
+ $elem.bind(dlgtTo, function (e) {
+ var target = e.target;
+ if (isSupported(target) && !$.data(elem, dataDlg)) {
+ bndCount = $.data(target, dataBnd) || 0;
+
+ if (!bndCount)
+ $(target).bind(bindTo, handler);
+
+ // make sure we increase the count only once for each bound ancestor
+ $.data(elem, dataDlg, true);
+ $.data(target, dataBnd, ++bndCount);
+ $.data(target, dataVal, target.value);
+ }
+ });
+ }
+ function handler (e) {
+ var elem = e.target;
+
+ // Clear previous timers because we only need to know about 1 change
+ window.clearTimeout(timer), timer = null;
+
+ // Return if we've already triggered the event
+ if (triggered)
+ return;
+
+ // paste, cut, keydown and drop all fire before the value is updated
+ if (e.type in delay && !timer) {
+ // ...so we need to delay them until after the event has fired
+ timer = window.setTimeout(function () {
+ if (elem.value !== $.data(elem, dataVal)) {
+ $(elem).trigger("txtinput");
+ $.data(elem, dataVal, elem.value);
+ }
+ }, 0);
+ }
+ else if (e.type == "propertychange") {
+ if (e.originalEvent.propertyName == "value") {
+ $(elem).trigger("txtinput");
+ $.data(elem, dataVal, elem.value);
+ triggered = true;
+ window.setTimeout(function () {
+ triggered = false;
+ }, 0);
+ }
+ }
+ else {
+ $(elem).trigger("txtinput");
+ $.data(elem, dataVal, elem.value);
+ triggered = true;
+ window.setTimeout(function () {
+ triggered = false;
+ }, 0);
+ }
+ }
+ },
+ teardown: function () {
+ var elem = $(this);
+ elem.unbind(dlgtTo);
+ elem.find("input, textarea").andSelf().each(function () {
+ bndCount = $.data(this, dataBnd, ($.data(this, dataBnd) || 1)-1);
+
+ if (!bndCount)
+ elem.unbind(bindTo);
+ });
+ }
+ };
+
+ // Setup our jQuery shorthand method
+ $.fn.input = function (handler) {
+ return handler ? $(this).bind("txtinput", handler) : this.trigger("txtinput");
+ }
+})(jQuery);
View
@@ -27,6 +27,9 @@
},
initialize : function() {
+ this.mixin([Backbone.UI.HasModel, Backbone.UI.HasAlternativeProperty]);
+ _(this).bindAll('render');
+
$(this.el).addClass('pulldown');
var onChange = this.options.onChange;
@@ -46,22 +49,6 @@
});
$(this._menu.el).hide();
document.body.appendChild(this._menu.el);
-
- // observe model changes
- if(_(this.model).exists() && _(this.model.bind).isFunction()) {
- this.model.unbind('change', _(this.render).bind(this));
-
- // observe model changes
- if(_(this.options.content).exists()) {
- this.model.bind('change:' + this.options.content, _(this.render).bind(this));
- }
- }
-
- // observe collection changes
- if(_(this.options.alternatives).exists() && _(this.options.alternatives.bind).isFunction()) {
- this.options.alternatives.unbind('all', _(this.render).bind(this));
- this.options.alternatives.bind('all', _(this.render).bind(this));
- }
},
// public accessors
@@ -70,6 +57,9 @@
render : function() {
$(this.el).empty();
+ this._observeModel(this.render);
+ this._observeCollection(this.render);
+
var item = this._menu.selectedItem;
var label = this._labelForItem(item);
this.button = new Backbone.UI.Button({
View
@@ -54,8 +54,6 @@
$(this._knob).bind('mousedown', _.bind(this._onKnobMouseDown, this));
$(this._tray).bind('click', _.bind(this._onTrayClick, this));
$(this.el).bind('mousewheel', _.bind(this._onMouseWheel, this));
- $(this.el).bind($.browser.msie ? 'keyup' : 'keypress',
- _.bind(this._onKeyPress, this));
// touch events if appropriates
if(Backbone.UI.IS_MOBILE) {
@@ -200,34 +198,8 @@
e.preventDefault();
return false;
}
- },
-
- _onKeyPress : function(e) {
- switch (e.keyCode) {
- case Backbone.UI.KEYS.KEY_DOWN:
- this.scrollBy(this.options.scrollAmount);
- break;
- case Backbone.UI.KEYS.KEY_UP:
- this.scrollBy(-this.options.scrollAmount);
- break;
- case Backbone.UI.KEYS.KEY_PAGEDOWN:
- this.scrollBy(this.options.scrollAmount);
- break;
- case Backbone.UI.KEYS.KEY_PAGEUP:
- this.scrollBy(-this.options.scrollAmount);
- break;
- case Backbone.UI.KEYS.KEY_HOME:
- this.setScrollRatio(0);
- break;
- case Backbone.UI.KEYS.KEY_END:
- this.setScrollRatio(1);
- break;
- default:
- return;
- }
- e.stopPropagation();
- e.preventDefault();
}
+
});
}());
View
@@ -37,6 +37,8 @@
tabIndex : this.options.tabIndex,
placeholder : this.options.placeholder}, value);
+ this._observeModel(_(this._refreshValue).bind(this));
+
var content = this.textArea;
if(this.options.enableScrolling) {
this._scroller = new Backbone.UI.Scroller({
@@ -49,7 +51,7 @@
this.setEnabled(!this.options.disabled);
- $(this.textArea).keyup(_.bind(function() {
+ $(this.textArea).input(_.bind(function() {
_.defer(_(this._updateModel).bind(this));
}, this));
@@ -78,6 +80,13 @@
_updateModel : function() {
_(this.model).setProperty(this.options.content, this.textArea.value);
+ },
+
+ _refreshValue : function() {
+ var newValue = this.resolveContent();
+ if(this.textArea && this.textArea.value !== newValue) {
+ this.textArea.value = _(newValue).exists() ? newValue : null;
+ }
}
});
}());
@@ -35,12 +35,13 @@
this.input = $.el.input({maxLength : this.options.maxLength});
- $(this.input).keyup(_.bind(function(e) {
- this._updateModel();
+ $(this.input).keyup(_(function(e) {
if(_(this.options.onKeyPress).exists() && _(this.options.onKeyPress).isFunction()) {
this.options.onKeyPress(e, this);
}
- }, this));
+ }).bind(this));
+
+ $(this.input).input(_(this._updateModel).bind(this));
this._observeModel(this._refreshValue);
},
Oops, something went wrong.

0 comments on commit 994b797

Please sign in to comment.