",
+ options: {
+ disabled: false,
+
+ // callbacks
+ create: null
+ },
+ _createWidget: function( options, element ) {
+ element = $( element || this.defaultElement || this )[ 0 ];
+ this.element = $( element );
+ this.uuid = uuid++;
+ this.eventNamespace = "." + this.widgetName + this.uuid;
+ this.options = $.widget.extend( {},
+ this.options,
+ this._getCreateOptions(),
+ options );
+
+ this.bindings = $();
+ this.hoverable = $();
+ this.focusable = $();
+
+ if ( element !== this ) {
+ $.data( element, this.widgetFullName, this );
+ this._on( true, this.element, {
+ remove: function( event ) {
+ if ( event.target === element ) {
+ this.destroy();
+ }
+ }
+ });
+ this.document = $( element.style ?
+ // element within the document
+ element.ownerDocument :
+ // element is window or document
+ element.document || element );
+ this.window = $( this.document[0].defaultView || this.document[0].parentWindow );
+ }
+
+ this._create();
+ this._trigger( "create", null, this._getCreateEventData() );
+ this._init();
+ },
+ _getCreateOptions: $.noop,
+ _getCreateEventData: $.noop,
+ _create: $.noop,
+ _init: $.noop,
+
+ destroy: function() {
+ this._destroy();
+ // we can probably remove the unbind calls in 2.0
+ // all event bindings should go through this._on()
+ this.element
+ .unbind( this.eventNamespace )
+ // 1.9 BC for #7810
+ // TODO remove dual storage
+ .removeData( this.widgetName )
+ .removeData( this.widgetFullName )
+ // support: jquery <1.6.3
+ // http://bugs.jquery.com/ticket/9413
+ .removeData( $.camelCase( this.widgetFullName ) );
+ this.widget()
+ .unbind( this.eventNamespace )
+ .removeAttr( "aria-disabled" )
+ .removeClass(
+ this.widgetFullName + "-disabled " +
+ "ui-state-disabled" );
+
+ // clean up events and states
+ this.bindings.unbind( this.eventNamespace );
+ this.hoverable.removeClass( "ui-state-hover" );
+ this.focusable.removeClass( "ui-state-focus" );
+ },
+ _destroy: $.noop,
+
+ widget: function() {
+ return this.element;
+ },
+
+ option: function( key, value ) {
+ var options = key,
+ parts,
+ curOption,
+ i;
+
+ if ( arguments.length === 0 ) {
+ // don't return a reference to the internal hash
+ return $.widget.extend( {}, this.options );
+ }
+
+ if ( typeof key === "string" ) {
+ // handle nested keys, e.g., "foo.bar" => { foo: { bar: ___ } }
+ options = {};
+ parts = key.split( "." );
+ key = parts.shift();
+ if ( parts.length ) {
+ curOption = options[ key ] = $.widget.extend( {}, this.options[ key ] );
+ for ( i = 0; i < parts.length - 1; i++ ) {
+ curOption[ parts[ i ] ] = curOption[ parts[ i ] ] || {};
+ curOption = curOption[ parts[ i ] ];
+ }
+ key = parts.pop();
+ if ( value === undefined ) {
+ return curOption[ key ] === undefined ? null : curOption[ key ];
+ }
+ curOption[ key ] = value;
+ } else {
+ if ( value === undefined ) {
+ return this.options[ key ] === undefined ? null : this.options[ key ];
+ }
+ options[ key ] = value;
+ }
+ }
+
+ this._setOptions( options );
+
+ return this;
+ },
+ _setOptions: function( options ) {
+ var key;
+
+ for ( key in options ) {
+ this._setOption( key, options[ key ] );
+ }
+
+ return this;
+ },
+ _setOption: function( key, value ) {
+ this.options[ key ] = value;
+
+ if ( key === "disabled" ) {
+ this.widget()
+ .toggleClass( this.widgetFullName + "-disabled ui-state-disabled", !!value )
+ .attr( "aria-disabled", value );
+ this.hoverable.removeClass( "ui-state-hover" );
+ this.focusable.removeClass( "ui-state-focus" );
+ }
+
+ return this;
+ },
+
+ enable: function() {
+ return this._setOption( "disabled", false );
+ },
+ disable: function() {
+ return this._setOption( "disabled", true );
+ },
+
+ _on: function( suppressDisabledCheck, element, handlers ) {
+ var delegateElement,
+ instance = this;
+
+ // no suppressDisabledCheck flag, shuffle arguments
+ if ( typeof suppressDisabledCheck !== "boolean" ) {
+ handlers = element;
+ element = suppressDisabledCheck;
+ suppressDisabledCheck = false;
+ }
+
+ // no element argument, shuffle and use this.element
+ if ( !handlers ) {
+ handlers = element;
+ element = this.element;
+ delegateElement = this.widget();
+ } else {
+ // accept selectors, DOM elements
+ element = delegateElement = $( element );
+ this.bindings = this.bindings.add( element );
+ }
+
+ $.each( handlers, function( event, handler ) {
+ function handlerProxy() {
+ // allow widgets to customize the disabled handling
+ // - disabled as an array instead of boolean
+ // - disabled class as method for disabling individual parts
+ if ( !suppressDisabledCheck &&
+ ( instance.options.disabled === true ||
+ $( this ).hasClass( "ui-state-disabled" ) ) ) {
+ return;
+ }
+ return ( typeof handler === "string" ? instance[ handler ] : handler )
+ .apply( instance, arguments );
+ }
+
+ // copy the guid so direct unbinding works
+ if ( typeof handler !== "string" ) {
+ handlerProxy.guid = handler.guid =
+ handler.guid || handlerProxy.guid || $.guid++;
+ }
+
+ var match = event.match( /^(\w+)\s*(.*)$/ ),
+ eventName = match[1] + instance.eventNamespace,
+ selector = match[2];
+ if ( selector ) {
+ delegateElement.delegate( selector, eventName, handlerProxy );
+ } else {
+ element.bind( eventName, handlerProxy );
+ }
+ });
+ },
+
+ _off: function( element, eventName ) {
+ eventName = (eventName || "").split( " " ).join( this.eventNamespace + " " ) + this.eventNamespace;
+ element.unbind( eventName ).undelegate( eventName );
+ },
+
+ _delay: function( handler, delay ) {
+ function handlerProxy() {
+ return ( typeof handler === "string" ? instance[ handler ] : handler )
+ .apply( instance, arguments );
+ }
+ var instance = this;
+ return setTimeout( handlerProxy, delay || 0 );
+ },
+
+ _hoverable: function( element ) {
+ this.hoverable = this.hoverable.add( element );
+ this._on( element, {
+ mouseenter: function( event ) {
+ $( event.currentTarget ).addClass( "ui-state-hover" );
+ },
+ mouseleave: function( event ) {
+ $( event.currentTarget ).removeClass( "ui-state-hover" );
+ }
+ });
+ },
+
+ _focusable: function( element ) {
+ this.focusable = this.focusable.add( element );
+ this._on( element, {
+ focusin: function( event ) {
+ $( event.currentTarget ).addClass( "ui-state-focus" );
+ },
+ focusout: function( event ) {
+ $( event.currentTarget ).removeClass( "ui-state-focus" );
+ }
+ });
+ },
+
+ _trigger: function( type, event, data ) {
+ var prop, orig,
+ callback = this.options[ type ];
+
+ data = data || {};
+ event = $.Event( event );
+ event.type = ( type === this.widgetEventPrefix ?
+ type :
+ this.widgetEventPrefix + type ).toLowerCase();
+ // the original event may come from any element
+ // so we need to reset the target on the new event
+ event.target = this.element[ 0 ];
+
+ // copy original event properties over to the new event
+ orig = event.originalEvent;
+ if ( orig ) {
+ for ( prop in orig ) {
+ if ( !( prop in event ) ) {
+ event[ prop ] = orig[ prop ];
+ }
+ }
+ }
+
+ this.element.trigger( event, data );
+ return !( $.isFunction( callback ) &&
+ callback.apply( this.element[0], [ event ].concat( data ) ) === false ||
+ event.isDefaultPrevented() );
+ }
+};
+
+$.each( { show: "fadeIn", hide: "fadeOut" }, function( method, defaultEffect ) {
+ $.Widget.prototype[ "_" + method ] = function( element, options, callback ) {
+ if ( typeof options === "string" ) {
+ options = { effect: options };
+ }
+ var hasOptions,
+ effectName = !options ?
+ method :
+ options === true || typeof options === "number" ?
+ defaultEffect :
+ options.effect || defaultEffect;
+ options = options || {};
+ if ( typeof options === "number" ) {
+ options = { duration: options };
+ }
+ hasOptions = !$.isEmptyObject( options );
+ options.complete = callback;
+ if ( options.delay ) {
+ element.delay( options.delay );
+ }
+ if ( hasOptions && $.effects && $.effects.effect[ effectName ] ) {
+ element[ method ]( options );
+ } else if ( effectName !== method && element[ effectName ] ) {
+ element[ effectName ]( options.duration, options.easing, callback );
+ } else {
+ element.queue(function( next ) {
+ $( this )[ method ]();
+ if ( callback ) {
+ callback.call( element[ 0 ] );
+ }
+ next();
+ });
+ }
+ };
+});
+
+})( jQuery );
+(function( $, undefined ) {
+
+var mouseHandled = false;
+$( document ).mouseup( function() {
+ mouseHandled = false;
+});
+
+$.widget("ui.mouse", {
+ version: "1.10.3",
+ options: {
+ cancel: "input,textarea,button,select,option",
+ distance: 1,
+ delay: 0
+ },
+ _mouseInit: function() {
+ var that = this;
+
+ this.element
+ .bind("mousedown."+this.widgetName, function(event) {
+ return that._mouseDown(event);
+ })
+ .bind("click."+this.widgetName, function(event) {
+ if (true === $.data(event.target, that.widgetName + ".preventClickEvent")) {
+ $.removeData(event.target, that.widgetName + ".preventClickEvent");
+ event.stopImmediatePropagation();
+ return false;
+ }
+ });
+
+ this.started = false;
+ },
+
+ // TODO: make sure destroying one instance of mouse doesn't mess with
+ // other instances of mouse
+ _mouseDestroy: function() {
+ this.element.unbind("."+this.widgetName);
+ if ( this._mouseMoveDelegate ) {
+ $(document)
+ .unbind("mousemove."+this.widgetName, this._mouseMoveDelegate)
+ .unbind("mouseup."+this.widgetName, this._mouseUpDelegate);
+ }
+ },
+
+ _mouseDown: function(event) {
+ // don't let more than one widget handle mouseStart
+ if( mouseHandled ) { return; }
+
+ // we may have missed mouseup (out of window)
+ (this._mouseStarted && this._mouseUp(event));
+
+ this._mouseDownEvent = event;
+
+ var that = this,
+ btnIsLeft = (event.which === 1),
+ // event.target.nodeName works around a bug in IE 8 with
+ // disabled inputs (#7620)
+ elIsCancel = (typeof this.options.cancel === "string" && event.target.nodeName ? $(event.target).closest(this.options.cancel).length : false);
+ if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) {
+ return true;
+ }
+
+ this.mouseDelayMet = !this.options.delay;
+ if (!this.mouseDelayMet) {
+ this._mouseDelayTimer = setTimeout(function() {
+ that.mouseDelayMet = true;
+ }, this.options.delay);
+ }
+
+ if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
+ this._mouseStarted = (this._mouseStart(event) !== false);
+ if (!this._mouseStarted) {
+ event.preventDefault();
+ return true;
+ }
+ }
+
+ // Click event may never have fired (Gecko & Opera)
+ if (true === $.data(event.target, this.widgetName + ".preventClickEvent")) {
+ $.removeData(event.target, this.widgetName + ".preventClickEvent");
+ }
+
+ // these delegates are required to keep context
+ this._mouseMoveDelegate = function(event) {
+ return that._mouseMove(event);
+ };
+ this._mouseUpDelegate = function(event) {
+ return that._mouseUp(event);
+ };
+ $(document)
+ .bind("mousemove."+this.widgetName, this._mouseMoveDelegate)
+ .bind("mouseup."+this.widgetName, this._mouseUpDelegate);
+
+ event.preventDefault();
+
+ mouseHandled = true;
+ return true;
+ },
+
+ _mouseMove: function(event) {
+ // IE mouseup check - mouseup happened when mouse was out of window
+ if ($.ui.ie && ( !document.documentMode || document.documentMode < 9 ) && !event.button) {
+ return this._mouseUp(event);
+ }
+
+ if (this._mouseStarted) {
+ this._mouseDrag(event);
+ return event.preventDefault();
+ }
+
+ if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) {
+ this._mouseStarted =
+ (this._mouseStart(this._mouseDownEvent, event) !== false);
+ (this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event));
+ }
+
+ return !this._mouseStarted;
+ },
+
+ _mouseUp: function(event) {
+ $(document)
+ .unbind("mousemove."+this.widgetName, this._mouseMoveDelegate)
+ .unbind("mouseup."+this.widgetName, this._mouseUpDelegate);
+
+ if (this._mouseStarted) {
+ this._mouseStarted = false;
+
+ if (event.target === this._mouseDownEvent.target) {
+ $.data(event.target, this.widgetName + ".preventClickEvent", true);
+ }
+
+ this._mouseStop(event);
+ }
+
+ return false;
+ },
+
+ _mouseDistanceMet: function(event) {
+ return (Math.max(
+ Math.abs(this._mouseDownEvent.pageX - event.pageX),
+ Math.abs(this._mouseDownEvent.pageY - event.pageY)
+ ) >= this.options.distance
+ );
+ },
+
+ _mouseDelayMet: function(/* event */) {
+ return this.mouseDelayMet;
+ },
+
+ // These are placeholder methods, to be overriden by extending plugin
+ _mouseStart: function(/* event */) {},
+ _mouseDrag: function(/* event */) {},
+ _mouseStop: function(/* event */) {},
+ _mouseCapture: function(/* event */) { return true; }
+});
+
+})(jQuery);
+(function( $, undefined ) {
+
+/*jshint loopfunc: true */
+
+function isOverAxis( x, reference, size ) {
+ return ( x > reference ) && ( x < ( reference + size ) );
+}
+
+function isFloating(item) {
+ return (/left|right/).test(item.css("float")) || (/inline|table-cell/).test(item.css("display"));
+}
+
+$.widget("ui.sortable", $.ui.mouse, {
+ version: "1.10.3",
+ widgetEventPrefix: "sort",
+ ready: false,
+ options: {
+ appendTo: "parent",
+ axis: false,
+ connectWith: false,
+ containment: false,
+ cursor: "auto",
+ cursorAt: false,
+ dropOnEmpty: true,
+ forcePlaceholderSize: false,
+ forceHelperSize: false,
+ grid: false,
+ handle: false,
+ helper: "original",
+ items: "> *",
+ opacity: false,
+ placeholder: false,
+ revert: false,
+ scroll: true,
+ scrollSensitivity: 20,
+ scrollSpeed: 20,
+ scope: "default",
+ tolerance: "intersect",
+ zIndex: 1000,
+
+ // callbacks
+ activate: null,
+ beforeStop: null,
+ change: null,
+ deactivate: null,
+ out: null,
+ over: null,
+ receive: null,
+ remove: null,
+ sort: null,
+ start: null,
+ stop: null,
+ update: null
+ },
+ _create: function() {
+
+ var o = this.options;
+ this.containerCache = {};
+ this.element.addClass("ui-sortable");
+
+ //Get the items
+ this.refresh();
+
+ //Let's determine if the items are being displayed horizontally
+ this.floating = this.items.length ? o.axis === "x" || isFloating(this.items[0].item) : false;
+
+ //Let's determine the parent's offset
+ this.offset = this.element.offset();
+
+ //Initialize mouse events for interaction
+ this._mouseInit();
+
+ //We're ready to go
+ this.ready = true;
+
+ },
+
+ _destroy: function() {
+ this.element
+ .removeClass("ui-sortable ui-sortable-disabled");
+ this._mouseDestroy();
+
+ for ( var i = this.items.length - 1; i >= 0; i-- ) {
+ this.items[i].item.removeData(this.widgetName + "-item");
+ }
+
+ return this;
+ },
+
+ _setOption: function(key, value){
+ if ( key === "disabled" ) {
+ this.options[ key ] = value;
+
+ this.widget().toggleClass( "ui-sortable-disabled", !!value );
+ } else {
+ // Don't call widget base _setOption for disable as it adds ui-state-disabled class
+ $.Widget.prototype._setOption.apply(this, arguments);
+ }
+ },
+
+ _mouseCapture: function(event, overrideHandle) {
+ var currentItem = null,
+ validHandle = false,
+ that = this;
+
+ if (this.reverting) {
+ return false;
+ }
+
+ if(this.options.disabled || this.options.type === "static") {
+ return false;
+ }
+
+ //We have to refresh the items data once first
+ this._refreshItems(event);
+
+ //Find out if the clicked node (or one of its parents) is a actual item in this.items
+ $(event.target).parents().each(function() {
+ if($.data(this, that.widgetName + "-item") === that) {
+ currentItem = $(this);
+ return false;
+ }
+ });
+ if($.data(event.target, that.widgetName + "-item") === that) {
+ currentItem = $(event.target);
+ }
+
+ if(!currentItem) {
+ return false;
+ }
+ if(this.options.handle && !overrideHandle) {
+ $(this.options.handle, currentItem).find("*").addBack().each(function() {
+ if(this === event.target) {
+ validHandle = true;
+ }
+ });
+ if(!validHandle) {
+ return false;
+ }
+ }
+
+ this.currentItem = currentItem;
+ this._removeCurrentsFromItems();
+ return true;
+
+ },
+
+ _mouseStart: function(event, overrideHandle, noActivation) {
+
+ var i, body,
+ o = this.options;
+
+ this.currentContainer = this;
+
+ //We only need to call refreshPositions, because the refreshItems call has been moved to mouseCapture
+ this.refreshPositions();
+
+ //Create and append the visible helper
+ this.helper = this._createHelper(event);
+
+ //Cache the helper size
+ this._cacheHelperProportions();
+
+ /*
+ * - Position generation -
+ * This block generates everything position related - it's the core of draggables.
+ */
+
+ //Cache the margins of the original element
+ this._cacheMargins();
+
+ //Get the next scrolling parent
+ this.scrollParent = this.helper.scrollParent();
+
+ //The element's absolute position on the page minus margins
+ this.offset = this.currentItem.offset();
+ this.offset = {
+ top: this.offset.top - this.margins.top,
+ left: this.offset.left - this.margins.left
+ };
+
+ $.extend(this.offset, {
+ click: { //Where the click happened, relative to the element
+ left: event.pageX - this.offset.left,
+ top: event.pageY - this.offset.top
+ },
+ parent: this._getParentOffset(),
+ relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
+ });
+
+ // Only after we got the offset, we can change the helper's position to absolute
+ // TODO: Still need to figure out a way to make relative sorting possible
+ this.helper.css("position", "absolute");
+ this.cssPosition = this.helper.css("position");
+
+ //Generate the original position
+ this.originalPosition = this._generatePosition(event);
+ this.originalPageX = event.pageX;
+ this.originalPageY = event.pageY;
+
+ //Adjust the mouse offset relative to the helper if "cursorAt" is supplied
+ (o.cursorAt && this._adjustOffsetFromHelper(o.cursorAt));
+
+ //Cache the former DOM position
+ this.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] };
+
+ //If the helper is not the original, hide the original so it's not playing any role during the drag, won't cause anything bad this way
+ if(this.helper[0] !== this.currentItem[0]) {
+ this.currentItem.hide();
+ }
+
+ //Create the placeholder
+ this._createPlaceholder();
+
+ //Set a containment if given in the options
+ if(o.containment) {
+ this._setContainment();
+ }
+
+ if( o.cursor && o.cursor !== "auto" ) { // cursor option
+ body = this.document.find( "body" );
+
+ // support: IE
+ this.storedCursor = body.css( "cursor" );
+ body.css( "cursor", o.cursor );
+
+ this.storedStylesheet = $( "" ).appendTo( body );
+ }
+
+ if(o.opacity) { // opacity option
+ if (this.helper.css("opacity")) {
+ this._storedOpacity = this.helper.css("opacity");
+ }
+ this.helper.css("opacity", o.opacity);
+ }
+
+ if(o.zIndex) { // zIndex option
+ if (this.helper.css("zIndex")) {
+ this._storedZIndex = this.helper.css("zIndex");
+ }
+ this.helper.css("zIndex", o.zIndex);
+ }
+
+ //Prepare scrolling
+ if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") {
+ this.overflowOffset = this.scrollParent.offset();
+ }
+
+ //Call callbacks
+ this._trigger("start", event, this._uiHash());
+
+ //Recache the helper size
+ if(!this._preserveHelperProportions) {
+ this._cacheHelperProportions();
+ }
+
+
+ //Post "activate" events to possible containers
+ if( !noActivation ) {
+ for ( i = this.containers.length - 1; i >= 0; i-- ) {
+ this.containers[ i ]._trigger( "activate", event, this._uiHash( this ) );
+ }
+ }
+
+ //Prepare possible droppables
+ if($.ui.ddmanager) {
+ $.ui.ddmanager.current = this;
+ }
+
+ if ($.ui.ddmanager && !o.dropBehaviour) {
+ $.ui.ddmanager.prepareOffsets(this, event);
+ }
+
+ this.dragging = true;
+
+ this.helper.addClass("ui-sortable-helper");
+ this._mouseDrag(event); //Execute the drag once - this causes the helper not to be visible before getting its correct position
+ return true;
+
+ },
+
+ _mouseDrag: function(event) {
+ var i, item, itemElement, intersection,
+ o = this.options,
+ scrolled = false;
+
+ //Compute the helpers position
+ this.position = this._generatePosition(event);
+ this.positionAbs = this._convertPositionTo("absolute");
+
+ if (!this.lastPositionAbs) {
+ this.lastPositionAbs = this.positionAbs;
+ }
+
+ //Do scrolling
+ if(this.options.scroll) {
+ if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") {
+
+ if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) {
+ this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
+ } else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) {
+ this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;
+ }
+
+ if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) {
+ this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed;
+ } else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) {
+ this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;
+ }
+
+ } else {
+
+ if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) {
+ scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
+ } else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) {
+ scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
+ }
+
+ if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) {
+ scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
+ } else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) {
+ scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
+ }
+
+ }
+
+ if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) {
+ $.ui.ddmanager.prepareOffsets(this, event);
+ }
+ }
+
+ //Regenerate the absolute position used for position checks
+ this.positionAbs = this._convertPositionTo("absolute");
+
+ //Set the helper position
+ if(!this.options.axis || this.options.axis !== "y") {
+ this.helper[0].style.left = this.position.left+"px";
+ }
+ if(!this.options.axis || this.options.axis !== "x") {
+ this.helper[0].style.top = this.position.top+"px";
+ }
+
+ //Rearrange
+ for (i = this.items.length - 1; i >= 0; i--) {
+
+ //Cache variables and intersection, continue if no intersection
+ item = this.items[i];
+ itemElement = item.item[0];
+ intersection = this._intersectsWithPointer(item);
+ if (!intersection) {
+ continue;
+ }
+
+ // Only put the placeholder inside the current Container, skip all
+ // items form other containers. This works because when moving
+ // an item from one container to another the
+ // currentContainer is switched before the placeholder is moved.
+ //
+ // Without this moving items in "sub-sortables" can cause the placeholder to jitter
+ // beetween the outer and inner container.
+ if (item.instance !== this.currentContainer) {
+ continue;
+ }
+
+ // cannot intersect with itself
+ // no useless actions that have been done before
+ // no action if the item moved is the parent of the item checked
+ if (itemElement !== this.currentItem[0] &&
+ this.placeholder[intersection === 1 ? "next" : "prev"]()[0] !== itemElement &&
+ !$.contains(this.placeholder[0], itemElement) &&
+ (this.options.type === "semi-dynamic" ? !$.contains(this.element[0], itemElement) : true)
+ ) {
+
+ this.direction = intersection === 1 ? "down" : "up";
+
+ if (this.options.tolerance === "pointer" || this._intersectsWithSides(item)) {
+ this._rearrange(event, item);
+ } else {
+ break;
+ }
+
+ this._trigger("change", event, this._uiHash());
+ break;
+ }
+ }
+
+ //Post events to containers
+ this._contactContainers(event);
+
+ //Interconnect with droppables
+ if($.ui.ddmanager) {
+ $.ui.ddmanager.drag(this, event);
+ }
+
+ //Call callbacks
+ this._trigger("sort", event, this._uiHash());
+
+ this.lastPositionAbs = this.positionAbs;
+ return false;
+
+ },
+
+ _mouseStop: function(event, noPropagation) {
+
+ if(!event) {
+ return;
+ }
+
+ //If we are using droppables, inform the manager about the drop
+ if ($.ui.ddmanager && !this.options.dropBehaviour) {
+ $.ui.ddmanager.drop(this, event);
+ }
+
+ if(this.options.revert) {
+ var that = this,
+ cur = this.placeholder.offset(),
+ axis = this.options.axis,
+ animation = {};
+
+ if ( !axis || axis === "x" ) {
+ animation.left = cur.left - this.offset.parent.left - this.margins.left + (this.offsetParent[0] === document.body ? 0 : this.offsetParent[0].scrollLeft);
+ }
+ if ( !axis || axis === "y" ) {
+ animation.top = cur.top - this.offset.parent.top - this.margins.top + (this.offsetParent[0] === document.body ? 0 : this.offsetParent[0].scrollTop);
+ }
+ this.reverting = true;
+ $(this.helper).animate( animation, parseInt(this.options.revert, 10) || 500, function() {
+ that._clear(event);
+ });
+ } else {
+ this._clear(event, noPropagation);
+ }
+
+ return false;
+
+ },
+
+ cancel: function() {
+
+ if(this.dragging) {
+
+ this._mouseUp({ target: null });
+
+ if(this.options.helper === "original") {
+ this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper");
+ } else {
+ this.currentItem.show();
+ }
+
+ //Post deactivating events to containers
+ for (var i = this.containers.length - 1; i >= 0; i--){
+ this.containers[i]._trigger("deactivate", null, this._uiHash(this));
+ if(this.containers[i].containerCache.over) {
+ this.containers[i]._trigger("out", null, this._uiHash(this));
+ this.containers[i].containerCache.over = 0;
+ }
+ }
+
+ }
+
+ if (this.placeholder) {
+ //$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node!
+ if(this.placeholder[0].parentNode) {
+ this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
+ }
+ if(this.options.helper !== "original" && this.helper && this.helper[0].parentNode) {
+ this.helper.remove();
+ }
+
+ $.extend(this, {
+ helper: null,
+ dragging: false,
+ reverting: false,
+ _noFinalSort: null
+ });
+
+ if(this.domPosition.prev) {
+ $(this.domPosition.prev).after(this.currentItem);
+ } else {
+ $(this.domPosition.parent).prepend(this.currentItem);
+ }
+ }
+
+ return this;
+
+ },
+
+ serialize: function(o) {
+
+ var items = this._getItemsAsjQuery(o && o.connected),
+ str = [];
+ o = o || {};
+
+ $(items).each(function() {
+ var res = ($(o.item || this).attr(o.attribute || "id") || "").match(o.expression || (/(.+)[\-=_](.+)/));
+ if (res) {
+ str.push((o.key || res[1]+"[]")+"="+(o.key && o.expression ? res[1] : res[2]));
+ }
+ });
+
+ if(!str.length && o.key) {
+ str.push(o.key + "=");
+ }
+
+ return str.join("&");
+
+ },
+
+ toArray: function(o) {
+
+ var items = this._getItemsAsjQuery(o && o.connected),
+ ret = [];
+
+ o = o || {};
+
+ items.each(function() { ret.push($(o.item || this).attr(o.attribute || "id") || ""); });
+ return ret;
+
+ },
+
+ /* Be careful with the following core functions */
+ _intersectsWith: function(item) {
+
+ var x1 = this.positionAbs.left,
+ x2 = x1 + this.helperProportions.width,
+ y1 = this.positionAbs.top,
+ y2 = y1 + this.helperProportions.height,
+ l = item.left,
+ r = l + item.width,
+ t = item.top,
+ b = t + item.height,
+ dyClick = this.offset.click.top,
+ dxClick = this.offset.click.left,
+ isOverElementHeight = ( this.options.axis === "x" ) || ( ( y1 + dyClick ) > t && ( y1 + dyClick ) < b ),
+ isOverElementWidth = ( this.options.axis === "y" ) || ( ( x1 + dxClick ) > l && ( x1 + dxClick ) < r ),
+ isOverElement = isOverElementHeight && isOverElementWidth;
+
+ if ( this.options.tolerance === "pointer" ||
+ this.options.forcePointerForContainers ||
+ (this.options.tolerance !== "pointer" && this.helperProportions[this.floating ? "width" : "height"] > item[this.floating ? "width" : "height"])
+ ) {
+ return isOverElement;
+ } else {
+
+ return (l < x1 + (this.helperProportions.width / 2) && // Right Half
+ x2 - (this.helperProportions.width / 2) < r && // Left Half
+ t < y1 + (this.helperProportions.height / 2) && // Bottom Half
+ y2 - (this.helperProportions.height / 2) < b ); // Top Half
+
+ }
+ },
+
+ _intersectsWithPointer: function(item) {
+
+ var isOverElementHeight = (this.options.axis === "x") || isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height),
+ isOverElementWidth = (this.options.axis === "y") || isOverAxis(this.positionAbs.left + this.offset.click.left, item.left, item.width),
+ isOverElement = isOverElementHeight && isOverElementWidth,
+ verticalDirection = this._getDragVerticalDirection(),
+ horizontalDirection = this._getDragHorizontalDirection();
+
+ if (!isOverElement) {
+ return false;
+ }
+
+ return this.floating ?
+ ( ((horizontalDirection && horizontalDirection === "right") || verticalDirection === "down") ? 2 : 1 )
+ : ( verticalDirection && (verticalDirection === "down" ? 2 : 1) );
+
+ },
+
+ _intersectsWithSides: function(item) {
+
+ var isOverBottomHalf = isOverAxis(this.positionAbs.top + this.offset.click.top, item.top + (item.height/2), item.height),
+ isOverRightHalf = isOverAxis(this.positionAbs.left + this.offset.click.left, item.left + (item.width/2), item.width),
+ verticalDirection = this._getDragVerticalDirection(),
+ horizontalDirection = this._getDragHorizontalDirection();
+
+ if (this.floating && horizontalDirection) {
+ return ((horizontalDirection === "right" && isOverRightHalf) || (horizontalDirection === "left" && !isOverRightHalf));
+ } else {
+ return verticalDirection && ((verticalDirection === "down" && isOverBottomHalf) || (verticalDirection === "up" && !isOverBottomHalf));
+ }
+
+ },
+
+ _getDragVerticalDirection: function() {
+ var delta = this.positionAbs.top - this.lastPositionAbs.top;
+ return delta !== 0 && (delta > 0 ? "down" : "up");
+ },
+
+ _getDragHorizontalDirection: function() {
+ var delta = this.positionAbs.left - this.lastPositionAbs.left;
+ return delta !== 0 && (delta > 0 ? "right" : "left");
+ },
+
+ refresh: function(event) {
+ this._refreshItems(event);
+ this.refreshPositions();
+ return this;
+ },
+
+ _connectWith: function() {
+ var options = this.options;
+ return options.connectWith.constructor === String ? [options.connectWith] : options.connectWith;
+ },
+
+ _getItemsAsjQuery: function(connected) {
+
+ var i, j, cur, inst,
+ items = [],
+ queries = [],
+ connectWith = this._connectWith();
+
+ if(connectWith && connected) {
+ for (i = connectWith.length - 1; i >= 0; i--){
+ cur = $(connectWith[i]);
+ for ( j = cur.length - 1; j >= 0; j--){
+ inst = $.data(cur[j], this.widgetFullName);
+ if(inst && inst !== this && !inst.options.disabled) {
+ queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element) : $(inst.options.items, inst.element).not(".ui-sortable-helper").not(".ui-sortable-placeholder"), inst]);
+ }
+ }
+ }
+ }
+
+ queries.push([$.isFunction(this.options.items) ? this.options.items.call(this.element, null, { options: this.options, item: this.currentItem }) : $(this.options.items, this.element).not(".ui-sortable-helper").not(".ui-sortable-placeholder"), this]);
+
+ for (i = queries.length - 1; i >= 0; i--){
+ queries[i][0].each(function() {
+ items.push(this);
+ });
+ }
+
+ return $(items);
+
+ },
+
+ _removeCurrentsFromItems: function() {
+
+ var list = this.currentItem.find(":data(" + this.widgetName + "-item)");
+
+ this.items = $.grep(this.items, function (item) {
+ for (var j=0; j < list.length; j++) {
+ if(list[j] === item.item[0]) {
+ return false;
+ }
+ }
+ return true;
+ });
+
+ },
+
+ _refreshItems: function(event) {
+
+ this.items = [];
+ this.containers = [this];
+
+ var i, j, cur, inst, targetData, _queries, item, queriesLength,
+ items = this.items,
+ queries = [[$.isFunction(this.options.items) ? this.options.items.call(this.element[0], event, { item: this.currentItem }) : $(this.options.items, this.element), this]],
+ connectWith = this._connectWith();
+
+ if(connectWith && this.ready) { //Shouldn't be run the first time through due to massive slow-down
+ for (i = connectWith.length - 1; i >= 0; i--){
+ cur = $(connectWith[i]);
+ for (j = cur.length - 1; j >= 0; j--){
+ inst = $.data(cur[j], this.widgetFullName);
+ if(inst && inst !== this && !inst.options.disabled) {
+ queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element[0], event, { item: this.currentItem }) : $(inst.options.items, inst.element), inst]);
+ this.containers.push(inst);
+ }
+ }
+ }
+ }
+
+ for (i = queries.length - 1; i >= 0; i--) {
+ targetData = queries[i][1];
+ _queries = queries[i][0];
+
+ for (j=0, queriesLength = _queries.length; j < queriesLength; j++) {
+ item = $(_queries[j]);
+
+ item.data(this.widgetName + "-item", targetData); // Data for target checking (mouse manager)
+
+ items.push({
+ item: item,
+ instance: targetData,
+ width: 0, height: 0,
+ left: 0, top: 0
+ });
+ }
+ }
+
+ },
+
+ refreshPositions: function(fast) {
+
+ //This has to be redone because due to the item being moved out/into the offsetParent, the offsetParent's position will change
+ if(this.offsetParent && this.helper) {
+ this.offset.parent = this._getParentOffset();
+ }
+
+ var i, item, t, p;
+
+ for (i = this.items.length - 1; i >= 0; i--){
+ item = this.items[i];
+
+ //We ignore calculating positions of all connected containers when we're not over them
+ if(item.instance !== this.currentContainer && this.currentContainer && item.item[0] !== this.currentItem[0]) {
+ continue;
+ }
+
+ t = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item;
+
+ if (!fast) {
+ item.width = t.outerWidth();
+ item.height = t.outerHeight();
+ }
+
+ p = t.offset();
+ item.left = p.left;
+ item.top = p.top;
+ }
+
+ if(this.options.custom && this.options.custom.refreshContainers) {
+ this.options.custom.refreshContainers.call(this);
+ } else {
+ for (i = this.containers.length - 1; i >= 0; i--){
+ p = this.containers[i].element.offset();
+ this.containers[i].containerCache.left = p.left;
+ this.containers[i].containerCache.top = p.top;
+ this.containers[i].containerCache.width = this.containers[i].element.outerWidth();
+ this.containers[i].containerCache.height = this.containers[i].element.outerHeight();
+ }
+ }
+
+ return this;
+ },
+
+ _createPlaceholder: function(that) {
+ that = that || this;
+ var className,
+ o = that.options;
+
+ if(!o.placeholder || o.placeholder.constructor === String) {
+ className = o.placeholder;
+ o.placeholder = {
+ element: function() {
+
+ var nodeName = that.currentItem[0].nodeName.toLowerCase(),
+ element = $( "<" + nodeName + ">", that.document[0] )
+ .addClass(className || that.currentItem[0].className+" ui-sortable-placeholder")
+ .removeClass("ui-sortable-helper");
+
+ if ( nodeName === "tr" ) {
+ that.currentItem.children().each(function() {
+ $( "
| ", that.document[0] )
+ .attr( "colspan", $( this ).attr( "colspan" ) || 1 )
+ .appendTo( element );
+ });
+ } else if ( nodeName === "img" ) {
+ element.attr( "src", that.currentItem.attr( "src" ) );
+ }
+
+ if ( !className ) {
+ element.css( "visibility", "hidden" );
+ }
+
+ return element;
+ },
+ update: function(container, p) {
+
+ // 1. If a className is set as 'placeholder option, we don't force sizes - the class is responsible for that
+ // 2. The option 'forcePlaceholderSize can be enabled to force it even if a class name is specified
+ if(className && !o.forcePlaceholderSize) {
+ return;
+ }
+
+ //If the element doesn't have a actual height by itself (without styles coming from a stylesheet), it receives the inline height from the dragged item
+ if(!p.height()) { p.height(that.currentItem.innerHeight() - parseInt(that.currentItem.css("paddingTop")||0, 10) - parseInt(that.currentItem.css("paddingBottom")||0, 10)); }
+ if(!p.width()) { p.width(that.currentItem.innerWidth() - parseInt(that.currentItem.css("paddingLeft")||0, 10) - parseInt(that.currentItem.css("paddingRight")||0, 10)); }
+ }
+ };
+ }
+
+ //Create the placeholder
+ that.placeholder = $(o.placeholder.element.call(that.element, that.currentItem));
+
+ //Append it after the actual current item
+ that.currentItem.after(that.placeholder);
+
+ //Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317)
+ o.placeholder.update(that, that.placeholder);
+
+ },
+
+ _contactContainers: function(event) {
+ var i, j, dist, itemWithLeastDistance, posProperty, sizeProperty, base, cur, nearBottom, floating,
+ innermostContainer = null,
+ innermostIndex = null;
+
+ // get innermost container that intersects with item
+ for (i = this.containers.length - 1; i >= 0; i--) {
+
+ // never consider a container that's located within the item itself
+ if($.contains(this.currentItem[0], this.containers[i].element[0])) {
+ continue;
+ }
+
+ if(this._intersectsWith(this.containers[i].containerCache)) {
+
+ // if we've already found a container and it's more "inner" than this, then continue
+ if(innermostContainer && $.contains(this.containers[i].element[0], innermostContainer.element[0])) {
+ continue;
+ }
+
+ innermostContainer = this.containers[i];
+ innermostIndex = i;
+
+ } else {
+ // container doesn't intersect. trigger "out" event if necessary
+ if(this.containers[i].containerCache.over) {
+ this.containers[i]._trigger("out", event, this._uiHash(this));
+ this.containers[i].containerCache.over = 0;
+ }
+ }
+
+ }
+
+ // if no intersecting containers found, return
+ if(!innermostContainer) {
+ return;
+ }
+
+ // move the item into the container if it's not there already
+ if(this.containers.length === 1) {
+ if (!this.containers[innermostIndex].containerCache.over) {
+ this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
+ this.containers[innermostIndex].containerCache.over = 1;
+ }
+ } else {
+
+ //When entering a new container, we will find the item with the least distance and append our item near it
+ dist = 10000;
+ itemWithLeastDistance = null;
+ floating = innermostContainer.floating || isFloating(this.currentItem);
+ posProperty = floating ? "left" : "top";
+ sizeProperty = floating ? "width" : "height";
+ base = this.positionAbs[posProperty] + this.offset.click[posProperty];
+ for (j = this.items.length - 1; j >= 0; j--) {
+ if(!$.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) {
+ continue;
+ }
+ if(this.items[j].item[0] === this.currentItem[0]) {
+ continue;
+ }
+ if (floating && !isOverAxis(this.positionAbs.top + this.offset.click.top, this.items[j].top, this.items[j].height)) {
+ continue;
+ }
+ cur = this.items[j].item.offset()[posProperty];
+ nearBottom = false;
+ if(Math.abs(cur - base) > Math.abs(cur + this.items[j][sizeProperty] - base)){
+ nearBottom = true;
+ cur += this.items[j][sizeProperty];
+ }
+
+ if(Math.abs(cur - base) < dist) {
+ dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j];
+ this.direction = nearBottom ? "up": "down";
+ }
+ }
+
+ //Check if dropOnEmpty is enabled
+ if(!itemWithLeastDistance && !this.options.dropOnEmpty) {
+ return;
+ }
+
+ if(this.currentContainer === this.containers[innermostIndex]) {
+ return;
+ }
+
+ itemWithLeastDistance ? this._rearrange(event, itemWithLeastDistance, null, true) : this._rearrange(event, null, this.containers[innermostIndex].element, true);
+ this._trigger("change", event, this._uiHash());
+ this.containers[innermostIndex]._trigger("change", event, this._uiHash(this));
+ this.currentContainer = this.containers[innermostIndex];
+
+ //Update the placeholder
+ this.options.placeholder.update(this.currentContainer, this.placeholder);
+
+ this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
+ this.containers[innermostIndex].containerCache.over = 1;
+ }
+
+
+ },
+
+ _createHelper: function(event) {
+
+ var o = this.options,
+ helper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0], [event, this.currentItem])) : (o.helper === "clone" ? this.currentItem.clone() : this.currentItem);
+
+ //Add the helper to the DOM if that didn't happen already
+ if(!helper.parents("body").length) {
+ $(o.appendTo !== "parent" ? o.appendTo : this.currentItem[0].parentNode)[0].appendChild(helper[0]);
+ }
+
+ if(helper[0] === this.currentItem[0]) {
+ this._storedCSS = { width: this.currentItem[0].style.width, height: this.currentItem[0].style.height, position: this.currentItem.css("position"), top: this.currentItem.css("top"), left: this.currentItem.css("left") };
+ }
+
+ if(!helper[0].style.width || o.forceHelperSize) {
+ helper.width(this.currentItem.width());
+ }
+ if(!helper[0].style.height || o.forceHelperSize) {
+ helper.height(this.currentItem.height());
+ }
+
+ return helper;
+
+ },
+
+ _adjustOffsetFromHelper: function(obj) {
+ if (typeof obj === "string") {
+ obj = obj.split(" ");
+ }
+ if ($.isArray(obj)) {
+ obj = {left: +obj[0], top: +obj[1] || 0};
+ }
+ if ("left" in obj) {
+ this.offset.click.left = obj.left + this.margins.left;
+ }
+ if ("right" in obj) {
+ this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
+ }
+ if ("top" in obj) {
+ this.offset.click.top = obj.top + this.margins.top;
+ }
+ if ("bottom" in obj) {
+ this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
+ }
+ },
+
+ _getParentOffset: function() {
+
+
+ //Get the offsetParent and cache its position
+ this.offsetParent = this.helper.offsetParent();
+ var po = this.offsetParent.offset();
+
+ // This is a special case where we need to modify a offset calculated on start, since the following happened:
+ // 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent
+ // 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that
+ // the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag
+ if(this.cssPosition === "absolute" && this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) {
+ po.left += this.scrollParent.scrollLeft();
+ po.top += this.scrollParent.scrollTop();
+ }
+
+ // This needs to be actually done for all browsers, since pageX/pageY includes this information
+ // with an ugly IE fix
+ if( this.offsetParent[0] === document.body || (this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() === "html" && $.ui.ie)) {
+ po = { top: 0, left: 0 };
+ }
+
+ return {
+ top: po.top + (parseInt(this.offsetParent.css("borderTopWidth"),10) || 0),
+ left: po.left + (parseInt(this.offsetParent.css("borderLeftWidth"),10) || 0)
+ };
+
+ },
+
+ _getRelativeOffset: function() {
+
+ if(this.cssPosition === "relative") {
+ var p = this.currentItem.position();
+ return {
+ top: p.top - (parseInt(this.helper.css("top"),10) || 0) + this.scrollParent.scrollTop(),
+ left: p.left - (parseInt(this.helper.css("left"),10) || 0) + this.scrollParent.scrollLeft()
+ };
+ } else {
+ return { top: 0, left: 0 };
+ }
+
+ },
+
+ _cacheMargins: function() {
+ this.margins = {
+ left: (parseInt(this.currentItem.css("marginLeft"),10) || 0),
+ top: (parseInt(this.currentItem.css("marginTop"),10) || 0)
+ };
+ },
+
+ _cacheHelperProportions: function() {
+ this.helperProportions = {
+ width: this.helper.outerWidth(),
+ height: this.helper.outerHeight()
+ };
+ },
+
+ _setContainment: function() {
+
+ var ce, co, over,
+ o = this.options;
+ if(o.containment === "parent") {
+ o.containment = this.helper[0].parentNode;
+ }
+ if(o.containment === "document" || o.containment === "window") {
+ this.containment = [
+ 0 - this.offset.relative.left - this.offset.parent.left,
+ 0 - this.offset.relative.top - this.offset.parent.top,
+ $(o.containment === "document" ? document : window).width() - this.helperProportions.width - this.margins.left,
+ ($(o.containment === "document" ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top
+ ];
+ }
+
+ if(!(/^(document|window|parent)$/).test(o.containment)) {
+ ce = $(o.containment)[0];
+ co = $(o.containment).offset();
+ over = ($(ce).css("overflow") !== "hidden");
+
+ this.containment = [
+ co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0) - this.margins.left,
+ co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0) - this.margins.top,
+ co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left,
+ co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top
+ ];
+ }
+
+ },
+
+ _convertPositionTo: function(d, pos) {
+
+ if(!pos) {
+ pos = this.position;
+ }
+ var mod = d === "absolute" ? 1 : -1,
+ scroll = this.cssPosition === "absolute" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent,
+ scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
+
+ return {
+ top: (
+ pos.top + // The absolute mouse position
+ this.offset.relative.top * mod + // Only for relative positioned nodes: Relative offset from element to offset parent
+ this.offset.parent.top * mod - // The offsetParent's offset without borders (offset + border)
+ ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod)
+ ),
+ left: (
+ pos.left + // The absolute mouse position
+ this.offset.relative.left * mod + // Only for relative positioned nodes: Relative offset from element to offset parent
+ this.offset.parent.left * mod - // The offsetParent's offset without borders (offset + border)
+ ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) * mod)
+ )
+ };
+
+ },
+
+ _generatePosition: function(event) {
+
+ var top, left,
+ o = this.options,
+ pageX = event.pageX,
+ pageY = event.pageY,
+ scroll = this.cssPosition === "absolute" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
+
+ // This is another very weird special case that only happens for relative elements:
+ // 1. If the css position is relative
+ // 2. and the scroll parent is the document or similar to the offset parent
+ // we have to refresh the relative offset during the scroll so there are no jumps
+ if(this.cssPosition === "relative" && !(this.scrollParent[0] !== document && this.scrollParent[0] !== this.offsetParent[0])) {
+ this.offset.relative = this._getRelativeOffset();
+ }
+
+ /*
+ * - Position constraining -
+ * Constrain the position to a mix of grid, containment.
+ */
+
+ if(this.originalPosition) { //If we are not dragging yet, we won't check for options
+
+ if(this.containment) {
+ if(event.pageX - this.offset.click.left < this.containment[0]) {
+ pageX = this.containment[0] + this.offset.click.left;
+ }
+ if(event.pageY - this.offset.click.top < this.containment[1]) {
+ pageY = this.containment[1] + this.offset.click.top;
+ }
+ if(event.pageX - this.offset.click.left > this.containment[2]) {
+ pageX = this.containment[2] + this.offset.click.left;
+ }
+ if(event.pageY - this.offset.click.top > this.containment[3]) {
+ pageY = this.containment[3] + this.offset.click.top;
+ }
+ }
+
+ if(o.grid) {
+ top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1];
+ pageY = this.containment ? ( (top - this.offset.click.top >= this.containment[1] && top - this.offset.click.top <= this.containment[3]) ? top : ((top - this.offset.click.top >= this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top;
+
+ left = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0];
+ pageX = this.containment ? ( (left - this.offset.click.left >= this.containment[0] && left - this.offset.click.left <= this.containment[2]) ? left : ((left - this.offset.click.left >= this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;
+ }
+
+ }
+
+ return {
+ top: (
+ pageY - // The absolute mouse position
+ this.offset.click.top - // Click offset (relative to the element)
+ this.offset.relative.top - // Only for relative positioned nodes: Relative offset from element to offset parent
+ this.offset.parent.top + // The offsetParent's offset without borders (offset + border)
+ ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ))
+ ),
+ left: (
+ pageX - // The absolute mouse position
+ this.offset.click.left - // Click offset (relative to the element)
+ this.offset.relative.left - // Only for relative positioned nodes: Relative offset from element to offset parent
+ this.offset.parent.left + // The offsetParent's offset without borders (offset + border)
+ ( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ))
+ )
+ };
+
+ },
+
+ _rearrange: function(event, i, a, hardRefresh) {
+
+ a ? a[0].appendChild(this.placeholder[0]) : i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction === "down" ? i.item[0] : i.item[0].nextSibling));
+
+ //Various things done here to improve the performance:
+ // 1. we create a setTimeout, that calls refreshPositions
+ // 2. on the instance, we have a counter variable, that get's higher after every append
+ // 3. on the local scope, we copy the counter variable, and check in the timeout, if it's still the same
+ // 4. this lets only the last addition to the timeout stack through
+ this.counter = this.counter ? ++this.counter : 1;
+ var counter = this.counter;
+
+ this._delay(function() {
+ if(counter === this.counter) {
+ this.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove
+ }
+ });
+
+ },
+
+ _clear: function(event, noPropagation) {
+
+ this.reverting = false;
+ // We delay all events that have to be triggered to after the point where the placeholder has been removed and
+ // everything else normalized again
+ var i,
+ delayedTriggers = [];
+
+ // We first have to update the dom position of the actual currentItem
+ // Note: don't do it if the current item is already removed (by a user), or it gets reappended (see #4088)
+ if(!this._noFinalSort && this.currentItem.parent().length) {
+ this.placeholder.before(this.currentItem);
+ }
+ this._noFinalSort = null;
+
+ if(this.helper[0] === this.currentItem[0]) {
+ for(i in this._storedCSS) {
+ if(this._storedCSS[i] === "auto" || this._storedCSS[i] === "static") {
+ this._storedCSS[i] = "";
+ }
+ }
+ this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper");
+ } else {
+ this.currentItem.show();
+ }
+
+ if(this.fromOutside && !noPropagation) {
+ delayedTriggers.push(function(event) { this._trigger("receive", event, this._uiHash(this.fromOutside)); });
+ }
+ if((this.fromOutside || this.domPosition.prev !== this.currentItem.prev().not(".ui-sortable-helper")[0] || this.domPosition.parent !== this.currentItem.parent()[0]) && !noPropagation) {
+ delayedTriggers.push(function(event) { this._trigger("update", event, this._uiHash()); }); //Trigger update callback if the DOM position has changed
+ }
+
+ // Check if the items Container has Changed and trigger appropriate
+ // events.
+ if (this !== this.currentContainer) {
+ if(!noPropagation) {
+ delayedTriggers.push(function(event) { this._trigger("remove", event, this._uiHash()); });
+ delayedTriggers.push((function(c) { return function(event) { c._trigger("receive", event, this._uiHash(this)); }; }).call(this, this.currentContainer));
+ delayedTriggers.push((function(c) { return function(event) { c._trigger("update", event, this._uiHash(this)); }; }).call(this, this.currentContainer));
+ }
+ }
+
+
+ //Post events to containers
+ for (i = this.containers.length - 1; i >= 0; i--){
+ if(!noPropagation) {
+ delayedTriggers.push((function(c) { return function(event) { c._trigger("deactivate", event, this._uiHash(this)); }; }).call(this, this.containers[i]));
+ }
+ if(this.containers[i].containerCache.over) {
+ delayedTriggers.push((function(c) { return function(event) { c._trigger("out", event, this._uiHash(this)); }; }).call(this, this.containers[i]));
+ this.containers[i].containerCache.over = 0;
+ }
+ }
+
+ //Do what was originally in plugins
+ if ( this.storedCursor ) {
+ this.document.find( "body" ).css( "cursor", this.storedCursor );
+ this.storedStylesheet.remove();
+ }
+ if(this._storedOpacity) {
+ this.helper.css("opacity", this._storedOpacity);
+ }
+ if(this._storedZIndex) {
+ this.helper.css("zIndex", this._storedZIndex === "auto" ? "" : this._storedZIndex);
+ }
+
+ this.dragging = false;
+ if(this.cancelHelperRemoval) {
+ if(!noPropagation) {
+ this._trigger("beforeStop", event, this._uiHash());
+ for (i=0; i < delayedTriggers.length; i++) {
+ delayedTriggers[i].call(this, event);
+ } //Trigger all delayed events
+ this._trigger("stop", event, this._uiHash());
+ }
+
+ this.fromOutside = false;
+ return false;
+ }
+
+ if(!noPropagation) {
+ this._trigger("beforeStop", event, this._uiHash());
+ }
+
+ //$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node!
+ this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
+
+ if(this.helper[0] !== this.currentItem[0]) {
+ this.helper.remove();
+ }
+ this.helper = null;
+
+ if(!noPropagation) {
+ for (i=0; i < delayedTriggers.length; i++) {
+ delayedTriggers[i].call(this, event);
+ } //Trigger all delayed events
+ this._trigger("stop", event, this._uiHash());
+ }
+
+ this.fromOutside = false;
+ return true;
+
+ },
+
+ _trigger: function() {
+ if ($.Widget.prototype._trigger.apply(this, arguments) === false) {
+ this.cancel();
+ }
+ },
+
+ _uiHash: function(_inst) {
+ var inst = _inst || this;
+ return {
+ helper: inst.helper,
+ placeholder: inst.placeholder || $([]),
+ position: inst.position,
+ originalPosition: inst.originalPosition,
+ offset: inst.positionAbs,
+ item: inst.currentItem,
+ sender: _inst ? _inst.element : null
+ };
+ }
+
+});
+
+})(jQuery);
+;/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
+ * http://benalman.com/
+ * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
+
+(function($) {
+
+ var o = $({});
+
+ $.subscribe = function() {
+ //console.log("SUBSCRIBE: " + arguments[0]);
+ o.on.apply(o, arguments);
+ };
+
+ $.unsubscribe = function() {
+ o.off.apply(o, arguments);
+ };
+
+ $.publish = function() {
+ //console.log("PUBLISH: " + arguments[0]);
+ o.trigger.apply(o, arguments);
+ };
+
+}(jQuery));
+
+
+;/* ===========================================================
+ * bootstrap-tooltip.js v2.1.1
+ * http://twitter.github.com/bootstrap/javascript.html#tooltips
+ * Inspired by the original jQuery.tipsy by Jason Frame
+ * ===========================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function ($) {
+
+ "use strict"; // jshint ;_;
+
+
+ /* TOOLTIP PUBLIC CLASS DEFINITION
+ * =============================== */
+
+ var Tooltip = function (element, options) {
+ this.init('tooltip', element, options)
+ }
+
+ Tooltip.prototype = {
+
+ constructor: Tooltip
+
+ , init: function (type, element, options) {
+ var eventIn
+ , eventOut
+
+ this.type = type
+ this.$element = $(element)
+ this.options = this.getOptions(options)
+ this.enabled = true
+
+ if (this.options.trigger == 'click') {
+ this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this))
+ } else if (this.options.trigger != 'manual') {
+ eventIn = this.options.trigger == 'hover' ? 'mouseenter' : 'focus'
+ eventOut = this.options.trigger == 'hover' ? 'mouseleave' : 'blur'
+ this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this))
+ this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this))
+ }
+
+ this.options.selector ?
+ (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) :
+ this.fixTitle()
+ }
+
+ , getOptions: function (options) {
+ options = $.extend({}, $.fn[this.type].defaults, options, this.$element.data())
+
+ if (options.delay && typeof options.delay == 'number') {
+ options.delay = {
+ show: options.delay
+ , hide: options.delay
+ }
+ }
+
+ return options
+ }
+
+ , enter: function (e) {
+ var self = $(e.currentTarget)[this.type](this._options).data(this.type)
+
+ if (!self.options.delay || !self.options.delay.show) return self.show()
+
+ clearTimeout(this.timeout)
+ self.hoverState = 'in'
+ this.timeout = setTimeout(function() {
+ if (self.hoverState == 'in') self.show()
+ }, self.options.delay.show)
+ }
+
+ , leave: function (e) {
+ var self = $(e.currentTarget)[this.type](this._options).data(this.type)
+
+ if (this.timeout) clearTimeout(this.timeout)
+ if (!self.options.delay || !self.options.delay.hide) return self.hide()
+
+ self.hoverState = 'out'
+ this.timeout = setTimeout(function() {
+ if (self.hoverState == 'out') self.hide()
+ }, self.options.delay.hide)
+ }
+
+ , show: function () {
+ var $tip
+ , inside
+ , pos
+ , actualWidth
+ , actualHeight
+ , placement
+ , tp
+
+ if (this.hasContent() && this.enabled) {
+ $tip = this.tip()
+ this.setContent()
+
+ if (this.options.animation) {
+ $tip.addClass('fade')
+ }
+
+ placement = typeof this.options.placement == 'function' ?
+ this.options.placement.call(this, $tip[0], this.$element[0]) :
+ this.options.placement
+
+ inside = /in/.test(placement)
+
+ $tip
+ .remove()
+ .css({ top: 0, left: 0, display: 'block' })
+ .appendTo(inside ? this.$element : document.body)
+
+ pos = this.getPosition(inside)
+
+ actualWidth = $tip[0].offsetWidth
+ actualHeight = $tip[0].offsetHeight
+
+ switch (inside ? placement.split(' ')[1] : placement) {
+ case 'bottom':
+ tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
+ break
+ case 'top':
+ tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
+ break
+ case 'left':
+ tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
+ break
+ case 'right':
+ tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
+ break
+ }
+
+ $tip
+ .css(tp)
+ .addClass(placement)
+ .addClass('in')
+ }
+ }
+
+ , setContent: function () {
+ var $tip = this.tip()
+ , title = this.getTitle()
+
+ $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title)
+ $tip.removeClass('fade in top bottom left right')
+ }
+
+ , hide: function () {
+ var that = this
+ , $tip = this.tip()
+
+ $tip.removeClass('in')
+
+ function removeWithAnimation() {
+ var timeout = setTimeout(function () {
+ $tip.off($.support.transition.end).remove()
+ }, 500)
+
+ $tip.one($.support.transition.end, function () {
+ clearTimeout(timeout)
+ $tip.remove()
+ })
+ }
+
+ $.support.transition && this.$tip.hasClass('fade') ?
+ removeWithAnimation() :
+ $tip.remove()
+
+ return this
+ }
+
+ , fixTitle: function () {
+ var $e = this.$element
+ if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') {
+ $e.attr('data-original-title', $e.attr('title') || '').removeAttr('title')
+ }
+ }
+
+ , hasContent: function () {
+ return this.getTitle()
+ }
+
+ , getPosition: function (inside) {
+ return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
+ width: this.$element[0].offsetWidth
+ , height: this.$element[0].offsetHeight
+ })
+ }
+
+ , getTitle: function () {
+ var title
+ , $e = this.$element
+ , o = this.options
+
+ title = $e.attr('data-original-title')
+ || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
+
+ return title
+ }
+
+ , tip: function () {
+ return this.$tip = this.$tip || $(this.options.template)
+ }
+
+ , validate: function () {
+ if (!this.$element[0].parentNode) {
+ this.hide()
+ this.$element = null
+ this.options = null
+ }
+ }
+
+ , enable: function () {
+ this.enabled = true
+ }
+
+ , disable: function () {
+ this.enabled = false
+ }
+
+ , toggleEnabled: function () {
+ this.enabled = !this.enabled
+ }
+
+ , toggle: function () {
+ this[this.tip().hasClass('in') ? 'hide' : 'show']()
+ }
+
+ , destroy: function () {
+ this.hide().$element.off('.' + this.type).removeData(this.type)
+ }
+
+ }
+
+
+ /* TOOLTIP PLUGIN DEFINITION
+ * ========================= */
+
+ $.fn.tooltip = function ( option ) {
+ return this.each(function () {
+ var $this = $(this)
+ , data = $this.data('tooltip')
+ , options = typeof option == 'object' && option
+ if (!data) $this.data('tooltip', (data = new Tooltip(this, options)))
+ if (typeof option == 'string') data[option]()
+ })
+ }
+
+ $.fn.tooltip.Constructor = Tooltip
+
+ $.fn.tooltip.defaults = {
+ animation: true
+ , placement: 'top'
+ , selector: false
+ , template: '
'
+ , trigger: 'hover'
+ , title: ''
+ , delay: 0
+ , html: true
+ }
+
+}(window.jQuery);
+;(function () {
+ var worker = function () {
+ (function(b){function a(b,d){if({}.hasOwnProperty.call(a.cache,b))return a.cache[b];var e=a.resolve(b);if(!e)throw new Error('Failed to resolve module '+b);var c={id:b,require:a,filename:b,exports:{},loaded:!1,parent:d,children:[]};d&&d.children.push(c);var f=b.slice(0,b.lastIndexOf('/')+1);return a.cache[b]=c.exports,e.call(c.exports,c,c.exports,f,b),c.loaded=!0,a.cache[b]=c.exports}a.modules={},a.cache={},a.resolve=function(b){return{}.hasOwnProperty.call(a.modules,b)?a.modules[b]:void 0},a.define=function(b,c){a.modules[b]=c},a.define('/gif.worker.coffee',function(d,e,f,g){var b,c;b=a('/GIFEncoder.js',d),c=function(a){var c,d,e;return c=new b(a.width,a.height),a.index===0?c.writeHeader():c.firstFrame=!1,c.setRepeat(a.repeat),c.setDelay(a.delay),c.setQuality(a.quality),c.addFrame(a.data),a.last&&c.finish(),d=c.stream(),a.data=d.pages,a.cursor=d.cursor,a.pageSize=d.constructor.pageSize,a.canTransfer?(e=function(c){var d;for(var b=0,e=a.data.length;b
=c.pageSize&&this.newPage(),this.pages[this.page][this.cursor++]=a},c.prototype.writeUTFBytes=function(b){for(var c=b.length,a=0;a=0&&(this.dispose=a)},b.prototype.setRepeat=function(a){this.repeat=a},b.prototype.setTransparent=function(a){this.transparent=a},b.prototype.addFrame=function(a){this.image=a,this.getImagePixels(),this.analyzePixels(),this.firstFrame&&(this.writeLSD(),this.writePalette(),this.repeat>=0&&this.writeNetscapeExt()),this.writeGraphicCtrlExt(),this.writeImageDesc(),this.firstFrame||this.writePalette(),this.writePixels(),this.firstFrame=!1},b.prototype.finish=function(){this.out.writeByte(59)},b.prototype.setQuality=function(a){a<1&&(a=1),this.sample=a},b.prototype.writeHeader=function(){this.out.writeUTFBytes('GIF89a')},b.prototype.analyzePixels=function(){var g=this.pixels.length,d=g/3;this.indexedPixels=new Uint8Array(d);var a=new f(this.pixels,this.sample);a.buildColormap(),this.colorTab=a.getColormap();var b=0;for(var c=0;c>16,l=(e&65280)>>8,m=e&255,c=0,d=16777216,j=this.colorTab.length;for(var a=0;a=0&&(a=dispose&7),a<<=2,this.out.writeByte(0|a|0|b),this.writeShort(this.delay),this.out.writeByte(this.transIndex),this.out.writeByte(0)},b.prototype.writeImageDesc=function(){this.out.writeByte(44),this.writeShort(0),this.writeShort(0),this.writeShort(this.width),this.writeShort(this.height),this.firstFrame?this.out.writeByte(0):this.out.writeByte(128|this.palSize)},b.prototype.writeLSD=function(){this.writeShort(this.width),this.writeShort(this.height),this.out.writeByte(240|this.palSize),this.out.writeByte(0),this.out.writeByte(0)},b.prototype.writeNetscapeExt=function(){this.out.writeByte(33),this.out.writeByte(255),this.out.writeByte(11),this.out.writeUTFBytes('NETSCAPE2.0'),this.out.writeByte(3),this.out.writeByte(1),this.writeShort(this.repeat),this.out.writeByte(0)},b.prototype.writePalette=function(){this.out.writeBytes(this.colorTab);var b=768-this.colorTab.length;for(var a=0;a>8&255)},b.prototype.writePixels=function(){var a=new g(this.width,this.height,this.indexedPixels,this.colorDepth);a.encode(this.out)},b.prototype.stream=function(){return this.out},e.exports=b}),a.define('/LZWEncoder.js',function(e,g,h,i){function f(y,D,C,B){function w(a,b){r[f++]=a,f>=254&&t(b)}function x(b){u(a),k=i+2,j=!0,l(i,b)}function u(b){for(var a=0;a=0){y=w-d,d===0&&(y=1);do if((d-=y)<0&&(d+=w),h[d]===g){e=n[d];continue a}while(h[d]>=0)}l(e,r),e=t,k<1<0&&(a.writeByte(f),a.writeBytes(r,0,f),f=0)}function p(a){return(1<0?g|=a<=8)w(g&255,c),g>>=8,e-=8;if((k>m||j)&&(j?(m=p(n_bits=q),j=!1):(++n_bits,n_bits==b?m=1<0)w(g&255,c),g>>=8,e-=8;t(c)}}var s=Math.max(2,B),r=new Uint8Array(256),h=new Int32Array(a),n=new Int32Array(a),g,e=0,f,k=0,m,j=!1,q,i,o;this.encode=z}var c=-1,b=12,a=5003,d=[0,1,3,7,15,31,63,127,255,511,1023,2047,4095,8191,16383,32767,65535];e.exports=f}),a.define('/TypedNeuQuant.js',function(A,F,E,D){function C(A,B){function I(){o=[],q=new Int32Array(256),t=new Int32Array(a),y=new Int32Array(a),z=new Int32Array(a>>3);var c,d;for(c=0;c>=b,o[c][1]>>=b,o[c][2]>>=b,o[c][3]=c}function K(b,a,c,e,f){o[a][0]-=b*(o[a][0]-c)/d,o[a][1]-=b*(o[a][1]-e)/d,o[a][2]-=b*(o[a][2]-f)/d}function L(j,e,n,l,k){var h=Math.abs(e-j),i=Math.min(e+j,a),g=e+1,f=e-1,m=1,b,d;while(gh)d=z[m++],gh&&(b=o[f--],b[0]-=d*(b[0]-n)/c,b[1]-=d*(b[1]-l)/c,b[2]-=d*(b[2]-k)/c)}function C(p,s,q){var h=2147483647,k=h,d=-1,m=d,c,j,e,n,l;for(c=0;c>i-b),n>g,y[c]-=l,t[c]+=l<>1,b=f+1;b>1,b=f+1;b<256;b++)q[b]=n}function E(j,i,k){var b,d,c,e=1e3,h=-1,f=q[i],g=f-1;while(f=0)f=e?f=a:(f++,c<0&&(c=-c),b=d[0]-j,b<0&&(b=-b),c+=b,c=0&&(d=o[g],c=i-d[1],c>=e?g=-1:(g--,c<0&&(c=-c),b=d[0]-j,b<0&&(b=-b),c+=b,c>h;for(a<=1&&(a=0),c=0;c=f&&(g-=f),c++,q===0&&(q=1),c%q===0)for(n-=n/D,o-=o/v,a=o>>h,a<=1&&(a=0),e=0;e>g,r=e<>3,h=6,t=1<this.frames.length;0<=this.frames.length?++a:--a)b.push(a);return b}.apply(this,arguments).length;athis.frames.length;0<=this.frames.length?++a:--a)b.push(a);return b}.apply(this,arguments)[a],b.push(null);return b}.call(this,[]),a=this.spawnWorkers();for(var b=0,c=function(){var c,c;c=[];for(var b=0;0<=a?ba;0<=a?++b:--b)c.push(b);return c}.apply(this,arguments).length;ba;0<=a?++b:--b)c.push(b);return c}.apply(this,arguments)[b],this.renderNextFrame();return this.emit('start'),this.emit('progress',0)},a.prototype.abort=function(){var a;while(!0){if(a=this.activeWorkers.shift(),!(null!=a))break;console.log('killing active worker'),a.terminate()}return this.running=!1,this.emit('abort')},a.prototype.spawnWorkers=function(){var a,b;return a=Math.min(this.options.workers,this.frames.length),function(){var c;c=[];for(var b=this.freeWorkers.length;this.freeWorkers.length<=a?ba;this.freeWorkers.length<=a?++b:--b)c.push(b);return c}.apply(this,arguments).forEach((b=this,function(d){var a,c;return console.log('spawning worker '+d),c=new Worker(b.options.workerScript),a=b,c.onmessage=function(b){return a.activeWorkers.splice(a.activeWorkers.indexOf(c),1),a.freeWorkers.push(c),a.frameFinished(b.data)},b.freeWorkers.push(c)})),a},a.prototype.frameFinished=function(a){return console.log('frame '+a.index+' finished - '+this.activeWorkers.length+' active'),this.finishedFrames++,this.emit('progress',this.finishedFrames/this.frames.length),this.imageParts[a.index]=a,g(null,this.imageParts)?this.renderNextFrame():this.finishRendering()},a.prototype.finishRendering=function(){var e,a,k,m,b,d,h;b=0;for(var f=0,j=this.imageParts.length;f=this.frames.length?void 0:(c=this.frames[this.nextFrame++],b=this.freeWorkers.shift(),a=this.getTask(c),console.log('starting frame '+(a.index+1)+' of '+this.frames.length),this.activeWorkers.push(b),b.postMessage(a))},a.prototype.getContextData=function(a){return a.getImageData(0,0,this.options.width,this.options.height).data},a.prototype.getImageData=function(b){var a;return null!=this._canvas||(this._canvas=document.createElement('canvas'),this._canvas.width=this.options.width,this._canvas.height=this.options.height),a=this._canvas.getContext('2d'),a.setFill=this.options.background,a.fillRect(0,0,this.options.width,this.options.height),a.drawImage(b,0,0),this.getContextData(a)},a.prototype.getTask=function(a){var c,b;if(c=this.frames.indexOf(a),b={index:c,last:c===this.frames.length-1,delay:a.delay,width:this.options.width,height:this.options.height,quality:this.options.quality,repeat:this.options.repeat,canTransfer:e.name==='chrome'},null!=a.data)b.data=a.data;else if(null!=a.context)b.data=this.getContextData(a.context);else if(null!=a.image)b.data=this.getImageData(a.image);else throw new Error('Invalid frame');return b},a}(d),b.exports=f}),a.define('/browser.coffee',function(f,g,h,i){var a,d,e,c,b;c=navigator.userAgent.toLowerCase(),e=navigator.platform.toLowerCase(),b=c.match(/(opera|ie|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]([\w\d\.]+)|$)/)||[null,'unknown',0],d=b[1]==='ie'&&document.documentMode,a={name:b[1]==='version'?b[3]:b[1],version:d||parseFloat(b[1]==='opera'&&b[4]?b[4]:b[2]),platform:{name:c.match(/ip(?:ad|od|hone)/)?'ios':(c.match(/(?:webos|android)/)||e.match(/mac|win|linux/)||['other'])[0]}},a[a.name]=!0,a[a.name+parseInt(a.version,10)]=!0,a.platform[a.platform.name]=!0,f.exports=a}),a.define('events',function(f,e,g,h){b.EventEmitter||(b.EventEmitter=function(){});var a=e.EventEmitter=b.EventEmitter,c=typeof Array.isArray==='function'?Array.isArray:function(a){return Object.prototype.toString.call(a)==='[object Array]'},d=10;a.prototype.setMaxListeners=function(a){this._events||(this._events={}),this._events.maxListeners=a},a.prototype.emit=function(f){if(f==='error'&&(!(this._events&&this._events.error)||c(this._events.error)&&!this._events.error.length))throw arguments[1]instanceof Error?arguments[1]:new Error("Uncaught, unspecified 'error' event.");if(!this._events)return!1;var a=this._events[f];if(!a)return!1;if(!(typeof a=='function'))if(c(a)){var b=Array.prototype.slice.call(arguments,1),e=a.slice();for(var d=0,g=e.length;d0&&this._events[a].length>e&&(this._events[a].warned=!0,console.error('(node) warning: possible EventEmitter memory leak detected. %d listeners added. Use emitter.setMaxListeners() to increase limit.',this._events[a].length),console.trace())}this._events[a].push(b)}else this._events[a]=[this._events[a],b];return this},a.prototype.on=a.prototype.addListener,a.prototype.once=function(b,c){var a=this;return a.on(b,function d(){a.removeListener(b,d),c.apply(this,arguments)}),this},a.prototype.removeListener=function(a,d){if('function'!==typeof d)throw new Error('removeListener only takes instances of Function');if(!(this._events&&this._events[a]))return this;var b=this._events[a];if(c(b)){var e=b.indexOf(d);if(e<0)return this;b.splice(e,1),b.length==0&&delete this._events[a]}else this._events[a]===d&&delete this._events[a];return this},a.prototype.removeAllListeners=function(a){return a&&this._events&&this._events[a]&&(this._events[a]=null),this},a.prototype.listeners=function(a){return this._events||(this._events={}),this._events[a]||(this._events[a]=[]),c(this._events[a])||(this._events[a]=[this._events[a]]),this._events[a]}}),c.GIF=a('/gif.coffee')}.call(this,this))
+//# sourceMappingURL=gif.js.map
+// gif.js 0.1.4 - https://github.com/jnordberg/gif.js;// TODO(grosbouddha): put under pskl namespace.
+var Constants = {
+ DEFAULT : {
+ HEIGHT : 32,
+ WIDTH : 32,
+ FPS : 12
+ },
+
+ MODEL_VERSION : 1,
+
+ MAX_HEIGHT : 128,
+ MAX_WIDTH : 128,
+
+ PREVIEW_FILM_SIZE : 120,
+
+ DEFAULT_PEN_COLOR : '#000000',
+ TRANSPARENT_COLOR : 'TRANSPARENT',
+
+ /*
+ * Fake semi-transparent color used to highlight transparent
+ * strokes and rectangles:
+ */
+ SELECTION_TRANSPARENT_COLOR: 'rgba(255, 255, 255, 0.6)',
+
+ /*
+ * When a tool is hovering the drawing canvas, we highlight the eventual
+ * pixel target with this color:
+ */
+ TOOL_TARGET_HIGHLIGHT_COLOR: 'rgba(255, 255, 255, 0.2)',
+
+ /*
+ * Default entry point for piskel web service:
+ */
+ STATIC : {
+ URL : {
+ SAVE : 'http://3.piskel-app.appspot.com/store',
+ GET : 'http://3.piskel-app.appspot.com/get'
+ }
+ },
+ APPENGINE : {
+ URL : {
+ SAVE : 'save'
+ }
+ },
+ IMAGE_SERVICE_UPLOAD_URL : 'http://screenletstore.appspot.com/__/upload',
+ IMAGE_SERVICE_GET_URL : 'http://screenletstore.appspot.com/img/',
+
+ GRID_STROKE_WIDTH: 1,
+
+ LEFT_BUTTON : 'left_button_1',
+ RIGHT_BUTTON : 'right_button_2'
+};;// TODO(grosbouddha): put under pskl namespace.
+var Events = {
+
+ TOOL_SELECTED : "TOOL_SELECTED",
+ TOOL_RELEASED : "TOOL_RELEASED",
+ PRIMARY_COLOR_SELECTED: "PRIMARY_COLOR_SELECTED",
+ PRIMARY_COLOR_UPDATED: "PRIMARY_COLOR_UPDATED",
+ SECONDARY_COLOR_SELECTED: "SECONDARY_COLOR_SELECTED",
+ SECONDARY_COLOR_UPDATED: "SECONDARY_COLOR_UPDATED",
+
+ /**
+ * When this event is emitted, a request is sent to the localstorage
+ * Service to save the current framesheet. The storage service
+ * may not immediately store data (internal throttling of requests).
+ */
+ LOCALSTORAGE_REQUEST: "LOCALSTORAGE_REQUEST",
+
+ CANVAS_RIGHT_CLICKED: "CANVAS_RIGHT_CLICKED",
+
+ /**
+ * Event to request a refresh of the display.
+ * A bit overkill but, it's just workaround in our current drawing system.
+ * TODO: Remove or rework when redraw system is refactored.
+ */
+ REFRESH: "REFRESH",
+
+ /**
+ * Temporary event to bind the redraw of right preview film to the canvas.
+ * This redraw should be driven by model updates.
+ * TODO(vincz): Remove.
+ */
+ REDRAW_PREVIEWFILM: "REDRAW_PREVIEWFILM",
+
+ /**
+ * Fired each time a user setting change.
+ * The payload will be:
+ * 1st argument: Name of the settings
+ * 2nd argument: New value
+ */
+ USER_SETTINGS_CHANGED: "USER_SETTINGS_CHANGED",
+
+ /* Listened to by SettingsController */
+ CLOSE_SETTINGS_DRAWER : "CLOSE_SETTINGS_DRAWER",
+
+ /**
+ * The framesheet was reseted and is now probably drastically different.
+ * Number of frames, content of frames, color used for the palette may have changed.
+ */
+ PISKEL_RESET: "PISKEL_RESET",
+
+ FRAME_SIZE_CHANGED : "FRAME_SIZE_CHANGED",
+
+ CURRENT_FRAME_SET: "CURRENT_FRAME_SET",
+
+ SELECTION_CREATED: "SELECTION_CREATED",
+ SELECTION_MOVE_REQUEST: "SELECTION_MOVE_REQUEST",
+ SELECTION_DISMISSED: "SELECTION_DISMISSED",
+
+ SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
+ HIDE_NOTIFICATION: "HIDE_NOTIFICATION",
+
+ UNDO: "UNDO",
+ REDO: "REDO",
+ CUT: "CUT",
+ COPY: "COPY",
+ PASTE: "PASTE"
+};;jQuery.namespace = function() {
+ var a=arguments, o=null, i, j, d;
+ for (i=0; i 255 || g > 255 || b > 255) {
+ throw "Invalid color component";
+ }
+
+ return ((r << 16) | (g << 8) | b).toString(16);
+ };
+
+ ns.inherit = function(extendedObject, inheritFrom) {
+ extendedObject.prototype = Object.create(inheritFrom.prototype);
+ extendedObject.prototype.constructor = extendedObject;
+ extendedObject.prototype.superclass = inheritFrom.prototype;
+ };
+
+})();
+
+;(function () {
+ var ns = $.namespace("pskl");
+
+ ns.CanvasUtils = {
+ createCanvas : function (width, height, classList) {
+ var canvas = document.createElement("canvas");
+ canvas.setAttribute("width", width);
+ canvas.setAttribute("height", height);
+
+ if (typeof classList == "string") {
+ classList = [classList];
+ }
+ if (Array.isArray(classList)) {
+ for (var i = 0 ; i < classList.length ; i++) {
+ canvas.classList.add(classList[i]);
+ }
+ }
+
+ return canvas;
+ }
+ };
+})();;(function () {
+ var ns = $.namespace('pskl.utils');
+
+ ns.FileUtils = {
+ readFile : function (file, callback) {
+ var reader = new FileReader();
+ reader.onload = function(event){
+ callback(event.target.result);
+ };
+ reader.readAsDataURL(file);
+ }
+ };
+})();;(function () {
+ var ns = $.namespace('pskl.utils');
+
+ ns.FrameUtils = {
+ merge : function (frames) {
+ var merged = null;
+ if (frames.length) {
+ merged = frames[0].clone();
+ var w = merged.getWidth(), h = merged.getHeight();
+ for (var i = 1 ; i < frames.length ; i++) {
+ pskl.utils.FrameUtils.mergeFrames_(merged, frames[i]);
+ }
+ }
+ return merged;
+ },
+
+ mergeFrames_ : function (frameA, frameB) {
+ frameB.forEachPixel(function (p, col, row) {
+ if (p != Constants.TRANSPARENT_COLOR) {
+ frameA.setPixel(col, row, p);
+ }
+ });
+ },
+
+ /**
+ * Create a pskl.model.Frame from an Image object.
+ * Transparent pixels will either be converted to completely opaque or completely transparent pixels.
+ * @param {Image} image source image
+ * @return {pskl.model.Frame} corresponding frame
+ */
+ createFromImage : function (image) {
+ var w = image.width,
+ h = image.height;
+ var canvas = pskl.CanvasUtils.createCanvas(w, h);
+ var context = canvas.getContext('2d');
+
+ context.drawImage(image, 0,0,w,h,0,0,w,h);
+ var imgData = context.getImageData(0,0,w,h).data;
+ // Draw the zoomed-up pixels to a different canvas context
+ var frame = [];
+ for (var x=0;x top left corner - {x1, y1} => bottom right corner
+ * @private
+ */
+ getOrderedRectangleCoordinates : function (x0, y0, x1, y1) {
+ return {
+ x0 : Math.min(x0, x1),
+ y0 : Math.min(y0, y1),
+ x1 : Math.max(x0, x1),
+ y1 : Math.max(y0, y1)
+ };
+ },
+
+ /**
+ * Return the list of pixels that would have been filled by a paintbucket tool applied
+ * on pixel at coordinate (x,y).
+ * This function is not altering the Frame object argument.
+ *
+ * @param frame pskl.model.Frame The frame target in which we want to paintbucket
+ * @param col number Column coordinate in the frame
+ * @param row number Row coordinate in the frame
+ *
+ * @return an array of the pixel coordinates paint with the replacement color
+ */
+ getSimilarConnectedPixelsFromFrame: function(frame, col, row) {
+ // To get the list of connected (eg the same color) pixels, we will use the paintbucket algorithm
+ // in a fake cloned frame. The returned pixels by the paintbucket algo are the painted pixels
+ // and are as well connected.
+ var fakeFrame = frame.clone(); // We just want to
+ var fakeFillColor = "sdfsdfsdf"; // A fake color that will never match a real color.
+ var paintedPixels = this.paintSimilarConnectedPixelsFromFrame(fakeFrame, col, row, fakeFillColor);
+
+ return paintedPixels;
+ },
+
+ /**
+ * Apply the paintbucket tool in a frame at the (col, row) initial position
+ * with the replacement color.
+ *
+ * @param frame pskl.model.Frame The frame target in which we want to paintbucket
+ * @param col number Column coordinate in the frame
+ * @param row number Row coordinate in the frame
+ * @param replacementColor string Hexadecimal color used to fill the area
+ *
+ * @return an array of the pixel coordinates paint with the replacement color
+ */
+ paintSimilarConnectedPixelsFromFrame: function(frame, col, row, replacementColor) {
+ /**
+ * Queue linear Flood-fill (node, target-color, replacement-color):
+ * 1. Set Q to the empty queue.
+ * 2. If the color of node is not equal to target-color, return.
+ * 3. Add node to Q.
+ * 4. For each element n of Q:
+ * 5. If the color of n is equal to target-color:
+ * 6. Set w and e equal to n.
+ * 7. Move w to the west until the color of the node to the west of w no longer matches target-color.
+ * 8. Move e to the east until the color of the node to the east of e no longer matches target-color.
+ * 9. Set the color of nodes between w and e to replacement-color.
+ * 10. For each node n between w and e:
+ * 11. If the color of the node to the north of n is target-color, add that node to Q.
+ * 12. If the color of the node to the south of n is target-color, add that node to Q.
+ * 13. Continue looping until Q is exhausted.
+ * 14. Return.
+ */
+ var paintedPixels = [];
+ var queue = [];
+ var dy = [-1, 0, 1, 0];
+ var dx = [0, 1, 0, -1];
+ var targetColor;
+ try {
+ targetColor = frame.getPixel(col, row);
+ } catch(e) {
+ // Frame out of bound exception.
+ }
+
+ if(targetColor == replacementColor) {
+ return;
+ }
+
+
+ queue.push({"col": col, "row": row});
+ var loopCount = 0;
+ var cellCount = frame.getWidth() * frame.getHeight();
+ while(queue.length > 0) {
+ loopCount ++;
+
+ var currentItem = queue.pop();
+ frame.setPixel(currentItem.col, currentItem.row, replacementColor);
+ paintedPixels.push({"col": currentItem.col, "row": currentItem.row });
+
+ for (var i = 0; i < 4; i++) {
+ var nextCol = currentItem.col + dx[i];
+ var nextRow = currentItem.row + dy[i];
+ try {
+ if (frame.containsPixel(nextCol, nextRow) && frame.getPixel(nextCol, nextRow) == targetColor) {
+ queue.push({"col": nextCol, "row": nextRow });
+ }
+ } catch(e) {
+ // Frame out of bound exception.
+ }
+ }
+
+ // Security loop breaker:
+ if(loopCount > 10 * cellCount) {
+ console.log("loop breaker called");
+ break;
+ }
+ }
+ return paintedPixels;
+ },
+
+ /**
+ * Calculate and return the maximal DPI to display a picture in a given container.
+ *
+ * @param container jQueryObject Container where the picture should be displayed
+ * @param number pictureHeight height in pixels of the picture to display
+ * @param number pictureWidth width in pixels of the picture to display
+ * @return number maximal dpi
+ */
+ calculateDPIForContainer : function (container, pictureHeight, pictureWidth) {
+ return this.calculateDPI(container.height(), container.width(), pictureHeight, pictureWidth);
+ },
+
+ /**
+ * Calculate and return the maximal DPI to display a picture for a given height and width.
+ *
+ * @param height number Height available to display the picture
+ * @param width number Width available to display the picture
+ * @param number pictureHeight height in pixels of the picture to display
+ * @param number pictureWidth width in pixels of the picture to display
+ * @return number maximal dpi
+ */
+ calculateDPI : function (height, width, pictureHeight, pictureWidth) {
+ var heightBoundDpi = Math.floor(height / pictureHeight),
+ widthBoundDpi = Math.floor(width / pictureWidth);
+
+ return Math.min(heightBoundDpi, widthBoundDpi);
+ }
+ };
+})();;(function () {
+ var ns = $.namespace('pskl.utils');
+ ns.Serializer = {
+ serializePiskel : function (piskel) {
+ var serializedLayers = piskel.getLayers().map(function (l) {
+ return pskl.utils.Serializer.serializeLayer(l);
+ });
+ return JSON.stringify({
+ modelVersion : Constants.MODEL_VERSION,
+ piskel : {
+ height : piskel.getHeight(),
+ width : piskel.getWidth(),
+ layers : serializedLayers
+ }
+ });
+ },
+
+ serializeLayer : function (layer) {
+ var serializedFrames = layer.getFrames().map(function (f) {
+ return f.serialize();
+ });
+ return JSON.stringify({
+ name : layer.getName(),
+ frames : serializedFrames
+ });
+ },
+
+ deserializePiskel : function (piskelString) {
+ var piskelData = JSON.parse(piskelString);
+ return this.createPiskelFromData(piskelData);
+ },
+
+ /**
+ * Similar to deserializePiskel, but dealing directly with a parsed piskel
+ * @param {Object} piskelData JSON.parse of a serialized piskel
+ * @return {pskl.model.Piskel} a piskel
+ */
+ createPiskel : function (piskelData) {
+ var piskel = null;
+ if (piskelData.modelVersion == Constants.MODEL_VERSION) {
+ var pData = piskelData.piskel;
+ piskel = new pskl.model.Piskel(pData.width, pData.height);
+
+ pData.layers.forEach(function (serializedLayer) {
+ var layer = pskl.utils.Serializer.deserializeLayer(serializedLayer);
+ piskel.addLayer(layer);
+ });
+ } else {
+ piskel = pskl.utils.Serializer.backwardDeserializer_(piskelData);
+ }
+
+ return piskel;
+ },
+
+ deserializeLayer : function (layerString) {
+ var lData = JSON.parse(layerString);
+ var layer = new pskl.model.Layer(lData.name);
+
+ lData.frames.forEach(function (serializedFrame) {
+ var frame = pskl.utils.Serializer.deserializeFrame(serializedFrame);
+ layer.addFrame(frame);
+ });
+
+ return layer;
+ },
+
+ deserializeFrame : function (frameString) {
+ var framePixelGrid = JSON.parse(frameString);
+ return pskl.model.Frame.fromPixelGrid(framePixelGrid);
+ },
+
+ /**
+ * Deserialize old piskel framesheets. Initially piskels were stored as arrays of frames : "[[pixelGrid],[pixelGrid],[pixelGrid]]".
+ */
+ backwardDeserializer_ : function (frames) {
+ var layer = new pskl.model.Layer('Layer 1');
+ frames.forEach(function (frame) {
+ layer.addFrame(pskl.model.Frame.fromPixelGrid(frame));
+ });
+ var width = layer.getFrameAt(0).getWidth(), height = layer.getFrameAt(0).getHeight();
+ var piskel = new pskl.model.Piskel(width, height);
+ piskel.addLayer(layer);
+
+ return piskel;
+ }
+ };
+})();
+;(function () {
+ var ns = $.namespace("pskl.utils");
+
+ ns.Template = {
+ get : function (templateId) {
+ var template = document.getElementById(templateId);
+ if (template) {
+ return template.innerHTML;
+ } else {
+ console.error("Could not find template for id :", templateId);
+ }
+ },
+
+ createFromHTML : function (html) {
+ var dummyEl = document.createElement("div");
+ dummyEl.innerHTML = html;
+ return dummyEl.children[0];
+ },
+
+ replace : function (template, dict) {
+ for (var key in dict) {
+ if (dict.hasOwnProperty(key)) {
+ var value = dict[key];
+ template = template.replace(new RegExp('\\{\\{'+key+'\\}\\}', 'g'), value);
+ }
+ }
+ return template;
+ }
+ };
+})();;(function () {
+ var ns = $.namespace("pskl");
+
+ ns.UserSettings = {
+
+ SHOW_GRID : 'SHOW_GRID',
+ CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
+
+ KEY_TO_DEFAULT_VALUE_MAP_ : {
+ 'SHOW_GRID' : false,
+ 'CANVAS_BACKGROUND' : 'medium-canvas-background'
+ },
+
+ /**
+ * @private
+ */
+ cache_ : {},
+
+ /**
+ * Static method to access a user defined settings value ot its default
+ * value if not defined yet.
+ */
+ get : function (key) {
+ this.checkKeyValidity_(key);
+ if (!(key in this.cache_)) {
+ this.cache_[key] =
+ this.readFromLocalStorage_(key) || this.readFromDefaults_(key);
+ }
+ return this.cache_[key];
+ },
+
+ set : function (key, value) {
+ this.checkKeyValidity_(key);
+ this.cache_[key] = value;
+ this.writeToLocalStorage_(key, value);
+
+ $.publish(Events.USER_SETTINGS_CHANGED, [key, value]);
+ },
+
+ /**
+ * @private
+ */
+ readFromLocalStorage_ : function(key) {
+ var value = window.localStorage[key];
+ if (typeof value != "undefined") {
+ value = JSON.parse(value);
+ }
+ return value;
+ },
+
+ /**
+ * @private
+ */
+ writeToLocalStorage_ : function(key, value) {
+ // TODO(grosbouddha): Catch storage exception here.
+ window.localStorage[key] = JSON.stringify(value);
+ },
+
+ /**
+ * @private
+ */
+ readFromDefaults_ : function (key) {
+ return this.KEY_TO_DEFAULT_VALUE_MAP_[key];
+ },
+
+ /**
+ * @private
+ */
+ checkKeyValidity_ : function(key) {
+ if(!(key in this.KEY_TO_DEFAULT_VALUE_MAP_)) {
+ // TODO(grosbouddha): Define error catching strategy and throw exception from here.
+ console.log("UserSettings key <"+ key +"> not find in supported keys.");
+ }
+ }
+ };
+})();;/**
+ * jscolor, JavaScript Color Picker
+ *
+ * @version 1.4.0
+ * @license GNU Lesser General Public License, http://www.gnu.org/copyleft/lesser.html
+ * @author Jan Odvarko, http://odvarko.cz
+ * @created 2008-06-15
+ * @updated 2012-07-06
+ * @link http://jscolor.com
+ */
+
+
+var jscolor = {
+
+
+ dir : '', // location of jscolor directory (leave empty to autodetect)
+ bindClass : 'color', // class name
+ binding : true, // automatic binding via
+ preloading : true, // use image preloading?
+
+
+ install : function() {
+ if (document.readyState === "complete") {
+ jscolor.init();
+ } else {
+ jscolor.addEvent(window, 'load', jscolor.init);
+ }
+ },
+
+
+ init : function() {
+ if(jscolor.binding) {
+ jscolor.bind();
+ }
+ if(jscolor.preloading) {
+ jscolor.preload();
+ }
+ },
+
+
+ getDir : function() {
+ return "/" + window.location.pathname.split("/")[1] + "/js/lib/jsColor_1_4_0/";
+ },
+
+
+ bind : function() {
+ var matchClass = new RegExp('(^|\\s)('+jscolor.bindClass+')\\s*(\\{[^}]*\\})?', 'i');
+ var e = document.getElementsByTagName('input');
+ for(var i=0; i vs[a] ?
+ (-vp[a]+tp[a]+ts[a]/2 > vs[a]/2 && tp[a]+ts[a]-ps[a] >= 0 ? tp[a]+ts[a]-ps[a] : tp[a]) :
+ tp[a],
+ -vp[b]+tp[b]+ts[b]+ps[b]-l+l*c > vs[b] ?
+ (-vp[b]+tp[b]+ts[b]/2 > vs[b]/2 && tp[b]+ts[b]-l-l*c >= 0 ? tp[b]+ts[b]-l-l*c : tp[b]+ts[b]-l+l*c) :
+ (tp[b]+ts[b]-l+l*c >= 0 ? tp[b]+ts[b]-l+l*c : tp[b]+ts[b]-l-l*c)
+ ];
+ }
+ drawPicker(pp[a], pp[b]);
+ }
+ };
+
+
+ this.importColor = function() {
+ if(!valueElement) {
+ this.exportColor();
+ } else {
+ if(!this.adjust) {
+ if(!this.fromString(valueElement.value, leaveValue)) {
+ styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
+ styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
+ styleElement.style.color = styleElement.jscStyle.color;
+ this.exportColor(leaveValue | leaveStyle);
+ }
+ } else if(!this.required && /^\s*$/.test(valueElement.value)) {
+ valueElement.value = '';
+ styleElement.style.backgroundImage = styleElement.jscStyle.backgroundImage;
+ styleElement.style.backgroundColor = styleElement.jscStyle.backgroundColor;
+ styleElement.style.color = styleElement.jscStyle.color;
+ this.exportColor(leaveValue | leaveStyle);
+
+ } else if(this.fromString(valueElement.value)) {
+ // OK
+ } else {
+ this.exportColor();
+ }
+ }
+ };
+
+
+ this.exportColor = function(flags) {
+ if(!(flags & leaveValue) && valueElement) {
+ var value = this.toString();
+ if(this.caps) { value = value.toUpperCase(); }
+ if(this.hash) { value = '#'+value; }
+ valueElement.value = value;
+ }
+ if(!(flags & leaveStyle) && styleElement) {
+ styleElement.style.backgroundImage = "none";
+ styleElement.style.backgroundColor =
+ '#'+this.toString();
+ styleElement.style.color =
+ 0.213 * this.rgb[0] +
+ 0.715 * this.rgb[1] +
+ 0.072 * this.rgb[2]
+ < 0.5 ? '#FFF' : '#000';
+ }
+ if(!(flags & leavePad) && isPickerOwner()) {
+ redrawPad();
+ }
+ if(!(flags & leaveSld) && isPickerOwner()) {
+ redrawSld();
+ }
+ };
+
+
+ this.fromHSV = function(h, s, v, flags) { // null = don't change
+ if(h !== null) { h = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, h)); }
+ if(s !== null) { s = Math.max(0.0, this.minS, Math.min(1.0, this.maxS, s)); }
+ if(v !== null) { v = Math.max(0.0, this.minV, Math.min(1.0, this.maxV, v)); }
+
+ this.rgb = HSV_RGB(
+ h===null ? this.hsv[0] : (this.hsv[0]=h),
+ s===null ? this.hsv[1] : (this.hsv[1]=s),
+ v===null ? this.hsv[2] : (this.hsv[2]=v)
+ );
+
+ this.exportColor(flags);
+ };
+
+
+ this.fromRGB = function(r, g, b, flags) { // null = don't change
+ if(r !== null) { r = Math.max(0.0, Math.min(1.0, r)); }
+ if(g !== null) { g = Math.max(0.0, Math.min(1.0, g)); }
+ if(b !== null) { b = Math.max(0.0, Math.min(1.0, b)); }
+
+ var hsv = RGB_HSV(
+ r===null ? this.rgb[0] : r,
+ g===null ? this.rgb[1] : g,
+ b===null ? this.rgb[2] : b
+ );
+ if(hsv[0] !== null) {
+ this.hsv[0] = Math.max(0.0, this.minH, Math.min(6.0, this.maxH, hsv[0]));
+ }
+ if(hsv[2] !== 0) {
+ this.hsv[1] = hsv[1]===null ? null : Math.max(0.0, this.minS, Math.min(1.0, this.maxS, hsv[1]));
+ }
+ this.hsv[2] = hsv[2]===null ? null : Math.max(0.0, this.minV, Math.min(1.0, this.maxV, hsv[2]));
+
+ // update RGB according to final HSV, as some values might be trimmed
+ var rgb = HSV_RGB(this.hsv[0], this.hsv[1], this.hsv[2]);
+ this.rgb[0] = rgb[0];
+ this.rgb[1] = rgb[1];
+ this.rgb[2] = rgb[2];
+
+ this.exportColor(flags);
+ };
+
+
+ this.fromString = function(hex, flags) {
+ var m = hex.match(/^\W*([0-9A-F]{3}([0-9A-F]{3})?)\W*$/i);
+ if(!m) {
+ return false;
+ } else {
+ if(m[1].length === 6) { // 6-char notation
+ this.fromRGB(
+ parseInt(m[1].substr(0,2),16) / 255,
+ parseInt(m[1].substr(2,2),16) / 255,
+ parseInt(m[1].substr(4,2),16) / 255,
+ flags
+ );
+ } else { // 3-char notation
+ this.fromRGB(
+ parseInt(m[1].charAt(0)+m[1].charAt(0),16) / 255,
+ parseInt(m[1].charAt(1)+m[1].charAt(1),16) / 255,
+ parseInt(m[1].charAt(2)+m[1].charAt(2),16) / 255,
+ flags
+ );
+ }
+ return true;
+ }
+ };
+
+
+ this.toString = function() {
+ return (
+ (0x100 | Math.round(255*this.rgb[0])).toString(16).substr(1) +
+ (0x100 | Math.round(255*this.rgb[1])).toString(16).substr(1) +
+ (0x100 | Math.round(255*this.rgb[2])).toString(16).substr(1)
+ );
+ };
+
+
+ function RGB_HSV(r, g, b) {
+ var n = Math.min(Math.min(r,g),b);
+ var v = Math.max(Math.max(r,g),b);
+ var m = v - n;
+ if(m === 0) { return [ null, 0, v ]; }
+ var h = r===n ? 3+(b-g)/m : (g===n ? 5+(r-b)/m : 1+(g-r)/m);
+ return [ h===6?0:h, m/v, v ];
+ }
+
+
+ function HSV_RGB(h, s, v) {
+ if(h === null) { return [ v, v, v ]; }
+ var i = Math.floor(h);
+ var f = i%2 ? h-i : 1-(h-i);
+ var m = v * (1 - s);
+ var n = v * (1 - s*f);
+ switch(i) {
+ case 6:
+ case 0: return [v,n,m];
+ case 1: return [n,v,m];
+ case 2: return [m,v,n];
+ case 3: return [m,n,v];
+ case 4: return [n,m,v];
+ case 5: return [v,m,n];
+ }
+ }
+
+
+ function removePicker() {
+ delete jscolor.picker.owner;
+ document.getElementsByTagName('body')[0].removeChild(jscolor.picker.boxB);
+ }
+
+
+ function drawPicker(x, y) {
+ if(!jscolor.picker) {
+ jscolor.picker = {
+ box : document.createElement('div'),
+ boxB : document.createElement('div'),
+ pad : document.createElement('div'),
+ padB : document.createElement('div'),
+ padM : document.createElement('div'),
+ sld : document.createElement('div'),
+ sldB : document.createElement('div'),
+ sldM : document.createElement('div'),
+ btn : document.createElement('div'),
+ btnS : document.createElement('span'),
+ btnT : document.createTextNode(THIS.pickerCloseText)
+ };
+ for(var i=0,segSize=4; i= 0 && row >= 0 && col < this.pixels.length && row < this.pixels[0].length;
+ };
+
+ ns.Frame.prototype.saveState = function () {
+ // remove all states past current state
+ this.previousStates.length = this.stateIndex + 1;
+ // push new state
+ this.previousStates.push(this.getPixels());
+ // set the stateIndex to latest saved state
+ this.stateIndex = this.previousStates.length - 1;
+ };
+
+ ns.Frame.prototype.loadPreviousState = function () {
+ if (this.stateIndex > 0) {
+ this.stateIndex--;
+ this.setPixels(this.previousStates[this.stateIndex]);
+ }
+ };
+
+ ns.Frame.prototype.loadNextState = function () {
+ if (this.stateIndex < this.previousStates.length - 1) {
+ this.stateIndex++;
+ this.setPixels(this.previousStates[this.stateIndex]);
+ }
+ };
+
+ ns.Frame.prototype.isSameSize = function (otherFrame) {
+ return this.getHeight() == otherFrame.getHeight() && this.getWidth() == otherFrame.getWidth();
+ };
+})();;(function () {
+ var ns = $.namespace('pskl.model');
+
+ ns.Layer = function (name) {
+ if (!name) {
+ throw 'Invalid arguments in Layer constructor : \'name\' is mandatory';
+ } else {
+ this.name = name;
+ this.frames = [];
+ }
+ };
+
+ ns.Layer.prototype.getName = function () {
+ return this.name;
+ };
+
+ ns.Layer.prototype.getFrames = function () {
+ return this.frames;
+ };
+
+ ns.Layer.prototype.getFrameAt = function (index) {
+ return this.frames[index];
+ };
+
+ ns.Layer.prototype.addFrame = function (frame) {
+ this.frames.push(frame);
+ };
+
+ ns.Layer.prototype.addFrameAt = function (frame, index) {
+ this.frames.splice(index, 0, frame);
+ };
+
+ ns.Layer.prototype.removeFrame = function (frame) {
+ var index = this.frames.indexOf(frame);
+ this.removeFrameAt(index);
+ };
+
+ ns.Layer.prototype.removeFrameAt = function (index) {
+ if (this.frames[index]) {
+ this.frames.splice(index, 1);
+ } else {
+ throw 'Invalid index in removeFrameAt : ' + index + ' (size : ' + this.length() + ')';
+ }
+ };
+
+ ns.Layer.prototype.moveFrame = function (fromIndex, toIndex) {
+ var frame = this.frames.splice(fromIndex, 1)[0];
+ this.frames.splice(toIndex, 0, frame);
+ };
+
+ ns.Layer.prototype.swapFramesAt = function (fromIndex, toIndex) {
+ var fromFrame = this.frames[fromIndex];
+ var toFrame = this.frames[toIndex];
+ if (fromFrame && toFrame) {
+ this.frames[toIndex] = fromFrame;
+ this.frames[fromIndex] = toFrame;
+ } else {
+ console.log('frames', this.frames);
+ console.log('fromIndex', fromIndex, 'toIndex', toIndex);
+ throw 'Frame not found in moveFrameAt';
+ }
+ };
+
+ ns.Layer.prototype.duplicateFrame = function (frame) {
+ var index = this.frames.indexOf(frame);
+ this.duplicateFrameAt();
+ };
+
+ ns.Layer.prototype.duplicateFrameAt = function (index) {
+ var frame = this.frames[index];
+ if (frame) {
+ var clone = frame.clone();
+ this.addFrameAt(clone, index);
+ } else {
+ throw 'Frame not found in duplicateFrameAt';
+ }
+ };
+
+ ns.Layer.prototype.length = function () {
+ return this.frames.length;
+ };
+})();;(function () {
+ var ns = $.namespace('pskl.model');
+
+ /**
+ * @constructor
+ * @param {Number} width
+ * @param {Number} height
+ */
+ ns.Piskel = function (width, height) {
+ if (width && height) {
+ /** @type {Array} */
+ this.layers = [];
+
+ /** @type {Number} */
+ this.width = width;
+
+ /** @type {Number} */
+ this.height = height;
+ } else {
+ throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ",");
+ }
+ };
+
+ ns.Piskel.prototype.getLayers = function () {
+ return this.layers;
+ };
+
+ ns.Piskel.prototype.getHeight = function () {
+ return this.height;
+ };
+
+ ns.Piskel.prototype.getWidth = function () {
+ return this.width;
+ };
+
+ ns.Piskel.prototype.getLayers = function () {
+ return this.layers;
+ };
+
+ ns.Piskel.prototype.getLayerAt = function (index) {
+ return this.layers[index];
+ };
+
+ ns.Piskel.prototype.getLayersByName = function (name) {
+ return this.layers.filter(function (l) {
+ return l.getName() == name;
+ });
+ };
+
+ ns.Piskel.prototype.addLayer = function (layer) {
+ this.layers.push(layer);
+ };
+
+ ns.Piskel.prototype.moveLayerUp = function (layer) {
+ var index = this.layers.indexOf(layer);
+ if (index > -1 && index < this.layers.length-1) {
+ this.layers[index] = this.layers[index+1];
+ this.layers[index+1] = layer;
+ }
+ };
+
+ ns.Piskel.prototype.moveLayerDown = function (layer) {
+ var index = this.layers.indexOf(layer);
+ if (index > 0) {
+ this.layers[index] = this.layers[index-1];
+ this.layers[index-1] = layer;
+ }
+ };
+
+ ns.Piskel.prototype.removeLayer = function (layer) {
+ var index = this.layers.indexOf(layer);
+ if (index != -1) {
+ this.layers.splice(index, 1);
+ }
+ };
+
+ ns.Piskel.prototype.removeLayerAt = function (index) {
+ this.layers.splice(index, 1);
+ };
+
+})();;(function () {
+ var ns = $.namespace("pskl.selection");
+
+ ns.SelectionManager = function (piskelController) {
+
+ this.piskelController = piskelController;
+
+ this.currentSelection = null;
+ };
+
+ ns.SelectionManager.prototype.init = function () {
+ $.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
+ $.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
+ $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
+
+ $.subscribe(Events.PASTE, $.proxy(this.onPaste_, this));
+ $.subscribe(Events.COPY, $.proxy(this.onCopy_, this));
+ $.subscribe(Events.CUT, $.proxy(this.onCut_, this));
+
+ $.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
+ };
+
+ /**
+ * @private
+ */
+ ns.SelectionManager.prototype.cleanSelection_ = function() {
+ if(this.currentSelection) {
+ this.currentSelection.reset();
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.SelectionManager.prototype.onToolSelected_ = function(evt, tool) {
+ var isSelectionTool = tool instanceof pskl.drawingtools.BaseSelect;
+ if(!isSelectionTool) {
+ this.cleanSelection_();
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.SelectionManager.prototype.onSelectionDismissed_ = function(evt) {
+ this.cleanSelection_();
+ };
+
+ /**
+ * @private
+ */
+ ns.SelectionManager.prototype.onCut_ = function(evt) {
+ if(this.currentSelection) {
+ // Put cut target into the selection:
+ this.currentSelection.fillSelectionFromFrame(this.piskelController.getCurrentFrame());
+
+ var pixels = this.currentSelection.pixels;
+ var currentFrame = this.piskelController.getCurrentFrame();
+ for(var i=0, l=pixels.length; i undefined.';
+ }
+
+ if(isNaN(renderingOptions.dpi)) {
+ throw 'Bad FrameRenderer initialization. not well defined.';
+ }
+
+ this.container = container;
+
+ this.dpi = renderingOptions.dpi;
+ this.supportGridRendering = renderingOptions.supportGridRendering;
+
+ this.classes = classes || [];
+ this.classes.push('canvas');
+
+ this.canvas = null;
+
+ this.enableGrid(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID));
+
+ // Flag to know if the config was altered
+ this.canvasConfigDirty = true;
+ this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
+ $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
+ };
+
+ ns.FrameRenderer.prototype.setDPI = function (dpi) {
+ this.dpi = dpi;
+ this.canvasConfigDirty = true;
+ };
+
+ /**
+ * @private
+ */
+ ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
+
+ if(settingName == pskl.UserSettings.SHOW_GRID) {
+ this.enableGrid(settingValue);
+ }
+ else if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
+ this.updateBackgroundClass_(settingValue);
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.FrameRenderer.prototype.updateBackgroundClass_ = function (newClass) {
+ var currentClass = this.container.data('current-background-class');
+ if (currentClass) {
+ this.container.removeClass(currentClass);
+ }
+ this.container.addClass(newClass);
+ this.container.data('current-background-class', newClass);
+ };
+
+ ns.FrameRenderer.prototype.enableGrid = function (flag) {
+ this.gridStrokeWidth = (flag && this.supportGridRendering) ? Constants.GRID_STROKE_WIDTH : 0;
+ this.canvasConfigDirty = true;
+ };
+
+ ns.FrameRenderer.prototype.render = function (frame) {
+ if (frame) {
+ this.clear();
+ var context = this.getCanvas_(frame).getContext('2d');
+ for(var col = 0, width = frame.getWidth(); col < width; col++) {
+ for(var row = 0, height = frame.getHeight(); row < height; row++) {
+ var color = frame.getPixel(col, row);
+ this.renderPixel_(color, col, row, context);
+ }
+ }
+ this.lastRenderedFrame = frame;
+ }
+ };
+
+ ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
+ if(color != Constants.TRANSPARENT_COLOR) {
+ context.fillStyle = color;
+ context.fillRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);
+ }
+ };
+
+ ns.FrameRenderer.prototype.clear = function () {
+ if (this.canvas) {
+ this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width, this.canvas.height);
+ }
+ };
+
+ /**
+ * Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
+ * frame) into a sprite coordinate in column and row.
+ * @public
+ */
+ ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) {
+ var cellSize = this.dpi + this.gridStrokeWidth;
+ return {
+ "col" : (coords.x - coords.x % cellSize) / cellSize,
+ "row" : (coords.y - coords.y % cellSize) / cellSize
+ };
+ };
+
+ /**
+ * @private
+ */
+ ns.FrameRenderer.prototype.getFramePos_ = function(index) {
+ return index * this.dpi + ((index - 1) * this.gridStrokeWidth);
+ };
+
+ /**
+ * @private
+ */
+ ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
+ if(this.canvasConfigDirty) {
+ $(this.canvas).remove();
+
+ var col = frame.getWidth(),
+ row = frame.getHeight();
+
+ var pixelWidth = col * this.dpi + this.gridStrokeWidth * (col - 1);
+ var pixelHeight = row * this.dpi + this.gridStrokeWidth * (row - 1);
+
+ var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, this.classes);
+ this.container.append(canvas);
+
+ this.canvas = canvas;
+ this.canvasConfigDirty = false;
+ }
+ return this.canvas;
+ };
+})();;(function () {
+
+ var ns = $.namespace("pskl.rendering");
+
+ ns.SpritesheetRenderer = function (piskelController) {
+ this.piskelController = piskelController;
+ };
+
+ ns.SpritesheetRenderer.prototype.render = function () {
+ var canvas = this.createCanvas_();
+ for (var i = 0 ; i < this.piskelController.getFrameCount() ; i++) {
+ var frame = this.piskelController.getFrameAt(i);
+ this.drawFrameInCanvas_(frame, canvas, i * this.piskelController.getWidth(), 0);
+ }
+ return canvas;
+ };
+
+ /**
+ * TODO(juliandescottes): Mutualize with code already present in FrameRenderer
+ */
+ ns.SpritesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
+ var context = canvas.getContext('2d');
+ for(var col = 0, width = frame.getWidth(); col < width; col++) {
+ for(var row = 0, height = frame.getHeight(); row < height; row++) {
+ var color = frame.getPixel(col, row);
+ if(color != Constants.TRANSPARENT_COLOR) {
+ context.fillStyle = color;
+ context.fillRect(col + offsetWidth, row + offsetHeight, 1, 1);
+ }
+ }
+ }
+ };
+
+ ns.SpritesheetRenderer.prototype.createCanvas_ = function () {
+ var frameCount = this.piskelController.getFrameCount();
+ if (frameCount > 0){
+ var width = frameCount * this.piskelController.getWidth();
+ var height = this.piskelController.getHeight();
+ return pskl.CanvasUtils.createCanvas(width, height);
+ } else {
+ throw "Cannot render empty Spritesheet";
+ }
+ };
+})();;(function () {
+ var ns = $.namespace('pskl.controller');
+
+ ns.PiskelController = function (piskel) {
+ if (piskel) {
+ this.setPiskel(piskel);
+ } else {
+ throw 'A piskel instance is mandatory for instanciating PiskelController';
+ }
+ };
+
+ ns.PiskelController.prototype.setPiskel = function (piskel) {
+ this.piskel = piskel;
+ this.currentLayerIndex = 0;
+ this.currentFrameIndex = 0;
+
+ this.layerIdCounter = 1;
+
+ $.publish(Events.PISKEL_RESET);
+ $.publish(Events.FRAME_SIZE_CHANGED);
+ };
+
+ ns.PiskelController.prototype.getHeight = function () {
+ return this.piskel.getHeight();
+ };
+
+ ns.PiskelController.prototype.getWidth = function () {
+ return this.piskel.getWidth();
+ };
+
+ /**
+ * TODO : this should be removed
+ * FPS should be stored in the Piskel model and not in the
+ * animationController
+ * Then piskelController should be able to return this information
+ * @return {Number} Frames per second for the current animation
+ */
+ ns.PiskelController.prototype.getFPS = function () {
+ return pskl.app.animationController.getFPS();
+ };
+
+ ns.PiskelController.prototype.getLayers = function () {
+ return this.piskel.getLayers();
+ };
+
+ ns.PiskelController.prototype.getCurrentLayer = function () {
+ return this.piskel.getLayerAt(this.currentLayerIndex);
+ };
+
+ ns.PiskelController.prototype.getCurrentFrame = function () {
+ var layer = this.getCurrentLayer();
+ return layer.getFrameAt(this.currentFrameIndex);
+ };
+
+ ns.PiskelController.prototype.getFrameAt = function (index) {
+ var frames = this.getLayers().map(function (l) {
+ return l.getFrameAt(index);
+ });
+ return pskl.utils.FrameUtils.merge(frames);
+ };
+
+ ns.PiskelController.prototype.hasFrameAt = function (index) {
+ return !!this.getCurrentLayer().getFrameAt(index);
+ };
+
+ // backward from framesheet
+ ns.PiskelController.prototype.getFrameByIndex =
+ ns.PiskelController.prototype.getMergedFrameAt;
+
+ ns.PiskelController.prototype.addEmptyFrame = function () {
+ var layers = this.getLayers();
+ layers.forEach(function (l) {
+ l.addFrame(this.createEmptyFrame_());
+ }.bind(this));
+ };
+
+ ns.PiskelController.prototype.createEmptyFrame_ = function () {
+ var w = this.piskel.getWidth(), h = this.piskel.getHeight();
+ return new pskl.model.Frame(w, h);
+ };
+
+ ns.PiskelController.prototype.removeFrameAt = function (index) {
+ var layers = this.getLayers();
+ layers.forEach(function (l) {
+ l.removeFrameAt(index);
+ });
+ // Current frame index is impacted if the removed frame was before the current frame
+ if (this.currentFrameIndex >= index) {
+ this.setCurrentFrameIndex(this.currentFrameIndex - 1);
+ }
+
+ $.publish(Events.PISKEL_RESET);
+ };
+
+ ns.PiskelController.prototype.duplicateFrameAt = function (index) {
+ var layers = this.getLayers();
+ layers.forEach(function (l) {
+ l.duplicateFrameAt(index);
+ });
+ };
+
+ ns.PiskelController.prototype.moveFrame = function (fromIndex, toIndex) {
+ var layers = this.getLayers();
+ layers.forEach(function (l) {
+ l.moveFrame(fromIndex, toIndex);
+ });
+ };
+
+ ns.PiskelController.prototype.getFrameCount = function () {
+ var layer = this.piskel.getLayerAt(0);
+ return layer.length();
+ };
+
+ ns.PiskelController.prototype.setCurrentFrameIndex = function (index) {
+ this.currentFrameIndex = index;
+ $.publish(Events.PISKEL_RESET);
+ };
+
+ ns.PiskelController.prototype.setCurrentLayerIndex = function (index) {
+ this.currentLayerIndex = index;
+ $.publish(Events.PISKEL_RESET);
+ };
+
+ ns.PiskelController.prototype.selectLayer = function (layer) {
+ var index = this.getLayers().indexOf(layer);
+ if (index != -1) {
+ this.setCurrentLayerIndex(index);
+ }
+ };
+
+ ns.PiskelController.prototype.selectLayerByName = function (name) {
+ if (this.hasLayerForName_(name)) {
+ var layer = this.piskel.getLayersByName(name)[0];
+ this.selectLayer(layer);
+ }
+ };
+
+ ns.PiskelController.prototype.generateLayerName_ = function () {
+ var name = "Layer " + this.layerIdCounter;
+ while (this.hasLayerForName_(name)) {
+ this.layerIdCounter++;
+ name = "Layer " + this.layerIdCounter;
+ }
+ return name;
+ };
+
+ ns.PiskelController.prototype.createLayer = function (name) {
+ if (!name) {
+ name = this.generateLayerName_();
+ }
+ if (!this.hasLayerForName_(name)) {
+ var layer = new pskl.model.Layer(name);
+ for (var i = 0 ; i < this.getFrameCount() ; i++) {
+ layer.addFrame(this.createEmptyFrame_());
+ }
+ this.piskel.addLayer(layer);
+ this.setCurrentLayerIndex(this.piskel.getLayers().length - 1);
+ } else {
+ throw 'Layer name should be unique';
+ }
+ };
+
+ ns.PiskelController.prototype.hasLayerForName_ = function (name) {
+ return this.piskel.getLayersByName(name).length > 0;
+ };
+
+ ns.PiskelController.prototype.moveLayerUp = function () {
+ var layer = this.getCurrentLayer();
+ this.piskel.moveLayerUp(layer);
+ this.selectLayer(layer);
+ };
+
+ ns.PiskelController.prototype.moveLayerDown = function () {
+ var layer = this.getCurrentLayer();
+ this.piskel.moveLayerDown(layer);
+ this.selectLayer(layer);
+ };
+
+ ns.PiskelController.prototype.removeCurrentLayer = function () {
+ if (this.getLayers().length > 1) {
+ var layer = this.getCurrentLayer();
+ this.piskel.removeLayer(layer);
+ this.setCurrentLayerIndex(0);
+ }
+ };
+
+ ns.PiskelController.prototype.serialize = function () {
+ return pskl.utils.Serializer.serializePiskel(this.piskel);
+ };
+
+ ns.PiskelController.prototype.load = function (data) {
+ this.deserialize(JSON.stringify(data));
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.controller");
+ ns.DrawingController = function (piskelController, container) {
+ /**
+ * @public
+ */
+ this.piskelController = piskelController;
+
+ /**
+ * @public
+ */
+ this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(piskelController.getCurrentFrame());
+
+ /**
+ * @private
+ */
+ this.container = container;
+
+ this.dpi = this.calculateDPI_();
+
+ // TODO(vincz): Store user prefs in a localstorage string ?
+ var renderingOptions = {
+ "dpi": this.dpi,
+ "supportGridRendering" : true
+ };
+
+ this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, ["canvas-overlay"]);
+ this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, ["drawing-canvas"]);
+ this.layersBelowRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, ["layers-canvas", "layers-below-canvas"]);
+ this.layersAboveRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, ["layers-canvas", "layers-above-canvas"]);
+
+
+ // State of drawing controller:
+ this.isClicked = false;
+ this.isRightClicked = false;
+ this.previousMousemoveTime = 0;
+ this.currentToolBehavior = null;
+ this.primaryColor = Constants.DEFAULT_PEN_COLOR;
+ this.secondaryColor = Constants.TRANSPARENT_COLOR;
+ };
+
+ ns.DrawingController.prototype.init = function () {
+ this.initMouseBehavior();
+
+ $.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
+ console.log("Tool selected: ", toolBehavior);
+ this.currentToolBehavior = toolBehavior;
+ this.overlayFrame.clear();
+ }, this));
+
+ /**
+ * TODO(grosbouddha): Primary/secondary color state are kept in this general controller.
+ * Find a better place to store that. Perhaps PaletteController?
+ */
+ $.subscribe(Events.PRIMARY_COLOR_SELECTED, $.proxy(function(evt, color) {
+ console.log("Primary color selected: ", color);
+ this.primaryColor = color;
+ $.publish(Events.PRIMARY_COLOR_UPDATED, [color]);
+ }, this));
+ $.subscribe(Events.SECONDARY_COLOR_SELECTED, $.proxy(function(evt, color) {
+ console.log("Secondary color selected: ", color);
+ this.secondaryColor = color;
+ $.publish(Events.SECONDARY_COLOR_UPDATED, [color]);
+ }, this));
+
+ $(window).resize($.proxy(this.startDPIUpdateTimer_, this));
+
+ $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
+ $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.updateDPI_, this));
+
+ this.updateDPI_();
+ };
+
+ ns.DrawingController.prototype.initMouseBehavior = function() {
+ var body = $('body');
+ this.container.mousedown($.proxy(this.onMousedown_, this));
+ this.container.mousemove($.proxy(this.onMousemove_, this));
+ body.mouseup($.proxy(this.onMouseup_, this));
+
+ // Deactivate right click:
+ body.contextmenu(this.onCanvasContextMenu_);
+ };
+
+
+
+ ns.DrawingController.prototype.startDPIUpdateTimer_ = function () {
+ if (this.dpiUpdateTimer) {
+ window.clearInterval(this.dpiUpdateTimer);
+ }
+ this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPI_, this), 200);
+ },
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
+ if(settingsName == pskl.UserSettings.SHOW_GRID) {
+ this.updateDPI_();
+ }
+ },
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.onMousedown_ = function (event) {
+ this.isClicked = true;
+
+ if(event.button == 2) { // right click
+ this.isRightClicked = true;
+ $.publish(Events.CANVAS_RIGHT_CLICKED);
+ }
+
+ var coords = this.getSpriteCoordinates(event);
+
+ this.currentToolBehavior.applyToolAt(
+ coords.col, coords.row,
+ this.getCurrentColor_(),
+ this.piskelController.getCurrentFrame(),
+ this.overlayFrame,
+ this.wrapEvtInfo_(event)
+ );
+
+ $.publish(Events.LOCALSTORAGE_REQUEST);
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.onMousemove_ = function (event) {
+ var currentTime = new Date().getTime();
+ // Throttling of the mousemove event:
+ if ((currentTime - this.previousMousemoveTime) > 40 ) {
+ var coords = this.getSpriteCoordinates(event);
+ if (this.isClicked) {
+
+ this.currentToolBehavior.moveToolAt(
+ coords.col, coords.row,
+ this.getCurrentColor_(),
+ this.piskelController.getCurrentFrame(),
+ this.overlayFrame,
+ this.wrapEvtInfo_(event)
+ );
+
+ // TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
+ // Eg when drawing, it may make sense to have it here. However for a non drawing tool,
+ // you don't need to draw anything when mousemoving and you request useless localStorage.
+ $.publish(Events.LOCALSTORAGE_REQUEST);
+ } else {
+
+ this.currentToolBehavior.moveUnactiveToolAt(
+ coords.col, coords.row,
+ this.getCurrentColor_(),
+ this.piskelController.getCurrentFrame(),
+ this.overlayFrame,
+ this.wrapEvtInfo_(event)
+ );
+ }
+ this.previousMousemoveTime = currentTime;
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.onMouseup_ = function (event) {
+ if(this.isClicked || this.isRightClicked) {
+ // A mouse button was clicked on the drawing canvas before this mouseup event,
+ // the user was probably drawing on the canvas.
+ // Note: The mousemove movement (and the mouseup) may end up outside
+ // of the drawing canvas.
+
+ this.isClicked = false;
+ this.isRightClicked = false;
+
+ var coords = this.getSpriteCoordinates(event);
+ //console.log("mousemove: col: " + spriteCoordinate.col + " - row: " + spriteCoordinate.row);
+ this.currentToolBehavior.releaseToolAt(
+ coords.col, coords.row,
+ this.getCurrentColor_(),
+ this.piskelController.getCurrentFrame(),
+ this.overlayFrame,
+ this.wrapEvtInfo_(event)
+ );
+
+ $.publish(Events.TOOL_RELEASED);
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.wrapEvtInfo_ = function (event) {
+ var evtInfo = {};
+ if (event.button === 0) {
+ evtInfo.button = Constants.LEFT_BUTTON;
+ } else if (event.button == 2) {
+ evtInfo.button = Constants.RIGHT_BUTTON;
+ }
+ return evtInfo;
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
+ var canvasPageOffset = this.container.offset();
+ return {
+ x : clientX - canvasPageOffset.left,
+ y : clientY - canvasPageOffset.top
+ };
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
+ var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
+ return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.getCurrentColor_ = function () {
+ if(this.isRightClicked) {
+ return this.secondaryColor;
+ } else {
+ return this.primaryColor;
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
+ if ($(event.target).closest('#drawing-canvas-container').length) {
+ // Deactivate right click on drawing canvas only.
+ event.preventDefault();
+ event.stopPropagation();
+ event.cancelBubble = true;
+ return false;
+ }
+ };
+
+ ns.DrawingController.prototype.render = function () {
+ this.renderLayers();
+ this.renderFrame();
+ this.renderOverlay();
+ };
+
+ ns.DrawingController.prototype.renderFrame = function () {
+ var frame = this.piskelController.getCurrentFrame();
+ var serializedFrame = this.dpi + "-" + frame.serialize();
+ if (this.serializedFrame != serializedFrame) {
+ if (!frame.isSameSize(this.overlayFrame)) {
+ this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame);
+ }
+ this.serializedFrame = serializedFrame;
+ this.renderer.render(frame);
+ }
+ };
+
+ ns.DrawingController.prototype.renderOverlay = function () {
+ var serializedOverlay = this.dpi + "-" + this.overlayFrame.serialize();
+ if (this.serializedOverlay != serializedOverlay) {
+ this.serializedOverlay = serializedOverlay;
+ this.overlayRenderer.render(this.overlayFrame);
+ }
+ };
+
+ ns.DrawingController.prototype.renderLayers = function () {
+ var layers = this.piskelController.getLayers();
+ var currentFrameIndex = this.piskelController.currentFrameIndex;
+ var currentLayerIndex = this.piskelController.currentLayerIndex;
+
+ var serializedLayerFrame = [
+ this.dpi,
+ currentFrameIndex,
+ currentLayerIndex,
+ layers.length
+ ].join("-");
+
+ if (this.serializedLayerFrame != serializedLayerFrame) {
+ this.layersAboveRenderer.clear();
+ this.layersBelowRenderer.clear();
+
+ var downLayers = layers.slice(0, currentLayerIndex);
+ var downFrame = this.getFrameForLayersAt_(currentFrameIndex, downLayers);
+ this.layersBelowRenderer.render(downFrame);
+
+ if (currentLayerIndex + 1 < layers.length) {
+ var upLayers = layers.slice(currentLayerIndex + 1, layers.length);
+ var upFrame = this.getFrameForLayersAt_(currentFrameIndex, upLayers);
+ this.layersAboveRenderer.render(upFrame);
+ }
+
+ this.serializedLayerFrame = serializedLayerFrame;
+ }
+ };
+
+ ns.DrawingController.prototype.getFrameForLayersAt_ = function (frameIndex, layers) {
+ var frames = layers.map(function (l) {
+ return l.getFrameAt(frameIndex);
+ });
+ return pskl.utils.FrameUtils.merge(frames);
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.calculateDPI_ = function() {
+ var availableViewportHeight = $('#main-wrapper').height(),
+ leftSectionWidth = $('.left-column').outerWidth(true),
+ rightSectionWidth = $('.right-column').outerWidth(true),
+ availableViewportWidth = $('#main-wrapper').width() - leftSectionWidth - rightSectionWidth,
+ framePixelHeight = this.piskelController.getCurrentFrame().getHeight(),
+ framePixelWidth = this.piskelController.getCurrentFrame().getWidth();
+
+ if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) {
+ availableViewportWidth = availableViewportWidth - (framePixelWidth * Constants.GRID_STROKE_WIDTH);
+ availableViewportHeight = availableViewportHeight - (framePixelHeight * Constants.GRID_STROKE_WIDTH);
+ }
+
+ var dpi = pskl.PixelUtils.calculateDPI(
+ availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth);
+
+ return dpi;
+ };
+
+ /**
+ * @private
+ */
+ ns.DrawingController.prototype.updateDPI_ = function() {
+ this.dpi = this.calculateDPI_();
+
+ this.overlayRenderer.setDPI(this.dpi);
+ this.renderer.setDPI(this.dpi);
+ this.layersAboveRenderer.setDPI(this.dpi);
+ this.layersBelowRenderer.setDPI(this.dpi);
+
+ var currentFrameHeight = this.piskelController.getCurrentFrame().getHeight();
+ var canvasHeight = currentFrameHeight * this.dpi;
+ if (pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID)) {
+ canvasHeight += Constants.GRID_STROKE_WIDTH * currentFrameHeight;
+ }
+
+ var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - canvasHeight) / 2);
+ $('#column-wrapper').css({
+ 'top': verticalGapInPixel + 'px',
+ 'height': canvasHeight + 'px'
+ });
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.controller");
+ ns.PreviewFilmController = function (piskelController, container, dpi) {
+
+ this.piskelController = piskelController;
+ this.container = container;
+ this.dpi = this.calculateDPI_();
+
+ this.redrawFlag = true;
+ };
+
+ ns.PreviewFilmController.prototype.init = function() {
+ $.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
+ $.subscribe(Events.PISKEL_RESET, this.flagForRedraw_.bind(this));
+ $.subscribe(Events.PISKEL_RESET, this.refreshDPI_.bind(this));
+
+ $('#preview-list-scroller').scroll(this.updateScrollerOverflows.bind(this));
+ this.updateScrollerOverflows();
+ };
+
+ ns.PreviewFilmController.prototype.addFrame = function () {
+ this.piskelController.addEmptyFrame();
+ this.piskelController.setCurrentFrameIndex(this.piskelController.getFrameCount() - 1);
+ this.updateScrollerOverflows();
+ };
+
+ ns.PreviewFilmController.prototype.flagForRedraw_ = function () {
+ this.redrawFlag = true;
+ };
+
+ ns.PreviewFilmController.prototype.refreshDPI_ = function () {
+ this.dpi = this.calculateDPI_();
+ };
+
+ ns.PreviewFilmController.prototype.render = function () {
+ if (this.redrawFlag) {
+ // TODO(vincz): Full redraw on any drawing modification, optimize.
+ this.createPreviews_();
+ this.redrawFlag = false;
+ }
+ };
+
+ ns.PreviewFilmController.prototype.updateScrollerOverflows = function () {
+ var scroller = $('#preview-list-scroller');
+ var scrollerHeight = scroller.height();
+ var scrollTop = scroller.scrollTop();
+ var scrollerContentHeight = $('#preview-list').height();
+ var treshold = $('.top-overflow').height();
+ var overflowTop = false,
+ overflowBottom = false;
+ if (scrollerHeight < scrollerContentHeight) {
+ if (scrollTop > treshold) {
+ overflowTop = true;
+ }
+ var scrollBottom = (scrollerContentHeight - scrollTop) - scrollerHeight;
+ if (scrollBottom > treshold) {
+ overflowBottom = true;
+ }
+ }
+ var wrapper = $('#preview-list-wrapper');
+ wrapper.toggleClass('top-overflow-visible', overflowTop);
+ wrapper.toggleClass('bottom-overflow-visible', overflowBottom);
+ };
+
+ ns.PreviewFilmController.prototype.createPreviews_ = function () {
+
+ this.container.html("");
+ // Manually remove tooltips since mouseout events were shortcut by the DOM refresh:
+ $(".tooltip").remove();
+
+ var frameCount = this.piskelController.getFrameCount();
+
+ for (var i = 0, l = frameCount; i < l ; i++) {
+ this.container.append(this.createPreviewTile_(i));
+ }
+ // Append 'new empty frame' button
+ var newFrameButton = document.createElement("div");
+ newFrameButton.id = "add-frame-action";
+ newFrameButton.className = "add-frame-action";
+ newFrameButton.innerHTML = "Add new frame
";
+ this.container.append(newFrameButton);
+
+ $(newFrameButton).click(this.addFrame.bind(this));
+
+ var needDragndropBehavior = (frameCount > 1);
+ if(needDragndropBehavior) {
+ this.initDragndropBehavior_();
+ }
+ this.updateScrollerOverflows();
+ };
+
+
+ /**
+ * @private
+ */
+ ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
+
+ $("#preview-list").sortable({
+ placeholder: "preview-tile-drop-proxy",
+ update: $.proxy(this.onUpdate_, this),
+ items: ".preview-tile"
+ });
+ $("#preview-list").disableSelection();
+ };
+
+ /**
+ * @private
+ */
+ ns.PreviewFilmController.prototype.onUpdate_ = function( event, ui ) {
+ var originFrameId = parseInt(ui.item.data("tile-number"), 10);
+ var targetInsertionId = $('.preview-tile').index(ui.item);
+
+ this.piskelController.moveFrame(originFrameId, targetInsertionId);
+ this.piskelController.setCurrentFrameIndex(targetInsertionId);
+
+ // TODO(grosbouddha): move localstorage request to the model layer?
+ $.publish(Events.LOCALSTORAGE_REQUEST);
+ };
+
+
+ /**
+ * @private
+ * TODO(vincz): clean this giant rendering function & remove listeners.
+ */
+ ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
+ var currentFrame = this.piskelController.getCurrentLayer().getFrameAt(tileNumber);
+
+ var previewTileRoot = document.createElement("li");
+ var classname = "preview-tile";
+ previewTileRoot.setAttribute("data-tile-number", tileNumber);
+
+ if (this.piskelController.getCurrentFrame() == currentFrame) {
+ classname += " selected";
+ }
+ previewTileRoot.className = classname;
+
+ var canvasContainer = document.createElement("div");
+ canvasContainer.className = "canvas-container";
+
+ var canvasBackground = document.createElement("div");
+ canvasBackground.className = "canvas-background";
+ canvasContainer.appendChild(canvasBackground);
+
+ previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
+
+ var cloneFrameButton = document.createElement("button");
+ cloneFrameButton.setAttribute('rel', 'tooltip');
+ cloneFrameButton.setAttribute('data-placement', 'right');
+ cloneFrameButton.setAttribute('title', 'Duplicate this frame');
+ cloneFrameButton.className = "tile-overlay duplicate-frame-action";
+ previewTileRoot.appendChild(cloneFrameButton);
+ cloneFrameButton.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
+
+ // TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
+ // is to make this update function (#createPreviewTile) less aggressive.
+ var renderingOptions = {"dpi": this.dpi };
+ var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, ["tile-view"]);
+ currentFrameRenderer.render(currentFrame);
+
+ previewTileRoot.appendChild(canvasContainer);
+
+ if(tileNumber > 0 || this.piskelController.getFrameCount() > 1) {
+ // Add 'remove frame' button.
+ var deleteButton = document.createElement("button");
+ deleteButton.setAttribute('rel', 'tooltip');
+ deleteButton.setAttribute('data-placement', 'right');
+ deleteButton.setAttribute('title', 'Delete this frame');
+ deleteButton.className = "tile-overlay delete-frame-action";
+ deleteButton.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
+ previewTileRoot.appendChild(deleteButton);
+
+ // Add 'dragndrop handle'.
+ var dndHandle = document.createElement("div");
+ dndHandle.className = "tile-overlay dnd-action";
+ previewTileRoot.appendChild(dndHandle);
+ }
+ var tileCount = document.createElement("div");
+ tileCount.className = "tile-overlay tile-count";
+ tileCount.innerHTML = tileNumber;
+ previewTileRoot.appendChild(tileCount);
+
+
+ return previewTileRoot;
+ };
+
+ ns.PreviewFilmController.prototype.onPreviewClick_ = function (index, evt) {
+ // has not class tile-action:
+ if(!evt.target.classList.contains('tile-overlay')) {
+ this.piskelController.setCurrentFrameIndex(index);
+ }
+ };
+
+ ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
+ this.piskelController.removeFrameAt(index);
+ $.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
+ this.updateScrollerOverflows();
+ };
+
+ ns.PreviewFilmController.prototype.onAddButtonClick_ = function (index, evt) {
+ this.piskelController.duplicateFrameAt(index);
+ $.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
+ this.piskelController.setCurrentFrameIndex(index + 1);
+ this.updateScrollerOverflows();
+ };
+
+ /**
+ * Calculate the preview DPI depending on the piskel size
+ */
+ ns.PreviewFilmController.prototype.calculateDPI_ = function () {
+ var curFrame = this.piskelController.getCurrentFrame(),
+ frameHeight = curFrame.getHeight(),
+ frameWidth = curFrame.getWidth(),
+ maxFrameDim = Math.max(frameWidth, frameHeight);
+
+ var previewHeight = Constants.PREVIEW_FILM_SIZE * frameHeight / maxFrameDim;
+ var previewWidth = Constants.PREVIEW_FILM_SIZE * frameWidth / maxFrameDim;
+
+ return pskl.PixelUtils.calculateDPI(previewHeight, previewWidth, frameHeight, frameWidth) || 1;
+ };
+})();;(function () {
+ var ns = $.namespace('pskl.controller');
+
+ ns.LayersListController = function (piskelController) {
+ this.piskelController = piskelController;
+ };
+
+ ns.LayersListController.prototype.init = function () {
+ this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template');
+ this.rootEl = document.querySelectorAll('.layers-list-container')[0];
+ this.layersListEl = document.querySelectorAll('.layers-list')[0];
+
+ this.rootEl.addEventListener('click', this.onClick_.bind(this));
+
+ $.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));
+
+ this.renderLayerList_();
+ };
+
+ ns.LayersListController.prototype.renderLayerList_ = function () {
+ this.layersListEl.innerHTML = '';
+ var layers = this.piskelController.getLayers();
+ layers.forEach(this.addLayerItem.bind(this));
+ };
+
+ ns.LayersListController.prototype.addLayerItem = function (layer) {
+ var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
+ layername : layer.getName()
+ });
+ var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml);
+ if (this.piskelController.getCurrentLayer() === layer) {
+ layerItem.classList.add('current-layer-item');
+ }
+ this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild);
+ };
+
+ ns.LayersListController.prototype.onClick_ = function (evt) {
+ var el = evt.target || evt.srcElement;
+ if (el.nodeName == 'BUTTON') {
+ this.onButtonClick_(el);
+ } else if (el.nodeName == 'LI') {
+ var layerName = el.getAttribute('data-layer-name');
+ this.piskelController.selectLayerByName(layerName);
+ }
+ };
+
+ ns.LayersListController.prototype.onButtonClick_ = function (button) {
+ var action = button.getAttribute('data-action');
+ if (action == 'up') {
+ this.piskelController.moveLayerUp();
+ } else if (action == 'down') {
+ this.piskelController.moveLayerDown();
+ } else if (action == 'add') {
+ this.piskelController.createLayer();
+ } else if (action == 'delete') {
+ this.piskelController.removeCurrentLayer();
+ }
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.controller");
+ ns.AnimatedPreviewController = function (piskelController, container, dpi) {
+ this.piskelController = piskelController;
+ this.container = container;
+
+ this.elapsedTime = 0;
+ this.currentIndex = 0;
+
+ this.setFPS(Constants.DEFAULT.FPS);
+
+ var renderingOptions = {
+ "dpi": this.calculateDPI_()
+ };
+ this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions);
+
+ $.subscribe(Events.FRAME_SIZE_CHANGED, this.updateDPI_.bind(this));
+ };
+
+ ns.AnimatedPreviewController.prototype.init = function () {
+ // the oninput event won't work on IE10 unfortunately, but at least will provide a
+ // consistent behavior across all other browsers that support the input type range
+ // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
+ $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
+ };
+
+ ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) {
+ this.setFPS(parseInt($("#preview-fps")[0].value, 10));
+ };
+
+ ns.AnimatedPreviewController.prototype.setFPS = function (fps) {
+ this.fps = fps;
+ $("#preview-fps").val(this.fps);
+ $("#display-fps").html(this.fps + " FPS");
+ };
+
+ ns.AnimatedPreviewController.prototype.getFPS = function () {
+ return this.fps;
+ };
+
+ ns.AnimatedPreviewController.prototype.render = function (delta) {
+ this.elapsedTime += delta;
+ var index = Math.floor(this.elapsedTime / (1000/this.fps));
+ if (index != this.currentIndex) {
+ this.currentIndex = index;
+ if (!this.piskelController.hasFrameAt(this.currentIndex)) {
+ this.currentIndex = 0;
+ this.elapsedTime = 0;
+ }
+ this.renderer.render(this.piskelController.getFrameAt(this.currentIndex));
+ }
+ };
+
+ /**
+ * Calculate the preview DPI depending on the framesheet size
+ */
+ ns.AnimatedPreviewController.prototype.calculateDPI_ = function () {
+ var previewSize = 200,
+ framePixelHeight = this.piskelController.getCurrentFrame().getHeight(),
+ framePixelWidth = this.piskelController.getCurrentFrame().getWidth();
+ // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
+
+ //return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
+ return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
+ };
+
+ ns.AnimatedPreviewController.prototype.updateDPI_ = function () {
+ this.dpi = this.calculateDPI_();
+ this.renderer.setDPI(this.dpi);
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.controller");
+
+
+ ns.ToolController = function () {
+
+ this.toolInstances = {
+ "simplePen" : new pskl.drawingtools.SimplePen(),
+ "verticalMirrorPen" : new pskl.drawingtools.VerticalMirrorPen(),
+ "eraser" : new pskl.drawingtools.Eraser(),
+ "paintBucket" : new pskl.drawingtools.PaintBucket(),
+ "stroke" : new pskl.drawingtools.Stroke(),
+ "rectangle" : new pskl.drawingtools.Rectangle(),
+ "circle" : new pskl.drawingtools.Circle(),
+ "move" : new pskl.drawingtools.Move(),
+ "rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
+ "shapeSelect" : new pskl.drawingtools.ShapeSelect(),
+ "colorPicker" : new pskl.drawingtools.ColorPicker()
+ };
+
+ this.currentSelectedTool = this.toolInstances.simplePen;
+ this.previousSelectedTool = this.toolInstances.simplePen;
+ };
+
+ /**
+ * @public
+ */
+ ns.ToolController.prototype.init = function() {
+ this.createToolMarkup_();
+
+ // Initialize tool:
+ // Set SimplePen as default selected tool:
+ this.selectTool_(this.toolInstances.simplePen);
+ // Activate listener on tool panel:
+ $("#tool-section").click($.proxy(this.onToolIconClicked_, this));
+ };
+
+ /**
+ * @private
+ */
+ ns.ToolController.prototype.activateToolOnStage_ = function(tool) {
+ var stage = $("body");
+ var previousSelectedToolClass = stage.data("selected-tool-class");
+ if(previousSelectedToolClass) {
+ stage.removeClass(previousSelectedToolClass);
+ }
+ stage.addClass(tool.toolId);
+ stage.data("selected-tool-class", tool.toolId);
+ };
+
+ /**
+ * @private
+ */
+ ns.ToolController.prototype.selectTool_ = function(tool) {
+ console.log("Selecting Tool:" , this.currentSelectedTool);
+ this.currentSelectedTool = tool;
+ this.activateToolOnStage_(this.currentSelectedTool);
+ $.publish(Events.TOOL_SELECTED, [tool]);
+ };
+
+ /**
+ * @private
+ */
+ ns.ToolController.prototype.onToolIconClicked_ = function(evt) {
+ var target = $(evt.target);
+ var clickedTool = target.closest(".tool-icon");
+
+ if(clickedTool.length) {
+ var toolId = clickedTool.data().toolId;
+ var tool = this.getToolById_(toolId);
+ if (tool) {
+ this.selectTool_(tool);
+
+ // Show tool as selected:
+ $('#tool-section .tool-icon.selected').removeClass('selected');
+ clickedTool.addClass('selected');
+ }
+ }
+ };
+
+ ns.ToolController.prototype.getToolById_ = function (toolId) {
+ for(var key in this.toolInstances) {
+ if (this.toolInstances[key].toolId == toolId) {
+ return this.toolInstances[key];
+ }
+ }
+ return null;
+ };
+
+ /**
+ * @private
+ */
+ ns.ToolController.prototype.createToolMarkup_ = function() {
+ var currentTool, toolMarkup = '', extraClass;
+ // TODO(vincz): Tools rendering order is not enforced by the data stucture (this.toolInstances), fix that.
+ for (var toolKey in this.toolInstances) {
+ currentTool = this.toolInstances[toolKey];
+ extraClass = currentTool.toolId;
+ if (this.currentSelectedTool == currentTool) {
+ extraClass = extraClass + " selected";
+ }
+ toolMarkup += '';
+ }
+ $('#tools-container').html(toolMarkup);
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.controller");
+
+ ns.PaletteController = function () {};
+
+ /**
+ * @public
+ */
+ ns.PaletteController.prototype.init = function() {
+ var transparentColorPalette = $(".palette-color[data-color=TRANSPARENT]");
+ transparentColorPalette.mouseup($.proxy(this.onPaletteColorClick_, this));
+
+ $.subscribe(Events.PRIMARY_COLOR_UPDATED, $.proxy(function(evt, color) {
+ this.updateColorPicker_(color, $('#color-picker'));
+ }, this));
+
+ $.subscribe(Events.SECONDARY_COLOR_UPDATED, $.proxy(function(evt, color) {
+ this.updateColorPicker_(color, $('#secondary-color-picker'));
+ }, this));
+
+ // Initialize colorpickers:
+ var colorPicker = $('#color-picker');
+ colorPicker.val(Constants.DEFAULT_PEN_COLOR);
+ colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
+
+
+ var secondaryColorPicker = $('#secondary-color-picker');
+ secondaryColorPicker.val(Constants.TRANSPARENT_COLOR);
+ secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
+
+ window.jscolor.install();
+ };
+
+ /**
+ * @private
+ */
+ ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
+ var inputPicker = $(evt.target);
+ if(evt.data.isPrimary) {
+ $.publish(Events.PRIMARY_COLOR_SELECTED, [inputPicker.val()]);
+ } else {
+ $.publish(Events.SECONDARY_COLOR_SELECTED, [inputPicker.val()]);
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.PaletteController.prototype.onPaletteColorClick_ = function (event) {
+ var selectedColor = $(event.target).data("color");
+ var isLeftClick = (event.which == 1);
+ var isRightClick = (event.which == 3);
+ if (isLeftClick) {
+ $.publish(Events.PRIMARY_COLOR_SELECTED, [selectedColor]);
+ } else if (isRightClick) {
+ $.publish(Events.SECONDARY_COLOR_SELECTED, [selectedColor]);
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.PaletteController.prototype.updateColorPicker_ = function (color, colorPicker) {
+ if (color == Constants.TRANSPARENT_COLOR) {
+ // We can set the current palette color to transparent.
+ // You can then combine this transparent color with an advanced
+ // tool for customized deletions.
+ // Eg: bucket + transparent: Delete a colored area
+ // Stroke + transparent: hollow out the equivalent of a stroke
+
+ // The colorpicker can't be set to a transparent state.
+ // We set its background to white and insert the
+ // string "TRANSPARENT" to mimic this state:
+ colorPicker[0].color.fromString("#fff");
+ colorPicker.val(Constants.TRANSPARENT_COLOR);
+ } else {
+ colorPicker[0].color.fromString(color);
+ }
+ };
+})();
+
+
+
+;(function () {
+ var ns = $.namespace("pskl.controller");
+
+ ns.NotificationController = function () {};
+
+ /**
+ * @public
+ */
+ ns.NotificationController.prototype.init = function() {
+ $.subscribe(Events.SHOW_NOTIFICATION, $.proxy(this.displayMessage_, this));
+ $.subscribe(Events.HIDE_NOTIFICATION, $.proxy(this.removeMessage_, this));
+ };
+
+ /**
+ * @private
+ */
+ ns.NotificationController.prototype.displayMessage_ = function (evt, messageInfo) {
+ var message = document.createElement('div');
+ message.id = "user-message";
+ message.className = "user-message";
+ message.innerHTML = messageInfo.content;
+ message.innerHTML = message.innerHTML + "x
";
+ document.body.appendChild(message);
+ $(message).find(".close").click($.proxy(this.removeMessage_, this));
+ if(messageInfo.behavior) {
+ messageInfo.behavior(message);
+ }
+ };
+
+ /**
+ * @private
+ */
+ ns.NotificationController.prototype.removeMessage_ = function (evt) {
+ var message = $("#user-message");
+ if (message.length) {
+ message.remove();
+ }
+ };
+})();
+;(function () {
+ var ns = $.namespace("pskl.controller.settings");
+
+ ns.ApplicationSettingsController = function () {};
+
+ /**
+ * @public
+ */
+ ns.ApplicationSettingsController.prototype.init = function() {
+ // Highlight selected background picker:
+ var backgroundClass = pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND);
+ $('#background-picker-wrapper')
+ .find('.background-picker[data-background-class=' + backgroundClass + ']')
+ .addClass('selected');
+
+ // Initial state for grid display:
+ var show_grid = pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID);
+ $('#show-grid').prop('checked', show_grid);
+
+ // Handle grid display changes:
+ $('#show-grid').change($.proxy(function(evt) {
+ var checked = $('#show-grid').prop('checked');
+ pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
+ }, this));
+
+ // Handle canvas background changes:
+ $('#background-picker-wrapper').click(function(evt) {
+ var target = $(evt.target).closest('.background-picker');
+ if (target.length) {
+ var backgroundClass = target.data('background-class');
+ pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
+
+ $('.background-picker').removeClass('selected');
+ target.addClass('selected');
+ }
+ });
+ };
+})();;(function () {
+ var ns = $.namespace("pskl.controller.settings");
+
+ ns.GifExportController = function (piskelController) {
+ this.piskelController = piskelController;
+ };
+
+ /**
+ * List of Resolutions applicable for Gif export
+ * @static
+ * @type {Array} array of Objects {dpi:{Number}, default:{Boolean}}
+ */
+ ns.GifExportController.RESOLUTIONS = [
+ {
+ 'dpi' : 1
+ },{
+ 'dpi' : 5
+ },{
+ 'dpi' : 10,
+ 'default' : true
+ },{
+ 'dpi' : 20
+ }
+ ];
+
+ ns.GifExportController.prototype.init = function () {
+ this.radioTemplate_ = pskl.utils.Template.get("gif-export-radio-template");
+
+ this.previewContainerEl = document.querySelectorAll(".gif-export-preview")[0];
+ this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0];
+
+ this.uploadForm = $("[name=gif-export-upload-form]");
+ this.uploadForm.submit(this.onUploadFormSubmit_.bind(this));
+
+ this.createRadioElements_();
+ };
+
+ ns.GifExportController.prototype.onUploadFormSubmit_ = function (evt) {
+ evt.originalEvent.preventDefault();
+ var selectedDpi = this.getSelectedDpi_(),
+ fps = this.piskelController.getFPS(),
+ dpi = selectedDpi;
+
+ this.renderAsImageDataAnimatedGIF(dpi, fps, this.onGifRenderingCompleted_.bind(this));
+ };
+
+ ns.GifExportController.prototype.onGifRenderingCompleted_ = function (imageData) {
+ this.updatePreview_(imageData);
+ this.previewContainerEl.classList.add("preview-upload-ongoing");
+ pskl.app.imageUploadService.upload(imageData, this.onImageUploadCompleted_.bind(this));
+ };
+
+ ns.GifExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
+ this.updatePreview_(imageUrl);
+ this.previewContainerEl.classList.remove("preview-upload-ongoing");
+ };
+
+ ns.GifExportController.prototype.updatePreview_ = function (src) {
+ this.previewContainerEl.innerHTML = "![]("+src+")