knitkit 2.1.15 → 3.0.0

data/public/javascripts/knitkit/bootstrap.min.js

@@ -0,0 +1,7 @@
+/*!
+ * Bootstrap v3.0.3 (http://getbootstrap.com)
+ * Copyright 2013 Twitter, Inc.
+ * Licensed under http://www.apache.org/licenses/LICENSE-2.0
+ */
+
+if("undefined"==typeof jQuery)throw new Error("Bootstrap requires jQuery");+function(a){"use strict";function b(){var a=document.createElement("bootstrap"),b={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",transition:"transitionend"};for(var c in b)if(void 0!==a.style[c])return{end:b[c]}}a.fn.emulateTransitionEnd=function(b){var c=!1,d=this;a(this).one(a.support.transition.end,function(){c=!0});var e=function(){c||a(d).trigger(a.support.transition.end)};return setTimeout(e,b),this},a(function(){a.support.transition=b()})}(jQuery),+function(a){"use strict";var b='[data-dismiss="alert"]',c=function(c){a(c).on("click",b,this.close)};c.prototype.close=function(b){function c(){f.trigger("closed.bs.alert").remove()}var d=a(this),e=d.attr("data-target");e||(e=d.attr("href"),e=e&&e.replace(/.*(?=#[^\s]*$)/,""));var f=a(e);b&&b.preventDefault(),f.length||(f=d.hasClass("alert")?d:d.parent()),f.trigger(b=a.Event("close.bs.alert")),b.isDefaultPrevented()||(f.removeClass("in"),a.support.transition&&f.hasClass("fade")?f.one(a.support.transition.end,c).emulateTransitionEnd(150):c())};var d=a.fn.alert;a.fn.alert=function(b){return this.each(function(){var d=a(this),e=d.data("bs.alert");e||d.data("bs.alert",e=new c(this)),"string"==typeof b&&e[b].call(d)})},a.fn.alert.Constructor=c,a.fn.alert.noConflict=function(){return a.fn.alert=d,this},a(document).on("click.bs.alert.data-api",b,c.prototype.close)}(jQuery),+function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d)};b.DEFAULTS={loadingText:"loading..."},b.prototype.setState=function(a){var b="disabled",c=this.$element,d=c.is("input")?"val":"html",e=c.data();a+="Text",e.resetText||c.data("resetText",c[d]()),c[d](e[a]||this.options[a]),setTimeout(function(){"loadingText"==a?c.addClass(b).attr(b,b):c.removeClass(b).removeAttr(b)},0)},b.prototype.toggle=function(){var a=this.$element.closest('[data-toggle="buttons"]'),b=!0;if(a.length){var c=this.$element.find("input");"radio"===c.prop("type")&&(c.prop("checked")&&this.$element.hasClass("active")?b=!1:a.find(".active").removeClass("active")),b&&c.prop("checked",!this.$element.hasClass("active")).trigger("change")}b&&this.$element.toggleClass("active")};var c=a.fn.button;a.fn.button=function(c){return this.each(function(){var d=a(this),e=d.data("bs.button"),f="object"==typeof c&&c;e||d.data("bs.button",e=new b(this,f)),"toggle"==c?e.toggle():c&&e.setState(c)})},a.fn.button.Constructor=b,a.fn.button.noConflict=function(){return a.fn.button=c,this},a(document).on("click.bs.button.data-api","[data-toggle^=button]",function(b){var c=a(b.target);c.hasClass("btn")||(c=c.closest(".btn")),c.button("toggle"),b.preventDefault()})}(jQuery),+function(a){"use strict";var b=function(b,c){this.$element=a(b),this.$indicators=this.$element.find(".carousel-indicators"),this.options=c,this.paused=this.sliding=this.interval=this.$active=this.$items=null,"hover"==this.options.pause&&this.$element.on("mouseenter",a.proxy(this.pause,this)).on("mouseleave",a.proxy(this.cycle,this))};b.DEFAULTS={interval:5e3,pause:"hover",wrap:!0},b.prototype.cycle=function(b){return b||(this.paused=!1),this.interval&&clearInterval(this.interval),this.options.interval&&!this.paused&&(this.interval=setInterval(a.proxy(this.next,this),this.options.interval)),this},b.prototype.getActiveIndex=function(){return this.$active=this.$element.find(".item.active"),this.$items=this.$active.parent().children(),this.$items.index(this.$active)},b.prototype.to=function(b){var c=this,d=this.getActiveIndex();return b>this.$items.length-1||0>b?void 0:this.sliding?this.$element.one("slid.bs.carousel",function(){c.to(b)}):d==b?this.pause().cycle():this.slide(b>d?"next":"prev",a(this.$items[b]))},b.prototype.pause=function(b){return b||(this.paused=!0),this.$element.find(".next, .prev").length&&a.support.transition.end&&(this.$element.trigger(a.support.transition.end),this.cycle(!0)),this.interval=clearInterval(this.interval),this},b.prototype.next=function(){return this.sliding?void 0:this.slide("next")},b.prototype.prev=function(){return this.sliding?void 0:this.slide("prev")},b.prototype.slide=function(b,c){var d=this.$element.find(".item.active"),e=c||d[b](),f=this.interval,g="next"==b?"left":"right",h="next"==b?"first":"last",i=this;if(!e.length){if(!this.options.wrap)return;e=this.$element.find(".item")[h]()}this.sliding=!0,f&&this.pause();var j=a.Event("slide.bs.carousel",{relatedTarget:e[0],direction:g});if(!e.hasClass("active")){if(this.$indicators.length&&(this.$indicators.find(".active").removeClass("active"),this.$element.one("slid.bs.carousel",function(){var b=a(i.$indicators.children()[i.getActiveIndex()]);b&&b.addClass("active")})),a.support.transition&&this.$element.hasClass("slide")){if(this.$element.trigger(j),j.isDefaultPrevented())return;e.addClass(b),e[0].offsetWidth,d.addClass(g),e.addClass(g),d.one(a.support.transition.end,function(){e.removeClass([b,g].join(" ")).addClass("active"),d.removeClass(["active",g].join(" ")),i.sliding=!1,setTimeout(function(){i.$element.trigger("slid.bs.carousel")},0)}).emulateTransitionEnd(600)}else{if(this.$element.trigger(j),j.isDefaultPrevented())return;d.removeClass("active"),e.addClass("active"),this.sliding=!1,this.$element.trigger("slid.bs.carousel")}return f&&this.cycle(),this}};var c=a.fn.carousel;a.fn.carousel=function(c){return this.each(function(){var d=a(this),e=d.data("bs.carousel"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c),g="string"==typeof c?c:f.slide;e||d.data("bs.carousel",e=new b(this,f)),"number"==typeof c?e.to(c):g?e[g]():f.interval&&e.pause().cycle()})},a.fn.carousel.Constructor=b,a.fn.carousel.noConflict=function(){return a.fn.carousel=c,this},a(document).on("click.bs.carousel.data-api","[data-slide], [data-slide-to]",function(b){var c,d=a(this),e=a(d.attr("data-target")||(c=d.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,"")),f=a.extend({},e.data(),d.data()),g=d.attr("data-slide-to");g&&(f.interval=!1),e.carousel(f),(g=d.attr("data-slide-to"))&&e.data("bs.carousel").to(g),b.preventDefault()}),a(window).on("load",function(){a('[data-ride="carousel"]').each(function(){var b=a(this);b.carousel(b.data())})})}(jQuery),+function(a){"use strict";var b=function(c,d){this.$element=a(c),this.options=a.extend({},b.DEFAULTS,d),this.transitioning=null,this.options.parent&&(this.$parent=a(this.options.parent)),this.options.toggle&&this.toggle()};b.DEFAULTS={toggle:!0},b.prototype.dimension=function(){var a=this.$element.hasClass("width");return a?"width":"height"},b.prototype.show=function(){if(!this.transitioning&&!this.$element.hasClass("in")){var b=a.Event("show.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.$parent&&this.$parent.find("> .panel > .in");if(c&&c.length){var d=c.data("bs.collapse");if(d&&d.transitioning)return;c.collapse("hide"),d||c.data("bs.collapse",null)}var e=this.dimension();this.$element.removeClass("collapse").addClass("collapsing")[e](0),this.transitioning=1;var f=function(){this.$element.removeClass("collapsing").addClass("in")[e]("auto"),this.transitioning=0,this.$element.trigger("shown.bs.collapse")};if(!a.support.transition)return f.call(this);var g=a.camelCase(["scroll",e].join("-"));this.$element.one(a.support.transition.end,a.proxy(f,this)).emulateTransitionEnd(350)[e](this.$element[0][g])}}},b.prototype.hide=function(){if(!this.transitioning&&this.$element.hasClass("in")){var b=a.Event("hide.bs.collapse");if(this.$element.trigger(b),!b.isDefaultPrevented()){var c=this.dimension();this.$element[c](this.$element[c]())[0].offsetHeight,this.$element.addClass("collapsing").removeClass("collapse").removeClass("in"),this.transitioning=1;var d=function(){this.transitioning=0,this.$element.trigger("hidden.bs.collapse").removeClass("collapsing").addClass("collapse")};return a.support.transition?(this.$element[c](0).one(a.support.transition.end,a.proxy(d,this)).emulateTransitionEnd(350),void 0):d.call(this)}}},b.prototype.toggle=function(){this[this.$element.hasClass("in")?"hide":"show"]()};var c=a.fn.collapse;a.fn.collapse=function(c){return this.each(function(){var d=a(this),e=d.data("bs.collapse"),f=a.extend({},b.DEFAULTS,d.data(),"object"==typeof c&&c);e||d.data("bs.collapse",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.collapse.Constructor=b,a.fn.collapse.noConflict=function(){return a.fn.collapse=c,this},a(document).on("click.bs.collapse.data-api","[data-toggle=collapse]",function(b){var c,d=a(this),e=d.attr("data-target")||b.preventDefault()||(c=d.attr("href"))&&c.replace(/.*(?=#[^\s]+$)/,""),f=a(e),g=f.data("bs.collapse"),h=g?"toggle":d.data(),i=d.attr("data-parent"),j=i&&a(i);g&&g.transitioning||(j&&j.find('[data-toggle=collapse][data-parent="'+i+'"]').not(d).addClass("collapsed"),d[f.hasClass("in")?"addClass":"removeClass"]("collapsed")),f.collapse(h)})}(jQuery),+function(a){"use strict";function b(){a(d).remove(),a(e).each(function(b){var d=c(a(this));d.hasClass("open")&&(d.trigger(b=a.Event("hide.bs.dropdown")),b.isDefaultPrevented()||d.removeClass("open").trigger("hidden.bs.dropdown"))})}function c(b){var c=b.attr("data-target");c||(c=b.attr("href"),c=c&&/#/.test(c)&&c.replace(/.*(?=#[^\s]*$)/,""));var d=c&&a(c);return d&&d.length?d:b.parent()}var d=".dropdown-backdrop",e="[data-toggle=dropdown]",f=function(b){a(b).on("click.bs.dropdown",this.toggle)};f.prototype.toggle=function(d){var e=a(this);if(!e.is(".disabled, :disabled")){var f=c(e),g=f.hasClass("open");if(b(),!g){if("ontouchstart"in document.documentElement&&!f.closest(".navbar-nav").length&&a('<div class="dropdown-backdrop"/>').insertAfter(a(this)).on("click",b),f.trigger(d=a.Event("show.bs.dropdown")),d.isDefaultPrevented())return;f.toggleClass("open").trigger("shown.bs.dropdown"),e.focus()}return!1}},f.prototype.keydown=function(b){if(/(38|40|27)/.test(b.keyCode)){var d=a(this);if(b.preventDefault(),b.stopPropagation(),!d.is(".disabled, :disabled")){var f=c(d),g=f.hasClass("open");if(!g||g&&27==b.keyCode)return 27==b.which&&f.find(e).focus(),d.click();var h=a("[role=menu] li:not(.divider):visible a",f);if(h.length){var i=h.index(h.filter(":focus"));38==b.keyCode&&i>0&&i--,40==b.keyCode&&i<h.length-1&&i++,~i||(i=0),h.eq(i).focus()}}}};var g=a.fn.dropdown;a.fn.dropdown=function(b){return this.each(function(){var c=a(this),d=c.data("bs.dropdown");d||c.data("bs.dropdown",d=new f(this)),"string"==typeof b&&d[b].call(c)})},a.fn.dropdown.Constructor=f,a.fn.dropdown.noConflict=function(){return a.fn.dropdown=g,this},a(document).on("click.bs.dropdown.data-api",b).on("click.bs.dropdown.data-api",".dropdown form",function(a){a.stopPropagation()}).on("click.bs.dropdown.data-api",e,f.prototype.toggle).on("keydown.bs.dropdown.data-api",e+", [role=menu]",f.prototype.keydown)}(jQuery),+function(a){"use strict";var b=function(b,c){this.options=c,this.$element=a(b),this.$backdrop=this.isShown=null,this.options.remote&&this.$element.load(this.options.remote)};b.DEFAULTS={backdrop:!0,keyboard:!0,show:!0},b.prototype.toggle=function(a){return this[this.isShown?"hide":"show"](a)},b.prototype.show=function(b){var c=this,d=a.Event("show.bs.modal",{relatedTarget:b});this.$element.trigger(d),this.isShown||d.isDefaultPrevented()||(this.isShown=!0,this.escape(),this.$element.on("click.dismiss.modal",'[data-dismiss="modal"]',a.proxy(this.hide,this)),this.backdrop(function(){var d=a.support.transition&&c.$element.hasClass("fade");c.$element.parent().length||c.$element.appendTo(document.body),c.$element.show(),d&&c.$element[0].offsetWidth,c.$element.addClass("in").attr("aria-hidden",!1),c.enforceFocus();var e=a.Event("shown.bs.modal",{relatedTarget:b});d?c.$element.find(".modal-dialog").one(a.support.transition.end,function(){c.$element.focus().trigger(e)}).emulateTransitionEnd(300):c.$element.focus().trigger(e)}))},b.prototype.hide=function(b){b&&b.preventDefault(),b=a.Event("hide.bs.modal"),this.$element.trigger(b),this.isShown&&!b.isDefaultPrevented()&&(this.isShown=!1,this.escape(),a(document).off("focusin.bs.modal"),this.$element.removeClass("in").attr("aria-hidden",!0).off("click.dismiss.modal"),a.support.transition&&this.$element.hasClass("fade")?this.$element.one(a.support.transition.end,a.proxy(this.hideModal,this)).emulateTransitionEnd(300):this.hideModal())},b.prototype.enforceFocus=function(){a(document).off("focusin.bs.modal").on("focusin.bs.modal",a.proxy(function(a){this.$element[0]===a.target||this.$element.has(a.target).length||this.$element.focus()},this))},b.prototype.escape=function(){this.isShown&&this.options.keyboard?this.$element.on("keyup.dismiss.bs.modal",a.proxy(function(a){27==a.which&&this.hide()},this)):this.isShown||this.$element.off("keyup.dismiss.bs.modal")},b.prototype.hideModal=function(){var a=this;this.$element.hide(),this.backdrop(function(){a.removeBackdrop(),a.$element.trigger("hidden.bs.modal")})},b.prototype.removeBackdrop=function(){this.$backdrop&&this.$backdrop.remove(),this.$backdrop=null},b.prototype.backdrop=function(b){var c=this.$element.hasClass("fade")?"fade":"";if(this.isShown&&this.options.backdrop){var d=a.support.transition&&c;if(this.$backdrop=a('<div class="modal-backdrop '+c+'" />').appendTo(document.body),this.$element.on("click.dismiss.modal",a.proxy(function(a){a.target===a.currentTarget&&("static"==this.options.backdrop?this.$element[0].focus.call(this.$element[0]):this.hide.call(this))},this)),d&&this.$backdrop[0].offsetWidth,this.$backdrop.addClass("in"),!b)return;d?this.$backdrop.one(a.support.transition.end,b).emulateTransitionEnd(150):b()}else!this.isShown&&this.$backdrop?(this.$backdrop.removeClass("in"),a.support.transition&&this.$element.hasClass("fade")?this.$backdrop.one(a.support.transition.end,b).emulateTransitionEnd(150):b()):b&&b()};var c=a.fn.modal;a.fn.modal=function(c,d){return this.each(function(){var e=a(this),f=e.data("bs.modal"),g=a.extend({},b.DEFAULTS,e.data(),"object"==typeof c&&c);f||e.data("bs.modal",f=new b(this,g)),"string"==typeof c?f[c](d):g.show&&f.show(d)})},a.fn.modal.Constructor=b,a.fn.modal.noConflict=function(){return a.fn.modal=c,this},a(document).on("click.bs.modal.data-api",'[data-toggle="modal"]',function(b){var c=a(this),d=c.attr("href"),e=a(c.attr("data-target")||d&&d.replace(/.*(?=#[^\s]+$)/,"")),f=e.data("modal")?"toggle":a.extend({remote:!/#/.test(d)&&d},e.data(),c.data());b.preventDefault(),e.modal(f,this).one("hide",function(){c.is(":visible")&&c.focus()})}),a(document).on("show.bs.modal",".modal",function(){a(document.body).addClass("modal-open")}).on("hidden.bs.modal",".modal",function(){a(document.body).removeClass("modal-open")})}(jQuery),+function(a){"use strict";var b=function(a,b){this.type=this.options=this.enabled=this.timeout=this.hoverState=this.$element=null,this.init("tooltip",a,b)};b.DEFAULTS={animation:!0,placement:"top",selector:!1,template:'<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>',trigger:"hover focus",title:"",delay:0,html:!1,container:!1},b.prototype.init=function(b,c,d){this.enabled=!0,this.type=b,this.$element=a(c),this.options=this.getOptions(d);for(var e=this.options.trigger.split(" "),f=e.length;f--;){var g=e[f];if("click"==g)this.$element.on("click."+this.type,this.options.selector,a.proxy(this.toggle,this));else if("manual"!=g){var h="hover"==g?"mouseenter":"focus",i="hover"==g?"mouseleave":"blur";this.$element.on(h+"."+this.type,this.options.selector,a.proxy(this.enter,this)),this.$element.on(i+"."+this.type,this.options.selector,a.proxy(this.leave,this))}}this.options.selector?this._options=a.extend({},this.options,{trigger:"manual",selector:""}):this.fixTitle()},b.prototype.getDefaults=function(){return b.DEFAULTS},b.prototype.getOptions=function(b){return b=a.extend({},this.getDefaults(),this.$element.data(),b),b.delay&&"number"==typeof b.delay&&(b.delay={show:b.delay,hide:b.delay}),b},b.prototype.getDelegateOptions=function(){var b={},c=this.getDefaults();return this._options&&a.each(this._options,function(a,d){c[a]!=d&&(b[a]=d)}),b},b.prototype.enter=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type);return clearTimeout(c.timeout),c.hoverState="in",c.options.delay&&c.options.delay.show?(c.timeout=setTimeout(function(){"in"==c.hoverState&&c.show()},c.options.delay.show),void 0):c.show()},b.prototype.leave=function(b){var c=b instanceof this.constructor?b:a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type);return clearTimeout(c.timeout),c.hoverState="out",c.options.delay&&c.options.delay.hide?(c.timeout=setTimeout(function(){"out"==c.hoverState&&c.hide()},c.options.delay.hide),void 0):c.hide()},b.prototype.show=function(){var b=a.Event("show.bs."+this.type);if(this.hasContent()&&this.enabled){if(this.$element.trigger(b),b.isDefaultPrevented())return;var c=this.tip();this.setContent(),this.options.animation&&c.addClass("fade");var d="function"==typeof this.options.placement?this.options.placement.call(this,c[0],this.$element[0]):this.options.placement,e=/\s?auto?\s?/i,f=e.test(d);f&&(d=d.replace(e,"")||"top"),c.detach().css({top:0,left:0,display:"block"}).addClass(d),this.options.container?c.appendTo(this.options.container):c.insertAfter(this.$element);var g=this.getPosition(),h=c[0].offsetWidth,i=c[0].offsetHeight;if(f){var j=this.$element.parent(),k=d,l=document.documentElement.scrollTop||document.body.scrollTop,m="body"==this.options.container?window.innerWidth:j.outerWidth(),n="body"==this.options.container?window.innerHeight:j.outerHeight(),o="body"==this.options.container?0:j.offset().left;d="bottom"==d&&g.top+g.height+i-l>n?"top":"top"==d&&g.top-l-i<0?"bottom":"right"==d&&g.right+h>m?"left":"left"==d&&g.left-h<o?"right":d,c.removeClass(k).addClass(d)}var p=this.getCalculatedOffset(d,g,h,i);this.applyPlacement(p,d),this.$element.trigger("shown.bs."+this.type)}},b.prototype.applyPlacement=function(a,b){var c,d=this.tip(),e=d[0].offsetWidth,f=d[0].offsetHeight,g=parseInt(d.css("margin-top"),10),h=parseInt(d.css("margin-left"),10);isNaN(g)&&(g=0),isNaN(h)&&(h=0),a.top=a.top+g,a.left=a.left+h,d.offset(a).addClass("in");var i=d[0].offsetWidth,j=d[0].offsetHeight;if("top"==b&&j!=f&&(c=!0,a.top=a.top+f-j),/bottom|top/.test(b)){var k=0;a.left<0&&(k=-2*a.left,a.left=0,d.offset(a),i=d[0].offsetWidth,j=d[0].offsetHeight),this.replaceArrow(k-e+i,i,"left")}else this.replaceArrow(j-f,j,"top");c&&d.offset(a)},b.prototype.replaceArrow=function(a,b,c){this.arrow().css(c,a?50*(1-a/b)+"%":"")},b.prototype.setContent=function(){var a=this.tip(),b=this.getTitle();a.find(".tooltip-inner")[this.options.html?"html":"text"](b),a.removeClass("fade in top bottom left right")},b.prototype.hide=function(){function b(){"in"!=c.hoverState&&d.detach()}var c=this,d=this.tip(),e=a.Event("hide.bs."+this.type);return this.$element.trigger(e),e.isDefaultPrevented()?void 0:(d.removeClass("in"),a.support.transition&&this.$tip.hasClass("fade")?d.one(a.support.transition.end,b).emulateTransitionEnd(150):b(),this.$element.trigger("hidden.bs."+this.type),this)},b.prototype.fixTitle=function(){var a=this.$element;(a.attr("title")||"string"!=typeof a.attr("data-original-title"))&&a.attr("data-original-title",a.attr("title")||"").attr("title","")},b.prototype.hasContent=function(){return this.getTitle()},b.prototype.getPosition=function(){var b=this.$element[0];return a.extend({},"function"==typeof b.getBoundingClientRect?b.getBoundingClientRect():{width:b.offsetWidth,height:b.offsetHeight},this.$element.offset())},b.prototype.getCalculatedOffset=function(a,b,c,d){return"bottom"==a?{top:b.top+b.height,left:b.left+b.width/2-c/2}:"top"==a?{top:b.top-d,left:b.left+b.width/2-c/2}:"left"==a?{top:b.top+b.height/2-d/2,left:b.left-c}:{top:b.top+b.height/2-d/2,left:b.left+b.width}},b.prototype.getTitle=function(){var a,b=this.$element,c=this.options;return a=b.attr("data-original-title")||("function"==typeof c.title?c.title.call(b[0]):c.title)},b.prototype.tip=function(){return this.$tip=this.$tip||a(this.options.template)},b.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".tooltip-arrow")},b.prototype.validate=function(){this.$element[0].parentNode||(this.hide(),this.$element=null,this.options=null)},b.prototype.enable=function(){this.enabled=!0},b.prototype.disable=function(){this.enabled=!1},b.prototype.toggleEnabled=function(){this.enabled=!this.enabled},b.prototype.toggle=function(b){var c=b?a(b.currentTarget)[this.type](this.getDelegateOptions()).data("bs."+this.type):this;c.tip().hasClass("in")?c.leave(c):c.enter(c)},b.prototype.destroy=function(){this.hide().$element.off("."+this.type).removeData("bs."+this.type)};var c=a.fn.tooltip;a.fn.tooltip=function(c){return this.each(function(){var d=a(this),e=d.data("bs.tooltip"),f="object"==typeof c&&c;e||d.data("bs.tooltip",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.tooltip.Constructor=b,a.fn.tooltip.noConflict=function(){return a.fn.tooltip=c,this}}(jQuery),+function(a){"use strict";var b=function(a,b){this.init("popover",a,b)};if(!a.fn.tooltip)throw new Error("Popover requires tooltip.js");b.DEFAULTS=a.extend({},a.fn.tooltip.Constructor.DEFAULTS,{placement:"right",trigger:"click",content:"",template:'<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'}),b.prototype=a.extend({},a.fn.tooltip.Constructor.prototype),b.prototype.constructor=b,b.prototype.getDefaults=function(){return b.DEFAULTS},b.prototype.setContent=function(){var a=this.tip(),b=this.getTitle(),c=this.getContent();a.find(".popover-title")[this.options.html?"html":"text"](b),a.find(".popover-content")[this.options.html?"html":"text"](c),a.removeClass("fade top bottom left right in"),a.find(".popover-title").html()||a.find(".popover-title").hide()},b.prototype.hasContent=function(){return this.getTitle()||this.getContent()},b.prototype.getContent=function(){var a=this.$element,b=this.options;return a.attr("data-content")||("function"==typeof b.content?b.content.call(a[0]):b.content)},b.prototype.arrow=function(){return this.$arrow=this.$arrow||this.tip().find(".arrow")},b.prototype.tip=function(){return this.$tip||(this.$tip=a(this.options.template)),this.$tip};var c=a.fn.popover;a.fn.popover=function(c){return this.each(function(){var d=a(this),e=d.data("bs.popover"),f="object"==typeof c&&c;e||d.data("bs.popover",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.popover.Constructor=b,a.fn.popover.noConflict=function(){return a.fn.popover=c,this}}(jQuery),+function(a){"use strict";function b(c,d){var e,f=a.proxy(this.process,this);this.$element=a(c).is("body")?a(window):a(c),this.$body=a("body"),this.$scrollElement=this.$element.on("scroll.bs.scroll-spy.data-api",f),this.options=a.extend({},b.DEFAULTS,d),this.selector=(this.options.target||(e=a(c).attr("href"))&&e.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.offsets=a([]),this.targets=a([]),this.activeTarget=null,this.refresh(),this.process()}b.DEFAULTS={offset:10},b.prototype.refresh=function(){var b=this.$element[0]==window?"offset":"position";this.offsets=a([]),this.targets=a([]);var c=this;this.$body.find(this.selector).map(function(){var d=a(this),e=d.data("target")||d.attr("href"),f=/^#\w/.test(e)&&a(e);return f&&f.length&&[[f[b]().top+(!a.isWindow(c.$scrollElement.get(0))&&c.$scrollElement.scrollTop()),e]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){c.offsets.push(this[0]),c.targets.push(this[1])})},b.prototype.process=function(){var a,b=this.$scrollElement.scrollTop()+this.options.offset,c=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,d=c-this.$scrollElement.height(),e=this.offsets,f=this.targets,g=this.activeTarget;if(b>=d)return g!=(a=f.last()[0])&&this.activate(a);for(a=e.length;a--;)g!=f[a]&&b>=e[a]&&(!e[a+1]||b<=e[a+1])&&this.activate(f[a])},b.prototype.activate=function(b){this.activeTarget=b,a(this.selector).parents(".active").removeClass("active");var c=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',d=a(c).parents("li").addClass("active");d.parent(".dropdown-menu").length&&(d=d.closest("li.dropdown").addClass("active")),d.trigger("activate.bs.scrollspy")};var c=a.fn.scrollspy;a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("bs.scrollspy"),f="object"==typeof c&&c;e||d.data("bs.scrollspy",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.noConflict=function(){return a.fn.scrollspy=c,this},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(jQuery),+function(a){"use strict";var b=function(b){this.element=a(b)};b.prototype.show=function(){var b=this.element,c=b.closest("ul:not(.dropdown-menu)"),d=b.data("target");if(d||(d=b.attr("href"),d=d&&d.replace(/.*(?=#[^\s]*$)/,"")),!b.parent("li").hasClass("active")){var e=c.find(".active:last a")[0],f=a.Event("show.bs.tab",{relatedTarget:e});if(b.trigger(f),!f.isDefaultPrevented()){var g=a(d);this.activate(b.parent("li"),c),this.activate(g,g.parent(),function(){b.trigger({type:"shown.bs.tab",relatedTarget:e})})}}},b.prototype.activate=function(b,c,d){function e(){f.removeClass("active").find("> .dropdown-menu > .active").removeClass("active"),b.addClass("active"),g?(b[0].offsetWidth,b.addClass("in")):b.removeClass("fade"),b.parent(".dropdown-menu")&&b.closest("li.dropdown").addClass("active"),d&&d()}var f=c.find("> .active"),g=d&&a.support.transition&&f.hasClass("fade");g?f.one(a.support.transition.end,e).emulateTransitionEnd(150):e(),f.removeClass("in")};var c=a.fn.tab;a.fn.tab=function(c){return this.each(function(){var d=a(this),e=d.data("bs.tab");e||d.data("bs.tab",e=new b(this)),"string"==typeof c&&e[c]()})},a.fn.tab.Constructor=b,a.fn.tab.noConflict=function(){return a.fn.tab=c,this},a(document).on("click.bs.tab.data-api",'[data-toggle="tab"], [data-toggle="pill"]',function(b){b.preventDefault(),a(this).tab("show")})}(jQuery),+function(a){"use strict";var b=function(c,d){this.options=a.extend({},b.DEFAULTS,d),this.$window=a(window).on("scroll.bs.affix.data-api",a.proxy(this.checkPosition,this)).on("click.bs.affix.data-api",a.proxy(this.checkPositionWithEventLoop,this)),this.$element=a(c),this.affixed=this.unpin=null,this.checkPosition()};b.RESET="affix affix-top affix-bottom",b.DEFAULTS={offset:0},b.prototype.checkPositionWithEventLoop=function(){setTimeout(a.proxy(this.checkPosition,this),1)},b.prototype.checkPosition=function(){if(this.$element.is(":visible")){var c=a(document).height(),d=this.$window.scrollTop(),e=this.$element.offset(),f=this.options.offset,g=f.top,h=f.bottom;"object"!=typeof f&&(h=g=f),"function"==typeof g&&(g=f.top()),"function"==typeof h&&(h=f.bottom());var i=null!=this.unpin&&d+this.unpin<=e.top?!1:null!=h&&e.top+this.$element.height()>=c-h?"bottom":null!=g&&g>=d?"top":!1;this.affixed!==i&&(this.unpin&&this.$element.css("top",""),this.affixed=i,this.unpin="bottom"==i?e.top-d:null,this.$element.removeClass(b.RESET).addClass("affix"+(i?"-"+i:"")),"bottom"==i&&this.$element.offset({top:document.body.offsetHeight-h-this.$element.height()}))}};var c=a.fn.affix;a.fn.affix=function(c){return this.each(function(){var d=a(this),e=d.data("bs.affix"),f="object"==typeof c&&c;e||d.data("bs.affix",e=new b(this,f)),"string"==typeof c&&e[c]()})},a.fn.affix.Constructor=b,a.fn.affix.noConflict=function(){return a.fn.affix=c,this},a(window).on("load",function(){a('[data-spy="affix"]').each(function(){var b=a(this),c=b.data();c.offset=c.offset||{},c.offsetBottom&&(c.offset.bottom=c.offsetBottom),c.offsetTop&&(c.offset.top=c.offsetTop),b.affix(c)})})}(jQuery);

data/public/javascripts/knitkit/confirm-bootstrap.js

@@ -0,0 +1,110 @@
+/* ===================================================
+ * confirmModal by Maxime AILLOUD
+ * https://github.com/mailloud/confirm-bootstrap
+ * ===================================================
+ *            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENCE
+ *                    Version 2, December 2004
+ *
+ * Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+ *
+ * Everyone is permitted to copy and distribute verbatim or modified
+ * copies of this licence document, and changing it is allowed as long
+ * as the name is changed.
+ *
+ *            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENCE
+ *   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+ *
+ *  0. You just DO WHAT THE FUCK YOU WANT TO.
+ * ========================================================== */
+
+
+ (function($) {
+    $.fn.confirmModal = function(opts)
+    {
+        var body = $('body');
+        var defaultOptions    = {
+            confirmTitle     : 'Please confirm',
+            confirmMessage   : 'Are you sure you want to perform this action ?',
+            confirmOk        : 'Yes',
+            confirmCancel    : 'Cancel',
+            confirmDirection : 'rtl',
+            confirmStyle     : 'primary',
+            confirmCallback  : defaultCallback
+        };
+        var options = $.extend(defaultOptions, opts);
+        var time    = Date.now();
+
+        var headModalTemplate =
+            '<div class="modal fade" id="#modalId#" tabindex="-1" role="dialog" aria-labelledby="#AriaLabel#" aria-hidden="true">' +
+                '<div class="modal-dialog">' +
+                    '<div class="modal-content">' +
+                        '<div class="modal-header">' +
+                            '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
+                            '<h3>#Heading#</h3>' +
+                        '</div>' +
+                        '<div class="modal-body">' +
+                            '<p>#Body#</p>' +
+                        '</div>' +
+                        '<div class="modal-footer">' +
+                        '#buttonTemplate#' +
+                        '</div>' +
+                    '</div>' +
+                '</div>' +
+            '</div>'
+            ;
+
+        return this.each(function(index)
+        {
+            var confirmLink = $(this);
+            var targetData  = confirmLink.data();
+
+            var currentOptions = $.extend(options, targetData);
+
+            var modalId = "confirmModal" + parseInt(time + index);
+            var modalTemplate = headModalTemplate;
+            var buttonTemplate =
+                '<button class="btn btn-default" data-dismiss="modal">#Cancel#</button>' +
+                '<button class="btn btn-#Style#" data-dismiss="ok">#Ok#</button>'
+            ;
+
+            if(options.confirmDirection == 'ltr')
+            {
+                buttonTemplate =
+                    '<button class="btn btn-#Style#" data-dismiss="ok">#Ok#</button>' +
+                    '<button class="btn btn-default" data-dismiss="modal">#Cancel#</button>'
+                ;
+            }
+
+            modalTemplate = modalTemplate.
+                replace('#buttonTemplate#', buttonTemplate).
+                replace('#modalId#', modalId).
+                replace('#AriaLabel#', options.confirmTitle).
+                replace('#Heading#', options.confirmTitle).
+                replace('#Body#', options.confirmMessage).
+                replace('#Ok#', options.confirmOk).
+                replace('#Cancel#', options.confirmCancel).
+                replace('#Style#', options.confirmStyle)
+            ;
+
+            body.append(modalTemplate);
+
+            var confirmModal = $('#' + modalId);
+
+            confirmLink.on('click', function(modalEvent)
+            {
+                modalEvent.preventDefault();
+                confirmModal.modal('show');
+
+                $('button[data-dismiss="ok"]', confirmModal).on('click', function(event) {
+                    confirmModal.modal('hide');
+                    options.confirmCallback(confirmLink, targetData);
+                });
+            });
+        });
+
+        function defaultCallback(target)
+        {
+            window.location = $(target).attr('href');
+        }
+    };
+})(jQuery);

data/public/javascripts/knitkit/inline_editing.js

@@ -1,15 +1,24 @@
+Compass.ErpApp.Utility.createNamespace("Knitkit");
+
 Knitkit.InlineEditing = {
-    contentDiv:null,
-    websiteId:null,
-    contentId:null,
+    contentDiv: null,
+    websiteId: null,
+    contentId: null,
 
-    closeEditor:function (editor) {
+    closeEditor: function (editor) {
         editor.destroy();
+
+        var body = jQuery("body");
+
         jQuery('#editableContentContainer').remove();
         jQuery('#editableContentOverlay').remove();
+        body.removeClass('modal-open');
+        body.removeClass('inline-editing');
     },
 
-    saved:function (editor, result, status, xhr) {
+    saved: function (editor, result, status, xhr) {
+        jQuery('#editableContentOverlay').css('z-index', '1001');
+
         if (result.success === true) {
             this.closeEditor(editor);
         }
@@ -18,35 +27,49 @@ Knitkit.InlineEditing = {
         }
     },
 
-    error:function (xhr, status, error) {
+    error: function (xhr, status, error) {
         jQuery('#inlineEditSaveResult').html(" Could not update.  Please try again.");
     },
 
-    closeEditorClick:function () {
+    closeEditorClick: function () {
         //make sure modal is not already showing
-        if ($("#warning-modal").length === 0) {
+        if (jQuery("#warning-modal").length === 0) {
             var editor = CKEDITOR.instances['inlineEditTextarea'];
             if (editor.checkDirty()) {
-                jQuery('#editableContentOverlay').css('z-index','1003');
-
-                var warningModal = jQuery("<div id='warning-modal'></div>");
-                warningModal.append('<span>You have unsaved changes. Are you sure you want to exit?</span><br/><br/>');
+                jQuery('#editableContentOverlay').css('z-index', '1003');
+
+                var warningModal = jQuery('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>'),
+                    modalDialog = jQuery('<div class="modal-dialog"></div>'),
+                    modalContent = jQuery('<div class="modal-content"></div>'),
+                    modalHeader = jQuery('<div class="modal-header"><h4 class="modal-title" id="myModalLabel">Please Confirm</h4></div>'),
+                    modalBody = jQuery('<div class="modal-body">You have unsaved changes. Are you sure you want to exit?</div>'),
+                    footer = jQuery('<div class="modal-footer"></div>'),
+                    yesBtn = jQuery('<button type="button" class="btn btn-default" data-dismiss="modal">Yes</button>'),
+                    noBtn = jQuery('<button type="button" class="btn btn-primary" data-dismiss="modal">No</button>');
+
+                footer.append(yesBtn);
+                footer.append(noBtn);
+                modalContent.append(modalHeader);
+                modalContent.append(modalBody);
+                modalContent.append(footer);
+                modalDialog.append(modalContent);
+                warningModal.append(modalDialog);
 
-                var noBtn = jQuery('<input class="warning-btn" type="button" value="No" />');
                 noBtn.bind('click', function () {
+                    warningModal.modal('hide');
                     warningModal.remove();
-                    jQuery('#editableContentOverlay').css('z-index','1001');
+                    jQuery('#editableContentOverlay').css('z-index', '1001');
                 });
 
-                var yesBtn = jQuery('<input class="warning-btn" type="button" value="Yes" />');
                 yesBtn.bind('click', function () {
                     Knitkit.InlineEditing.closeEditor(editor);
+                    warningModal.modal('hide');
                     warningModal.remove();
                 });
 
-                warningModal.append(noBtn);
-                warningModal.append(yesBtn);
                 jQuery("body").append(warningModal);
+
+                warningModal.modal({backdrop: false});
             }
             else {
                 Knitkit.InlineEditing.closeEditor(editor);
@@ -55,82 +78,82 @@ Knitkit.InlineEditing = {
         return false;
     },
 
-    setup:function (websiteId) {
+    setup: function (websiteId) {
+        var content = jQuery('div.knitkit_content'),
+            body = jQuery("body");
+
         this.websiteId = websiteId;
 
-        jQuery('div.knitkit_content').bind('mouseenter', function () {
+        content.bind('mouseenter', function () {
             var div = jQuery(this);
             div.addClass('knitkit-inlineedit-editable');
         });
 
-        jQuery('div.knitkit_content').bind('mouseleave', function () {
+        content.bind('mouseleave', function () {
             var div = jQuery(this);
             div.removeClass('knitkit-inlineedit-editable');
         });
 
-        jQuery('div.knitkit_content').bind('click', function () {
+        content.bind('click', function () {
             var self = Knitkit.InlineEditing;
             var div = jQuery(this);
             self.contentId = div.attr('contentid');
             self.lastUpdate = div.attr('lastupdate');
             var data = div.html();
 
+            var dialogHeader = jQuery("<div class='header'></div>");
+            var closeLink = jQuery("<a class='inline-edit-close'><img width='24px' height='24px' src='/images/inline_edit/close.png' /></a><br />");
             var textarea = jQuery('<textarea name="inline-edit-textarea" id="inlineEditTextarea" ></textarea>');
-            var closeLink = jQuery("<a class='inline-edit-close'><img src='images/knitkit/close.png' /></a>");
             var messageSpan = jQuery("<span class='inline-edit-message' id='inlineEditMessage'>Last Update: <span id='inlineEditLastUpdate'>" + self.lastUpdate + "</span><span id='inlineEditSaveResult'></span></span>");
 
-            var editableContentContainer = jQuery("<div id='editableContentContainer' class='modal-container'></div>");
+            var editableContentContainer = jQuery("<div id='editableContentContainer' style='font-size:12px;' class='modal-container'></div>");
             var ckeditorWrapper = jQuery("<div class='ckeditor_wrapper'></div>");
             var actionResultDiv = jQuery("<div class='editable-content-actionresult'></div>");
 
+            dialogHeader.append(closeLink);
+            editableContentContainer.append(dialogHeader);
             editableContentContainer.append(ckeditorWrapper);
             ckeditorWrapper.append(textarea);
+            textarea.val(data);
             editableContentContainer.append(actionResultDiv);
-            actionResultDiv.append(closeLink);
             actionResultDiv.append(messageSpan);
 
             var overlay = jQuery("<div id='editableContentOverlay' class='modal-overlay'></div>");
 
-            jQuery("body").append(editableContentContainer);
-            jQuery("body").append(overlay);
+            body.append(editableContentContainer);
+            body.append(overlay);
+
+            body.addClass('inline-editing');
 
             closeLink.bind('click', self.closeEditorClick);
 
             CKEDITOR.replace('inline-edit-textarea',
                 {
-                    height:320,
-                    enterMode:CKEDITOR.ENTER_BR,
-                    extraPlugins:'inlineeditsave,jwplayer',
-                    toolbar:[
-                        { name:'document', items:[ 'Source', '-', 'InlineEditSave', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates' ] },
-                        { name:'clipboard', items:[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
-                        { name:'editing', items:[ 'Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt' ] },
-                        { name:'forms', items:[ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
-                            'HiddenField' ] },
+                    height: 300,
+                    enterMode: CKEDITOR.ENTER_BR,
+                    allowedContent: true,
+                    extraPlugins: 'inlineeditsave,codemirror',
+                    toolbar: [
+                        { name: 'document', items: [ 'Source', '-', 'InlineEditSave' ] },
+                        { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline' ] },
+                        { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent',
+                            '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ] },
+                        { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
                         '/',
-                        { name:'basicstyles', items:[ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
-                        { name:'paragraph', items:[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv',
-                            '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
-                        { name:'links', items:[ 'Link', 'Unlink', 'Anchor' ] },
-                        { name:'insert', items:[ 'Image', 'Flash', 'jwplayer', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
-                        '/',
-                        { name:'styles', items:[ 'Styles', 'Format', 'Font', 'FontSize' ] },
-                        { name:'colors', items:[ 'TextColor', 'BGColor' ] },
-                        { name:'tools', items:[ 'Maximize', 'ShowBlocks', '-', 'About' ] }
+                        { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
+                        { name: 'colors', items: [ 'TextColor', 'BGColor' ] }
                     ],
-                    on:{
-                        instanceReady:function (ev) {
+                    on: {
+                        instanceReady: function (ev) {
                             Knitkit.InlineEditing.contentDiv = div;
-                            this.setData(data);
                             this.focus();
                         },
-                        dataReady:function (ev) {
+                        dataReady: function (ev) {
                             this.resetDirty();
                         }
                     }
-
                 });
 
         });
     }
-}
+};

data/public/javascripts/knitkit/jquery.maskedinput.min.js

@@ -0,0 +1,7 @@
+/*
+	Masked Input plugin for jQuery
+	Copyright (c) 2007-2013 Josh Bush (digitalbush.com)
+	Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
+	Version: 1.3.1
+*/
+(function(e){function t(){var e=document.createElement("input"),t="onpaste";return e.setAttribute(t,""),"function"==typeof e[t]?"paste":"input"}var n,a=t()+".mask",r=navigator.userAgent,i=/iphone/i.test(r),o=/android/i.test(r);e.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},dataName:"rawMaskFn",placeholder:"_"},e.fn.extend({caret:function(e,t){var n;if(0!==this.length&&!this.is(":hidden"))return"number"==typeof e?(t="number"==typeof t?t:e,this.each(function(){this.setSelectionRange?this.setSelectionRange(e,t):this.createTextRange&&(n=this.createTextRange(),n.collapse(!0),n.moveEnd("character",t),n.moveStart("character",e),n.select())})):(this[0].setSelectionRange?(e=this[0].selectionStart,t=this[0].selectionEnd):document.selection&&document.selection.createRange&&(n=document.selection.createRange(),e=0-n.duplicate().moveStart("character",-1e5),t=e+n.text.length),{begin:e,end:t})},unmask:function(){return this.trigger("unmask")},mask:function(t,r){var c,l,s,u,f,h;return!t&&this.length>0?(c=e(this[0]),c.data(e.mask.dataName)()):(r=e.extend({placeholder:e.mask.placeholder,completed:null},r),l=e.mask.definitions,s=[],u=h=t.length,f=null,e.each(t.split(""),function(e,t){"?"==t?(h--,u=e):l[t]?(s.push(RegExp(l[t])),null===f&&(f=s.length-1)):s.push(null)}),this.trigger("unmask").each(function(){function c(e){for(;h>++e&&!s[e];);return e}function d(e){for(;--e>=0&&!s[e];);return e}function m(e,t){var n,a;if(!(0>e)){for(n=e,a=c(t);h>n;n++)if(s[n]){if(!(h>a&&s[n].test(R[a])))break;R[n]=R[a],R[a]=r.placeholder,a=c(a)}b(),x.caret(Math.max(f,e))}}function p(e){var t,n,a,i;for(t=e,n=r.placeholder;h>t;t++)if(s[t]){if(a=c(t),i=R[t],R[t]=n,!(h>a&&s[a].test(i)))break;n=i}}function g(e){var t,n,a,r=e.which;8===r||46===r||i&&127===r?(t=x.caret(),n=t.begin,a=t.end,0===a-n&&(n=46!==r?d(n):a=c(n-1),a=46===r?c(a):a),k(n,a),m(n,a-1),e.preventDefault()):27==r&&(x.val(S),x.caret(0,y()),e.preventDefault())}function v(t){var n,a,i,l=t.which,u=x.caret();t.ctrlKey||t.altKey||t.metaKey||32>l||l&&(0!==u.end-u.begin&&(k(u.begin,u.end),m(u.begin,u.end-1)),n=c(u.begin-1),h>n&&(a=String.fromCharCode(l),s[n].test(a)&&(p(n),R[n]=a,b(),i=c(n),o?setTimeout(e.proxy(e.fn.caret,x,i),0):x.caret(i),r.completed&&i>=h&&r.completed.call(x))),t.preventDefault())}function k(e,t){var n;for(n=e;t>n&&h>n;n++)s[n]&&(R[n]=r.placeholder)}function b(){x.val(R.join(""))}function y(e){var t,n,a=x.val(),i=-1;for(t=0,pos=0;h>t;t++)if(s[t]){for(R[t]=r.placeholder;pos++<a.length;)if(n=a.charAt(pos-1),s[t].test(n)){R[t]=n,i=t;break}if(pos>a.length)break}else R[t]===a.charAt(pos)&&t!==u&&(pos++,i=t);return e?b():u>i+1?(x.val(""),k(0,h)):(b(),x.val(x.val().substring(0,i+1))),u?t:f}var x=e(this),R=e.map(t.split(""),function(e){return"?"!=e?l[e]?r.placeholder:e:void 0}),S=x.val();x.data(e.mask.dataName,function(){return e.map(R,function(e,t){return s[t]&&e!=r.placeholder?e:null}).join("")}),x.attr("readonly")||x.one("unmask",function(){x.unbind(".mask").removeData(e.mask.dataName)}).bind("focus.mask",function(){clearTimeout(n);var e;S=x.val(),e=y(),n=setTimeout(function(){b(),e==t.length?x.caret(0,e):x.caret(e)},10)}).bind("blur.mask",function(){y(),x.val()!=S&&x.change()}).bind("keydown.mask",g).bind("keypress.mask",v).bind(a,function(){setTimeout(function(){var e=y(!0);x.caret(e),r.completed&&e==x.val().length&&r.completed.call(x)},0)}),y()}))}})})(jQuery);

data/public/javascripts/knitkit/mobile/app/view/Main.js

@@ -0,0 +1,108 @@
+Ext.define("KnitkitMobile.view.Main", {
+    extend: 'Ext.ux.slidenavigation.View',
+    itemId: 'slideContainer',
+
+    requires: [
+        'Ext.Container',
+        'Ext.MessageBox',
+        'Ext.Panel',
+        'Ext.Toolbar',
+        'Ext.event.publisher.Dom'
+    ],
+
+    config: {
+        style: 'font-size:14px;',
+
+        fullscreen: true,
+
+        /**
+         *  Any component within the container with an 'x-toolbar' class
+         *  will be draggable.  To disable draggin all together, set this
+         *  to false.
+         */
+        slideSelector: 'x-container',
+
+        /**
+         *  Time in milliseconds to animate the closing of the container
+         *  after an item has been clicked on in the list.
+         */
+        selectSlideDuration: 200,
+
+        /**
+         *  Enable content masking when container is open.
+         *
+         *  @since 0.2.0
+         */
+        itemMask: true,
+
+        /**
+         *  Define the default slide button config.  Any item that has
+         *  a `slideButton` value that is either `true` or a button config
+         *  will use these values at the default.
+         */
+        slideButtonDefaults: {
+            selector: 'toolbar'
+        },
+
+        /**
+         *  This allows us to configure how the actual list container
+         *  looks.  Here we've added a custom search field and have
+         *  modified the width.
+         */
+        list: {
+            maxDrag: 400,
+            //width: (Ext.os.is.iOS ? 300 : 250),
+            items: [
+                {
+                    xtype: 'toolbar',
+                    docked: 'top',
+                    ui: 'light',
+                    title: {
+                        title: 'Menu',
+                        centered: true,
+                        width: 200,
+                        left: 0
+                    }
+                }
+            ]
+
+        },
+
+        /**
+         *  Example of how to re-order the groups.
+         */
+        /*groups: {
+            'Pages': 1,
+            'Account': 2
+        },*/
+
+        /**
+         *  These are the default values to apply to the items within the
+         *  container.
+         */
+        defaults: {
+            style: 'background: #fff',
+            xtype: 'container'
+        },
+
+        items: [
+            {
+                title: 'Intro to Paradine',
+                slideButton: true,
+                items: [
+                    {
+                        xtype: 'toolbar',
+                        title: 'Intro to Paradine',
+                        docked: 'top'
+                    },
+                    {
+                        xtype: 'panel',
+                        scrollable: true,
+                        bodyPadding: '5px',
+                        html: 'test'
+                    }
+                ]
+            }
+        ]
+    }
+});

data/public/javascripts/knitkit/mobile/ux/slidenavigation/View.js

@@ -0,0 +1,734 @@
+/**
+ *  {@link Ext.ux.slidenavigation.View} is a subclass of {@link Ext.Container}
+ *  that provides a sliding main view with an underlying navigation list.  The
+ *  concept was inspired by Facebook's mobile app.
+ *
+ *  @version 0.2.0
+ *  @author Weston Nielson <wnielson@github>
+ */
+Ext.define('Ext.ux.slidenavigation.View', {
+    extend: 'Ext.Container',
+
+    requires: [
+        'Ext.Button',
+        'Ext.Container',
+        'Ext.Function',
+        'Ext.Toolbar',
+        'Ext.data.Model',
+        'Ext.data.ModelManager',
+        'Ext.data.Store',
+        'Ext.dataview.List'
+    ],
+
+    xtype: 'slidenavigationview',
+
+    /**
+     * @event close
+     * @preventable moveContainer
+     * Fires whenever the container is closed
+     * @param {Ext.ux.slidenavigation.View} this The navigation View instance
+     * @param {Number} position The x-coordinate to which the container will be moved to
+     * @param {Number} duration The duration of the slide event
+     */
+
+    /**
+     * @event open
+     * @preventable moveContainer
+     * Fires whenever the container is opened
+     * @param {Ext.ux.slidenavigation.View} this The navigation View instance
+     * @param {Number} position The x-coordinate to which the container will be moved to
+     * @param {Number} duration The duration of the slide event
+     */
+
+    /**
+     * @event select
+     * @preventable setContainerItem
+     * Fires whenever an item in the menu is selected
+     * @param {Ext.ux.slidenavigation.View} this The navigation View instance
+     * @param {Ext.Component} item The selected item
+     * @param {Integer} index The index of the selected item
+     */
+
+    /**
+     * @event slideend
+     * Fires whenever the user has finished sliding the container.  This is fired once the
+     * animation is complete.
+     * @param {Ext.ux.slidenavigation.View} this The navigation View instance
+     */
+
+    /**
+     * @event slidestart
+     * Fires whenever the user has started sliding the container.  This is fired once the
+     * animation is complete.
+     * @param {Ext.ux.slidenavigation.View} this The navigation View instance
+     */
+
+    /**
+     * @event opened
+     * Fires after the container is fully opened.
+     * @param {Ext.ux.slidenavigation.View} this The navigation View instance
+     */
+
+    /**
+     * @event closed
+     * Fires after the container is fully closed.
+     * @param {Ext.ux.slidenavigation.View} this The navigation View instance
+     */
+
+    config: {
+        /**
+         * @cfg {Object} list Configuration for the navigation list
+         */
+        list: {
+            width: 250,
+            maxDrag: null,
+            itemTpl: '{title}',
+            grouped: true,
+            items: [
+                {
+                    xtype: 'toolbar',
+                    docked: 'top',
+                    ui: 'light'
+                }
+            ]
+        },
+
+        /**
+         * @cfg {Object} container Configuration for the container
+         */
+        container: {},
+
+        /**
+         * @cfg {Object/Boolean} itemMask Configuration for the mask used to mask
+         * items when the container is opened.  Set to false to disable masking of
+         * items.
+         */
+        itemMask: false,
+
+        /**
+         * @cfg {Array} items An array of items to put into the navigation list.
+         * The items can either be Ext components or special objects with a "handler"
+         * key, which should be a function to execute when selected.  Additionally, you
+         * can define the order of the items by defining an 'order' parameter.
+         */
+        items: [],
+
+        /**
+         * @cfg {Object} groups Mapping of group name to order.  For example,
+         * say you have defined two groups; "Group 1" and "Group 2".  By default
+         * these will be presented in the list in that order, since
+         * 'Group 1' > 'Group 2'.  This option allows you to change the ordering,
+         * like so:
+         *
+         *  groups: {
+         *    'Group 1': 2
+         *    'Group 2': 1
+         *  }
+         *
+         *  You should use integers, starting with 1, as the ordering value.
+         *  By default groups are ordered by their name.
+         */
+        groups: {},
+
+        /**
+         * @cfg {Object} defaults An object of default values to apply to any Ext
+         * components created from those listed in ``items``.
+         */
+        defaults: {
+            layout: 'card'
+        },
+
+        /**
+         * @cfg {String} slideSelector Class selector of object (or parent)
+         * of which dragging should be allowed.  Defaults to the entire container.
+         * For example, this could be set to something like 'x-toolbar' to restrict
+         * dragging only to a toolbar.
+         */
+        slideSelector: '',
+
+        /**
+         * @cfg {Integer} slideDuration Number of miliseconds to animate the sliding
+         * of the container when "flicked".  By default the animation is disable on
+         * Android.
+         */
+        slideDuration: Ext.os.is('Android') ? 0 : 200,
+
+        /**
+         * @cfg {Integer} selectSlideDuration Number of miliseconds to animate the sliding
+         * of the container when list item is selected (if closeOnSelect = true). The default
+         * value here of 300 gives a much nicer feel.  By default the animation is disable on
+         * Android.
+         */
+        selectSlideDuration: Ext.os.is('Android') ? 0 : 300,
+
+        /**
+         * @cfg {Boolean} closeOnSelect Whether or not to automatically close the container
+         * when an item in the list is selected.  Default is true.
+         */
+        closeOnSelect: true,
+
+        /**
+         * @cfg {String} shadowStyle CSS to use for styling the shadow when the container is
+         * open.  This should be a valid CSS 'box-shadow' argument.  Set to false to disable
+         * it.
+         */
+        shadowStyle: '0 0 4px 1px #999'
+    },
+
+    initConfig: function () {
+        var me = this;
+
+        me._indexCount = 0;
+
+        // Create the store.
+        me.store = Ext.create('Ext.data.Store', {
+            model: me.getModel(),
+            sorters: 'order',
+            grouper: {
+                property: 'group',
+                sortProperty: 'groupOrder'
+            }
+        });
+
+        // Add the items into the list.
+        me.addItems(me.config.items || []);
+        delete me.config.items;
+
+        me.callParent(arguments);
+
+        /**
+         *  @private
+         *
+         *  This stores the instances of the components created.
+         *  TODO: Support 'autoDestroy'.
+         */
+        me._cache = {};
+
+
+        // Default config values used for creating a slideButton.
+        me._slideButtonConfig = {
+            xtype: 'button',
+            iconMask: true,
+            iconCls: 'list',
+            name: 'slidebutton',
+            listeners: {
+                release: me.toggleContainer,
+                tap: function (button, e) {
+                    // Need this to stop auto-selecting any component
+                    // hidden beneath the container.
+                    e.preventDefault();
+                },
+                scope: me
+            }
+
+            /**
+             *  To add the button into a toolbar, you can add the following
+             *  to any item in your navigation list.
+             */
+            //selector: ['toolbar']
+        };
+
+        /**
+         *  Default config for masked items.
+         */
+        me.itemMaskDefaults = {
+            zIndex:1
+        };
+    },
+
+    initialize: function () {
+        this.__init = false;
+
+        this.callParent();
+
+        this.addCls('x-slidenavigation');
+
+        this.list = this.createNavigationList();
+        this.container = this.createContainer();
+
+        this.add([
+            this.list,
+            this.container
+        ]);
+
+        this.createContainerCSS();
+
+        // TODO: Make this optional, perhaps by defining
+        // "selected: true" in the items list
+        this.list.select(0);
+
+        this.__init = true;
+    },
+
+    /**
+     *  @private
+     *
+     *  Adds an array of items (or a single item) into the list.
+     */
+    addItems: function (items) {
+        var me = this,
+            items = Ext.isArray(items) ? items : [items],
+            groups = me.config.groups;
+
+        Ext.each(items, function (item, index) {
+            if (!Ext.isDefined(item.index)) {
+                item.index = me._indexCount;
+                me._indexCount++;
+            }
+            me.store.add(item);
+        });
+    },
+
+    /**
+     *  @private
+     *
+     *  Construct style element for container shadow and insert into the DOM.
+     */
+    createContainerCSS: function () {
+        var shadowStyle = this.getShadowStyle(),
+            id = this.getId();
+
+        if (shadowStyle) {
+            if (!document.getElementById(id)) {
+                style = document.createElement('style');
+                style.type = 'text/css';
+                style.id = id;
+                style.innerHTML = '.x-slidenavigation-container.x-dragging, ' +
+                    '.x-slidenavigation-container.open { ' +
+                    'box-shadow: ' + shadowStyle + ';' +
+                    '-webkit-box-shadow:' + shadowStyle + ';';
+                document.getElementsByTagName('head')[0].appendChild(style);
+            }
+        }
+    },
+
+    /**
+     *  @private
+     *
+     *  Creates a button that can toggle the navigation menu.  For an example
+     *  config, see ``slideButtonDefaults``.
+     */
+    createSlideButton: function (el, config) {
+        var me = this,
+            config = Ext.merge(me.getSlideButtonDefaults(),
+                Ext.isObject(config) ? config : {}),
+            parent = el.down(config.selector);
+
+        if (parent) {
+            return parent.insert(0, Ext.merge(me._slideButtonConfig, config));
+        }
+
+        return false;
+    },
+
+    /**
+     *  @private
+     *
+     *  Gets the configuration for masking items.  If masking items is disabled
+     *  this returns false.
+     */
+    getMask: function () {
+        var mask = this.getItemMask();
+        if (mask != false) {
+            if (Ext.isBoolean(mask)) {
+                mask = this.itemMaskDefaults;
+            }
+        }
+
+        return mask;
+    },
+
+    /**
+     *  @private
+     *
+     *  If item masking is enabled, this method will mask any containers that have
+     *  a ``maskOnOpen`` configuration variable set to ``true``.  If masking is
+     *  disabled, this method does nothing.
+     */
+    doMaskItem: function (item, mask) {
+        var maskConfig = this.getMask(),
+            mask = Ext.isDefined(mask) ? mask : true;
+
+        Ext.each(item.query('component[maskOnOpen=true]'), function (el) {
+            if (mask) {
+                el.setMasked(maskConfig);
+            } else {
+                el.setMasked(false);
+            }
+        });
+    },
+
+    /**
+     *  @private
+     *
+     *  Called when an item in the list is tapped.
+     */
+
+    onItemTap: function (list, index, target, record, e, eOpts) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        var me = this;
+
+        if (Ext.isFunction(record.raw.handler) && me.__init) {
+            me.fireAction('select', [me , me._cache[index], index], record.raw.handler, me);
+        }
+        Ext.defer(me.closeContainer, 200, me, [me.config.selectSlideDuration]);
+    },
+
+    /**
+     *  @private
+     *
+     *  Called when an item in the list is tapped.
+     */
+    onSelect: function (list, item, eOpts) {
+        var me = this,
+            store = list.getStore(),
+            index = item.raw.index,
+            container = me.container,
+            func = Ext.emptyFn;
+
+        if (me._cache[index] == undefined) {
+            // If the object has a handler defined, then we don't need to
+            // create an Ext object
+            if (Ext.isFunction(item.raw.handler) && me.__init) {
+                me._cache[index] = item.raw.handler;
+            } else {
+                me._cache[index] = container.add(Ext.merge({}, me.config.defaults, item.raw));
+
+                me.doMaskItem(me._cache[index], true);
+
+                // Wait until the component is painted before closing the container.  This makes
+                // the initial animation much smoother.
+                if (me.config.closeOnSelect) {
+                    me._cache[index].addListener('painted', function () {
+                        // The slight delay here gives the component enough time to update before
+                        // the close animation starts.
+                        Ext.defer(me.closeContainer, 200, me, [me.config.selectSlideDuration]);
+                    });
+                }
+
+                // Add a button for controlling the slide, if desired
+                if ((item.raw.slideButton || false)) {
+                    me.createSlideButton(me._cache[index], item.raw.slideButton);
+                }
+            }
+        }
+        else if (Ext.isFunction(item.raw.handler) && !Ext.isFunction(me._cache[index])) {
+            me._cache[index] = item.raw.handler;
+        }
+
+        if (Ext.isFunction(me._cache[index])) {
+            func = me._cache[index];
+        } else {
+            func = me.setContainerItem;
+        }
+
+        if (me.__init) {
+            me.fireAction('select', [me , me._cache[index], index], func, me);
+        }
+    },
+
+    /**
+     *  @private
+     *
+     *  Set the active item in the container.
+     */
+    setContainerItem: function (nav, item) {
+        var container = nav.container;
+        container.setActiveItem(item);
+    },
+
+    /**
+     *  @private
+     *
+     *  Callback function for when the container has started being dragged.
+     */
+    onContainerDragstart: function (draggable, e, offset, eOpts) {
+        if (this.config.slideSelector == false) {
+            return false;
+        }
+
+        if (this.config.slideSelector) {
+            node = e.target;
+            while (node = node.parentNode) {
+                if (node.className && node.className.indexOf(this.config.slideSelector) > -1) {
+                    this.fireEvent('dragstart', this);
+                    return true;
+                }
+            }
+            return false;
+        }
+        return false;
+    },
+
+    /**
+     *  @private
+     *
+     *  Callback function for when the container has finished being dragged.  This determines
+     *  which direction to finish moving the container based on its current position and velocity.
+     */
+    onContainerDragend: function (draggable, e, eOpts) {
+        var velocity = Math.abs(e.deltaX / e.deltaTime),
+            direction = (e.deltaX > 0) ? "right" : "left",
+            offset = Ext.clone(draggable.offset),
+            threshold = parseInt(this.config.list.minWidth * .70);
+
+        switch (direction) {
+            case "right":
+                offset.x = (velocity > 0.75 || offset.x > threshold) ? this.config.list.minWidth : 0;
+                break;
+            case "left":
+                offset.x = (velocity > 0.75 || offset.x < threshold) ? 0 : this.config.list.minWidth;
+                break;
+        }
+
+        this.fireEvent('dragend', this);
+
+        this.moveContainer(this, offset.x);
+    },
+
+    /**
+     *  @private
+     *
+     *  Registers the model with Ext.ModelManager, if it hasn't been
+     *  already, and returns the name of the model for use in the store.
+     */
+    getModel: function () {
+        var model = 'SlideNavigationPanelItem',
+            groups = this.config.groups;
+
+        if (!Ext.ModelManager.get(model)) {
+            Ext.define(model, {
+                extend: 'Ext.data.Model',
+                config: {
+                    idProperty: 'index',
+                    fields: [
+                        'index', 'title', 'group',
+                        {
+                            name: 'order',
+                            defaultValue: 1
+                        }, {
+                            name: 'groupOrder',
+                            convert: function (value, record) {
+                                // By default we group and order by group name.
+                                group = record.get('group');
+                                return groups[group] || group;
+                            }
+                        }
+                    ]
+                }
+            });
+        }
+
+        return model;
+    },
+
+    /**
+     *  Closes the container.  See {@link #moveContainer} for more details.
+     */
+    closeContainer: function (duration) {
+        var me = this,
+            duration = duration || this.config.slideDuration;
+
+        if (me.__init) {
+            me.fireAction('close', [me, 0, duration], 'moveContainer', me);
+        }
+    },
+
+    /**
+     *  Opens the container.  See {@link #moveContainer} for more details.
+     */
+    openContainer: function (duration) {
+        var me = this,
+            duration = duration || this.config.slideDuration,
+            offsetX = this.config.list.minWidth;
+
+        if (me.__init) {
+            me.fireAction('open', [me, offsetX, duration], 'moveContainer', me);
+        }
+    },
+
+    /**
+     *  Toggles the container open or close.
+     */
+    toggleContainer: function (duration) {
+        var duration = Ext.isNumber(duration) ? duration : this.config.slideDuration;
+        if (this.isClosed()) {
+            this.openContainer(duration);
+        } else {
+            this.closeContainer(duration);
+        }
+    },
+
+    /**
+     *  @private
+     *
+     *  Moves the container to a specified ``offsetX`` pixels.  Positive
+     *  integer values move the container that many pixels from the left edge
+     *  of the window.  If ``duration`` is provided, it should be an integer
+     *  number of milliseconds to animate the slide effect.  If no duration is
+     *  provided, the default in ``config.slideDuration`` is used.
+     */
+    moveContainer: function (nav, offsetX, duration) {
+        var duration = duration || this.config.slideDuration,
+            draggable = this.container.draggableBehavior.draggable;
+
+        this.container.addCls('open');
+
+        draggable.setOffset(offsetX, 0, {
+            duration: duration
+        });
+    },
+
+    /**
+     *  Returns true if the container is closed, false otherwise.  This is a
+     *  computed value based off the current offset position of the container.
+     *
+     *  @return {Boolean} Whether or not the container is fully closed.
+     */
+    isClosed: function () {
+        return (this.container.draggableBehavior.draggable.offset.x == 0);
+    },
+
+
+    /**
+     *  Returns true if the container is closed, false otherwise.  This is a
+     *  computed value based off the current offset position of the container.
+     *
+     *  @return {Boolean} Whether or not the container is fully open.
+     */
+    isOpened: function () {
+        return (this.container.draggableBehavior.draggable.offset.x == this.config.list.minWidth);
+    },
+
+    /**
+     *  @private
+     *
+     *  Sets the container as being closed.  This shouldn't ever be called
+     *  directly as it is automatically called by the ``translatable``
+     *  "animationend" event after the container has stopped moving.  All this
+     *  really does is set the CSS class for the container.
+     */
+    setClosed: function (closed) {
+        if (closed) {
+            this.container.removeCls('open');
+        } else {
+            this.container.addCls('open');
+        }
+    },
+
+    /**
+     *  @private
+     *
+     *  Generates a new Ext.dataview.List object to be used for displaying
+     *  the navigation items.
+     */
+    createNavigationList: function (store) {
+        var listConfig = this.getList();
+
+        // The width of the list needs to be set to 100%, so we copy
+        // the width value (if set) to minWidth and then delete it.
+        if (listConfig.width) {
+            if (!listConfig.minWidth) {
+                listConfig.minWidth = listConfig.width;
+            }
+            delete listConfig.width;
+        }
+
+        return Ext.create('Ext.dataview.List', Ext.merge({}, listConfig, {
+            scrollable: {
+                direction: 'vertical',
+                directionLock: true
+            },
+            store: this.store,
+            docked: 'left',
+            cls: 'x-slidenavigation-list',
+            style: 'position: absolute; top: 0; left: 0; height: 100%; z-index: 2',
+            width: '100%',
+            listeners: {
+                select: this.onSelect,
+                itemtap: this.onItemTap,
+                scope: this
+            }
+        }));
+    },
+
+    /**
+     *  @private
+     *
+     *  Generates and returns the Ext.Container to be used for displaying
+     *  content.  This is the "slideable" container that is positioned above
+     *  the navigation list.
+     */
+    createContainer: function () {
+        var me = this;
+
+        return Ext.create('Ext.Container', Ext.merge({}, me.config.container, {
+            docked: 'left',
+            cls: 'x-slidenavigation-container',
+            style: 'width: 100%; height: 100%; position: absolute; opacity: 1; z-index: 3',
+            layout: 'card',
+            draggable: {
+                direction: 'horizontal',
+                constraint: {
+                    min: { x: 0, y: 0 },
+                    max: { x: me.config.list.maxDrag || Math.max(screen.width, screen.height), y: 0 }
+                },
+                listeners: {
+                    dragstart: {
+                        fn: me.onContainerDragstart,
+                        order: 'before',
+                        scope: me
+                    },
+                    dragend: me.onContainerDragend,
+                    scope: me
+                },
+                translatable: {
+                    listeners: {
+                        animationstart: function () {
+                            me.fireEvent('slidestart', me);
+                        },
+                        animationend: function (translatable, b, c) {
+                            // Fire the event now that the animation is done.
+                            if (me.__init) {
+                                me.fireEvent('slideend', me);
+                            }
+
+                            if (me.isOpened()) {
+                                me.fireEvent('opened', me);
+
+                                me.doMaskItem(me.container.getActiveItem(), true);
+                            }
+
+                            else if (me.isClosed()) {
+                                me.fireEvent('closed', me);
+
+                                me.doMaskItem(me.container.getActiveItem(), false);
+                            }
+
+                            // Remove the class when the animation is finished, but only
+                            // if we're "closed"
+                            me.setClosed(me.isClosed());
+                        },
+                        scope: me // The "x-slidenavigation" container
+                    }
+                }
+            }
+        }));
+    },
+
+    /**
+     *  Override the default method so that we actually return the active item in the list,
+     *  otherwise this will always return the same thing (the main container, not the
+     *  selected item).
+     *
+     *  @return {Ext.Component/null} The currently active component.
+     */
+    getActiveItem: function () {
+        var selection = this.list.getSelection();
+        if (selection) {
+            return selection[0];
+        }
+    }
+});