",
- 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,e,d,f;return c=new b(a.width,a.height),a.index===0?c.writeHeader():c.firstFrame=!1,c.setTransparent(a.transparent),c.setRepeat(a.repeat),c.setDelay(a.delay),c.setQuality(a.quality),c.setPreserveColors(a.preserveColors),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?(f=function(c){for(var b=0,d=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.setPreserveColors=function(a){this.preserveColors=a},b.prototype.writeHeader=function(){this.out.writeUTFBytes('GIF89a')},b.prototype.analyzePixels=function(){var h=this.pixels.length,d=h/3;this.indexedPixels=new Uint8Array(d);var a;this.preserveColors?a=new g(this.pixels,this.sample):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 h(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('/SimpleQuant.js',function(b,d,e,f){function a(a,b,c){return[a,b,c].join('.')}function c(b){this.pixels=b,this.palette=[],this.paletteIndex={},this.getColormap=function(){return this.palette},this.buildColormap=function(){var h=this.pixels.length/3,b=0;for(var c=0;c>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),a=0,e=b.length;aa;0<=a?++b:--b)c.push(b);return c}.apply(this,arguments),b=0,e=c.length;ba;this.freeWorkers.length<=a?++b:--b)c.push(b);return c}.apply(this,arguments).forEach(function(a){return function(c){var b;return console.log('spawning worker '+c),b=new Worker(a.options.workerScript),b.onmessage=function(a){return function(c){return a.activeWorkers.splice(a.activeWorkers.indexOf(b),1),a.freeWorkers.push(b),a.frameFinished(c.data)}}(a),a.freeWorkers.push(b)}}(this)),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,j(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,transparent:a.transparent,width:this.options.width,height:this.options.height,quality:this.options.quality,preserveColors:this.options.preserveColors,repeat:this.options.repeat,canTransfer:h.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}(f),d.exports=e}),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.6 - https://github.com/jnordberg/gif.js
-;( function( window ) { 'use strict';
-
-// Stream
-/**
- * @constructor
- */
-// Make compiler happy.
-var Stream = function (data) {
- this.data = data;
- this.len = this.data.length;
- this.pos = 0;
-};
-
-Stream.prototype.readByte = function () {
- if (this.pos >= this.data.length) {
- throw new Error('Attempted to read past end of stream.');
- }
- return this.data.charCodeAt(this.pos++) & 0xFF;
-};
-
-Stream.prototype.readBytes = function (n) {
- var bytes = [];
- for (var i = 0; i < n; i++) {
- bytes.push(this.readByte());
- }
- return bytes;
-};
-
-Stream.prototype.read = function (n) {
- var s = '';
- for (var i = 0; i < n; i++) {
- s += String.fromCharCode(this.readByte());
- }
- return s;
-};
-
-Stream.prototype.readUnsigned = function () { // Little-endian.
- var a = this.readBytes(2);
- return (a[1] << 8) + a[0];
-};
-
-var SuperGIF = window.SuperGIF = window.SuperGIF || {};
-SuperGIF.Stream = Stream;
-
-})( window );
-
-/*
- SuperGif
-
- Example usage:
-
- 
-
-
-
- Image tag attributes:
-
- data-animated-src - If this url is specified, it's loaded into the player instead of src.
- This allows a preview frame to be shown until animated gif data is streamed into the canvas
-
- Constructor options args
-
- gif Required. The DOM element of an img tag.
-
- Instance methods
-
- // loading
- load( callback ) Loads the gif into a canvas element and then calls callback if one is passed
-
- For additional customization (viewport inside iframe) these params may be passed:
- c_w, c_h - width and height of canvas
- vp_t, vp_l, vp_ w, vp_h - top, left, width and height of the viewport
-
- A bonus: few articles to understand what is going on
- http://enthusiasms.org/post/16976438906
- http://www.matthewflickinger.com/lab/whatsinagif/bits_and_bytes.asp
- http://humpy77.deviantart.com/journal/Frame-Delay-Times-for-Animated-GIFs-214150546
-
-*/
-
-( function( window ) { 'use strict';
-
-// Generic functions
-var bitsToNum = function (ba) {
- return ba.reduce(function (s, n) {
- return s * 2 + n;
- }, 0);
-};
-
-var byteToBitArr = function (bite) {
- var a = [];
- for (var i = 7; i >= 0; i--) {
- a.push( !! (bite & (1 << i)));
- }
- return a;
-};
-
-// Stream
-/**
- * @constructor
- */
-// Make compiler happy.
-var Stream = function (data) {
- this.data = data;
- this.len = this.data.length;
- this.pos = 0;
-
- this.readByte = function () {
- if (this.pos >= this.data.length) {
- throw new Error('Attempted to read past end of stream.');
- }
- return data.charCodeAt(this.pos++) & 0xFF;
- };
-
- this.readBytes = function (n) {
- var bytes = [];
- for (var i = 0; i < n; i++) {
- bytes.push(this.readByte());
- }
- return bytes;
- };
-
- this.read = function (n) {
- var s = '';
- for (var i = 0; i < n; i++) {
- s += String.fromCharCode(this.readByte());
- }
- return s;
- };
-
- this.readUnsigned = function () { // Little-endian.
- var a = this.readBytes(2);
- return (a[1] << 8) + a[0];
- };
-};
-
-var lzwDecode = function (minCodeSize, data) {
- // TODO: Now that the GIF parser is a bit different, maybe this should get an array of bytes instead of a String?
- var pos = 0; // Maybe this streaming thing should be merged with the Stream?
- var readCode = function (size) {
- var code = 0;
- for (var i = 0; i < size; i++) {
- if (data.charCodeAt(pos >> 3) & (1 << (pos & 7))) {
- code |= 1 << i;
- }
- pos++;
- }
- return code;
- };
-
- var output = [];
-
- var clearCode = 1 << minCodeSize;
- var eoiCode = clearCode + 1;
-
- var codeSize = minCodeSize + 1;
-
- var dict = [];
-
- var clear = function () {
- dict = [];
- codeSize = minCodeSize + 1;
- for (var i = 0; i < clearCode; i++) {
- dict[i] = [i];
- }
- dict[clearCode] = [];
- dict[eoiCode] = null;
-
- };
-
- var code;
- var last;
-
- while (true) {
- last = code;
- code = readCode(codeSize);
-
- if (code === clearCode) {
- clear();
- continue;
- }
- if (code === eoiCode) break;
-
- if (code < dict.length) {
- if (last !== clearCode) {
- dict.push(dict[last].concat(dict[code][0]));
- }
- }
- else {
- if (code !== dict.length) throw new Error('Invalid LZW code.');
- dict.push(dict[last].concat(dict[last][0]));
- }
- output.push.apply(output, dict[code]);
-
- if (dict.length === (1 << codeSize) && codeSize < 12) {
- // If we're at the last code and codeSize is 12, the next code will be a clearCode, and it'll be 12 bits long.
- codeSize++;
- }
- }
-
- // I don't know if this is technically an error, but some GIFs do it.
- //if (Math.ceil(pos / 8) !== data.length) throw new Error('Extraneous LZW bytes.');
- return output;
-};
-
-
-// The actual parsing; returns an object with properties.
-var parseGIF = function (st, handler) {
- handler || (handler = {});
-
- // LZW (GIF-specific)
- var parseCT = function (entries) { // Each entry is 3 bytes, for RGB.
- var ct = [];
- for (var i = 0; i < entries; i++) {
- ct.push(st.readBytes(3));
- }
- return ct;
- };
-
- var readSubBlocks = function () {
- var size, data;
- data = '';
- do {
- size = st.readByte();
- data += st.read(size);
- } while (size !== 0);
- return data;
- };
-
- var parseHeader = function () {
- var hdr = {};
- hdr.sig = st.read(3);
- hdr.ver = st.read(3);
- if (hdr.sig !== 'GIF') {
- handler.onError(); // XXX: This should probably be handled more nicely.
- throw new Error('Not a GIF file.');
- }
- hdr.width = st.readUnsigned();
- hdr.height = st.readUnsigned();
-
- var bits = byteToBitArr(st.readByte());
- hdr.gctFlag = bits.shift();
- hdr.colorRes = bitsToNum(bits.splice(0, 3));
- hdr.sorted = bits.shift();
- hdr.gctSize = bitsToNum(bits.splice(0, 3));
-
- hdr.bgColor = st.readByte();
- hdr.pixelAspectRatio = st.readByte(); // if not 0, aspectRatio = (pixelAspectRatio + 15) / 64
- if (hdr.gctFlag) {
- hdr.gct = parseCT(1 << (hdr.gctSize + 1));
- }
- handler.hdr && handler.hdr(hdr);
- };
-
- var parseExt = function (block) {
- var parseGCExt = function (block) {
- var blockSize = st.readByte(); // Always 4
- var bits = byteToBitArr(st.readByte());
- block.reserved = bits.splice(0, 3); // Reserved; should be 000.
- block.disposalMethod = bitsToNum(bits.splice(0, 3));
- block.userInput = bits.shift();
- block.transparencyGiven = bits.shift();
-
- block.delayTime = st.readUnsigned();
-
- block.transparencyIndex = st.readByte();
-
- block.terminator = st.readByte();
-
- handler.gce && handler.gce(block);
- };
-
- var parseComExt = function (block) {
- block.comment = readSubBlocks();
- handler.com && handler.com(block);
- };
-
- var parsePTExt = function (block) {
- // No one *ever* uses this. If you use it, deal with parsing it yourself.
- var blockSize = st.readByte(); // Always 12
- block.ptHeader = st.readBytes(12);
- block.ptData = readSubBlocks();
- handler.pte && handler.pte(block);
- };
-
- var parseAppExt = function (block) {
- var parseNetscapeExt = function (block) {
- var blockSize = st.readByte(); // Always 3
- block.unknown = st.readByte(); // ??? Always 1? What is this?
- block.iterations = st.readUnsigned();
- block.terminator = st.readByte();
- handler.app && handler.app.NETSCAPE && handler.app.NETSCAPE(block);
- };
-
- var parseUnknownAppExt = function (block) {
- block.appData = readSubBlocks();
- // FIXME: This won't work if a handler wants to match on any identifier.
- handler.app && handler.app[block.identifier] && handler.app[block.identifier](block);
- };
-
- var blockSize = st.readByte(); // Always 11
- block.identifier = st.read(8);
- block.authCode = st.read(3);
- switch (block.identifier) {
- case 'NETSCAPE':
- parseNetscapeExt(block);
- break;
- default:
- parseUnknownAppExt(block);
- break;
- }
- };
-
- var parseUnknownExt = function (block) {
- block.data = readSubBlocks();
- handler.unknown && handler.unknown(block);
- };
-
- block.label = st.readByte();
- switch (block.label) {
- case 0xF9:
- block.extType = 'gce';
- parseGCExt(block);
- break;
- case 0xFE:
- block.extType = 'com';
- parseComExt(block);
- break;
- case 0x01:
- block.extType = 'pte';
- parsePTExt(block);
- break;
- case 0xFF:
- block.extType = 'app';
- parseAppExt(block);
- break;
- default:
- block.extType = 'unknown';
- parseUnknownExt(block);
- break;
- }
- };
-
- var parseImg = function (img) {
- var deinterlace = function (pixels, width) {
- // Of course this defeats the purpose of interlacing. And it's *probably*
- // the least efficient way it's ever been implemented. But nevertheless...
- var newPixels = new Array(pixels.length);
- var rows = pixels.length / width;
- var cpRow = function (toRow, fromRow) {
- var fromPixels = pixels.slice(fromRow * width, (fromRow + 1) * width);
- newPixels.splice.apply(newPixels, [toRow * width, width].concat(fromPixels));
- };
-
- // See appendix E.
- var offsets = [0, 4, 2, 1];
- var steps = [8, 8, 4, 2];
-
- var fromRow = 0;
- for (var pass = 0; pass < 4; pass++) {
- for (var toRow = offsets[pass]; toRow < rows; toRow += steps[pass]) {
- cpRow(toRow, fromRow)
- fromRow++;
- }
- }
-
- return newPixels;
- };
-
- img.leftPos = st.readUnsigned();
- img.topPos = st.readUnsigned();
- img.width = st.readUnsigned();
- img.height = st.readUnsigned();
-
- var bits = byteToBitArr(st.readByte());
- img.lctFlag = bits.shift();
- img.interlaced = bits.shift();
- img.sorted = bits.shift();
- img.reserved = bits.splice(0, 2);
- img.lctSize = bitsToNum(bits.splice(0, 3));
-
- if (img.lctFlag) {
- img.lct = parseCT(1 << (img.lctSize + 1));
- }
-
- img.lzwMinCodeSize = st.readByte();
-
- var lzwData = readSubBlocks();
-
- img.pixels = lzwDecode(img.lzwMinCodeSize, lzwData);
-
- if (img.interlaced) { // Move
- img.pixels = deinterlace(img.pixels, img.width);
- }
-
- handler.img && handler.img(img);
- };
-
- var parseBlock = function () {
- var block = {};
- block.sentinel = st.readByte();
-
- switch (String.fromCharCode(block.sentinel)) { // For ease of matching
- case '!':
- block.type = 'ext';
- parseExt(block);
- break;
- case ',':
- block.type = 'img';
- parseImg(block);
- break;
- case ';':
- block.type = 'eof';
- handler.eof && handler.eof(block);
- break;
- default:
- return handler.onError(new Error('Unknown block: 0x' + block.sentinel.toString(16))); // TODO: Pad this with a 0.
- }
-
- if (block.type !== 'eof') {
- setTimeout(parseBlock, 0);
- }
- };
-
- var parse = function () {
- parseHeader();
- setTimeout(parseBlock, 0);
- };
-
- parse();
-};
-
-
-var SuperGif = function ( opts ) {
- var options = {
- //viewport position
- vp_l: 0,
- vp_t: 0,
- vp_w: null,
- vp_h: null,
- //canvas sizes
- c_w: null,
- c_h: null
- };
- for (var i in opts ) { options[i] = opts[i] }
- if (options.vp_w && options.vp_h) options.is_vp = true;
-
- var stream;
- var hdr;
-
- var loadError = null;
- var loading = false;
-
- var transparency = null;
- var delay = null;
- var disposalMethod = null;
- var disposalRestoreFromIdx = 0;
- var lastDisposalMethod = null;
- var frame = null;
- var lastImg = null;
-
- var frames = [];
-
- var gif = options.gif;
-
- var clear = function () {
- transparency = null;
- delay = null;
- lastDisposalMethod = disposalMethod;
- disposalMethod = null;
- frame = null;
- };
-
- // XXX: There's probably a better way to handle catching exceptions when
- // callbacks are involved.
- var doParse = function () {
- try {
- parseGIF(stream, handler);
- }
- catch (err) {
- doLoadError('parse');
- }
- };
-
- var setSizes = function(w, h) {
- tmpCanvas.width = w;
- tmpCanvas.height = h;
- tmpCanvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0);
- }
-
- var doLoadError = function (originOfError) {
-
-
- loadError = originOfError;
- hdr = {
- width: gif.width,
- height: gif.height
- }; // Fake header.
- frames = [];
- };
-
- var doHdr = function (_hdr) {
- hdr = _hdr;
- setSizes(hdr.width, hdr.height)
- };
-
- var doGCE = function (gce) {
- pushFrame();
- clear();
- transparency = gce.transparencyGiven ? gce.transparencyIndex : null;
- delay = gce.delayTime;
- disposalMethod = gce.disposalMethod;
- // We don't have much to do with the rest of GCE.
- };
-
- var pushFrame = function () {
- if (!frame) return;
- frames.push({
- data: frame.getImageData(0, 0, hdr.width, hdr.height),
- delay: delay
- });
- };
-
- // flag for drawing initial frame
- var isInitFrameDrawn = false;
-
- var doImg = function (img) {
- if (!frame) frame = tmpCanvas.getContext('2d');
-
- var currIdx = frames.length;
-
- //ct = color table, gct = global color table
- var ct = img.lctFlag ? img.lct : hdr.gct; // TODO: What if neither exists?
-
- /*
- Disposal method indicates the way in which the graphic is to
- be treated after being displayed.
-
- Values : 0 - No disposal specified. The decoder is
- not required to take any action.
- 1 - Do not dispose. The graphic is to be left
- in place.
- 2 - Restore to background color. The area used by the
- graphic must be restored to the background color.
- 3 - Restore to previous. The decoder is required to
- restore the area overwritten by the graphic with
- what was there prior to rendering the graphic.
-
- Importantly, "previous" means the frame state
- after the last disposal of method 0, 1, or 2.
- */
- if (currIdx > 0) {
- if (lastDisposalMethod === 3) {
- // Restore to previous
- frame.putImageData(frames[disposalRestoreFromIdx].data, 0, 0);
- } else {
- disposalRestoreFromIdx = currIdx - 1;
- }
-
- if (lastDisposalMethod === 2) {
- // Restore to background color
- // Browser implementations historically restore to transparent; we do the same.
- // http://www.wizards-toolkit.org/discourse-server/viewtopic.php?f=1&t=21172#p86079
- frame.clearRect(lastImg.leftPos, lastImg.topPos, lastImg.width, lastImg.height);
- }
- }
- // else, Undefined/Do not dispose.
- // frame contains final pixel data from the last frame; do nothing
-
- //Get existing pixels for img region after applying disposal method
- var imgData = frame.getImageData(img.leftPos, img.topPos, img.width, img.height);
- //apply color table colors
- var cdd = imgData.data;
- img.pixels.forEach(function (pixel, i) {
- // imgData.data === [R,G,B,A,R,G,B,A,...]
- if (pixel !== transparency) {
- cdd[i * 4 + 0] = ct[pixel][0];
- cdd[i * 4 + 1] = ct[pixel][1];
- cdd[i * 4 + 2] = ct[pixel][2];
- cdd[i * 4 + 3] = 255; // Opaque.
- }
- });
-
- frame.putImageData(imgData, img.leftPos, img.topPos);
-
- lastImg = img;
- };
-
- var doNothing = function () {};
- /**
- * @param{boolean=} draw Whether to draw progress bar or not; this is not idempotent because of translucency.
- * Note that this means that the text will be unsynchronized with the progress bar on non-frames;
- * but those are typically so small (GCE etc.) that it doesn't really matter. TODO: Do this properly.
- */
- var handler = {
- hdr: doHdr,
- gce: doGCE,
- // I guess that's all for now.
- // app: {
- // // TODO: Is there much point in actually supporting iterations?
- // NETSCAPE: withProgress(doNothing)
- // },
- img: doImg,
- eof: function (block) {
- pushFrame();
- loading = false;
- if (load_callback) {
- load_callback();
- }
- },
-
- onError : function (error) {
- if (error_callback) {
- error_callback();
- }
- }
- };
-
- var load_callback = false;
- var error_callback = false;
- var tmpCanvas = document.createElement('canvas');
-
- return {
-
- load: function (callback) {
-
- load_callback = callback.success;
- error_callback = callback.error;
-
- loading = true;
-
- if (gif.src.indexOf('data:') !== -1) {
- var data = gif.src.substring(gif.src.indexOf(',')+1);
- stream = new Stream(window.atob(data));
- doParse();
- } else {
- var h = new XMLHttpRequest();
- h.overrideMimeType('text/plain; charset=x-user-defined');
- h.onload = function(e) {
- stream = new Stream(h.responseText);
- setTimeout(doParse, 0);
- };
- h.onerror = function() { doLoadError('xhr'); };
- h.open('GET', gif.getAttribute('data-animated-src') || gif.src, true);
- h.send();
- }
- },
-
- getFrames : function () {
- return frames;
- }
- };
-};
-
-
-window.SuperGif = SuperGif;
-
-})( window );;/*!
-
-JSZip - A Javascript class for generating and reading zip files
-
-
-(c) 2009-2014 Stuart Knightley
-Dual licenced under the MIT license or GPLv3. See https://raw.github.com/Stuk/jszip/master/LICENSE.markdown.
-
-JSZip uses the library zlib.js released under the following license :
-zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License
-*/
-!function(a){"object"==typeof exports?module.exports=a():"function"==typeof define&&define.amd?define(a):"undefined"!=typeof window?window.JSZip=a():"undefined"!=typeof global?global.JSZip=a():"undefined"!=typeof self&&(self.JSZip=a())}(function(){return function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);throw new Error("Cannot find module '"+g+"'")}var j=c[g]={exports:{}};b[g][0].call(j.exports,function(a){var c=b[g][1][a];return e(c?c:a)},j,j.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g>2,g=(3&b)<<4|c>>4,h=(15&c)<<2|e>>6,i=63&e,isNaN(c)?h=i=64:isNaN(e)&&(i=64),j=j+d.charAt(f)+d.charAt(g)+d.charAt(h)+d.charAt(i);return j},c.decode=function(a){var b,c,e,f,g,h,i,j="",k=0;for(a=a.replace(/[^A-Za-z0-9\+\/\=]/g,"");k>4,c=(15&g)<<4|h>>2,e=(3&h)<<6|i,j+=String.fromCharCode(b),64!=h&&(j+=String.fromCharCode(c)),64!=i&&(j+=String.fromCharCode(e));return j}},{}],2:[function(a,b){"use strict";function c(){this.compressedSize=0,this.uncompressedSize=0,this.crc32=0,this.compressionMethod=null,this.compressedContent=null}c.prototype={getContent:function(){return null},getCompressedContent:function(){return null}},b.exports=c},{}],3:[function(a,b,c){"use strict";c.STORE={magic:"\x00\x00",compress:function(a){return a},uncompress:function(a){return a},compressInputType:null,uncompressInputType:null},c.DEFLATE=a("./flate")},{"./flate":6}],4:[function(a,b){"use strict";function c(){this.data=null,this.length=0,this.index=0}var d=a("./utils");c.prototype={checkOffset:function(a){this.checkIndex(this.index+a)},checkIndex:function(a){if(this.lengtha)throw new Error("End of data reached (data length = "+this.length+", asked index = "+a+"). Corrupted zip ?")},setIndex:function(a){this.checkIndex(a),this.index=a},skip:function(a){this.setIndex(this.index+a)},byteAt:function(){},readInt:function(a){var b,c=0;for(this.checkOffset(a),b=this.index+a-1;b>=this.index;b--)c=(c<<8)+this.byteAt(b);return this.index+=a,c},readString:function(a){return d.transformTo("string",this.readData(a))},readData:function(){},lastIndexOfSignature:function(){},readDate:function(){var a=this.readInt(4);return new Date((a>>25&127)+1980,(a>>21&15)-1,a>>16&31,a>>11&31,a>>5&63,(31&a)<<1)}},b.exports=c},{"./utils":14}],5:[function(a,b,c){"use strict";c.base64=!1,c.binary=!1,c.dir=!1,c.date=null,c.compression=null},{}],6:[function(a,b,c){"use strict";var d="undefined"!=typeof Uint8Array&&"undefined"!=typeof Uint16Array&&"undefined"!=typeof Uint32Array,e=a("zlibjs/bin/rawdeflate.min").Zlib,f=a("zlibjs/bin/rawinflate.min").Zlib;c.uncompressInputType=d?"uint8array":"array",c.compressInputType=d?"uint8array":"array",c.magic="\b\x00",c.compress=function(a){var b=new e.RawDeflate(a);return b.compress()},c.uncompress=function(a){var b=new f.RawInflate(a);return b.decompress()}},{"zlibjs/bin/rawdeflate.min":19,"zlibjs/bin/rawinflate.min":20}],7:[function(a,b){"use strict";function c(a,b){return this instanceof c?(this.files={},this.root="",a&&this.load(a,b),void(this.clone=function(){var a=new c;for(var b in this)"function"!=typeof this[b]&&(a[b]=this[b]);return a})):new c(a,b)}c.prototype=a("./object"),c.prototype.load=a("./load"),c.support=a("./support"),c.defaults=a("./defaults"),c.utils=a("./utils"),c.base64=a("./base64"),c.compressions=a("./compressions"),b.exports=c},{"./base64":1,"./compressions":3,"./defaults":5,"./load":8,"./object":9,"./support":12,"./utils":14}],8:[function(a,b){"use strict";var c=a("./base64"),d=a("./zipEntries");b.exports=function(a,b){var e,f,g,h;for(b=b||{},b.base64&&(a=c.decode(a)),f=new d(a,b),e=f.files,g=0;gc;c++)d+=String.fromCharCode(255&a),a>>>=8;return d},r=function(){var a,b,c={};for(a=0;a0?a.substring(0,b):""},v=function(a){return"/"!=a.slice(-1)&&(a+="/"),this.files[a]||t.call(this,a,null,{dir:!0}),this.files[a]},w=function(a,b){var c,d=new k;return a._data instanceof k?(d.uncompressedSize=a._data.uncompressedSize,d.crc32=a._data.crc32,0===d.uncompressedSize||a.options.dir?(b=j.STORE,d.compressedContent="",d.crc32=0):a._data.compressionMethod===b.magic?d.compressedContent=a._data.getCompressedContent():(c=a._data.getContent(),d.compressedContent=b.compress(f.transformTo(b.compressInputType,c)))):(c=n(a),(!c||0===c.length||a.options.dir)&&(b=j.STORE,c=""),d.uncompressedSize=c.length,d.crc32=this.crc32(c),d.compressedContent=b.compress(f.transformTo(b.compressInputType,c))),d.compressedSize=d.compressedContent.length,d.compressionMethod=b.magic,d},x=function(a,b,c,d){var e,f,h=(c.compressedContent,this.utf8encode(b.name)),i=h!==b.name,j=b.options,k="",l="";e=j.date.getHours(),e<<=6,e|=j.date.getMinutes(),e<<=5,e|=j.date.getSeconds()/2,f=j.date.getFullYear()-1980,f<<=4,f|=j.date.getMonth()+1,f<<=5,f|=j.date.getDate(),i&&(l=q(1,1)+q(this.crc32(h),4)+h,k+="up"+q(l.length,2)+l);var m="";m+="\n\x00",m+=i?"\x00\b":"\x00\x00",m+=c.compressionMethod,m+=q(e,2),m+=q(f,2),m+=q(c.crc32,4),m+=q(c.compressedSize,4),m+=q(c.uncompressedSize,4),m+=q(h.length,2),m+=q(k.length,2);var n=g.LOCAL_FILE_HEADER+m+h+k,o=g.CENTRAL_FILE_HEADER+"\x00"+m+"\x00\x00\x00\x00\x00\x00"+(b.options.dir===!0?"\x00\x00\x00":"\x00\x00\x00\x00")+q(d,4)+h+k;return{fileRecord:n,dirRecord:o,compressedObject:c}},y=function(){this.data=[]};y.prototype={append:function(a){a=f.transformTo("string",a),this.data.push(a)},finalize:function(){return this.data.join("")}};var z=function(a){this.data=new Uint8Array(a),this.index=0};z.prototype={append:function(a){0!==a.length&&(a=f.transformTo("uint8array",a),this.data.set(a,this.index),this.index+=a.length)},finalize:function(){return this.data}};var A={load:function(){throw new Error("Load method is not defined. Is the file jszip-load.js included ?")},filter:function(a){var b,c,d,e,f=[];for(b in this.files)this.files.hasOwnProperty(b)&&(d=this.files[b],e=new p(d.name,d._data,r(d.options)),c=b.slice(this.root.length,b.length),b.slice(0,this.root.length)===this.root&&a(c,e)&&f.push(e));return f},file:function(a,b,c){if(1===arguments.length){if(f.isRegExp(a)){var d=a;return this.filter(function(a,b){return!b.options.dir&&d.test(a)})}return this.filter(function(b,c){return!c.options.dir&&b===a})[0]||null}return a=this.root+a,t.call(this,a,b,c),this},folder:function(a){if(!a)return this;if(f.isRegExp(a))return this.filter(function(b,c){return c.options.dir&&a.test(b)});var b=this.root+a,c=v.call(this,b),d=this.clone();return d.root=c.name,d},remove:function(a){a=this.root+a;var b=this.files[a];if(b||("/"!=a.slice(-1)&&(a+="/"),b=this.files[a]),b)if(b.options.dir)for(var c=this.filter(function(b,c){return c.name.slice(0,a.length)===a}),d=0;di;i++)h=c?a[i]:a.charCodeAt(i),g=255&(b^h),e=d[g],b=b>>>8^e;return-1^b},utf8encode:function(a){if(c){var b=c.encode(a);return f.transformTo("string",b)}if(e.nodebuffer)return f.transformTo("string",l(a,"utf-8"));for(var d=[],g=0,h=0;hi?d[g++]=String.fromCharCode(i):i>127&&2048>i?(d[g++]=String.fromCharCode(i>>6|192),d[g++]=String.fromCharCode(63&i|128)):(d[g++]=String.fromCharCode(i>>12|224),d[g++]=String.fromCharCode(i>>6&63|128),d[g++]=String.fromCharCode(63&i|128))}return d.join("")},utf8decode:function(a){var b=[],c=0,g=f.getTypeOf(a),h="string"!==g,i=0,j=0,k=0,l=0;if(d)return d.decode(f.transformTo("uint8array",a));if(e.nodebuffer)return f.transformTo("nodebuffer",a).toString("utf-8");for(;ij?(b[c++]=String.fromCharCode(j),i++):j>191&&224>j?(k=h?a[i+1]:a.charCodeAt(i+1),b[c++]=String.fromCharCode((31&j)<<6|63&k),i+=2):(k=h?a[i+1]:a.charCodeAt(i+1),l=h?a[i+2]:a.charCodeAt(i+2),b[c++]=String.fromCharCode((15&j)<<12|(63&k)<<6|63&l),i+=3);return b.join("")}};b.exports=A},{"./base64":1,"./compressedObject":2,"./compressions":3,"./defaults":5,"./nodeBuffer":17,"./signature":10,"./support":12,"./utils":14}],10:[function(a,b,c){"use strict";c.LOCAL_FILE_HEADER="PK",c.CENTRAL_FILE_HEADER="PK",c.CENTRAL_DIRECTORY_END="PK",c.ZIP64_CENTRAL_DIRECTORY_LOCATOR="PK",c.ZIP64_CENTRAL_DIRECTORY_END="PK",c.DATA_DESCRIPTOR="PK\b"},{}],11:[function(a,b){"use strict";function c(a,b){this.data=a,b||(this.data=e.string2binary(this.data)),this.length=this.data.length,this.index=0}var d=a("./dataReader"),e=a("./utils");c.prototype=new d,c.prototype.byteAt=function(a){return this.data.charCodeAt(a)},c.prototype.lastIndexOfSignature=function(a){return this.data.lastIndexOf(a)},c.prototype.readData=function(a){this.checkOffset(a);var b=this.data.slice(this.index,this.index+a);return this.index+=a,b},b.exports=c},{"./dataReader":4,"./utils":14}],12:[function(a,b,c){var d=a("__browserify_process");if(c.base64=!0,c.array=!0,c.string=!0,c.arraybuffer="undefined"!=typeof ArrayBuffer&&"undefined"!=typeof Uint8Array,c.nodebuffer=!d.browser,c.uint8array="undefined"!=typeof Uint8Array,"undefined"==typeof ArrayBuffer)c.blob=!1;else{var e=new ArrayBuffer(0);try{c.blob=0===new Blob([e],{type:"application/zip"}).size}catch(f){try{var g=window.BlobBuilder||window.WebKitBlobBuilder||window.MozBlobBuilder||window.MSBlobBuilder,h=new g;h.append(e),c.blob=0===h.getBlob("application/zip").size}catch(f){c.blob=!1}}}},{__browserify_process:18}],13:[function(a,b){"use strict";function c(a){a&&(this.data=a,this.length=this.data.length,this.index=0)}var d=a("./dataReader");c.prototype=new d,c.prototype.byteAt=function(a){return this.data[a]},c.prototype.lastIndexOfSignature=function(a){for(var b=a.charCodeAt(0),c=a.charCodeAt(1),d=a.charCodeAt(2),e=a.charCodeAt(3),f=this.length-4;f>=0;--f)if(this.data[f]===b&&this.data[f+1]===c&&this.data[f+2]===d&&this.data[f+3]===e)return f;return-1},c.prototype.readData=function(a){this.checkOffset(a);var b=this.data.subarray(this.index,this.index+a);return this.index+=a,b},b.exports=c},{"./dataReader":4}],14:[function(a,b,c){"use strict";function d(a){return a}function e(a,b){for(var c=0;cg&&b>1;)try{d.push("array"===f||"nodebuffer"===f?String.fromCharCode.apply(null,a.slice(g,Math.min(g+b,e))):String.fromCharCode.apply(null,a.subarray(g,Math.min(g+b,e)))),g+=b}catch(i){b=Math.floor(b/2)}return d.join("")}function g(a,b){for(var c=0;cb?"0":"")+b.toString(16).toUpperCase();return d},c.findCompression=function(a){for(var b in i)if(i.hasOwnProperty(b)&&i[b].magic===a)return i[b];return null},c.isRegExp=function(a){return"[object RegExp]"===Object.prototype.toString.call(a)}},{"./compressions":3,"./nodeBuffer":17,"./support":12}],15:[function(a,b){"use strict";function c(a,b){this.files=[],this.loadOptions=b,a&&this.load(a)}var d=a("./stringReader"),e=a("./nodeBufferReader"),f=a("./uint8ArrayReader"),g=a("./utils"),h=a("./signature"),i=a("./zipEntry"),j=a("./support");c.prototype={checkSignature:function(a){var b=this.reader.readString(4);if(b!==a)throw new Error("Corrupted zip or bug : unexpected signature ("+g.pretty(b)+", expected "+g.pretty(a)+")")},readBlockEndOfCentral:function(){this.diskNumber=this.reader.readInt(2),this.diskWithCentralDirStart=this.reader.readInt(2),this.centralDirRecordsOnThisDisk=this.reader.readInt(2),this.centralDirRecords=this.reader.readInt(2),this.centralDirSize=this.reader.readInt(4),this.centralDirOffset=this.reader.readInt(4),this.zipCommentLength=this.reader.readInt(2),this.zipComment=this.reader.readString(this.zipCommentLength)},readBlockZip64EndOfCentral:function(){this.zip64EndOfCentralSize=this.reader.readInt(8),this.versionMadeBy=this.reader.readString(2),this.versionNeeded=this.reader.readInt(2),this.diskNumber=this.reader.readInt(4),this.diskWithCentralDirStart=this.reader.readInt(4),this.centralDirRecordsOnThisDisk=this.reader.readInt(8),this.centralDirRecords=this.reader.readInt(8),this.centralDirSize=this.reader.readInt(8),this.centralDirOffset=this.reader.readInt(8),this.zip64ExtensibleData={};for(var a,b,c,d=this.zip64EndOfCentralSize-44,e=0;d>e;)a=this.reader.readInt(2),b=this.reader.readInt(4),c=this.reader.readString(b),this.zip64ExtensibleData[a]={id:a,length:b,value:c}},readBlockZip64EndOfCentralLocator:function(){if(this.diskWithZip64CentralDirStart=this.reader.readInt(4),this.relativeOffsetEndOfZip64CentralDir=this.reader.readInt(8),this.disksCount=this.reader.readInt(4),this.disksCount>1)throw new Error("Multi-volumes zip are not supported")},readLocalFiles:function(){var a,b;for(a=0;a0)){var d=c.shift();d()}},!0),function(a){c.push(a),window.postMessage("process-tick","*")}}return function(a){setTimeout(a,0)}}(),c.title="browser",c.browser=!0,c.env={},c.argv=[],c.binding=function(){throw new Error("process.binding is not supported")},c.cwd=function(){return"/"},c.chdir=function(){throw new Error("process.chdir is not supported")}},{}],19:[function(){/** @license zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License */
-(function(){"use strict";function a(a,b){var c=a.split("."),d=n;!(c[0]in d)&&d.execScript&&d.execScript("var "+c[0]);for(var e;c.length&&(e=c.shift());)c.length||b===l?d=d[e]?d[e]:d[e]={}:d[e]=b}function b(a,b){if(this.index="number"==typeof b?b:0,this.d=0,this.buffer=a instanceof(o?Uint8Array:Array)?a:new(o?Uint8Array:Array)(32768),2*this.buffer.length<=this.index)throw Error("invalid index");this.buffer.length<=this.index&&c(this)}function c(a){var b,c=a.buffer,d=c.length,e=new(o?Uint8Array:Array)(d<<1);if(o)e.set(c);else for(b=0;d>b;++b)e[b]=c[b];return a.buffer=e}function d(a){this.buffer=new(o?Uint16Array:Array)(2*a),this.length=0}function e(a,b){this.e=w,this.f=0,this.input=o&&a instanceof Array?new Uint8Array(a):a,this.c=0,b&&(b.lazy&&(this.f=b.lazy),"number"==typeof b.compressionType&&(this.e=b.compressionType),b.outputBuffer&&(this.b=o&&b.outputBuffer instanceof Array?new Uint8Array(b.outputBuffer):b.outputBuffer),"number"==typeof b.outputIndex&&(this.c=b.outputIndex)),this.b||(this.b=new(o?Uint8Array:Array)(32768))}function f(a,b){this.length=a,this.g=b}function g(a,b){function c(a,b){var c,d=a.g,e=[],f=0;c=z[a.length],e[f++]=65535&c,e[f++]=c>>16&255,e[f++]=c>>24;var g;switch(m){case 1===d:g=[0,d-1,0];break;case 2===d:g=[1,d-2,0];break;case 3===d:g=[2,d-3,0];break;case 4===d:g=[3,d-4,0];break;case 6>=d:g=[4,d-5,1];break;case 8>=d:g=[5,d-7,1];break;case 12>=d:g=[6,d-9,2];break;case 16>=d:g=[7,d-13,2];break;case 24>=d:g=[8,d-17,3];break;case 32>=d:g=[9,d-25,3];break;case 48>=d:g=[10,d-33,4];break;case 64>=d:g=[11,d-49,4];break;case 96>=d:g=[12,d-65,5];break;case 128>=d:g=[13,d-97,5];break;case 192>=d:g=[14,d-129,6];break;case 256>=d:g=[15,d-193,6];break;case 384>=d:g=[16,d-257,7];break;case 512>=d:g=[17,d-385,7];break;case 768>=d:g=[18,d-513,8];break;case 1024>=d:g=[19,d-769,8];break;case 1536>=d:g=[20,d-1025,9];break;case 2048>=d:g=[21,d-1537,9];break;case 3072>=d:g=[22,d-2049,10];break;case 4096>=d:g=[23,d-3073,10];break;case 6144>=d:g=[24,d-4097,11];break;case 8192>=d:g=[25,d-6145,11];break;case 12288>=d:g=[26,d-8193,12];break;case 16384>=d:g=[27,d-12289,12];break;case 24576>=d:g=[28,d-16385,13];break;case 32768>=d:g=[29,d-24577,13];break;default:throw"invalid distance"}c=g,e[f++]=c[0],e[f++]=c[1],e[f++]=c[2];var h,i;for(h=0,i=e.length;i>h;++h)r[s++]=e[h];u[e[0]]++,v[e[3]]++,t=a.length+b-1,n=null}var d,e,f,g,i,j,k,n,p,q={},r=o?new Uint16Array(2*b.length):[],s=0,t=0,u=new(o?Uint32Array:Array)(286),v=new(o?Uint32Array:Array)(30),w=a.f;if(!o){for(f=0;285>=f;)u[f++]=0;for(f=0;29>=f;)v[f++]=0}for(u[256]=1,d=0,e=b.length;e>d;++d){for(f=i=0,g=3;g>f&&d+f!==e;++f)i=i<<8|b[d+f];if(q[i]===l&&(q[i]=[]),j=q[i],!(0=e){for(n&&c(n,-1),f=0,g=e-d;g>f;++f)p=b[d+f],r[s++]=p,++u[p];break}0h;h++){if(d=c[j-h-1],g=3,k>3){for(i=k;i>3;i--)if(a[d+i-1]!==a[b+i-1])continue a;g=k}for(;258>g&&l>b+g&&a[d+g]===a[b+g];)++g;if(g>k&&(e=d,k=g),258===g)break}return new f(k,b-e)}function i(a,b){var c,e,f,g,h,i=a.length,k=new d(572),l=new(o?Uint8Array:Array)(i);if(!o)for(g=0;i>g;g++)l[g]=0;for(g=0;i>g;++g)0g;++g)c[g]=k.pop(),e[g]=c[g].value;for(f=j(e,e.length,b),g=0,h=c.length;h>g;++g)l[c[g].index]=f[g];return l}function j(a,b,c){function d(a){var c=n[a][p[a]];c===b?(d(a+1),d(a+1)):--l[c],++p[a]}var e,f,g,h,i,j=new(o?Uint16Array:Array)(c),k=new(o?Uint8Array:Array)(c),l=new(o?Uint8Array:Array)(b),m=Array(c),n=Array(c),p=Array(c),q=(1<f;++f)r>q?k[f]=0:(k[f]=1,q-=r),q<<=1,j[c-2-f]=(j[c-1-f]/2|0)+b;for(j[0]=k[0],m[0]=Array(j[0]),n[0]=Array(j[0]),f=1;c>f;++f)j[f]>2*j[f-1]+k[f]&&(j[f]=2*j[f-1]+k[f]),m[f]=Array(j[f]),n[f]=Array(j[f]);for(e=0;b>e;++e)l[e]=c;for(g=0;ge;++e)p[e]=0;for(1===k[c-1]&&(--l[0],++p[c-1]),f=c-2;f>=0;--f){for(h=e=0,i=p[f+1],g=0;ga[e]?(m[f][g]=h,n[f][g]=b,i+=2):(m[f][g]=a[e],n[f][g]=e,++e);p[f]=0,1===k[f]&&d(f)}return l}function k(a){var b,c,d,e,f=new(o?Uint16Array:Array)(a.length),g=[],h=[],i=0;for(b=0,c=a.length;c>b;b++)g[a[b]]=(0|g[a[b]])+1;for(b=1,c=16;c>=b;b++)h[b]=i,i+=0|g[b],i<<=1;for(b=0,c=a.length;c>b;b++)for(i=h[a[b]],h[a[b]]+=1,d=f[b]=0,e=a[b];e>d;d++)f[b]=f[b]<<1|1&i,i>>>=1;return f}var l=void 0,m=!0,n=this,o="undefined"!=typeof Uint8Array&&"undefined"!=typeof Uint16Array&&"undefined"!=typeof Uint32Array&&"undefined"!=typeof DataView;b.prototype.a=function(a,b,d){var e,f=this.buffer,g=this.index,h=this.d,i=f[g];if(d&&b>1&&(a=b>8?(u[255&a]<<24|u[a>>>8&255]<<16|u[a>>>16&255]<<8|u[a>>>24&255])>>32-b:u[a]>>8-b),8>b+h)i=i<e;++e)i=i<<1|a>>b-e-1&1,8===++h&&(h=0,f[g++]=u[i],i=0,g===f.length&&(f=c(this)));f[g]=i,this.buffer=f,this.d=h,this.index=g},b.prototype.finish=function(){var a,b=this.buffer,c=this.index;return 0p;++p){for(var r=p,s=r,t=7,r=r>>>1;r;r>>>=1)s<<=1,s|=1&r,--t;q[p]=(s<>>0}var u=q;d.prototype.getParent=function(a){return 2*((a-2)/4|0)},d.prototype.push=function(a,b){var c,d,e,f=this.buffer;for(c=this.length,f[this.length++]=b,f[this.length++]=a;c>0&&(d=this.getParent(c),f[c]>f[d]);)e=f[c],f[c]=f[d],f[d]=e,e=f[c+1],f[c+1]=f[d+1],f[d+1]=e,c=d;return this.length},d.prototype.pop=function(){var a,b,c,d,e,f=this.buffer;for(b=f[0],a=f[1],this.length-=2,f[0]=f[this.length],f[1]=f[this.length+1],e=0;(d=2*e+2,!(d>=this.length))&&(d+2f[d]&&(d+=2),f[d]>f[e]);)c=f[e],f[e]=f[d],f[d]=c,c=f[e+1],f[e+1]=f[d+1],f[d+1]=c,e=d;return{index:a,value:b,length:this.length}};var v,w=2,x=[];for(v=0;288>v;v++)switch(m){case 143>=v:x.push([v+48,8]);break;case 255>=v:x.push([v-144+400,9]);break;case 279>=v:x.push([v-256+0,7]);break;case 287>=v:x.push([v-280+192,8]);break;default:throw"invalid literal: "+v}e.prototype.h=function(){var a,c,d,e,f=this.input;switch(this.e){case 0:for(d=0,e=f.length;e>d;){c=o?f.subarray(d,d+65535):f.slice(d,d+65535),d+=c.length;var h=c,j=d===e,n=l,p=l,q=l,r=l,s=l,t=this.b,u=this.c;if(o){for(t=new Uint8Array(this.b.buffer);t.length<=u+h.length+5;)t=new Uint8Array(t.length<<1);t.set(this.b)}if(n=j?1:0,t[u++]=0|n,p=h.length,q=~p+65536&65535,t[u++]=255&p,t[u++]=p>>>8&255,t[u++]=255&q,t[u++]=q>>>8&255,o)t.set(h,u),u+=h.length,t=t.subarray(0,u);else{for(r=0,s=h.length;s>r;++r)t[u++]=h[r];t.length=u}this.c=u,this.b=t}break;case 1:var v=new b(o?new Uint8Array(this.b.buffer):this.b,this.c);v.a(1,1,m),v.a(1,2,m);var y,z,A,B=g(this,f);for(y=0,z=B.length;z>y;y++)if(A=B[y],b.prototype.a.apply(v,x[A]),A>256)v.a(B[++y],B[++y],m),v.a(B[++y],5),v.a(B[++y],B[++y],m);else if(256===A)break;this.b=v.finish(),this.c=this.b.length;break;case w:var C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R=new b(o?new Uint8Array(this.b.buffer):this.b,this.c),S=[16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15],T=Array(19);for(C=w,R.a(1,1,m),R.a(C,2,m),D=g(this,f),H=i(this.j,15),I=k(H),J=i(this.i,7),K=k(J),E=286;E>257&&0===H[E-1];E--);for(F=30;F>1&&0===J[F-1];F--);var U,V,W,X,Y,Z,$=E,_=F,ab=new(o?Uint32Array:Array)($+_),bb=new(o?Uint32Array:Array)(316),cb=new(o?Uint8Array:Array)(19);for(U=V=0;$>U;U++)ab[V++]=H[U];for(U=0;_>U;U++)ab[V++]=J[U];if(!o)for(U=0,X=cb.length;X>U;++U)cb[U]=0;for(U=Y=0,X=ab.length;X>U;U+=V){for(V=1;X>U+V&&ab[U+V]===ab[U];++V);if(W=V,0===ab[U])if(3>W)for(;00;)Z=138>W?W:138,Z>W-3&&W>Z&&(Z=W-3),10>=Z?(bb[Y++]=17,bb[Y++]=Z-3,cb[17]++):(bb[Y++]=18,bb[Y++]=Z-11,cb[18]++),W-=Z;else if(bb[Y++]=ab[U],cb[ab[U]]++,W--,3>W)for(;00;)Z=6>W?W:6,Z>W-3&&W>Z&&(Z=W-3),bb[Y++]=16,bb[Y++]=Z-3,cb[16]++,W-=Z}for(a=o?bb.subarray(0,Y):bb.slice(0,Y),L=i(cb,7),P=0;19>P;P++)T[P]=L[S[P]];for(G=19;G>4&&0===T[G-1];G--);for(M=k(L),R.a(E-257,5,m),R.a(F-1,5,m),R.a(G-4,4,m),P=0;G>P;P++)R.a(T[P],3,m);for(P=0,Q=a.length;Q>P;P++)if(N=a[P],R.a(M[N],L[N],m),N>=16){switch(P++,N){case 16:O=2;break;case 17:O=3;break;case 18:O=7;break;default:throw"invalid code: "+N}R.a(a[P],O,m)}var db,eb,fb,gb,hb,ib,jb,kb,lb=[I,H],mb=[K,J];for(hb=lb[0],ib=lb[1],jb=mb[0],kb=mb[1],db=0,eb=D.length;eb>db;++db)if(fb=D[db],R.a(hb[fb],ib[fb],m),fb>256)R.a(D[++db],D[++db],m),gb=D[++db],R.a(jb[gb],kb[gb],m),R.a(D[++db],D[++db],m);else if(256===fb)break;this.b=R.finish(),this.c=this.b.length;break;default:throw"invalid compression type"}return this.b};var y=function(){function a(a){switch(m){case 3===a:return[257,a-3,0];case 4===a:return[258,a-4,0];case 5===a:return[259,a-5,0];case 6===a:return[260,a-6,0];case 7===a:return[261,a-7,0];case 8===a:return[262,a-8,0];case 9===a:return[263,a-9,0];case 10===a:return[264,a-10,0];case 12>=a:return[265,a-11,1];case 14>=a:return[266,a-13,1];case 16>=a:return[267,a-15,1];case 18>=a:return[268,a-17,1];case 22>=a:return[269,a-19,2];case 26>=a:return[270,a-23,2];case 30>=a:return[271,a-27,2];case 34>=a:return[272,a-31,2];case 42>=a:return[273,a-35,3];case 50>=a:return[274,a-43,3];case 58>=a:return[275,a-51,3];case 66>=a:return[276,a-59,3];case 82>=a:return[277,a-67,4];case 98>=a:return[278,a-83,4];case 114>=a:return[279,a-99,4];case 130>=a:return[280,a-115,4];case 162>=a:return[281,a-131,5];case 194>=a:return[282,a-163,5];case 226>=a:return[283,a-195,5];case 257>=a:return[284,a-227,5];case 258===a:return[285,a-258,0];default:throw"invalid length: "+a}}var b,c,d=[];for(b=3;258>=b;b++)c=a(b),d[b]=c[2]<<24|c[1]<<16|c[0];return d}(),z=o?new Uint32Array(y):y;a("Zlib.RawDeflate",e),a("Zlib.RawDeflate.prototype.compress",e.prototype.h);var A,B,C,D,E={NONE:0,FIXED:1,DYNAMIC:w};if(Object.keys)A=Object.keys(E);else for(B in A=[],C=0,E)A[C++]=B;for(C=0,D=A.length;D>C;++C)B=A[C],a("Zlib.RawDeflate.CompressionType."+B,E[B])}).call(this)},{}],20:[function(){/** @license zlib.js 2012 - imaya [ https://github.com/imaya/zlib.js ] The MIT License */
-(function(){"use strict";function a(a,b){var c=a.split("."),d=g;!(c[0]in d)&&d.execScript&&d.execScript("var "+c[0]);for(var e;c.length&&(e=c.shift());)c.length||void 0===b?d=d[e]?d[e]:d[e]={}:d[e]=b}function b(a){var b,c,d,e,f,g,i,j,k,l,m=a.length,n=0,o=Number.POSITIVE_INFINITY;for(j=0;m>j;++j)a[j]>n&&(n=a[j]),a[j]=d;){for(j=0;m>j;++j)if(a[j]===d){for(g=0,i=e,k=0;d>k;++k)g=g<<1|1&i,i>>=1;for(l=d<<16|j,k=g;b>k;k+=f)c[k]=l;++e}++d,e<<=1,f<<=1}return[c,n,o]}function c(a,b){switch(this.g=[],this.h=32768,this.c=this.f=this.d=this.k=0,this.input=h?new Uint8Array(a):a,this.l=!1,this.i=j,this.q=!1,(b||!(b={}))&&(b.index&&(this.d=b.index),b.bufferSize&&(this.h=b.bufferSize),b.bufferType&&(this.i=b.bufferType),b.resize&&(this.q=b.resize)),this.i){case i:this.a=32768,this.b=new(h?Uint8Array:Array)(32768+this.h+258);break;case j:this.a=0,this.b=new(h?Uint8Array:Array)(this.h),this.e=this.v,this.m=this.s,this.j=this.t;break;default:throw Error("invalid inflate mode")}}function d(a,b){for(var c,d=a.f,e=a.c,f=a.input,g=a.d,h=f.length;b>e;){if(g>=h)throw Error("input buffer is broken");d|=f[g++]<>>b,a.c=e-b,a.d=g,c}function e(a,b){for(var c,d,e=a.f,f=a.c,g=a.input,h=a.d,i=g.length,j=b[0],k=b[1];k>f&&!(h>=i);)e|=g[h++]<>>16,a.f=e>>d,a.c=f-d,a.d=h,65535&c}function f(a){function c(a,b,c){var f,g,h,i=this.p;for(h=0;a>h;)switch(f=e(this,b)){case 16:for(g=3+d(this,2);g--;)c[h++]=i;break;case 17:for(g=3+d(this,3);g--;)c[h++]=0;i=0;break;case 18:for(g=11+d(this,7);g--;)c[h++]=0;i=0;break;default:i=c[h++]=f}return this.p=i,c}var f,g,i,j,k=d(a,5)+257,l=d(a,5)+1,m=d(a,4)+4,o=new(h?Uint8Array:Array)(n.length);for(j=0;m>j;++j)o[n[j]]=d(a,3);if(!h)for(j=m,m=o.length;m>j;++j)o[n[j]]=0;f=b(o),g=new(h?Uint8Array:Array)(k),i=new(h?Uint8Array:Array)(l),a.p=0,a.j(b(c.call(a,k,f,g)),b(c.call(a,l,f,i)))}var g=this,h="undefined"!=typeof Uint8Array&&"undefined"!=typeof Uint16Array&&"undefined"!=typeof Uint32Array&&"undefined"!=typeof DataView,i=0,j=1;c.prototype.u=function(){for(;!this.l;){var a=d(this,3);switch(1&a&&(this.l=!0),a>>>=1){case 0:var b=this.input,c=this.d,e=this.b,g=this.a,k=b.length,l=void 0,m=void 0,n=e.length,o=void 0;if(this.c=this.f=0,c+1>=k)throw Error("invalid uncompressed block header: LEN");if(l=b[c++]|b[c++]<<8,c+1>=k)throw Error("invalid uncompressed block header: NLEN");if(m=b[c++]|b[c++]<<8,l===~m)throw Error("invalid uncompressed block header: length verify");if(c+l>b.length)throw Error("input buffer is broken");switch(this.i){case i:for(;g+l>e.length;){if(o=n-g,l-=o,h)e.set(b.subarray(c,c+o),g),g+=o,c+=o;else for(;o--;)e[g++]=b[c++];this.a=g,e=this.e(),g=this.a}break;case j:for(;g+l>e.length;)e=this.e({o:2});break;default:throw Error("invalid inflate mode")}if(h)e.set(b.subarray(c,c+l),g),g+=l,c+=l;else for(;l--;)e[g++]=b[c++];this.d=c,this.a=g,this.b=e;break;case 1:this.j(z,B);break;case 2:f(this);break;default:throw Error("unknown BTYPE: "+a)}}return this.m()};var k,l,m=[16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15],n=h?new Uint16Array(m):m,o=[3,4,5,6,7,8,9,10,11,13,15,17,19,23,27,31,35,43,51,59,67,83,99,115,131,163,195,227,258,258,258],p=h?new Uint16Array(o):o,q=[0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0],r=h?new Uint8Array(q):q,s=[1,2,3,4,5,7,9,13,17,25,33,49,65,97,129,193,257,385,513,769,1025,1537,2049,3073,4097,6145,8193,12289,16385,24577],t=h?new Uint16Array(s):s,u=[0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13],v=h?new Uint8Array(u):u,w=new(h?Uint8Array:Array)(288);for(k=0,l=w.length;l>k;++k)w[k]=143>=k?8:255>=k?9:279>=k?7:8;var x,y,z=b(w),A=new(h?Uint8Array:Array)(30);for(x=0,y=A.length;y>x;++x)A[x]=5;var B=b(A);c.prototype.j=function(a,b){var c=this.b,f=this.a;this.n=a;for(var g,h,i,j,k=c.length-258;256!==(g=e(this,a));)if(256>g)f>=k&&(this.a=f,c=this.e(),f=this.a),c[f++]=g;else for(h=g-257,j=p[h],0=k&&(this.a=f,c=this.e(),f=this.a);j--;)c[f]=c[f++-i];for(;8<=this.c;)this.c-=8,this.d--;this.a=f},c.prototype.t=function(a,b){var c=this.b,f=this.a;this.n=a;for(var g,h,i,j,k=c.length;256!==(g=e(this,a));)if(256>g)f>=k&&(c=this.e(),k=c.length),c[f++]=g;else for(h=g-257,j=p[h],0k&&(c=this.e(),k=c.length);j--;)c[f]=c[f++-i];for(;8<=this.c;)this.c-=8,this.d--;this.a=f},c.prototype.e=function(){var a,b,c=new(h?Uint8Array:Array)(this.a-32768),d=this.a-32768,e=this.b;if(h)c.set(e.subarray(32768,c.length));else for(a=0,b=c.length;b>a;++a)c[a]=e[a+32768];if(this.g.push(c),this.k+=c.length,h)e.set(e.subarray(d,d+32768));else for(a=0;32768>a;++a)e[a]=e[d+a];return this.a=32768,e},c.prototype.v=function(a){var b,c,d,e,f=this.input.length/this.d+1|0,g=this.input,i=this.b;return a&&("number"==typeof a.o&&(f=a.o),"number"==typeof a.r&&(f+=a.r)),2>f?(c=(g.length-this.d)/this.n[2],e=258*(c/2)|0,d=eb;++b)for(a=i[b],d=0,e=a.length;e>d;++d)j[f++]=a[d];for(b=32768,c=this.a;c>b;++b)j[f++]=g[b];return this.g=[],this.buffer=j},c.prototype.s=function(){var a,b=this.a;return h?this.q?(a=new Uint8Array(b),a.set(this.b.subarray(0,b))):a=this.b.subarray(0,b):(this.b.length>b&&(this.b.length=b),a=this.b),this.buffer=a},a("Zlib.RawInflate",c),a("Zlib.RawInflate.prototype.decompress",c.prototype.u);var C,D,E,F,G={ADAPTIVE:j,BLOCK:i};if(Object.keys)C=Object.keys(G);else for(D in C=[],E=0,G)C[E++]=D;for(E=0,F=C.length;F>E;++E)D=C[E],a("Zlib.RawInflate.BufferType."+D,G[D])}).call(this)},{}]},{},[7])(7)});;// Spectrum Colorpicker v1.1.2
-// https://github.com/bgrins/spectrum
-// Author: Brian Grinstead
-// License: MIT
-
-(function (window, $, undefined) {
- var defaultOpts = {
-
- // Callbacks
- beforeShow: noop,
- move: noop,
- change: noop,
- show: noop,
- hide: noop,
-
- // Options
- color: false,
- flat: false,
- showInput: false,
- showButtons: true,
- clickoutFiresChange: false,
- showInitial: false,
- showPalette: false,
- showPaletteOnly: false,
- showSelectionPalette: true,
- localStorageKey: false,
- appendTo: "body",
- maxSelectionSize: 7,
- cancelText: "cancel",
- chooseText: "choose",
- preferredFormat: false,
- className: "",
- showAlpha: false,
- theme: "sp-light",
- palette: ['fff', '000'],
- selectionPalette: [],
- disabled: false
- },
- spectrums = [],
- IE = !!/msie/i.exec( window.navigator.userAgent ),
- rgbaSupport = (function() {
- function contains( str, substr ) {
- return !!~('' + str).indexOf(substr);
- }
-
- var elem = document.createElement('div');
- var style = elem.style;
- style.cssText = 'background-color:rgba(0,0,0,.5)';
- return contains(style.backgroundColor, 'rgba') || contains(style.backgroundColor, 'hsla');
- })(),
- replaceInput = [
- ""
- ].join(''),
- markup = (function () {
-
- // IE does not support gradients with multiple stops, so we need to simulate
- // that for the rainbow slider with 8 divs that each have a single gradient
- var gradientFix = "";
- if (IE) {
- for (var i = 1; i <= 6; i++) {
- gradientFix += "";
- }
- }
-
- return [
- "",
- "
",
- "
",
- "
",
- "
",
- "
",
- "
",
- "
",
- "
",
- gradientFix,
- "
",
- "
",
- "
",
- "
",
- "
",
- "",
- "
",
- "
",
- "
",
- "
",
- "
" + html.join('') + "
";
- }
-
- function hideAll() {
- for (var i = 0; i < spectrums.length; i++) {
- if (spectrums[i]) {
- spectrums[i].hide();
- }
- }
- }
-
- function instanceOptions(o, callbackContext) {
- var opts = $.extend({}, defaultOpts, o);
- opts.callbacks = {
- 'move': bind(opts.move, callbackContext),
- 'change': bind(opts.change, callbackContext),
- 'show': bind(opts.show, callbackContext),
- 'hide': bind(opts.hide, callbackContext),
- 'beforeShow': bind(opts.beforeShow, callbackContext)
- };
-
- return opts;
- }
-
- function spectrum(element, o) {
-
- var opts = instanceOptions(o, element),
- flat = opts.flat,
- showSelectionPalette = opts.showSelectionPalette,
- localStorageKey = opts.localStorageKey,
- theme = opts.theme,
- callbacks = opts.callbacks,
- resize = throttle(reflow, 10),
- visible = false,
- dragWidth = 0,
- dragHeight = 0,
- dragHelperHeight = 0,
- slideHeight = 0,
- slideWidth = 0,
- alphaWidth = 0,
- alphaSlideHelperWidth = 0,
- slideHelperHeight = 0,
- currentHue = 0,
- currentSaturation = 0,
- currentValue = 0,
- currentAlpha = 1,
- palette = opts.palette.slice(0),
- paletteArray = $.isArray(palette[0]) ? palette : [palette],
- selectionPalette = opts.selectionPalette.slice(0),
- maxSelectionSize = opts.maxSelectionSize,
- draggingClass = "sp-dragging",
- shiftMovementDirection = null;
-
- var doc = element.ownerDocument,
- body = doc.body,
- boundElement = $(element),
- disabled = false,
- container = $(markup, doc).addClass(theme),
- dragger = container.find(".sp-color"),
- dragHelper = container.find(".sp-dragger"),
- slider = container.find(".sp-hue"),
- slideHelper = container.find(".sp-slider"),
- alphaSliderInner = container.find(".sp-alpha-inner"),
- alphaSlider = container.find(".sp-alpha"),
- alphaSlideHelper = container.find(".sp-alpha-handle"),
- textInput = container.find(".sp-input"),
- paletteContainer = container.find(".sp-palette"),
- initialColorContainer = container.find(".sp-initial"),
- cancelButton = container.find(".sp-cancel"),
- chooseButton = container.find(".sp-choose"),
- isInput = boundElement.is("input"),
- shouldReplace = isInput && !flat,
- replacer = (shouldReplace) ? $(replaceInput).addClass(theme).addClass(opts.className) : $([]),
- offsetElement = (shouldReplace) ? replacer : boundElement,
- previewElement = replacer.find(".sp-preview-inner"),
- initialColor = opts.color || (isInput && boundElement.val()),
- colorOnShow = false,
- preferredFormat = opts.preferredFormat,
- currentPreferredFormat = preferredFormat,
- clickoutFiresChange = !opts.showButtons || opts.clickoutFiresChange;
-
-
- function applyOptions() {
-
- if (opts.showPaletteOnly) {
- opts.showPalette = true;
- }
-
- container.toggleClass("sp-flat", flat);
- container.toggleClass("sp-input-disabled", !opts.showInput);
- container.toggleClass("sp-alpha-enabled", opts.showAlpha);
- container.toggleClass("sp-buttons-disabled", !opts.showButtons);
- container.toggleClass("sp-palette-disabled", !opts.showPalette);
- container.toggleClass("sp-palette-only", opts.showPaletteOnly);
- container.toggleClass("sp-initial-disabled", !opts.showInitial);
- container.addClass(opts.className);
-
- reflow();
- }
-
- function initialize() {
-
- if (IE) {
- container.find("*:not(input)").attr("unselectable", "on");
- }
-
- applyOptions();
-
- if (shouldReplace) {
- boundElement.after(replacer).hide();
- }
-
- if (flat) {
- boundElement.after(container).hide();
- }
- else {
-
- var appendTo = opts.appendTo === "parent" ? boundElement.parent() : $(opts.appendTo);
- if (appendTo.length !== 1) {
- appendTo = $("body");
- }
-
- appendTo.append(container);
- }
-
- if (localStorageKey && window.localStorage) {
-
- // Migrate old palettes over to new format. May want to remove this eventually.
- try {
- var oldPalette = window.localStorage[localStorageKey].split(",#");
- if (oldPalette.length > 1) {
- delete window.localStorage[localStorageKey];
- $.each(oldPalette, function(i, c) {
- addColorToSelectionPalette(c);
- });
- }
- }
- catch(e) { }
-
- try {
- selectionPalette = window.localStorage[localStorageKey].split(";");
- }
- catch (e) { }
- }
-
- offsetElement.bind("click.spectrum touchstart.spectrum", function (e) {
- if (!disabled) {
- toggle();
- }
-
- e.stopPropagation();
-
- if (!$(e.target).is("input")) {
- e.preventDefault();
- }
- });
-
- if(boundElement.is(":disabled") || (opts.disabled === true)) {
- disable();
- }
-
- // Prevent clicks from bubbling up to document. This would cause it to be hidden.
- container.click(stopPropagation);
-
- // Handle user typed input
- textInput.change(setFromTextInput);
- textInput.bind("paste", function () {
- setTimeout(setFromTextInput, 1);
- });
- textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } });
-
- cancelButton.text(opts.cancelText);
- cancelButton.bind("click.spectrum", function (e) {
- e.stopPropagation();
- e.preventDefault();
- hide("cancel");
- });
-
- chooseButton.text(opts.chooseText);
- chooseButton.bind("click.spectrum", function (e) {
- e.stopPropagation();
- e.preventDefault();
-
- if (isValid()) {
- updateOriginalInput(true);
- hide();
- }
- });
-
- draggable(alphaSlider, function (dragX, dragY, e) {
- currentAlpha = (dragX / alphaWidth);
- if (e.shiftKey) {
- currentAlpha = Math.round(currentAlpha * 10) / 10;
- }
-
- move();
- });
-
- draggable(slider, function (dragX, dragY) {
- currentHue = parseFloat(dragY / slideHeight);
- move();
- }, dragStart, dragStop);
-
- draggable(dragger, function (dragX, dragY, e) {
-
- // shift+drag should snap the movement to either the x or y axis.
- if (!e.shiftKey) {
- shiftMovementDirection = null;
- }
- else if (!shiftMovementDirection) {
- var oldDragX = currentSaturation * dragWidth;
- var oldDragY = dragHeight - (currentValue * dragHeight);
- var furtherFromX = Math.abs(dragX - oldDragX) > Math.abs(dragY - oldDragY);
-
- shiftMovementDirection = furtherFromX ? "x" : "y";
- }
-
- var setSaturation = !shiftMovementDirection || shiftMovementDirection === "x";
- var setValue = !shiftMovementDirection || shiftMovementDirection === "y";
-
- if (setSaturation) {
- currentSaturation = parseFloat(dragX / dragWidth);
- }
- if (setValue) {
- currentValue = parseFloat((dragHeight - dragY) / dragHeight);
- }
-
- move();
-
- }, dragStart, dragStop);
-
- if (!!initialColor) {
- set(initialColor);
-
- // In case color was black - update the preview UI and set the format
- // since the set function will not run (default color is black).
- updateUI();
- currentPreferredFormat = preferredFormat || tinycolor(initialColor).format;
-
- addColorToSelectionPalette(initialColor);
- }
- else {
- updateUI();
- }
-
- if (flat) {
- show();
- }
-
- function palletElementClick(e) {
- if (e.data && e.data.ignore) {
- set($(this).data("color"));
- move();
- }
- else {
- set($(this).data("color"));
- updateOriginalInput(true);
- move();
- hide();
- }
-
- return false;
- }
-
- var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum";
- paletteContainer.delegate(".sp-thumb-el", paletteEvent, palletElementClick);
- initialColorContainer.delegate(".sp-thumb-el:nth-child(1)", paletteEvent, { ignore: true }, palletElementClick);
- }
-
- function addColorToSelectionPalette(color) {
- if (showSelectionPalette) {
- var colorRgb = tinycolor(color).toRgbString();
- if ($.inArray(colorRgb, selectionPalette) === -1) {
- selectionPalette.push(colorRgb);
- while(selectionPalette.length > maxSelectionSize) {
- selectionPalette.shift();
- }
- }
-
- if (localStorageKey && window.localStorage) {
- try {
- window.localStorage[localStorageKey] = selectionPalette.join(";");
- }
- catch(e) { }
- }
- }
- }
-
- function getUniqueSelectionPalette() {
- var unique = [];
- var p = selectionPalette;
- var paletteLookup = {};
- var rgb;
-
- if (opts.showPalette) {
-
- for (var i = 0; i < paletteArray.length; i++) {
- for (var j = 0; j < paletteArray[i].length; j++) {
- rgb = tinycolor(paletteArray[i][j]).toRgbString();
- paletteLookup[rgb] = true;
- }
- }
-
- for (i = 0; i < p.length; i++) {
- rgb = tinycolor(p[i]).toRgbString();
-
- if (!paletteLookup.hasOwnProperty(rgb)) {
- unique.push(p[i]);
- paletteLookup[rgb] = true;
- }
- }
- }
-
- return unique.reverse().slice(0, opts.maxSelectionSize);
- }
-
- function drawPalette() {
-
- var currentColor = get();
-
- var html = $.map(paletteArray, function (palette, i) {
- return paletteTemplate(palette, currentColor, "sp-palette-row sp-palette-row-" + i);
- });
-
- if (selectionPalette) {
- html.push(paletteTemplate(getUniqueSelectionPalette(), currentColor, "sp-palette-row sp-palette-row-selection"));
- }
-
- paletteContainer.html(html.join(""));
- }
-
- function drawInitial() {
- if (opts.showInitial) {
- var initial = colorOnShow;
- var current = get();
- initialColorContainer.html(paletteTemplate([initial, current], current, "sp-palette-row-initial"));
- }
- }
-
- function dragStart() {
- if (dragHeight <= 0 || dragWidth <= 0 || slideHeight <= 0) {
- reflow();
- }
- container.addClass(draggingClass);
- shiftMovementDirection = null;
- }
-
- function dragStop() {
- container.removeClass(draggingClass);
- }
-
- function setFromTextInput() {
- var tiny = tinycolor(textInput.val());
- if (tiny.ok) {
- set(tiny);
- }
- else {
- textInput.addClass("sp-validation-error");
- }
- }
-
- function toggle() {
- if (visible) {
- hide();
- }
- else {
- show();
- }
- }
-
- function show() {
- var event = $.Event('beforeShow.spectrum');
-
- if (visible) {
- reflow();
- return;
- }
-
- colorOnShow = get();
- boundElement.trigger(event, [ colorOnShow ]);
-
- if (callbacks.beforeShow(colorOnShow) === false || event.isDefaultPrevented()) {
- return;
- }
-
- // if color has changed
- set(colorOnShow);
-
- hideAll();
- visible = true;
-
- $(doc).bind("mousedown.spectrum", onMousedown);
-
- // Piskel-specific : change the color as soon as the user does a mouseup
- $(doc).bind("mouseup.spectrum", updateColor);
-
- $(window).bind("resize.spectrum", resize);
- replacer.addClass("sp-active");
- container.removeClass("sp-hidden");
-
- if (opts.showPalette) {
- drawPalette();
- }
- reflow();
- updateUI();
-
- drawInitial();
- callbacks.show(colorOnShow);
- boundElement.trigger('show.spectrum', [ colorOnShow ]);
- }
-
- function onMousedown (e) {
- var target = $(e.target);
- var parents = target.parents();
- var isClickOutsideWidget = !parents.is(container) && !target.is(container);
-
- if (isClickOutsideWidget) {
- hide(e);
- }
- }
-
- // Piskel-specific (code extracted to method)
- function updateColor(e) {
- var colorHasChanged = !tinycolor.equals(get(), colorOnShow);
-
- if (colorHasChanged) {
- if (clickoutFiresChange && e !== "cancel") {
- updateOriginalInput(true);
- }
- else {
- revert();
- }
- }
- }
-
- function hide(e) {
-
- // Return on right click
- if (e && e.type == "click" && e.button == 2) { return; }
-
- // Return if hiding is unnecessary
- if (!visible || flat) { return; }
- visible = false;
-
- $(doc).unbind("mousedown.spectrum", onMousedown);
-
- // Piskel-specific
- $(doc).unbind("mouseup.spectrum", updateColor);
-
- $(window).unbind("resize.spectrum", resize);
-
- replacer.removeClass("sp-active");
- container.addClass("sp-hidden");
-
- updateColor(e);
-
- // Piskel-specific
- addColorToSelectionPalette(get());
-
- callbacks.hide(get());
- boundElement.trigger('hide.spectrum', [ get() ]);
- }
-
- function revert() {
- set(colorOnShow, true);
- }
-
- function set(color, ignoreFormatChange) {
- if (tinycolor.equals(color, get())) {
- return;
- }
-
- var newColor = tinycolor(color);
- var newHsv = newColor.toHsv();
-
- currentHue = (newHsv.h % 360) / 360;
- currentSaturation = newHsv.s;
- currentValue = newHsv.v;
- currentAlpha = newHsv.a;
-
- updateUI();
-
- if (newColor.ok && !ignoreFormatChange) {
- currentPreferredFormat = preferredFormat || newColor.format;
- }
- }
-
- function get(opts) {
- opts = opts || { };
- return tinycolor.fromRatio({
- h: currentHue,
- s: currentSaturation,
- v: currentValue,
- a: Math.round(currentAlpha * 100) / 100
- }, { format: opts.format || currentPreferredFormat });
- }
-
- function isValid() {
- return !textInput.hasClass("sp-validation-error");
- }
-
- function move() {
- updateUI();
-
- callbacks.move(get());
- boundElement.trigger('move.spectrum', [ get() ]);
- }
-
- function updateUI() {
-
- textInput.removeClass("sp-validation-error");
-
- updateHelperLocations();
-
- // Update dragger background color (gradients take care of saturation and value).
- var flatColor = tinycolor.fromRatio({ h: currentHue, s: 1, v: 1 });
- dragger.css("background-color", flatColor.toHexString());
-
- // Get a format that alpha will be included in (hex and names ignore alpha)
- var format = currentPreferredFormat;
- if (currentAlpha < 1) {
- if (format === "hex" || format === "hex3" || format === "hex6" || format === "name") {
- format = "rgb";
- }
- }
-
- var realColor = get({ format: format }),
- realHex = realColor.toHexString(),
- realRgb = realColor.toRgbString();
-
- // Update the replaced elements background color (with actual selected color)
- if (rgbaSupport || realColor.alpha === 1) {
- previewElement.css("background-color", realRgb);
- }
- else {
- previewElement.css("background-color", "transparent");
- previewElement.css("filter", realColor.toFilter());
- }
-
- if (opts.showAlpha) {
- var rgb = realColor.toRgb();
- rgb.a = 0;
- var realAlpha = tinycolor(rgb).toRgbString();
- var gradient = "linear-gradient(left, " + realAlpha + ", " + realHex + ")";
-
- if (IE) {
- alphaSliderInner.css("filter", tinycolor(realAlpha).toFilter({ gradientType: 1 }, realHex));
- }
- else {
- alphaSliderInner.css("background", "-webkit-" + gradient);
- alphaSliderInner.css("background", "-moz-" + gradient);
- alphaSliderInner.css("background", "-ms-" + gradient);
- alphaSliderInner.css("background", gradient);
- }
- }
-
-
- // Update the text entry input as it changes happen
- if (opts.showInput) {
- textInput.val(realColor.toString(Constants.PREFERRED_COLOR_FORMAT || format));
- }
-
- if (opts.showPalette) {
- drawPalette();
- }
-
- drawInitial();
- }
-
- function updateHelperLocations() {
- var s = currentSaturation;
- var v = currentValue;
-
- // Where to show the little circle in that displays your current selected color
- var dragX = s * dragWidth;
- var dragY = (dragHeight) - (v * dragHeight);
- dragX = Math.max(
- -dragHelperHeight/2,
- Math.min(dragWidth - dragHelperHeight/2, dragX - dragHelperHeight/2)
- );
- dragY = Math.max(
- -dragHelperHeight/2,
- Math.min(dragHeight - dragHelperHeight/2, dragY - dragHelperHeight/2)
- );
- dragHelper.css({
- "top": dragY,
- "left": dragX
- });
-
- var alphaX = currentAlpha * alphaWidth;
- alphaSlideHelper.css({
- "left": alphaX - (alphaSlideHelperWidth / 2)
- });
-
- // Where to show the bar that displays your current selected hue
- var slideY = (currentHue) * slideHeight;
- slideHelper.css({
- "top": slideY - (slideHelperHeight/2)
- });
- }
-
- function updateOriginalInput(fireCallback) {
- var color = get();
-
- if (isInput) {
- boundElement.val(color.toString(currentPreferredFormat));
- }
-
- var hasChanged = !tinycolor.equals(color, colorOnShow);
- colorOnShow = color;
-
- // Update the selection palette with the current color
-
- // Piskel-specific : commented-out, palette update is done on hide
- // addColorToSelectionPalette(color);
-
- if (fireCallback && hasChanged) {
- callbacks.change(color);
- boundElement.trigger('change', [ color ]);
- }
- }
-
- function reflow() {
- dragWidth = dragger.width();
- dragHeight = dragger.height();
- dragHelperHeight = dragHelper.height() + 4;
- slideWidth = slider.width();
- slideHeight = slider.height();
- slideHelperHeight = slideHelper.height() + 4;
- alphaWidth = alphaSlider.width();
- alphaSlideHelperWidth = alphaSlideHelper.width();
-
- if (!flat) {
- container.css("position", "absolute");
- container.offset(getOffset(container, offsetElement));
- }
-
- updateHelperLocations();
- }
-
- function destroy() {
- boundElement.show();
- offsetElement.unbind("click.spectrum touchstart.spectrum");
- container.remove();
- replacer.remove();
- spectrums[spect.id] = null;
- }
-
- function option(optionName, optionValue) {
- if (optionName === undefined) {
- return $.extend({}, opts);
- }
- if (optionValue === undefined) {
- return opts[optionName];
- }
-
- opts[optionName] = optionValue;
- applyOptions();
- }
-
- function enable() {
- disabled = false;
- boundElement.attr("disabled", false);
- offsetElement.removeClass("sp-disabled");
- }
-
- function disable() {
- hide();
- disabled = true;
- boundElement.attr("disabled", true);
- offsetElement.addClass("sp-disabled");
- }
-
- initialize();
-
- var spect = {
- show: show,
- hide: hide,
- toggle: toggle,
- reflow: reflow,
- option: option,
- enable: enable,
- disable: disable,
- set: function (c) {
- set(c);
- updateOriginalInput();
- },
- get: get,
- destroy: destroy,
- container: container
- };
-
- spect.id = spectrums.push(spect) - 1;
-
- return spect;
- }
-
- /**
- * checkOffset - get the offset below/above and left/right element depending on screen position
- * Thanks https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js
- */
- function getOffset(picker, input) {
- var extraY = 0;
- var dpWidth = picker.outerWidth();
- var dpHeight = picker.outerHeight();
- var inputHeight = input.outerHeight();
- var doc = picker[0].ownerDocument;
- var docElem = doc.documentElement;
- var viewWidth = docElem.clientWidth + $(doc).scrollLeft();
- var viewHeight = docElem.clientHeight + $(doc).scrollTop();
- var offset = input.offset();
- offset.top += inputHeight;
-
- if (Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth))) {
- offset.left -= Math.abs(offset.left + dpWidth - viewWidth);
- picker.attr('data-x-position','right');
- } else {
- offset.left -= 0;
- picker.attr('data-x-position','left');
- }
-
- if (Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight))) {
- offset.top -= Math.abs(dpHeight + inputHeight - extraY);
- picker.attr('data-y-position','top');
- } else {
- offset.top -= extraY;
- picker.attr('data-y-position','bottom');
- }
-
- return offset;
- }
-
- /**
- * noop - do nothing
- */
- function noop() {
-
- }
-
- /**
- * stopPropagation - makes the code only doing this a little easier to read in line
- */
- function stopPropagation(e) {
- e.stopPropagation();
- }
-
- /**
- * Create a function bound to a given object
- * Thanks to underscore.js
- */
- function bind(func, obj) {
- var slice = Array.prototype.slice;
- var args = slice.call(arguments, 2);
- return function () {
- return func.apply(obj, args.concat(slice.call(arguments)));
- };
- }
-
- /**
- * Lightweight drag helper. Handles containment within the element, so that
- * when dragging, the x is within [0,element.width] and y is within [0,element.height]
- */
- function draggable(element, onmove, onstart, onstop) {
- onmove = onmove || function () { };
- onstart = onstart || function () { };
- onstop = onstop || function () { };
- var doc = element.ownerDocument || document;
- var dragging = false;
- var offset = {};
- var maxHeight = 0;
- var maxWidth = 0;
- var hasTouch = ('ontouchstart' in window);
-
- var duringDragEvents = {};
- duringDragEvents["selectstart"] = prevent;
- duringDragEvents["dragstart"] = prevent;
- duringDragEvents["touchmove mousemove"] = move;
- duringDragEvents["touchend mouseup"] = stop;
-
- function prevent(e) {
- if (e.stopPropagation) {
- e.stopPropagation();
- }
- if (e.preventDefault) {
- e.preventDefault();
- }
- e.returnValue = false;
- }
-
- function move(e) {
- if (dragging) {
- // Mouseup happened outside of window
- if (IE && document.documentMode < 9 && !e.button) {
- return stop();
- }
-
- var touches = e.originalEvent.touches;
- var pageX = touches ? touches[0].pageX : e.pageX;
- var pageY = touches ? touches[0].pageY : e.pageY;
-
- var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
- var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));
-
- if (hasTouch) {
- // Stop scrolling in iOS
- prevent(e);
- }
-
- onmove.apply(element, [dragX, dragY, e]);
- }
- }
- function start(e) {
- var rightclick = (e.which) ? (e.which == 3) : (e.button == 2);
- var touches = e.originalEvent.touches;
-
- if (!rightclick && !dragging) {
- if (onstart.apply(element, arguments) !== false) {
- dragging = true;
- maxHeight = $(element).height();
- maxWidth = $(element).width();
- offset = $(element).offset();
-
- $(doc).bind(duringDragEvents);
- $(doc.body).addClass("sp-dragging");
-
- if (!hasTouch) {
- move(e);
- }
-
- prevent(e);
- }
- }
- }
- function stop() {
- if (dragging) {
- $(doc).unbind(duringDragEvents);
- $(doc.body).removeClass("sp-dragging");
- onstop.apply(element, arguments);
- }
- dragging = false;
- }
-
- $(element).bind("touchstart mousedown", start);
- }
-
- function throttle(func, wait, debounce) {
- var timeout;
- return function () {
- var context = this, args = arguments;
- var throttler = function () {
- timeout = null;
- func.apply(context, args);
- };
- if (debounce) clearTimeout(timeout);
- if (debounce || !timeout) timeout = setTimeout(throttler, wait);
- };
- }
-
-
- function log(){/* jshint -W021 */if(window.console){if(Function.prototype.bind)log=Function.prototype.bind.call(console.log,console);else log=function(){Function.prototype.apply.call(console.log,console,arguments);};log.apply(this,arguments);}}
-
- /**
- * Define a jQuery plugin
- */
- var dataID = "spectrum.id";
- $.fn.spectrum = function (opts, extra) {
-
- if (typeof opts == "string") {
-
- var returnValue = this;
- var args = Array.prototype.slice.call( arguments, 1 );
-
- this.each(function () {
- var spect = spectrums[$(this).data(dataID)];
- if (spect) {
-
- var method = spect[opts];
- if (!method) {
- throw new Error( "Spectrum: no such method: '" + opts + "'" );
- }
-
- if (opts == "get") {
- returnValue = spect.get();
- }
- else if (opts == "container") {
- returnValue = spect.container;
- }
- else if (opts == "option") {
- returnValue = spect.option.apply(spect, args);
- }
- else if (opts == "destroy") {
- spect.destroy();
- $(this).removeData(dataID);
- }
- else {
- method.apply(spect, args);
- }
- }
- });
-
- return returnValue;
- }
-
- // Initializing a new instance of spectrum
- return this.spectrum("destroy").each(function () {
- var spect = spectrum(this, opts);
- $(this).data(dataID, spect.id);
- });
- };
-
- $.fn.spectrum.load = true;
- $.fn.spectrum.loadOpts = {};
- $.fn.spectrum.draggable = draggable;
- $.fn.spectrum.defaults = defaultOpts;
-
- $.spectrum = { };
- $.spectrum.localization = { };
- $.spectrum.palettes = { };
-
- $.fn.spectrum.processNativeColorInputs = function () {
- var colorInput = $("")[0];
- var supportsColor = colorInput.type === "color" && colorInput.value != "!";
-
- if (!supportsColor) {
- $("input[type=color]").spectrum({
- preferredFormat: "hex6"
- });
- }
- };
-
- // TinyColor v0.9.16
- // https://github.com/bgrins/TinyColor
- // 2013-08-10, Brian Grinstead, MIT License
-
- (function() {
-
- var trimLeft = /^[\s,#]+/,
- trimRight = /\s+$/,
- tinyCounter = 0,
- math = Math,
- mathRound = math.round,
- mathMin = math.min,
- mathMax = math.max,
- mathRandom = math.random;
-
- function tinycolor (color, opts) {
-
- color = (color) ? color : '';
- opts = opts || { };
-
- // If input is already a tinycolor, return itself
- if (typeof color == "object" && color.hasOwnProperty("_tc_id")) {
- return color;
- }
-
- var rgb = inputToRGB(color);
- var r = rgb.r,
- g = rgb.g,
- b = rgb.b,
- a = rgb.a,
- roundA = mathRound(100*a) / 100,
- format = opts.format || rgb.format;
-
- // Don't let the range of [0,255] come back in [0,1].
- // Potentially lose a little bit of precision here, but will fix issues where
- // .5 gets interpreted as half of the total, instead of half of 1
- // If it was supposed to be 128, this was already taken care of by `inputToRgb`
- if (r < 1) { r = mathRound(r); }
- if (g < 1) { g = mathRound(g); }
- if (b < 1) { b = mathRound(b); }
-
- return {
- ok: rgb.ok,
- format: format,
- _tc_id: tinyCounter++,
- alpha: a,
- getAlpha: function() {
- return a;
- },
- setAlpha: function(value) {
- a = boundAlpha(value);
- roundA = mathRound(100*a) / 100;
- },
- toHsv: function() {
- var hsv = rgbToHsv(r, g, b);
- return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: a };
- },
- toHsvString: function() {
- var hsv = rgbToHsv(r, g, b);
- var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
- return (a == 1) ?
- "hsv(" + h + ", " + s + "%, " + v + "%)" :
- "hsva(" + h + ", " + s + "%, " + v + "%, "+ roundA + ")";
- },
- toHsl: function() {
- var hsl = rgbToHsl(r, g, b);
- return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: a };
- },
- toHslString: function() {
- var hsl = rgbToHsl(r, g, b);
- var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
- return (a == 1) ?
- "hsl(" + h + ", " + s + "%, " + l + "%)" :
- "hsla(" + h + ", " + s + "%, " + l + "%, "+ roundA + ")";
- },
- toHex: function(allow3Char) {
- return rgbToHex(r, g, b, allow3Char);
- },
- toHexString: function(allow3Char) {
- return '#' + rgbToHex(r, g, b, allow3Char);
- },
- toRgb: function() {
- return { r: mathRound(r), g: mathRound(g), b: mathRound(b), a: a };
- },
- toRgbString: function() {
- return (a == 1) ?
- "rgb(" + mathRound(r) + ", " + mathRound(g) + ", " + mathRound(b) + ")" :
- "rgba(" + mathRound(r) + ", " + mathRound(g) + ", " + mathRound(b) + ", " + roundA + ")";
- },
- toPercentageRgb: function() {
- return { r: mathRound(bound01(r, 255) * 100) + "%", g: mathRound(bound01(g, 255) * 100) + "%", b: mathRound(bound01(b, 255) * 100) + "%", a: a };
- },
- toPercentageRgbString: function() {
- return (a == 1) ?
- "rgb(" + mathRound(bound01(r, 255) * 100) + "%, " + mathRound(bound01(g, 255) * 100) + "%, " + mathRound(bound01(b, 255) * 100) + "%)" :
- "rgba(" + mathRound(bound01(r, 255) * 100) + "%, " + mathRound(bound01(g, 255) * 100) + "%, " + mathRound(bound01(b, 255) * 100) + "%, " + roundA + ")";
- },
- toName: function() {
- if (a === 0) {
- return "transparent";
- }
-
- return hexNames[rgbToHex(r, g, b, true)] || false;
- },
- toFilter: function(secondColor) {
- var hex = rgbToHex(r, g, b);
- var secondHex = hex;
- var alphaHex = Math.round(parseFloat(a) * 255).toString(16);
- var secondAlphaHex = alphaHex;
- var gradientType = opts && opts.gradientType ? "GradientType = 1, " : "";
-
- if (secondColor) {
- var s = tinycolor(secondColor);
- secondHex = s.toHex();
- secondAlphaHex = Math.round(parseFloat(s.alpha) * 255).toString(16);
- }
-
- return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr=#" + pad2(alphaHex) + hex + ",endColorstr=#" + pad2(secondAlphaHex) + secondHex + ")";
- },
- toString: function(format) {
- var formatSet = !!format;
- format = format || this.format;
-
- var formattedString = false;
- var hasAlphaAndFormatNotSet = !formatSet && a < 1 && a > 0;
- var formatWithAlpha = hasAlphaAndFormatNotSet && (format === "hex" || format === "hex6" || format === "hex3" || format === "name");
-
- if (format === "rgb") {
- formattedString = this.toRgbString();
- }
- if (format === "prgb") {
- formattedString = this.toPercentageRgbString();
- }
- if (format === "hex" || format === "hex6") {
- formattedString = this.toHexString();
- }
- if (format === "hex3") {
- formattedString = this.toHexString(true);
- }
- if (format === "name") {
- formattedString = this.toName();
- }
- if (format === "hsl") {
- formattedString = this.toHslString();
- }
- if (format === "hsv") {
- formattedString = this.toHsvString();
- }
-
- if (formatWithAlpha) {
- return this.toRgbString();
- }
-
- return formattedString || this.toHexString();
- }
- };
- }
-
- // If input is an object, force 1 into "1.0" to handle ratios properly
- // String input requires "1.0" as input, so 1 will be treated as 1
- tinycolor.fromRatio = function(color, opts) {
- if (typeof color == "object") {
- var newColor = {};
- for (var i in color) {
- if (color.hasOwnProperty(i)) {
- if (i === "a") {
- newColor[i] = color[i];
- }
- else {
- newColor[i] = convertToPercentage(color[i]);
- }
- }
- }
- color = newColor;
- }
-
- return tinycolor(color, opts);
- };
-
- // Given a string or object, convert that input to RGB
- // Possible string inputs:
- //
- // "red"
- // "#f00" or "f00"
- // "#ff0000" or "ff0000"
- // "rgb 255 0 0" or "rgb (255, 0, 0)"
- // "rgb 1.0 0 0" or "rgb (1, 0, 0)"
- // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
- // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
- // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
- // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
- // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
- //
- function inputToRGB(color) {
-
- var rgb = { r: 0, g: 0, b: 0 };
- var a = 1;
- var ok = false;
- var format = false;
-
- if (typeof color == "string") {
- color = stringInputToObject(color);
- }
-
- if (typeof color == "object") {
- if (color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) {
- rgb = rgbToRgb(color.r, color.g, color.b);
- ok = true;
- format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
- }
- else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("v")) {
- color.s = convertToPercentage(color.s);
- color.v = convertToPercentage(color.v);
- rgb = hsvToRgb(color.h, color.s, color.v);
- ok = true;
- format = "hsv";
- }
- else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("l")) {
- color.s = convertToPercentage(color.s);
- color.l = convertToPercentage(color.l);
- rgb = hslToRgb(color.h, color.s, color.l);
- ok = true;
- format = "hsl";
- }
-
- if (color.hasOwnProperty("a")) {
- a = color.a;
- }
- }
-
- a = boundAlpha(a);
-
- return {
- ok: ok,
- format: color.format || format,
- r: mathMin(255, mathMax(rgb.r, 0)),
- g: mathMin(255, mathMax(rgb.g, 0)),
- b: mathMin(255, mathMax(rgb.b, 0)),
- a: a
- };
- }
-
-
- // Conversion Functions
- // --------------------
-
- // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
- //
-
- // `rgbToRgb`
- // Handle bounds / percentage checking to conform to CSS color spec
- //
- // *Assumes:* r, g, b in [0, 255] or [0, 1]
- // *Returns:* { r, g, b } in [0, 255]
- function rgbToRgb(r, g, b){
- return {
- r: bound01(r, 255) * 255,
- g: bound01(g, 255) * 255,
- b: bound01(b, 255) * 255
- };
- }
-
- // `rgbToHsl`
- // Converts an RGB color value to HSL.
- // *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
- // *Returns:* { h, s, l } in [0,1]
- function rgbToHsl(r, g, b) {
-
- r = bound01(r, 255);
- g = bound01(g, 255);
- b = bound01(b, 255);
-
- var max = mathMax(r, g, b), min = mathMin(r, g, b);
- var h, s, l = (max + min) / 2;
-
- if(max == min) {
- h = s = 0; // achromatic
- }
- else {
- var d = max - min;
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
- switch(max) {
- case r: h = (g - b) / d + (g < b ? 6 : 0); break;
- case g: h = (b - r) / d + 2; break;
- case b: h = (r - g) / d + 4; break;
- }
-
- h /= 6;
- }
-
- return { h: h, s: s, l: l };
- }
-
- // `hslToRgb`
- // Converts an HSL color value to RGB.
- // *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
- // *Returns:* { r, g, b } in the set [0, 255]
- function hslToRgb(h, s, l) {
- var r, g, b;
-
- h = bound01(h, 360);
- s = bound01(s, 100);
- l = bound01(l, 100);
-
- function hue2rgb(p, q, t) {
- if(t < 0) t += 1;
- if(t > 1) t -= 1;
- if(t < 1/6) return p + (q - p) * 6 * t;
- if(t < 1/2) return q;
- if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
- return p;
- }
-
- if(s === 0) {
- r = g = b = l; // achromatic
- }
- else {
- var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
- var p = 2 * l - q;
- r = hue2rgb(p, q, h + 1/3);
- g = hue2rgb(p, q, h);
- b = hue2rgb(p, q, h - 1/3);
- }
-
- return { r: r * 255, g: g * 255, b: b * 255 };
- }
-
- // `rgbToHsv`
- // Converts an RGB color value to HSV
- // *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
- // *Returns:* { h, s, v } in [0,1]
- function rgbToHsv(r, g, b) {
-
- r = bound01(r, 255);
- g = bound01(g, 255);
- b = bound01(b, 255);
-
- var max = mathMax(r, g, b), min = mathMin(r, g, b);
- var h, s, v = max;
-
- var d = max - min;
- s = max === 0 ? 0 : d / max;
-
- if(max == min) {
- h = 0; // achromatic
- }
- else {
- switch(max) {
- case r: h = (g - b) / d + (g < b ? 6 : 0); break;
- case g: h = (b - r) / d + 2; break;
- case b: h = (r - g) / d + 4; break;
- }
- h /= 6;
- }
- return { h: h, s: s, v: v };
- }
-
- // `hsvToRgb`
- // Converts an HSV color value to RGB.
- // *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
- // *Returns:* { r, g, b } in the set [0, 255]
- function hsvToRgb(h, s, v) {
-
- h = bound01(h, 360) * 6;
- s = bound01(s, 100);
- v = bound01(v, 100);
-
- var i = math.floor(h),
- f = h - i,
- p = v * (1 - s),
- q = v * (1 - f * s),
- t = v * (1 - (1 - f) * s),
- mod = i % 6,
- r = [v, q, p, p, t, v][mod],
- g = [t, v, v, q, p, p][mod],
- b = [p, p, t, v, v, q][mod];
-
- return { r: r * 255, g: g * 255, b: b * 255 };
- }
-
- // `rgbToHex`
- // Converts an RGB color to hex
- // Assumes r, g, and b are contained in the set [0, 255]
- // Returns a 3 or 6 character hex
- function rgbToHex(r, g, b, allow3Char) {
-
- var hex = [
- pad2(mathRound(r).toString(16)),
- pad2(mathRound(g).toString(16)),
- pad2(mathRound(b).toString(16))
- ];
-
- // Return a 3 character hex if possible
- if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
- return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
- }
-
- return hex.join("");
- }
-
- // `equals`
- // Can be called with any tinycolor input
- tinycolor.equals = function (color1, color2) {
- if (!color1 || !color2) { return false; }
- return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
- };
- tinycolor.random = function() {
- return tinycolor.fromRatio({
- r: mathRandom(),
- g: mathRandom(),
- b: mathRandom()
- });
- };
-
-
- // Modification Functions
- // ----------------------
- // Thanks to less.js for some of the basics here
- //
-
- tinycolor.desaturate = function (color, amount) {
- amount = (amount === 0) ? 0 : (amount || 10);
- var hsl = tinycolor(color).toHsl();
- hsl.s -= amount / 100;
- hsl.s = clamp01(hsl.s);
- return tinycolor(hsl);
- };
- tinycolor.saturate = function (color, amount) {
- amount = (amount === 0) ? 0 : (amount || 10);
- var hsl = tinycolor(color).toHsl();
- hsl.s += amount / 100;
- hsl.s = clamp01(hsl.s);
- return tinycolor(hsl);
- };
- tinycolor.greyscale = function(color) {
- return tinycolor.desaturate(color, 100);
- };
- tinycolor.lighten = function(color, amount) {
- amount = (amount === 0) ? 0 : (amount || 10);
- var hsl = tinycolor(color).toHsl();
- hsl.l += amount / 100;
- hsl.l = clamp01(hsl.l);
- return tinycolor(hsl);
- };
- tinycolor.darken = function (color, amount) {
- amount = (amount === 0) ? 0 : (amount || 10);
- var hsl = tinycolor(color).toHsl();
- hsl.l -= amount / 100;
- hsl.l = clamp01(hsl.l);
- return tinycolor(hsl);
- };
- tinycolor.complement = function(color) {
- var hsl = tinycolor(color).toHsl();
- hsl.h = (hsl.h + 180) % 360;
- return tinycolor(hsl);
- };
-
-
- // Combination Functions
- // ---------------------
- // Thanks to jQuery xColor for some of the ideas behind these
- //
-
- tinycolor.triad = function(color) {
- var hsl = tinycolor(color).toHsl();
- var h = hsl.h;
- return [
- tinycolor(color),
- tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
- tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
- ];
- };
- tinycolor.tetrad = function(color) {
- var hsl = tinycolor(color).toHsl();
- var h = hsl.h;
- return [
- tinycolor(color),
- tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),
- tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
- tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
- ];
- };
- tinycolor.splitcomplement = function(color) {
- var hsl = tinycolor(color).toHsl();
- var h = hsl.h;
- return [
- tinycolor(color),
- tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),
- tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})
- ];
- };
- tinycolor.analogous = function(color, results, slices) {
- results = results || 6;
- slices = slices || 30;
-
- var hsl = tinycolor(color).toHsl();
- var part = 360 / slices;
- var ret = [tinycolor(color)];
-
- for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) {
- hsl.h = (hsl.h + part) % 360;
- ret.push(tinycolor(hsl));
- }
- return ret;
- };
- tinycolor.monochromatic = function(color, results) {
- results = results || 6;
- var hsv = tinycolor(color).toHsv();
- var h = hsv.h, s = hsv.s, v = hsv.v;
- var ret = [];
- var modification = 1 / results;
-
- while (results--) {
- ret.push(tinycolor({ h: h, s: s, v: v}));
- v = (v + modification) % 1;
- }
-
- return ret;
- };
-
-
- // Readability Functions
- // ---------------------
- //
-
- // `readability`
- // Analyze the 2 colors and returns an object with the following properties:
- // `brightness`: difference in brightness between the two colors
- // `color`: difference in color/hue between the two colors
- tinycolor.readability = function(color1, color2) {
- var a = tinycolor(color1).toRgb();
- var b = tinycolor(color2).toRgb();
- var brightnessA = (a.r * 299 + a.g * 587 + a.b * 114) / 1000;
- var brightnessB = (b.r * 299 + b.g * 587 + b.b * 114) / 1000;
- var colorDiff = (
- Math.max(a.r, b.r) - Math.min(a.r, b.r) +
- Math.max(a.g, b.g) - Math.min(a.g, b.g) +
- Math.max(a.b, b.b) - Math.min(a.b, b.b)
- );
-
- return {
- brightness: Math.abs(brightnessA - brightnessB),
- color: colorDiff
- };
- };
-
- // `readable`
- // http://www.w3.org/TR/AERT#color-contrast
- // Ensure that foreground and background color combinations provide sufficient contrast.
- // *Example*
- // tinycolor.readable("#000", "#111") => false
- tinycolor.readable = function(color1, color2) {
- var readability = tinycolor.readability(color1, color2);
- return readability.brightness > 125 && readability.color > 500;
- };
-
- // `mostReadable`
- // Given a base color and a list of possible foreground or background
- // colors for that base, returns the most readable color.
- // *Example*
- // tinycolor.mostReadable("#123", ["#fff", "#000"]) => "#000"
- tinycolor.mostReadable = function(baseColor, colorList) {
- var bestColor = null;
- var bestScore = 0;
- var bestIsReadable = false;
- for (var i=0; i < colorList.length; i++) {
-
- // We normalize both around the "acceptable" breaking point,
- // but rank brightness constrast higher than hue.
-
- var readability = tinycolor.readability(baseColor, colorList[i]);
- var readable = readability.brightness > 125 && readability.color > 500;
- var score = 3 * (readability.brightness / 125) + (readability.color / 500);
-
- if ((readable && ! bestIsReadable) ||
- (readable && bestIsReadable && score > bestScore) ||
- ((! readable) && (! bestIsReadable) && score > bestScore)) {
- bestIsReadable = readable;
- bestScore = score;
- bestColor = tinycolor(colorList[i]);
- }
- }
- return bestColor;
- };
-
-
- // Big List of Colors
- // ------------------
- //
- var names = tinycolor.names = {
- aliceblue: "f0f8ff",
- antiquewhite: "faebd7",
- aqua: "0ff",
- aquamarine: "7fffd4",
- azure: "f0ffff",
- beige: "f5f5dc",
- bisque: "ffe4c4",
- black: "000",
- blanchedalmond: "ffebcd",
- blue: "00f",
- blueviolet: "8a2be2",
- brown: "a52a2a",
- burlywood: "deb887",
- burntsienna: "ea7e5d",
- cadetblue: "5f9ea0",
- chartreuse: "7fff00",
- chocolate: "d2691e",
- coral: "ff7f50",
- cornflowerblue: "6495ed",
- cornsilk: "fff8dc",
- crimson: "dc143c",
- cyan: "0ff",
- darkblue: "00008b",
- darkcyan: "008b8b",
- darkgoldenrod: "b8860b",
- darkgray: "a9a9a9",
- darkgreen: "006400",
- darkgrey: "a9a9a9",
- darkkhaki: "bdb76b",
- darkmagenta: "8b008b",
- darkolivegreen: "556b2f",
- darkorange: "ff8c00",
- darkorchid: "9932cc",
- darkred: "8b0000",
- darksalmon: "e9967a",
- darkseagreen: "8fbc8f",
- darkslateblue: "483d8b",
- darkslategray: "2f4f4f",
- darkslategrey: "2f4f4f",
- darkturquoise: "00ced1",
- darkviolet: "9400d3",
- deeppink: "ff1493",
- deepskyblue: "00bfff",
- dimgray: "696969",
- dimgrey: "696969",
- dodgerblue: "1e90ff",
- firebrick: "b22222",
- floralwhite: "fffaf0",
- forestgreen: "228b22",
- fuchsia: "f0f",
- gainsboro: "dcdcdc",
- ghostwhite: "f8f8ff",
- gold: "ffd700",
- goldenrod: "daa520",
- gray: "808080",
- green: "008000",
- greenyellow: "adff2f",
- grey: "808080",
- honeydew: "f0fff0",
- hotpink: "ff69b4",
- indianred: "cd5c5c",
- indigo: "4b0082",
- ivory: "fffff0",
- khaki: "f0e68c",
- lavender: "e6e6fa",
- lavenderblush: "fff0f5",
- lawngreen: "7cfc00",
- lemonchiffon: "fffacd",
- lightblue: "add8e6",
- lightcoral: "f08080",
- lightcyan: "e0ffff",
- lightgoldenrodyellow: "fafad2",
- lightgray: "d3d3d3",
- lightgreen: "90ee90",
- lightgrey: "d3d3d3",
- lightpink: "ffb6c1",
- lightsalmon: "ffa07a",
- lightseagreen: "20b2aa",
- lightskyblue: "87cefa",
- lightslategray: "789",
- lightslategrey: "789",
- lightsteelblue: "b0c4de",
- lightyellow: "ffffe0",
- lime: "0f0",
- limegreen: "32cd32",
- linen: "faf0e6",
- magenta: "f0f",
- maroon: "800000",
- mediumaquamarine: "66cdaa",
- mediumblue: "0000cd",
- mediumorchid: "ba55d3",
- mediumpurple: "9370db",
- mediumseagreen: "3cb371",
- mediumslateblue: "7b68ee",
- mediumspringgreen: "00fa9a",
- mediumturquoise: "48d1cc",
- mediumvioletred: "c71585",
- midnightblue: "191970",
- mintcream: "f5fffa",
- mistyrose: "ffe4e1",
- moccasin: "ffe4b5",
- navajowhite: "ffdead",
- navy: "000080",
- oldlace: "fdf5e6",
- olive: "808000",
- olivedrab: "6b8e23",
- orange: "ffa500",
- orangered: "ff4500",
- orchid: "da70d6",
- palegoldenrod: "eee8aa",
- palegreen: "98fb98",
- paleturquoise: "afeeee",
- palevioletred: "db7093",
- papayawhip: "ffefd5",
- peachpuff: "ffdab9",
- peru: "cd853f",
- pink: "ffc0cb",
- plum: "dda0dd",
- powderblue: "b0e0e6",
- purple: "800080",
- red: "f00",
- rosybrown: "bc8f8f",
- royalblue: "4169e1",
- saddlebrown: "8b4513",
- salmon: "fa8072",
- sandybrown: "f4a460",
- seagreen: "2e8b57",
- seashell: "fff5ee",
- sienna: "a0522d",
- silver: "c0c0c0",
- skyblue: "87ceeb",
- slateblue: "6a5acd",
- slategray: "708090",
- slategrey: "708090",
- snow: "fffafa",
- springgreen: "00ff7f",
- steelblue: "4682b4",
- tan: "d2b48c",
- teal: "008080",
- thistle: "d8bfd8",
- tomato: "ff6347",
- turquoise: "40e0d0",
- violet: "ee82ee",
- wheat: "f5deb3",
- white: "fff",
- whitesmoke: "f5f5f5",
- yellow: "ff0",
- yellowgreen: "9acd32"
- };
-
- // Make it easy to access colors via `hexNames[hex]`
- var hexNames = tinycolor.hexNames = flip(names);
-
-
- // Utilities
- // ---------
-
- // `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
- function flip(o) {
- var flipped = { };
- for (var i in o) {
- if (o.hasOwnProperty(i)) {
- flipped[o[i]] = i;
- }
- }
- return flipped;
- }
-
- // Return a valid alpha value [0,1] with all invalid values being set to 1
- function boundAlpha(a) {
- a = parseFloat(a);
-
- if (isNaN(a) || a < 0 || a > 1) {
- a = 1;
- }
-
- return a;
- }
-
- // Take input from [0, n] and return it as [0, 1]
- function bound01(n, max) {
- if (isOnePointZero(n)) { n = "100%"; }
-
- var processPercent = isPercentage(n);
- n = mathMin(max, mathMax(0, parseFloat(n)));
-
- // Automatically convert percentage into number
- if (processPercent) {
- n = parseInt(n * max, 10) / 100;
- }
-
- // Handle floating point rounding errors
- if ((math.abs(n - max) < 0.000001)) {
- return 1;
- }
-
- // Convert into [0, 1] range if it isn't already
- return (n % max) / parseFloat(max);
- }
-
- // Force a number between 0 and 1
- function clamp01(val) {
- return mathMin(1, mathMax(0, val));
- }
-
- // Parse an integer into hex
- function parseHex(val) {
- return parseInt(val, 16);
- }
-
- // Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
- //
- function isOnePointZero(n) {
- return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
- }
-
- // Check to see if string passed in is a percentage
- function isPercentage(n) {
- return typeof n === "string" && n.indexOf('%') != -1;
- }
-
- // Force a hex value to have 2 characters
- function pad2(c) {
- return c.length == 1 ? '0' + c : '' + c;
- }
-
- // Replace a decimal with it's percentage value
- function convertToPercentage(n) {
- if (n <= 1) {
- n = (n * 100) + "%";
- }
-
- return n;
- }
-
- var matchers = (function() {
-
- //
- var CSS_INTEGER = "[-\\+]?\\d+%?";
-
- //
- var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
-
- // Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.
- var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
-
- // Actual matching.
- // Parentheses and commas are optional, but not required.
- // Whitespace can take the place of commas or opening paren
- var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
- var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
-
- return {
- rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
- rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
- hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
- hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
- hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
- hex3: /^([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
- hex6: /^([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
- };
- })();
-
- // `stringInputToObject`
- // Permissive string parsing. Take in a number of formats, and output an object
- // based on detected format. Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
- function stringInputToObject(color) {
-
- color = color.replace(trimLeft,'').replace(trimRight, '').toLowerCase();
- var named = false;
- if (names[color]) {
- color = names[color];
- named = true;
- }
- else if (color == 'transparent') {
- return { r: 0, g: 0, b: 0, a: 0, format: "name" };
- }
-
- // Try to match string input using regular expressions.
- // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
- // Just return an object and let the conversion functions handle that.
- // This way the result will be the same whether the tinycolor is initialized with string or object.
- var match;
- if ((match = matchers.rgb.exec(color))) {
- return { r: match[1], g: match[2], b: match[3] };
- }
- if ((match = matchers.rgba.exec(color))) {
- return { r: match[1], g: match[2], b: match[3], a: match[4] };
- }
- if ((match = matchers.hsl.exec(color))) {
- return { h: match[1], s: match[2], l: match[3] };
- }
- if ((match = matchers.hsla.exec(color))) {
- return { h: match[1], s: match[2], l: match[3], a: match[4] };
- }
- if ((match = matchers.hsv.exec(color))) {
- return { h: match[1], s: match[2], v: match[3] };
- }
- if ((match = matchers.hex6.exec(color))) {
- return {
- r: parseHex(match[1]),
- g: parseHex(match[2]),
- b: parseHex(match[3]),
- format: named ? "name" : "hex"
- };
- }
- if ((match = matchers.hex3.exec(color))) {
- return {
- r: parseHex(match[1] + '' + match[1]),
- g: parseHex(match[2] + '' + match[2]),
- b: parseHex(match[3] + '' + match[3]),
- format: named ? "name" : "hex"
- };
- }
-
- return false;
- }
-
- // Expose tinycolor to window, does not need to run in non-browser context.
- window.tinycolor = tinycolor;
-
- })();
- var tinycolor = window.tinycolor;
-
- $(function () {
- if ($.fn.spectrum.load) {
- $.fn.spectrum.processNativeColorInputs();
- }
- });
-
-})(window, jQuery);
-;// TODO(grosbouddha): put under pskl namespace.
-var Constants = {
- DEFAULT : {
- HEIGHT : 32,
- WIDTH : 32,
- FPS : 12
- },
-
- MODEL_VERSION : 2,
-
- MAX_HEIGHT : 1024,
- MAX_WIDTH : 1024,
-
- MINIMUM_ZOOM : 1,
-
- PREVIEW_FILM_SIZE : 96,
- ANIMATED_PREVIEW_WIDTH : 200,
-
- DEFAULT_PEN_COLOR : '#000000',
- TRANSPARENT_COLOR : 'rgba(0, 0, 0, 0)',
-
- OVERLAY_ONION_SKIN : 'onion-skin',
- OVERLAY_LAYER_PREVIEW : 'layer-preview',
- OVERLAY_DISABLED : 'no-overlay',
-
- NO_PALETTE_ID : '__no-palette',
- CURRENT_COLORS_PALETTE_ID : '__current-colors',
- MANAGE_PALETTE_ID : '__manage-palettes',
-
- // Used for Spectrum input
- PREFERRED_COLOR_FORMAT : 'rgb',
-
- /*
- * 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://piskel-imgstore-b.appspot.com/__/upload',
- IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-b.appspot.com/img/',
-
- ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0',
-
- LEFT_BUTTON : 0,
- MIDDLE_BUTTON : 1,
- RIGHT_BUTTON : 2,
- MOUSEMOVE_THROTTLING : 10,
-
- ABSTRACT_FUNCTION : function () {throw 'abstract method should be implemented';},
- EMPTY_FUNCTION : function () {}
-};;// TODO(grosbouddha): put under pskl namespace.
-var Events = {
-
- TOOL_SELECTED : "TOOL_SELECTED",
- TOOL_RELEASED : "TOOL_RELEASED",
- SELECT_PRIMARY_COLOR: "SELECT_PRIMARY_COLOR",
- SELECT_SECONDARY_COLOR: "SELECT_SECONDARY_COLOR",
- PRIMARY_COLOR_SELECTED : 'PRIMARY_COLOR_SELECTED',
- SECONDARY_COLOR_SELECTED : 'SECONDARY_COLOR_SELECTED',
-
- CURSOR_MOVED : 'CURSOR_MOVED',
- DRAG_START : 'DRAG_START',
- DRAG_END : 'DRAG_END',
-
- DIALOG_DISPLAY : 'DIALOG_DISPLAY',
- DIALOG_HIDE : 'DIALOG_HIDE',
-
- PALETTE_LIST_UPDATED : 'PALETTE_LIST_UPDATED',
-
- /**
- * 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",
-
- 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",
- PISKEL_SAVE_STATE: "PISKEL_SAVE_STATE",
-
- PISKEL_SAVED: "PISKEL_SAVED",
-
- FRAME_SIZE_CHANGED : "FRAME_SIZE_CHANGED",
-
- SELECTION_CREATED: "SELECTION_CREATED",
- SELECTION_MOVE_REQUEST: "SELECTION_MOVE_REQUEST",
- SELECTION_DISMISSED: "SELECTION_DISMISSED",
-
- SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
- HIDE_NOTIFICATION: "HIDE_NOTIFICATION",
-
- ZOOM_CHANGED : "ZOOM_CHANGED",
-
- CURRENT_COLORS_UPDATED : "CURRENT_COLORS_UPDATED"
-};;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.normalize = function (value, def) {
- if (typeof value === 'undefined' || value === null) {
- return def;
- } else {
- return value;
- }
- };
-
- ns.inherit = function(extendedObject, inheritFrom) {
- extendedObject.prototype = Object.create(inheritFrom.prototype);
- extendedObject.prototype.constructor = extendedObject;
- extendedObject.prototype.superclass = inheritFrom.prototype;
- };
-
- ns.wrap = function (wrapper, wrappedObject) {
- for (var prop in wrappedObject) {
- if (typeof wrappedObject[prop] === 'function' && typeof wrapper[prop] === 'undefined') {
- wrapper[prop] = wrappedObject[prop].bind(wrappedObject);
- }
- }
- };
-
-})();
-
-;(function () {
- var ns = $.namespace('pskl.utils');
- var ua = navigator.userAgent;
-
- ns.UserAgent = {
- isIE : /MSIE/i.test( ua ),
- isChrome : /Chrome/i.test( ua ),
- isFirefox : /Firefox/i.test( ua )
- };
-
- ns.UserAgent.version = (function () {
- if (pskl.utils.UserAgent.isIE) {
- return parseInt(/MSIE\s?(\d+)/i.exec( ua )[1], 10);
- } else if (pskl.utils.UserAgent.isChrome) {
- return parseInt(/Chrome\/(\d+)/i.exec( ua )[1], 10);
- } else if (pskl.utils.UserAgent.isFirefox) {
- return parseInt(/Firefox\/(\d+)/i.exec( ua )[1], 10);
- }
- })();
-})();;(function () {
- var ns = $.namespace('pskl.utils');
-
- var base64_ranks;
- if (Uint8Array) {
- base64_ranks = new Uint8Array([
- 62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1,
- -1, -1, 0, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
- 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,
- -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35,
- 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51
- ]);
- }
-
- ns.Base64 = {
- decode : function(base64) {
- var outptr = 0;
- var last = [0, 0];
- var state = 0;
- var save = 0;
-
- var undef;
- var len = base64.length, i = 0;
- var buffer = new Uint8Array(len / 4 * 3 | 0);
- while (len--) {
- var code = base64.charCodeAt(i++);
- var rank = base64_ranks[code-43];
- if (rank !== 255 && rank !== undef) {
- last[1] = last[0];
- last[0] = code;
- save = (save << 6) | rank;
- state++;
- if (state === 4) {
- buffer[outptr++] = save >>> 16;
- if (last[1] !== 61 /* padding character */) {
- buffer[outptr++] = save >>> 8;
- }
- if (last[0] !== 61 /* padding character */) {
- buffer[outptr++] = save;
- }
- state = 0;
- }
- }
- }
- // 2/3 chance there's going to be some null bytes at the end, but that
- // doesn't really matter with most image formats.
- // If it somehow matters for you, truncate the buffer up outptr.
- return buffer.buffer;
- }
- };
-})();;(function () {
- var ns = $.namespace('pskl.utils');
-
- var BASE64_REGEX = /\s*;\s*base64\s*(?:;|$)/i;
-
- ns.BlobUtils = {
- dataToBlob : function(dataURI, type, callback) {
- var header_end = dataURI.indexOf(","),
- data = dataURI.substring(header_end + 1),
- isBase64 = BASE64_REGEX.test(dataURI.substring(0, header_end)),
- blob;
-
- if (Blob.fake) {
- // no reason to decode a data: URI that's just going to become a data URI again
- blob = new Blob();
- blob.encoding = isBase64 ? "base64" : "URI";
- blob.data = data;
- blob.size = data.length;
- } else if (Uint8Array) {
- var blobData = isBase64 ? pskl.utils.Base64.decode(data) : decodeURIComponent(data);
- blob = new Blob([blobData], {type: type});
- }
- callback(blob);
- },
-
- canvasToBlob : function(canvas, callback, type /*, ...args*/) {
- type = type || "image/png";
-
- if (canvas.mozGetAsFile) {
- callback(canvas.mozGetAsFile("canvas", type));
- } else {
- var args = Array.prototype.slice.call(arguments, 2);
- var dataURI = canvas.toDataURL.apply(canvas, args);
- pskl.utils.BlobUtils.dataToBlob(dataURI, type, callback);
- }
- },
-
- stringToBlob : function (string, callback, type) {
- type = type || "text/plain";
- pskl.utils.BlobUtils.dataToBlob('data:'+type+',' + string, type, callback);
- }
- };
-})();;(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;
- },
-
- createFromImageData : function (imageData) {
- var canvas = pskl.CanvasUtils.createCanvas(imageData.width, imageData.height);
- var context = canvas.getContext('2d');
- context.putImageData(imageData, 0, 0);
- return canvas;
- },
-
- /**
- * By default, all scaling operations on a Canvas 2D Context are performed using antialiasing.
- * Resizing a 32x32 image to 320x320 will lead to a blurry output.
- * On Chrome, FF and IE>=11, this can be disabled by setting a property on the Canvas 2D Context.
- * In this case the browser will use a nearest-neighbor scaling.
- * @param {Canvas} canvas
- */
- disableImageSmoothing : function (canvas) {
- var context = canvas.getContext('2d');
- context.imageSmoothingEnabled = false;
- context.mozImageSmoothingEnabled = false;
- context.oImageSmoothingEnabled = false;
- context.webkitImageSmoothingEnabled = false;
- context.msImageSmoothingEnabled = false;
- },
-
- clear : function (canvas) {
- if (canvas) {
- canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
- }
- },
-
- getImageDataFromCanvas : function (canvas) {
- var sourceContext = canvas.getContext('2d');
- return sourceContext.getImageData(0, 0, canvas.width, canvas.height).data;
- },
-
- getBase64FromCanvas : function (canvas, format) {
- format = format || "png";
- var data = canvas.toDataURL("image/" + format);
- return data.substr(data.indexOf(',')+1);
- }
- };
-})();;(function () {
- var ns = $.namespace('pskl.utils');
-
- var pad = function (num) {
- if (num < 10) {
- return "0" + num;
- } else {
- return "" + num;
- }
- };
-
- ns.DateUtils = {
- format : function (date, format) {
- return pskl.utils.Template.replace(format, {
- Y : date.getFullYear(),
- M : pad(date.getMonth() + 1),
- D : pad(date.getDate()),
- H : pad(date.getHours()),
- m : pad(date.getMinutes()),
- s : pad(date.getSeconds())
- });
- }
- };
-})();;(function () {
- var ns = $.namespace('pskl.utils');
-
- ns.Dom = {
- /**
- * Check if a given HTML element is nested inside another
- * @param {HTMLElement} node Element to test
- * @param {HTMLElement} parent Potential Ancestor for node
- * @param {Boolean} excludeParent set to true if the parent should be excluded from potential matches
- * @return {Boolean} true if parent was found amongst the parentNode chain of node
- */
- isParent : function (node, parent, excludeParent) {
- if (node && parent) {
-
- if (excludeParent) {
- node = node.parentNode;
- }
-
- while (node) {
- if (node === parent) {
- return true;
- }
- node = node.parentNode;
- }
- }
- return false;
- },
-
- getParentWithData : function (node, data) {
- while (node) {
- if (node.dataset && typeof node.dataset[data] !== 'undefined') {
- return node;
- }
- node = node.parentNode;
- }
- return null;
- }
- };
-})();;(function () {
- var ns = $.namespace('pskl.utils');
-
- ns.Math = {
- minmax : function (val, min, max) {
- return Math.max(Math.min(val, max), min);
- }
- };
-})();;(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);
- },
-
- downloadAsFile : function (content, filename) {
- var saveAs = window.saveAs || (navigator.msSaveBlob && navigator.msSaveBlob.bind(navigator));
- if (saveAs) {
- saveAs(content, filename);
- } else {
- var downloadLink = document.createElement('a');
- content = window.URL.createObjectURL(content);
- downloadLink.setAttribute('href', content);
- downloadLink.setAttribute('download', filename);
- document.body.appendChild(downloadLink);
- downloadLink.click();
- document.body.removeChild(downloadLink);
- }
- }
- };
-})();
-;(function () {
- var ns = $.namespace('pskl.utils');
- var colorCache = {};
- 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);
- }
- });
- },
-
- resize : function (frame, targetWidth, targetHeight, smoothing) {
- var image = pskl.utils.FrameUtils.toImage(frame);
- var resizedImage = pskl.utils.ImageResizer.resize(image, targetWidth, targetHeight, smoothing);
- return pskl.utils.FrameUtils.createFromImage(resizedImage);
- },
-
- /**
- * Alpha compositing using porter duff algorithm :
- * http://en.wikipedia.org/wiki/Alpha_compositing
- * http://keithp.com/~keithp/porterduff/p253-porter.pdf
- * @param {String} strColor1 color over
- * @param {String} strColor2 color under
- * @return {String} the composite color
- */
- mergePixels : function (strColor1, strColor2, globalOpacity1) {
- var col1 = pskl.utils.FrameUtils.toRgba(strColor1);
- var col2 = pskl.utils.FrameUtils.toRgba(strColor2);
- if (typeof globalOpacity1 == 'number') {
- col1 = JSON.parse(JSON.stringify(col1));
- col1.a = globalOpacity1 * col1.a;
- }
- var a = col1.a + col2.a * (1 - col1.a);
-
- var r = ((col1.r * col1.a + col2.r * col2.a * (1 - col1.a)) / a)|0;
- var g = ((col1.g * col1.a + col2.g * col2.a * (1 - col1.a)) / a)|0;
- var b = ((col1.b * col1.a + col2.b * col2.a * (1 - col1.a)) / a)|0;
-
- return 'rgba('+r+','+g+','+b+','+a+')';
- },
-
- /**
- * Convert a color defined as a string (hex, rgba, rgb, 'TRANSPARENT') to an Object with r,g,b,a properties.
- * r, g and b are integers between 0 and 255, a is a float between 0 and 1
- * @param {String} c color as a string
- * @return {Object} {r:Number,g:Number,b:Number,a:Number}
- */
- toRgba : function (c) {
- if (colorCache[c]) {
- return colorCache[c];
- }
- var color, matches;
- if (c === 'TRANSPARENT') {
- color = {
- r : 0,
- g : 0,
- b : 0,
- a : 0
- };
- } else if (c.indexOf('rgba(') != -1) {
- matches = /rgba\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(1|0\.\d+)\s*\)/.exec(c);
- color = {
- r : parseInt(matches[1],10),
- g : parseInt(matches[2],10),
- b : parseInt(matches[3],10),
- a : parseFloat(matches[4])
- };
- } else if (c.indexOf('rgb(') != -1) {
- matches = /rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(c);
- color = {
- r : parseInt(matches[1],10),
- g : parseInt(matches[2],10),
- b : parseInt(matches[3],10),
- a : 1
- };
- } else {
- matches = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(c);
- color = {
- r : parseInt(matches[1], 16),
- g : parseInt(matches[2], 16),
- b : parseInt(matches[3], 16),
- a : 1
- };
- }
- colorCache[c] = color;
- return color;
- },
-
- /*
- * 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;
- return pskl.utils.FrameUtils.createFromImageData(imgData, w, h);
- },
-
- createFromImageData : function (imageData, width, height) {
- // Draw the zoomed-up pixels to a different canvas context
- var grid = [];
- for (var x = 0 ; x < width ; x++){
- grid[x] = [];
- for (var y = 0 ; y < height ; y++){
- // Find the starting index in the one-dimensional image data
- var i = (y * width + x)*4;
- var r = imageData[i ];
- var g = imageData[i+1];
- var b = imageData[i+2];
- var a = imageData[i+3];
- if (a < 125) {
- grid[x][y] = Constants.TRANSPARENT_COLOR;
- } else {
- grid[x][y] = pskl.utils.FrameUtils.rgbToHex(r,g,b);
- }
- }
- }
- return pskl.model.Frame.fromPixelGrid(grid);
- },
-
- /**
- * Convert a rgb(Number, Number, Number) color to hexadecimal representation
- * @param {Number} r red value, between 0 and 255
- * @param {Number} g green value, between 0 and 255
- * @param {Number} b blue value, between 0 and 255
- * @return {String} hex representation of the color '#ABCDEF'
- */
- rgbToHex : function (r, g, b) {
- return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
- },
-
- /**
- * Convert a color component (as a Number between 0 and 255) to its string hexa representation
- * @param {Number} c component value, between 0 and 255
- * @return {String} eg. '0A'
- */
- componentToHex : function (c) {
- var hex = c.toString(16);
- return hex.length == 1 ? "0" + hex : hex;
- },
-
- toImage : function (frame, zoom, bgColor) {
- zoom = zoom || 1;
- bgColor = bgColor || Constants.TRANSPARENT_COLOR;
- var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
- canvasRenderer.drawTransparentAs(bgColor);
- return canvasRenderer.render();
- }
- };
-})();
-;(function () {
- var ns = $.namespace('pskl.utils');
-
- ns.LayerUtils = {
- /**
- * Create a pskl.model.Layer 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, frameCount) {
- var w = image.width,
- h = image.height,
- frameWidth = w / frameCount;
-
- var canvas = pskl.CanvasUtils.createCanvas(w, h);
- var context = canvas.getContext('2d');
-
- context.drawImage(image, 0,0,w,h,0,0,w,h);
- // Draw the zoomed-up pixels to a different canvas context
- var frames = [];
- for (var i = 0 ; i < frameCount ; i++) {
- var imgData = context.getImageData(frameWidth*i,0,frameWidth,h).data;
- var frame = pskl.utils.FrameUtils.createFromImageData(imgData, frameWidth, h);
- frames.push(frame);
- }
- return frames;
- }
- };
-
-})();;(function () {
- var ns = $.namespace('pskl.utils');
-
- ns.ImageResizer = {
- resize : function (image, targetWidth, targetHeight, smoothingEnabled) {
- var canvas = pskl.CanvasUtils.createCanvas(targetWidth, targetHeight);
- var context = canvas.getContext('2d');
- context.save();
-
- if (!smoothingEnabled) {
- pskl.CanvasUtils.disableImageSmoothing(canvas);
- }
-
- context.translate(canvas.width / 2, canvas.height / 2);
- context.scale(targetWidth / image.width, targetHeight / image.height);
- context.drawImage(image, -image.width / 2, -image.height / 2);
- context.restore();
-
- return canvas;
- },
-
- /**
- * Manual implementation of resize using a nearest neighbour algorithm
- * It is slower than relying on the native 'disabledImageSmoothing' available on CanvasRenderingContext2d.
- * But it can be useful if :
- * - IE < 11 (doesn't support msDisableImageSmoothing)
- * - need to display a gap between pixel
- *
- * @param {Canvas2d} source original image to be resized, as a 2d canvas
- * @param {Number} zoom ratio between desired dim / source dim
- * @param {Number} margin gap to be displayed between pixels
- * @param {String} color or the margin (will be transparent if not provided)
- * @return {Canvas2d} the resized canvas
- */
- resizeNearestNeighbour : function (source, zoom, margin, marginColor) {
- margin = margin || 0;
- var canvas = pskl.CanvasUtils.createCanvas(zoom*source.width, zoom*source.height);
- var context = canvas.getContext('2d');
-
- var imgData = pskl.CanvasUtils.getImageDataFromCanvas(source);
-
- var yRanges = {},
- xOffset = 0,
- yOffset = 0,
- xRange,
- yRange;
- // Draw the zoomed-up pixels to a different canvas context
- for (var x = 0; x < source.width; x++) {
- // Calculate X Range
- xRange = Math.floor((x + 1) * zoom) - xOffset;
-
- for (var y = 0; y < source.height; y++) {
- // Calculate Y Range
- if (!yRanges[y + ""]) {
- // Cache Y Range
- yRanges[y + ""] = Math.floor((y + 1) * zoom) - yOffset;
- }
- yRange = yRanges[y + ""];
-
- var i = (y * source.width + x) * 4;
- var r = imgData[i];
- var g = imgData[i + 1];
- var b = imgData[i + 2];
- var a = imgData[i + 3];
-
- context.fillStyle = "rgba(" + r + "," + g + "," + b + "," + (a / 255) + ")";
- context.fillRect(xOffset, yOffset, xRange-margin, yRange-margin);
-
- if (margin && marginColor) {
- context.fillStyle = marginColor;
- context.fillRect(xOffset + xRange - margin, yOffset, margin, yRange);
- context.fillRect(xOffset, yOffset + yRange - margin, xRange, margin);
- }
-
- yOffset += yRange;
- }
- yOffset = 0;
- xOffset += xRange;
- }
- return canvas;
- }
- };
-})();;(function () {
- var ns = $.namespace("pskl");
-
- ns.PixelUtils = {
-
- getRectanglePixels : function (x0, y0, x1, y1) {
- var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1);
- var pixels = [];
-
- for(var x = rectangle.x0; x <= rectangle.x1; x++) {
- for(var y = rectangle.y0; y <= rectangle.y1; y++) {
- pixels.push({"col": x, "row": y});
- }
- }
-
- return pixels;
- },
-
- getBoundRectanglePixels : function (x0, y0, x1, y1) {
- var rectangle = this.getOrderedRectangleCoordinates(x0, y0, x1, y1);
- var pixels = [];
- // Creating horizontal sides of the rectangle:
- for(var x = rectangle.x0; x <= rectangle.x1; x++) {
- pixels.push({"col": x, "row": rectangle.y0});
- pixels.push({"col": x, "row": rectangle.y1});
- }
-
- // Creating vertical sides of the rectangle:
- for(var y = rectangle.y0; y <= rectangle.y1; y++) {
- pixels.push({"col": rectangle.x0, "row": y});
- pixels.push({"col": rectangle.x1, "row": y});
- }
-
- return pixels;
- },
-
- /**
- * Return an object of ordered rectangle coordinate.
- * In returned object {x0, y0} => 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 zoom level 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 zoom
- */
- calculateZoomForContainer : function (container, pictureHeight, pictureWidth) {
- return this.calculateZoom(container.height(), container.width(), pictureHeight, pictureWidth);
- }
- };
-})();;(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];
- },
-
- getAndReplace : function (templateId, dict) {
- var result = "";
- var tpl = pskl.utils.Template.get(templateId);
- if (tpl) {
- result = pskl.utils.Template.replace(tpl, dict);
- }
- return result;
- },
-
- replace : function (template, dict) {
- for (var key in dict) {
- if (dict.hasOwnProperty(key)) {
- var value = dict[key];
-
- // special boolean keys keys key:default
- // if the value is a boolean, use default as value
- if (key.indexOf(':') !== -1) {
- if (value === true) {
- value = key.split(':')[1];
- } else if (value === false) {
- value = '';
- }
- }
- template = template.replace(new RegExp('\\{\\{'+key+'\\}\\}', 'g'), value);
- }
- }
- return template;
- }
- };
-})();;(function () {
- var ns = $.namespace("pskl");
-
- ns.UserSettings = {
- GRID_WIDTH : 'GRID_WIDTH',
- CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
- SELECTED_PALETTE : 'SELECTED_PALETTE',
- TILED_PREVIEW : 'TILED_PREVIEW',
- OVERLAY : 'OVERLAY',
-
- KEY_TO_DEFAULT_VALUE_MAP_ : {
- 'GRID_WIDTH' : 0,
- 'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
- 'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID,
- 'TILED_PREVIEW' : false,
- 'OVERLAY' : Constants.OVERLAY_ONION_SKIN
- },
-
- /**
- * @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.");
- }
- }
- };
-})();;(function () {
- var ns = $.namespace('pskl.utils');
-
- ns.Serializer = {
- serializePiskel : function (piskel, expanded) {
- var serializedLayers = piskel.getLayers().map(function (l) {
- return pskl.utils.Serializer.serializeLayer(l, expanded);
- });
- return JSON.stringify({
- modelVersion : Constants.MODEL_VERSION,
- piskel : {
- name : piskel.getDescriptor().name,
- description : piskel.getDescriptor().description,
- fps : pskl.app.piskelController.getFPS(),
- height : piskel.getHeight(),
- width : piskel.getWidth(),
- layers : serializedLayers,
- expanded : expanded
- }
- });
- },
-
- serializeLayer : function (layer, expanded) {
- var frames = layer.getFrames();
- var renderer = new pskl.rendering.FramesheetRenderer(frames);
- var layerToSerialize = {
- name : layer.getName(),
- frameCount : frames.length
- };
- if (expanded) {
- layerToSerialize.grids = frames.map(function (f) {return f.pixels;});
- return layerToSerialize;
- } else {
- layerToSerialize.base64PNG = renderer.renderAsCanvas().toDataURL();
- return JSON.stringify(layerToSerialize);
- }
- }
- };
-})();
-;(function () {
- var ns = $.namespace('pskl.utils.serialization');
-
- ns.Deserializer = function (data, callback) {
- this.layersToLoad_ = 0;
- this.data_ = data;
- this.callback_ = callback;
- this.piskel_ = null;
- };
-
- ns.Deserializer.deserialize = function (data, callback) {
- var deserializer;
- if (data.modelVersion == Constants.MODEL_VERSION) {
- deserializer = new ns.Deserializer(data, callback);
- } else if (data.modelVersion == 1) {
- deserializer = new ns.backward.Deserializer_v1(data, callback);
- } else {
- deserializer = new ns.backward.Deserializer_v0(data, callback);
- }
- deserializer.deserialize();
- };
-
- ns.Deserializer.prototype.deserialize = function (name) {
- var data = this.data_;
- var piskelData = data.piskel;
- name = name || 'Deserialized piskel';
-
- var descriptor = new pskl.model.piskel.Descriptor(name, '');
- this.piskel_ = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
-
- this.layersToLoad_ = piskelData.layers.length;
- if (piskelData.expanded) {
- piskelData.layers.forEach(this.loadExpandedLayer.bind(this));
- } else {
- piskelData.layers.forEach(this.deserializeLayer.bind(this));
- }
- };
-
- ns.Deserializer.prototype.deserializeLayer = function (layerString) {
- var layerData = JSON.parse(layerString);
- var layer = new pskl.model.Layer(layerData.name);
-
- // 1 - create an image to load the base64PNG representing the layer
- var base64PNG = layerData.base64PNG;
- var image = new Image();
-
- // 2 - attach the onload callback that will be triggered asynchronously
- image.onload = function () {
- // 5 - extract the frames from the loaded image
- var frames = pskl.utils.LayerUtils.createFromImage(image, layerData.frameCount);
- // 6 - add each image to the layer
- this.addFramesToLayer(frames, layer);
- }.bind(this);
-
- // 3 - set the source of the image
- image.src = base64PNG;
-
- // 4 - return a pointer to the new layer instance
- return layer;
- };
-
- ns.Deserializer.prototype.loadExpandedLayer = function (layerData) {
- var layer = new pskl.model.Layer(layerData.name);
- var frames = layerData.grids.map(function (grid) {
- return pskl.model.Frame.fromPixelGrid(grid);
- });
- this.addFramesToLayer(frames, layer);
-
- // 4 - return a pointer to the new layer instance
- return layer;
- };
-
- ns.Deserializer.prototype.addFramesToLayer = function (frames, layer) {
- frames.forEach(layer.addFrame.bind(layer));
-
- this.piskel_.addLayer(layer);
- this.onLayerLoaded_();
- };
-
- ns.Deserializer.prototype.onLayerLoaded_ = function () {
- this.layersToLoad_ = this.layersToLoad_ - 1;
- if (this.layersToLoad_ === 0) {
- this.callback_(this.piskel_);
- }
- };
-})();;(function () {
- var ns = $.namespace('pskl.utils.serialization.backward');
-
- ns.Deserializer_v0 = function (data, callback) {
- this.data_ = data;
- this.callback_ = callback;
- };
-
- ns.Deserializer_v0.prototype.deserialize = function () {
- var pixelGrids = this.data_;
- var frames = pixelGrids.map(function (grid) {
- return pskl.model.Frame.fromPixelGrid(grid);
- });
- var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
- var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
-
- this.callback_(pskl.model.Piskel.fromLayers([layer], descriptor));
- };
-})();;(function () {
- var ns = $.namespace('pskl.utils.serialization.backward');
-
- ns.Deserializer_v1 = function (data, callback) {
- this.callback_ = callback;
- this.data_ = data;
- };
-
- ns.Deserializer_v1.prototype.deserialize = function () {
- var piskelData = this.data_.piskel;
- var descriptor = new pskl.model.piskel.Descriptor('Deserialized piskel', '');
- var piskel = new pskl.model.Piskel(piskelData.width, piskelData.height, descriptor);
-
- piskelData.layers.forEach(function (serializedLayer) {
- var layer = this.deserializeLayer(serializedLayer);
- piskel.addLayer(layer);
- }.bind(this));
-
- this.callback_(piskel);
- };
-
- ns.Deserializer_v1.prototype.deserializeLayer = function (layerString) {
- var layerData = JSON.parse(layerString);
- var layer = new pskl.model.Layer(layerData.name);
- layerData.frames.forEach(function (serializedFrame) {
- var frame = this.deserializeFrame(serializedFrame);
- layer.addFrame(frame);
- }.bind(this));
-
- return layer;
- };
-
- ns.Deserializer_v1.prototype.deserializeFrame = function (frameString) {
- var framePixelGrid = JSON.parse(frameString);
- return pskl.model.Frame.fromPixelGrid(framePixelGrid);
- };
-})();;(function () {
- var ns = $.namespace("pskl.rendering");
-
- ns.DrawingLoop = function () {
- this.requestAnimationFrame = this.getRequestAnimationFrameShim_();
- this.isRunning = false;
- this.previousTime = 0;
- this.callbacks = [];
- };
-
- ns.DrawingLoop.prototype.addCallback = function (callback, scope, args) {
- var callbackObj = {
- fn : callback,
- scope : scope,
- args : args
- };
- this.callbacks.push(callbackObj);
- return callbackObj;
- };
-
- ns.DrawingLoop.prototype.removeCallback = function (callbackObj) {
- var index = this.callbacks.indexOf(callbackObj);
- if (index != -1) {
- this.callbacks.splice(index, 1);
- }
- };
-
- ns.DrawingLoop.prototype.start = function () {
- this.isRunning = true;
- this.loop_();
- };
-
- ns.DrawingLoop.prototype.loop_ = function () {
- var currentTime = Date.now();
- var delta = currentTime - this.previousTime;
- this.executeCallbacks_(delta);
- this.previousTime = currentTime;
- this.requestAnimationFrame.call(window, this.loop_.bind(this));
- };
-
- ns.DrawingLoop.prototype.executeCallbacks_ = function (deltaTime) {
- for (var i = 0 ; i < this.callbacks.length ; i++) {
- var cb = this.callbacks[i];
- cb.fn.call(cb.scope, deltaTime, cb.args);
- }
- };
-
- ns.DrawingLoop.prototype.stop = function () {
- this.isRunning = false;
- };
-
- ns.DrawingLoop.prototype.getRequestAnimationFrameShim_ = function () {
- var requestAnimationFrame = window.requestAnimationFrame ||
- window.mozRequestAnimationFrame ||
- window.webkitRequestAnimationFrame ||
- window.msRequestAnimationFrame ||
- function (callback) { window.setTimeout(callback, 1000/60); };
-
- return requestAnimationFrame;
- };
-})();;(function () {
- var ns = $.namespace("pskl.model");
- var __idCounter = 0;
- ns.Frame = function (width, height) {
- if (width && height) {
- this.width = width;
- this.height = height;
- this.id = __idCounter++;
- this.version = 0;
- this.pixels = ns.Frame.createEmptyPixelGrid_(width, height);
- this.previousStates = [this.getPixels()];
- this.stateIndex = 0;
- } else {
- throw 'Bad arguments in pskl.model.Frame constructor : ' + width + ', ' + height;
- }
- };
-
- ns.Frame.fromPixelGrid = function (pixels) {
- if (pixels.length && pixels[0].length) {
- var w = pixels.length, h = pixels[0].length;
- var frame = new pskl.model.Frame(w, h);
- frame.setPixels(pixels);
- return frame;
- } else {
- throw 'Bad arguments in pskl.model.Frame.fromPixelGrid : ' + pixels;
- }
- };
-
- ns.Frame.createEmptyPixelGrid_ = function (width, height) {
- var pixels = []; //new Array(width);
- for (var columnIndex=0; columnIndex < width; columnIndex++) {
- var columnArray = [];
- for(var heightIndex = 0; heightIndex < height; heightIndex++) {
- columnArray.push(Constants.TRANSPARENT_COLOR);
- }
- pixels[columnIndex] = columnArray;
- }
- return pixels;
- };
-
- ns.Frame.createEmptyFromFrame = function (frame) {
- return new ns.Frame(frame.getWidth(), frame.getHeight());
- };
-
- ns.Frame.prototype.clone = function () {
- var clone = new ns.Frame(this.width, this.height);
- clone.setPixels(this.getPixels());
- return clone;
- };
-
- /**
- * Returns a copy of the pixels used by the frame
- */
- ns.Frame.prototype.getPixels = function () {
- return this.clonePixels_(this.pixels);
- };
-
- /**
- * Copies the passed pixels into the frame.
- */
- ns.Frame.prototype.setPixels = function (pixels) {
- this.pixels = this.clonePixels_(pixels);
- this.version++;
- };
-
- ns.Frame.prototype.clear = function () {
- var pixels = ns.Frame.createEmptyPixelGrid_(this.getWidth(), this.getHeight());
- this.setPixels(pixels);
- };
-
- /**
- * Clone a set of pixels. Should be static utility method
- * @private
- */
- ns.Frame.prototype.clonePixels_ = function (pixels) {
- var clonedPixels = [];
- for (var col = 0 ; col < pixels.length ; col++) {
- clonedPixels[col] = pixels[col].slice(0 , pixels[col].length);
- }
- return clonedPixels;
- };
-
- ns.Frame.prototype.getHash = function () {
- return [this.id, this.version].join('-');
- };
-
- ns.Frame.prototype.setPixel = function (col, row, color) {
- if (this.containsPixel(col, row)) {
- var p = this.pixels[col][row];
- if (p !== color) {
- this.pixels[col][row] = color;
- this.version++;
- }
- }
- };
-
- ns.Frame.prototype.getPixel = function (col, row) {
- if (this.containsPixel(col, row)) {
- return this.pixels[col][row];
- } else {
- return null;
- }
- };
-
- ns.Frame.prototype.forEachPixel = function (callback) {
- for (var col = 0 ; col < this.getWidth() ; col++) {
- for (var row = 0 ; row < this.getHeight() ; row++) {
- callback(this.getPixel(col, row), col, row);
- }
- }
- };
-
- ns.Frame.prototype.getWidth = function () {
- return this.width;
- };
-
- ns.Frame.prototype.getHeight = function () {
- return this.height;
- };
-
- ns.Frame.prototype.containsPixel = function (col, row) {
- return col >= 0 && row >= 0 && col < this.width && row < this.height;
- };
-
- 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 = [];
- }
- };
-
- /**
- * Create a Layer instance from an already existing set a Frames
- * @static
- * @param {String} name layer's name
- * @param {Array} frames should all have the same dimensions
- * @return {pskl.model.Layer}
- */
- ns.Layer.fromFrames = function (name, frames) {
- var layer = new ns.Layer(name);
- frames.forEach(layer.addFrame.bind(layer));
- return layer;
- };
-
- ns.Layer.prototype.getName = function () {
- return this.name;
- };
-
- ns.Layer.prototype.setName = function (name) {
- this.name = 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(index);
- };
-
- 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.piskel');
-
- ns.Descriptor = function (name, description, isPublic) {
- this.name = name;
- this.description = description;
- this.isPublic = isPublic;
- };
-})();;(function () {
- var ns = $.namespace('pskl.model');
-
- /**
- * @constructor
- * @param {Number} width
- * @param {Number} height
- * @param {String} name
- * @param {String} description
- */
- ns.Piskel = function (width, height, descriptor) {
- if (width && height && descriptor) {
- /** @type {Array} */
- this.layers = [];
-
- /** @type {Number} */
- this.width = width;
-
- /** @type {Number} */
- this.height = height;
-
- this.descriptor = descriptor;
- } else {
- throw 'Missing arguments in Piskel constructor : ' + Array.prototype.join.call(arguments, ",");
- }
- };
-
- /**
- * Create a piskel instance from an existing set of (non empty) layers
- * Layers should all be synchronized : same number of frames, same dimensions
- * @param {Array} layers
- * @return {pskl.model.Piskel}
- */
- ns.Piskel.fromLayers = function (layers, descriptor) {
- var piskel = null;
- if (layers.length > 0 && layers[0].length() > 0) {
- var sampleFrame = layers[0].getFrameAt(0);
- piskel = new pskl.model.Piskel(sampleFrame.getWidth(), sampleFrame.getHeight(), descriptor);
- layers.forEach(piskel.addLayer.bind(piskel));
- } else {
- throw 'Piskel.fromLayers expects array of non empty pskl.model.Layer as first argument';
- }
- return piskel;
- };
-
- 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);
- };
-
- ns.Piskel.prototype.getDescriptor = function () {
- return this.descriptor;
- };
-
- ns.Piskel.prototype.setDescriptor = function (descriptor) {
- this.descriptor = descriptor;
- var appEngineEditorHeader = $('.piskel-name').html(this.descriptor.name);
- };
-
-})();;(function () {
- var ns = $.namespace("pskl.selection");
-
- var SELECTION_REPLAY = {
- PASTE : 'REPLAY_PASTE',
- ERASE : 'REPLAY_ERASE'
- };
-
- 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));
-
- pskl.app.shortcutService.addShortcut('ctrl+V', this.paste.bind(this));
- pskl.app.shortcutService.addShortcut('ctrl+shift+V', this.pasteOpaqueOnly.bind(this));
- pskl.app.shortcutService.addShortcut('ctrl+X', this.cut.bind(this));
- pskl.app.shortcutService.addShortcut('ctrl+C', this.copy.bind(this));
- pskl.app.shortcutService.addShortcut('del', this.erase.bind(this));
- pskl.app.shortcutService.addShortcut('back', this.onBackPressed_.bind(this));
-
- $.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
- };
-
- /**
- * @private
- */
- ns.SelectionManager.prototype.cleanSelection_ = function() {
- if(this.currentSelection) {
- this.currentSelection.reset();
- this.currentSelection = null;
- }
- };
-
- /**
- * @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_();
- };
-
- ns.SelectionManager.prototype.onBackPressed_ = function(evt) {
- if (this.currentSelection) {
- this.erase();
- } else {
- return true; // bubble
- }
- };
-
- ns.SelectionManager.prototype.erase = function () {
- var pixels = this.currentSelection.pixels;
- var currentFrame = this.piskelController.getCurrentFrame();
- for(var i=0, l=pixels.length; i 0) {
- return this.renderers[0];
- } else {
- throw 'Renderer manager is empty';
- }
- };
-})();;(function () {
- var ns = $.namespace('pskl.rendering.layer');
-
- ns.LayersRenderer = function (container, renderingOptions, piskelController) {
- pskl.rendering.CompositeRenderer.call(this);
-
- this.piskelController = piskelController;
-
- // Do not use CachedFrameRenderers here, since the caching will be performed in the render method of LayersRenderer
- this.belowRenderer = new pskl.rendering.frame.FrameRenderer(container, renderingOptions, ["layers-canvas", "layers-below-canvas"]);
- this.aboveRenderer = new pskl.rendering.frame.FrameRenderer(container, renderingOptions, ["layers-canvas", "layers-above-canvas"]);
-
- this.add(this.belowRenderer);
- this.add(this.aboveRenderer);
-
- this.serializedRendering = '';
- };
-
- pskl.utils.inherit(pskl.rendering.layer.LayersRenderer, pskl.rendering.CompositeRenderer);
-
- ns.LayersRenderer.prototype.render = function () {
- var offset = this.getOffset();
- var size = this.getDisplaySize();
- var layers = this.piskelController.getLayers();
- var currentFrameIndex = this.piskelController.getCurrentFrameIndex();
- var currentLayerIndex = this.piskelController.getCurrentLayerIndex();
-
- var serializedRendering = [
- this.getZoom(),
- this.getGridWidth(),
- offset.x,
- offset.y,
- size.width,
- size.height,
- currentFrameIndex,
- currentLayerIndex,
- layers.length
- ].join("-");
-
-
- if (this.serializedRendering != serializedRendering) {
- this.serializedRendering = serializedRendering;
-
- this.clear();
-
- var downLayers = layers.slice(0, currentLayerIndex);
- if (downLayers.length > 0) {
- var downFrame = this.getFrameForLayersAt_(currentFrameIndex, downLayers);
- this.belowRenderer.render(downFrame);
- }
-
- var upLayers = layers.slice(currentLayerIndex + 1, layers.length);
- if (upLayers.length > 0) {
- var upFrame = this.getFrameForLayersAt_(currentFrameIndex, upLayers);
- this.aboveRenderer.render(upFrame);
- }
-
- }
- };
-
- /**
- * See @pskl.rendering.frame.CachedFrameRenderer
- * Same issue : FrameRenderer setDisplaySize destroys the canvas
- * @param {Number} width
- * @param {Number} height
- */
- ns.LayersRenderer.prototype.setDisplaySize = function (width, height) {
- var size = this.getDisplaySize();
- if (size.width !== width || size.height !== height) {
- this.superclass.setDisplaySize.call(this, width, height);
- }
- };
-
- ns.LayersRenderer.prototype.getFrameForLayersAt_ = function (frameIndex, layers) {
- var frames = layers.map(function (l) {
- return l.getFrameAt(frameIndex);
- });
- return pskl.utils.FrameUtils.merge(frames);
- };
-
- ns.LayersRenderer.prototype.flush = function () {
- this.serializedRendering = '';
- };
-})();
-;(function () {
- var ns = $.namespace("pskl.rendering.frame");
-
- /**
- * FrameRenderer will display a given frame inside a canvas element.
- * @param {HtmlElement} container HtmlElement to use as parentNode of the Frame
- * @param {Object} renderingOptions
- * @param {Array} classes array of strings to use for css classes
- */
- ns.FrameRenderer = function (container, renderingOptions, classes) {
- this.defaultRenderingOptions = {
- 'supportGridRendering' : false,
- 'zoom' : 1
- };
-
- renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
-
- if(container === undefined) {
- throw 'Bad FrameRenderer initialization. undefined.';
- }
-
- if(isNaN(renderingOptions.zoom)) {
- throw 'Bad FrameRenderer initialization. not well defined.';
- }
-
- this.container = container;
-
- this.zoom = renderingOptions.zoom;
-
- this.offset = {
- x : 0,
- y : 0
- };
-
- this.margin = {
- x : 0,
- y : 0
- };
-
- this.supportGridRendering = renderingOptions.supportGridRendering;
-
- this.classes = classes || [];
- this.classes.push('canvas');
-
- /**
- * Off dom canvas, will be used to draw the frame at 1:1 ratio
- * @type {HTMLElement}
- */
- this.canvas = null;
-
- /**
- * Displayed canvas, scaled-up from the offdom canvas
- * @type {HTMLElement}
- */
- this.displayCanvas = null;
- this.setDisplaySize(renderingOptions.width, renderingOptions.height);
-
- this.setGridWidth(pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH));
-
- $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
- };
-
- pskl.utils.inherit(pskl.rendering.frame.FrameRenderer, pskl.rendering.AbstractRenderer);
-
- ns.FrameRenderer.prototype.render = function (frame) {
- if (frame) {
- this.clear();
- this.renderFrame_(frame);
- }
- };
-
- ns.FrameRenderer.prototype.clear = function () {
- pskl.CanvasUtils.clear(this.canvas);
- pskl.CanvasUtils.clear(this.displayCanvas);
- };
-
- ns.FrameRenderer.prototype.setZoom = function (zoom) {
- if (zoom > Constants.MINIMUM_ZOOM) {
- // back up center coordinates
- var centerX = this.offset.x + (this.displayWidth/(2*this.zoom));
- var centerY = this.offset.y + (this.displayHeight/(2*this.zoom));
-
- this.zoom = zoom;
- // recenter
- this.setOffset(
- centerX - (this.displayWidth/(2*this.zoom)),
- centerY - (this.displayHeight/(2*this.zoom))
- );
- }
- };
-
- ns.FrameRenderer.prototype.getZoom = function () {
- return this.zoom;
- };
-
- ns.FrameRenderer.prototype.setDisplaySize = function (width, height) {
- this.displayWidth = width;
- this.displayHeight = height;
- if (this.displayCanvas) {
- $(this.displayCanvas).remove();
- this.displayCanvas = null;
- }
- this.createDisplayCanvas_();
- };
-
- ns.FrameRenderer.prototype.getDisplaySize = function () {
- return {
- height : this.displayHeight,
- width : this.displayWidth
- };
- };
-
- ns.FrameRenderer.prototype.getOffset = function () {
- return {
- x : this.offset.x,
- y : this.offset.y
- };
- };
-
- ns.FrameRenderer.prototype.setOffset = function (x, y) {
- var width = pskl.app.piskelController.getWidth();
- var height = pskl.app.piskelController.getHeight();
- var maxX = width - (this.displayWidth/this.zoom);
- x = pskl.utils.Math.minmax(x, 0, maxX);
- var maxY = height - (this.displayHeight/this.zoom);
- y = pskl.utils.Math.minmax(y, 0, maxY);
-
- this.offset.x = x;
- this.offset.y = y;
- };
-
- ns.FrameRenderer.prototype.setGridWidth = function (value) {
- this.gridWidth_ = value;
- };
-
- ns.FrameRenderer.prototype.getGridWidth = function () {
- if (this.supportGridRendering) {
- return this.gridWidth_;
- } else {
- return 0;
- }
- };
-
- ns.FrameRenderer.prototype.updateMargins_ = function (frame) {
- var deltaX = this.displayWidth - (this.zoom * frame.getWidth());
- this.margin.x = Math.max(0, deltaX) / 2;
-
- var deltaY = this.displayHeight - (this.zoom * frame.getHeight());
- this.margin.y = Math.max(0, deltaY) / 2;
- };
-
- ns.FrameRenderer.prototype.createDisplayCanvas_ = function () {
- var height = this.displayHeight;
- var width = this.displayWidth;
-
- this.displayCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes);
- pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas);
- this.container.append(this.displayCanvas);
- };
-
- ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
- if (settingName == pskl.UserSettings.GRID_WIDTH) {
- this.setGridWidth(settingValue);
- }
- };
-
- ns.FrameRenderer.prototype.renderPixel_ = function (color, x, y, context) {
- if(color != Constants.TRANSPARENT_COLOR) {
- context.fillStyle = color;
- context.fillRect(x, y, 1, 1);
- }
- };
-
- /**
- * 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.getCoordinates = function(x, y) {
- var containerOffset = this.container.offset();
- x = x - containerOffset.left;
- y = y - containerOffset.top;
-
- // apply margins
- x = x - this.margin.x;
- y = y - this.margin.y;
-
- var cellSize = this.zoom;
- // apply frame offset
- x = x + this.offset.x * cellSize;
- y = y + this.offset.y * cellSize;
-
- return {
- x : Math.floor(x / cellSize),
- y : Math.floor(y / cellSize)
- };
- };
-
- /**
- * @private
- */
- ns.FrameRenderer.prototype.renderFrame_ = function (frame) {
- if (!this.canvas || frame.getWidth() != this.canvas.width || frame.getHeight() != this.canvas.height) {
- this.canvas = pskl.CanvasUtils.createCanvas(frame.getWidth(), frame.getHeight());
- }
-
- var context = this.canvas.getContext('2d');
- for(var x = 0, width = frame.getWidth(); x < width; x++) {
- for(var y = 0, height = frame.getHeight(); y < height; y++) {
- var color = frame.getPixel(x, y);
- this.renderPixel_(color, x, y, context);
- }
- }
-
- this.updateMargins_(frame);
-
- var displayContext = this.displayCanvas.getContext('2d');
- displayContext.save();
-
- if (this.canvas.width*this.zoom < this.displayCanvas.width) {
- displayContext.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
- displayContext.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height);
- }
-
- displayContext.translate(
- this.margin.x-this.offset.x*this.zoom,
- this.margin.y-this.offset.y*this.zoom
- );
-
- displayContext.clearRect(0, 0, this.canvas.width*this.zoom, this.canvas.height*this.zoom);
-
- var isIE10 = pskl.utils.UserAgent.isIE && pskl.utils.UserAgent.version === 10;
-
- var gridWidth = this.getGridWidth();
- var isGridEnabled = gridWidth > 0;
- if (isGridEnabled || isIE10) {
- var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, this.zoom, gridWidth);
- displayContext.drawImage(scaled, 0, 0);
- } else {
- displayContext.scale(this.zoom, this.zoom);
- displayContext.drawImage(this.canvas, 0, 0);
- }
- displayContext.restore();
- };
-})();;(function () {
- var ns = $.namespace('pskl.rendering');
-
- ns.OnionSkinRenderer = function (container, renderingOptions, piskelController) {
- pskl.rendering.CompositeRenderer.call(this);
-
- this.piskelController = piskelController;
-
- // Do not use CachedFrameRenderers here, since the caching will be performed in the render method of LayersRenderer
- this.renderer = new pskl.rendering.frame.FrameRenderer(container, renderingOptions, ["onion-skin-canvas"]);
-
- this.add(this.renderer);
-
- this.serializedRendering = '';
- };
-
- pskl.utils.inherit(pskl.rendering.OnionSkinRenderer, pskl.rendering.CompositeRenderer);
-
- ns.OnionSkinRenderer.prototype.render = function () {
- var offset = this.getOffset();
- var size = this.getDisplaySize();
- var layers = this.piskelController.getLayers();
- var currentFrameIndex = this.piskelController.getCurrentFrameIndex();
-
- var frames = [];
- this.addFrameAtIndexToArray_(currentFrameIndex - 1, frames);
- this.addFrameAtIndexToArray_(currentFrameIndex + 1, frames);
-
- var serializedRendering = [
- this.getZoom(),
- this.getGridWidth(),
- offset.x,
- offset.y,
- size.width,
- size.height,
- frames.map(function (f) {
- return f.getHash();
- }).join('-'),
- layers.length
- ].join("-");
-
-
- if (this.serializedRendering != serializedRendering) {
- this.serializedRendering = serializedRendering;
-
- if (frames.length > 0) {
- this.clear();
- var mergedFrame = pskl.utils.FrameUtils.merge(frames);
- this.renderer.render(mergedFrame);
- }
- }
- };
-
- ns.OnionSkinRenderer.prototype.addFrameAtIndexToArray_ = function (frameIndex, frames) {
- var layer = this.piskelController.getCurrentLayer();
- if (this.piskelController.hasFrameAt(frameIndex)) {
- frames.push(layer.getFrameAt(frameIndex));
- }
- };
-
- /**
- * See @pskl.rendering.frame.CachedFrameRenderer
- * Same issue : FrameRenderer setDisplaySize destroys the canvas
- * @param {Number} width
- * @param {Number} height
- */
- ns.OnionSkinRenderer.prototype.setDisplaySize = function (width, height) {
- var size = this.getDisplaySize();
- if (size.width !== width || size.height !== height) {
- this.superclass.setDisplaySize.call(this, width, height);
- }
- };
-
- ns.OnionSkinRenderer.prototype.flush = function () {
- this.serializedRendering = '';
- };
-})();;(function () {
- var ns = $.namespace('pskl.rendering.frame');
-
- ns.TiledFrameRenderer = function (container, zoom) {
- this.container = container;
- this.setZoom(zoom);
-
- this.displayContainer = document.createElement('div');
- this.displayContainer.classList.add('tiled-frame-container');
- container.get(0).appendChild(this.displayContainer);
- };
-
- ns.TiledFrameRenderer.prototype.render = function (frame) {
- var canvas = new pskl.utils.FrameUtils.toImage(frame, this.zoom);
- this.displayContainer.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ')';
- };
-
- ns.TiledFrameRenderer.prototype.show = function () {
- if (this.displayContainer) {
- this.displayContainer.style.display = 'block';
- }
- };
-
- ns.TiledFrameRenderer.prototype.setZoom = function (zoom) {
- this.zoom = zoom;
- };
-
- ns.TiledFrameRenderer.prototype.getZoom = function () {
- return this.zoom;
- };
-})();;(function () {
- var ns = $.namespace('pskl.rendering.frame');
-
- /**
- * FrameRenderer implementation that prevents unnecessary redraws.
- * @param {HtmlElement} container HtmlElement to use as parentNode of the Frame
- * @param {Object} renderingOptions
- * @param {Array} classes array of strings to use for css classes
- */
- ns.CachedFrameRenderer = function (container, renderingOptions, classes) {
- pskl.rendering.frame.FrameRenderer.call(this, container, renderingOptions, classes);
- this.serializedFrame = '';
- };
-
- pskl.utils.inherit(pskl.rendering.frame.CachedFrameRenderer, pskl.rendering.frame.FrameRenderer);
-
- /**
- * Only call display size if provided values are different from current values.
- * FrameRenderer:setDisplaySize destroys the underlying canvas
- * If the canvas is destroyed, a rendering is mandatory.
- * (Alternatively we could find a way to force the rendering of the CachedFrameRenderer from the outside)
- * @param {Number} width
- * @param {Number} height
- */
- ns.CachedFrameRenderer.prototype.setDisplaySize = function (width, height) {
- if (this.displayWidth !== width || this.displayHeight !== height) {
- this.superclass.setDisplaySize.call(this, width, height);
- }
- };
-
- ns.CachedFrameRenderer.prototype.render = function (frame) {
- var offset = this.getOffset();
- var size = this.getDisplaySize();
- var serializedFrame = [
- this.getZoom(),
- this.getGridWidth(),
- offset.x, offset.y,
- size.width, size.height,
- frame.getHash()
- ].join('-');
- if (this.serializedFrame != serializedFrame) {
- // console.log('rendering')
- this.serializedFrame = serializedFrame;
- this.superclass.render.call(this, frame);
- }
- };
-})();
-;(function () {
-
- var ns = $.namespace("pskl.rendering");
- ns.CanvasRenderer = function (frame, zoom) {
- this.frame = frame;
- this.zoom = zoom;
- this.transparentColor_ = 'white';
- };
-
- /**
- * Decide which color should be used to represent transparent pixels
- * Default : white
- * @param {String} color the color to use either as '#ABCDEF' or 'red' or 'rgb(x,y,z)' or 'rgba(x,y,z,a)'
- */
- ns.CanvasRenderer.prototype.drawTransparentAs = function (color) {
- this.transparentColor_ = color;
- };
-
- ns.CanvasRenderer.prototype.render = function () {
- var canvas = this.createCanvas_();
- var context = canvas.getContext('2d');
- this.frame.forEachPixel(function (color, x, y) {
- this.renderPixel_(color, x, y, context);
- }.bind(this));
-
- var scaledCanvas = this.createCanvas_(this.zoom);
- var scaledContext = scaledCanvas.getContext('2d');
- pskl.CanvasUtils.disableImageSmoothing(scaledCanvas);
- scaledContext.scale(this.zoom, this.zoom);
- scaledContext.drawImage(canvas, 0, 0);
-
- return scaledCanvas;
- };
-
- ns.CanvasRenderer.prototype.renderPixel_ = function (color, x, y, context) {
- if(color == Constants.TRANSPARENT_COLOR) {
- color = this.transparentColor_;
- }
- context.fillStyle = color;
- context.fillRect(x, y, 1, 1);
- };
-
- ns.CanvasRenderer.prototype.createCanvas_ = function (zoom) {
- zoom = zoom || 1;
- var width = this.frame.getWidth() * zoom;
- var height = this.frame.getHeight() * zoom;
- return pskl.CanvasUtils.createCanvas(width, height);
- };
-})();;(function () {
- var ns = $.namespace('pskl.rendering');
-
- /**
- * Render an array of frames
- * @param {Array.} frames
- */
- ns.FramesheetRenderer = function (frames) {
- if (frames.length > 0) {
- this.frames = frames;
- } else {
- throw 'FramesheetRenderer : Invalid argument : frames is empty';
- }
- };
-
- ns.FramesheetRenderer.prototype.renderAsCanvas = function () {
- var canvas = this.createCanvas_();
- for (var i = 0 ; i < this.frames.length ; i++) {
- var frame = this.frames[i];
- this.drawFrameInCanvas_(frame, canvas, i * frame.getWidth(), 0);
- }
- return canvas;
- };
-
- ns.FramesheetRenderer.prototype.drawFrameInCanvas_ = function (frame, canvas, offsetWidth, offsetHeight) {
- var context = canvas.getContext('2d');
- frame.forEachPixel(function (color, x, y) {
- if(color != Constants.TRANSPARENT_COLOR) {
- context.fillStyle = color;
- context.fillRect(x + offsetWidth, y + offsetHeight, 1, 1);
- }
- });
- };
-
- ns.FramesheetRenderer.prototype.createCanvas_ = function () {
- var sampleFrame = this.frames[0];
- var count = this.frames.length;
- var width = count * sampleFrame.getWidth();
- var height = sampleFrame.getHeight();
- return pskl.CanvasUtils.createCanvas(width, height);
- };
-
-})();;(function () {
-
- var ns = $.namespace("pskl.rendering");
-
- ns.PiskelRenderer = function (piskelController) {
- var frames = [];
- for (var i = 0 ; i < piskelController.getFrameCount() ; i++) {
- frames.push(piskelController.getFrameAt(i));
- }
- ns.FramesheetRenderer.call(this, frames);
- };
-
- pskl.utils.inherit(ns.PiskelRenderer, ns.FramesheetRenderer);
-})();;(function () {
- var ns = $.namespace('pskl.controller.piskel');
-
- ns.PiskelController = function (piskel) {
- if (piskel) {
- this.setPiskel(piskel);
- } else {
- throw 'A piskel instance is mandatory for instanciating PiskelController';
- }
- };
-
- /**
- * Set the current piskel. Will reset the selected frame and layer unless specified
- * @param {Object} piskel
- * @param {Boolean} preserveState if true, keep the selected frame and layer
- */
- ns.PiskelController.prototype.setPiskel = function (piskel, preserveState) {
- this.piskel = piskel;
- if (!preserveState) {
- this.currentLayerIndex = 0;
- this.currentFrameIndex = 0;
- }
-
- this.layerIdCounter = 1;
- };
-
- ns.PiskelController.prototype.init = function () {
- };
-
- 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.getLayerAt(this.currentLayerIndex);
- };
-
- ns.PiskelController.prototype.getLayerAt = function (index) {
- return this.piskel.getLayerAt(index);
- };
-
- ns.PiskelController.prototype.getCurrentFrame = function () {
- var layer = this.getCurrentLayer();
- return layer.getFrameAt(this.currentFrameIndex);
- };
-
-
- ns.PiskelController.prototype.getCurrentLayerIndex = function () {
- return this.currentLayerIndex;
- };
-
- ns.PiskelController.prototype.getCurrentFrameIndex = function () {
- return this.currentFrameIndex;
- };
-
- ns.PiskelController.prototype.getPiskel = function () {
- return this.piskel;
- };
-
- 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);
- };
-
- ns.PiskelController.prototype.addFrame = function () {
- this.addFrameAt(this.getFrameCount());
- };
-
- ns.PiskelController.prototype.addFrameAtCurrentIndex = function () {
- this.addFrameAt(this.currentFrameIndex + 1);
- };
-
- ns.PiskelController.prototype.addFrameAt = function (index) {
- this.getLayers().forEach(function (l) {
- l.addFrameAt(this.createEmptyFrame_(), index);
- }.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) {
- this.getLayers().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.currentFrameIndex > 0) {
- this.setCurrentFrameIndex(this.currentFrameIndex - 1);
- }
- };
-
- ns.PiskelController.prototype.duplicateCurrentFrame = function () {
- this.duplicateFrameAt(this.currentFrameIndex);
- };
-
- ns.PiskelController.prototype.duplicateFrameAt = function (index) {
- this.getLayers().forEach(function (l) {
- l.duplicateFrameAt(index);
- });
- };
-
- ns.PiskelController.prototype.moveFrame = function (fromIndex, toIndex) {
- this.getLayers().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;
- };
-
- ns.PiskelController.prototype.selectNextFrame = function () {
- var nextIndex = this.currentFrameIndex + 1;
- if (nextIndex < this.getFrameCount()) {
- this.setCurrentFrameIndex(nextIndex);
- }
- };
-
- ns.PiskelController.prototype.selectPreviousFrame = function () {
- var nextIndex = this.currentFrameIndex - 1;
- if (nextIndex >= 0) {
- this.setCurrentFrameIndex(nextIndex);
- }
- };
-
- ns.PiskelController.prototype.setCurrentLayerIndex = function (index) {
- this.currentLayerIndex = index;
- };
-
- ns.PiskelController.prototype.selectLayer = function (layer) {
- var index = this.getLayers().indexOf(layer);
- if (index != -1) {
- this.setCurrentLayerIndex(index);
- }
- };
-
- ns.PiskelController.prototype.renameLayerAt = function (index, name) {
- var layer = this.getLayerByIndex(index);
- if (layer) {
- layer.setName(name);
- }
- };
-
- ns.PiskelController.prototype.getLayerByIndex = function (index) {
- var layers = this.getLayers();
- if (layers[index]) {
- return layers[index];
- } else {
- return null;
- }
- };
-
- 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.removeLayerAt = function (index) {
- if (this.getLayers().length > 1) {
- var layer = this.getLayerAt(index);
- if (layer) {
- this.piskel.removeLayer(layer);
- this.setCurrentLayerIndex(0);
- }
- }
- };
-
- ns.PiskelController.prototype.serialize = function (expanded) {
- return pskl.utils.Serializer.serializePiskel(this.piskel, expanded);
- };
-})();;(function () {
- var ns = $.namespace('pskl.controller.piskel');
-
- ns.PublicPiskelController = function (piskelController) {
- this.piskelController = piskelController;
- pskl.utils.wrap(this, this.piskelController);
- };
-
- ns.PublicPiskelController.prototype.init = function () {
- pskl.app.shortcutService.addShortcut('up', this.selectPreviousFrame.bind(this));
- pskl.app.shortcutService.addShortcut('down', this.selectNextFrame.bind(this));
- pskl.app.shortcutService.addShortcut('n', this.addFrameAtCurrentIndex.bind(this));
- pskl.app.shortcutService.addShortcut('shift+n', this.duplicateCurrentFrame.bind(this));
- };
-
- ns.PublicPiskelController.prototype.setPiskel = function (piskel, preserveState) {
- this.piskelController.setPiskel(piskel, preserveState);
-
- $.publish(Events.FRAME_SIZE_CHANGED);
- $.publish(Events.PISKEL_RESET);
- $.publish(Events.PISKEL_SAVE_STATE, {
- type : pskl.service.HistoryService.SNAPSHOT
- });
- };
-
- ns.PublicPiskelController.prototype.addFrame = function () {
- this.addFrameAt(this.getFrameCount());
- };
-
- ns.PublicPiskelController.prototype.addFrameAtCurrentIndex = function () {
- this.addFrameAt(this.getCurrentFrameIndex());
- };
-
- ns.PublicPiskelController.prototype.addFrameAt = function (index) {
- this.raiseSaveStateEvent_(this.piskelController.addFrameAt, [index]);
- this.piskelController.addFrameAt(index);
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.removeFrameAt = function (index) {
- this.raiseSaveStateEvent_(this.piskelController.removeFrameAt, [index]);
- this.piskelController.removeFrameAt(index);
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.duplicateCurrentFrame = function () {
- this.duplicateFrameAt(this.getCurrentFrameIndex());
- };
-
- ns.PublicPiskelController.prototype.raiseSaveStateEvent_ = function (fn, args) {
- $.publish(Events.PISKEL_SAVE_STATE, {
- type : pskl.service.HistoryService.REPLAY,
- scope : this,
- replay : {
- fn : fn,
- args : args
- }
- });
- };
-
- ns.PublicPiskelController.prototype.replay = function (frame, replayData) {
- replayData.fn.apply(this.piskelController, replayData.args);
- };
-
- ns.PublicPiskelController.prototype.duplicateFrameAt = function (index) {
- this.raiseSaveStateEvent_(this.piskelController.duplicateFrameAt, [index]);
- this.piskelController.duplicateFrameAt(index);
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.moveFrame = function (fromIndex, toIndex) {
- this.raiseSaveStateEvent_(this.piskelController.moveFrame, [fromIndex, toIndex]);
- this.piskelController.moveFrame(fromIndex, toIndex);
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.setCurrentFrameIndex = function (index) {
- this.piskelController.setCurrentFrameIndex(index);
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.selectNextFrame = function () {
- this.piskelController.selectNextFrame();
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.selectPreviousFrame = function () {
- this.piskelController.selectPreviousFrame();
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.setCurrentLayerIndex = function (index) {
- this.piskelController.setCurrentLayerIndex(index);
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.selectLayer = function (layer) {
- this.piskelController.selectLayer(layer);
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.renameLayerAt = function (index, name) {
- this.raiseSaveStateEvent_(this.piskelController.renameLayerAt, [index, name]);
- this.piskelController.renameLayerAt(index, name);
- };
-
- ns.PublicPiskelController.prototype.createLayer = function (name) {
- this.raiseSaveStateEvent_(this.piskelController.createLayer, [name]);
- this.piskelController.createLayer(name);
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.moveLayerUp = function () {
- this.raiseSaveStateEvent_(this.piskelController.moveLayerUp, []);
- this.piskelController.moveLayerUp();
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.moveLayerDown = function () {
- this.raiseSaveStateEvent_(this.piskelController.moveLayerDown, []);
- this.piskelController.moveLayerDown();
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.removeCurrentLayer = function () {
- var currentLayerIndex = this.getCurrentLayerIndex();
- this.raiseSaveStateEvent_(this.piskelController.removeLayerAt, [currentLayerIndex]);
- this.piskelController.removeLayerAt(currentLayerIndex);
- $.publish(Events.PISKEL_RESET);
- };
-
- ns.PublicPiskelController.prototype.getCurrentLayerIndex = function () {
- return this.piskelController.getCurrentLayerIndex();
- };
-
- ns.PublicPiskelController.prototype.getCurrentFrameIndex = function () {
- return this.piskelController.currentFrameIndex;
- };
-
- ns.PublicPiskelController.prototype.getPiskel = function () {
- return this.piskelController.piskel;
- };
-
-})();;(function () {
- var ns = $.namespace('pskl.controller');
-
- ns.CursorCoordinatesController = function (piskelController) {
- this.piskelController = piskelController;
- this.origin = null;
- this.coordinates = {x:-1,y:-1};
-
- };
-
- ns.CursorCoordinatesController.prototype.init = function () {
- this.coordinatesContainer = document.querySelector('.cursor-coordinates');
-
- $.subscribe(Events.CURSOR_MOVED, this.onCursorMoved_.bind(this));
- $.subscribe(Events.DRAG_START, this.onDragStart_.bind(this));
- $.subscribe(Events.DRAG_END, this.onDragEnd_.bind(this));
- $.subscribe(Events.FRAME_SIZE_CHANGED, this.redraw.bind(this));
-
- this.redraw();
- };
-
- ns.CursorCoordinatesController.prototype.redraw = function () {
- var html = '';
- if (this.origin) {
- html += this.origin.x + ':' + this.origin.y + ' to ';
- }
-
- var x = this.coordinates.x;
- var y = this.coordinates.y;
- var currentFrame = this.piskelController.getCurrentFrame();
- if (currentFrame.containsPixel(x, y)) {
- html += x + ':' + y;
- if (this.origin) {
- var dX = Math.abs(x-this.origin.x) + 1;
- var dY = Math.abs(y-this.origin.y) + 1;
- html += ' (' + dX + 'x' + dY +')';
- }
- }
-
- this.coordinatesContainer.innerHTML = this.getFrameSizeHTML_() + html;
- };
-
- ns.CursorCoordinatesController.prototype.getFrameSizeHTML_ = function () {
- var w = this.piskelController.getWidth();
- var h = this.piskelController.getHeight();
- return '['+w+'x'+h+'] ';
- };
-
- ns.CursorCoordinatesController.prototype.onCursorMoved_ = function (event, x, y) {
- this.coordinates = {x:x, y:y};
- this.redraw();
- };
-
- ns.CursorCoordinatesController.prototype.onDragStart_ = function (event, x, y) {
- this.origin = {x:x, y:y};
- this.redraw();
- };
-
- ns.CursorCoordinatesController.prototype.onDragEnd_ = function (event, x, y) {
- this.origin = null;
- this.redraw();
- };
-
-})();;(function () {
-
- var ns = $.namespace("pskl.controller");
-
- ns.DrawingController = function (piskelController, paletteController, container) {
- /**
- * @public
- */
- this.piskelController = piskelController;
-
- this.paletteController = paletteController;
-
- /**
- * @public
- */
- this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(piskelController.getCurrentFrame());
-
- /**
- * @private
- */
- this.container = container;
-
- // TODO(vincz): Store user prefs in a localstorage string ?
- var renderingOptions = {
- "zoom": this.calculateZoom_(),
- "supportGridRendering" : true,
- "height" : this.getContainerHeight_(),
- "width" : this.getContainerWidth_(),
- "xOffset" : 0,
- "yOffset" : 0
- };
-
- this.overlayRenderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, renderingOptions, ["canvas-overlay"]);
- this.renderer = new pskl.rendering.frame.CachedFrameRenderer(this.container, renderingOptions, ["drawing-canvas"]);
- this.onionSkinRenderer = new pskl.rendering.OnionSkinRenderer(this.container, renderingOptions, piskelController);
- this.layersRenderer = new pskl.rendering.layer.LayersRenderer(this.container, renderingOptions, piskelController);
-
- this.compositeRenderer = new pskl.rendering.CompositeRenderer();
- this.compositeRenderer
- .add(this.overlayRenderer)
- .add(this.renderer)
- .add(this.layersRenderer)
- .add(this.onionSkinRenderer);
-
- // State of drawing controller:
- this.isClicked = false;
- this.previousMousemoveTime = 0;
- this.currentToolBehavior = null;
-
- // State of clicked button (need to be stateful here, see comment in getCurrentColor_)
- this.currentMouseButton_ = Constants.LEFT_BUTTON;
- };
-
- ns.DrawingController.prototype.init = function () {
- this.initMouseBehavior();
-
- $.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
- this.currentToolBehavior = toolBehavior;
- this.overlayFrame.clear();
- }, this));
-
- $(window).resize($.proxy(this.startResizeTimer_, this));
-
- $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
- $.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.onFrameSizeChanged_, this));
-
- pskl.app.shortcutService.addShortcut('0', this.resetZoom_.bind(this));
- pskl.app.shortcutService.addShortcut('+', this.increaseZoom_.bind(this, 1));
- pskl.app.shortcutService.addShortcut('-', this.decreaseZoom_.bind(this, 1));
-
- window.setTimeout(this.afterWindowResize_.bind(this), 100);
- };
-
- ns.DrawingController.prototype.initMouseBehavior = function() {
- var body = $('body');
- this.container.mousedown($.proxy(this.onMousedown_, this));
-
- if (pskl.utils.UserAgent.isChrome) {
- this.container.on('mousewheel', $.proxy(this.onMousewheel_, this));
- } else {
- this.container.on('wheel', $.proxy(this.onMousewheel_, this));
- }
-
- window.addEventListener('mouseup', this.onMouseup_.bind(this));
- window.addEventListener('mousemove', this.onMousemove_.bind(this));
- window.addEventListener('keyup', this.onKeyup_.bind(this));
-
- // Deactivate right click:
- body.contextmenu(this.onCanvasContextMenu_);
- };
-
- ns.DrawingController.prototype.startResizeTimer_ = function () {
- if (this.resizeTimer) {
- window.clearInterval(this.resizeTimer);
- }
- this.resizeTimer = window.setTimeout($.proxy(this.afterWindowResize_, this), 200);
- };
-
- ns.DrawingController.prototype.afterWindowResize_ = function () {
- var initialWidth = this.compositeRenderer.getDisplaySize().width;
- this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
- this.centerColumnWrapperHorizontally_();
- var ratio = this.compositeRenderer.getDisplaySize().width / initialWidth;
- var newZoom = ratio * this.compositeRenderer.getZoom();
- this.compositeRenderer.setZoom(newZoom);
-
- $.publish(Events.ZOOM_CHANGED);
- };
-
- /**
- * @private
- */
- ns.DrawingController.prototype.onUserSettingsChange_ = function (evt, settingsName, settingsValue) {
- if(settingsName == pskl.UserSettings.SHOW_GRID) {
- console.warn('DrawingController:onUserSettingsChange_ not implemented !');
- } else if (settingsName == pskl.UserSettings.OVERLAY) {
- this.onionSkinRenderer.clear();
- this.onionSkinRenderer.flush();
- this.layersRenderer.clear();
- this.layersRenderer.flush();
- this.render();
- }
- };
-
- ns.DrawingController.prototype.onFrameSizeChanged_ = function () {
- this.compositeRenderer.setDisplaySize(this.getContainerWidth_(), this.getContainerHeight_());
- this.centerColumnWrapperHorizontally_();
- this.compositeRenderer.setZoom(this.calculateZoom_());
- this.compositeRenderer.setOffset(0, 0);
- $.publish(Events.ZOOM_CHANGED);
- };
-
- /**
- * @private
- */
- ns.DrawingController.prototype.onMousedown_ = function (event) {
- var frame = this.piskelController.getCurrentFrame();
- var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
-
- if (event.button === Constants.MIDDLE_BUTTON) {
- if (frame.containsPixel(coords.x, coords.y)) {
- $.publish(Events.SELECT_PRIMARY_COLOR, [frame.getPixel(coords.x, coords.y)]);
- }
- } else {
- this.isClicked = true;
- this.setCurrentButton(event);
- this.currentToolBehavior.hideHighlightedPixel(this.overlayFrame);
-
- this.currentToolBehavior.applyToolAt(
- coords.x,
- coords.y,
- this.getCurrentColor_(),
- frame,
- this.overlayFrame,
- event
- );
- }
- };
-
- /**
- * @private
- */
- ns.DrawingController.prototype.onMousemove_ = function (event) {
- this._clientX = event.clientX;
- this._clientY = event.clientY;
-
- var currentTime = new Date().getTime();
- // Throttling of the mousemove event:
-
- if ((currentTime - this.previousMousemoveTime) > Constants.MOUSEMOVE_THROTTLING ) {
- this.moveTool_(this._clientX, this._clientY, event);
- this.previousMousemoveTime = currentTime;
- }
- };
-
- ns.DrawingController.prototype.resetZoom_ = function () {
- this.setZoom_(this.calculateZoom_());
- };
-
- ns.DrawingController.prototype.increaseZoom_ = function (zoomMultiplier) {
- var step = (zoomMultiplier || 1) * this.getZoomStep_();
- this.setZoom_(this.renderer.getZoom() + step);
- };
-
- ns.DrawingController.prototype.decreaseZoom_ = function (zoomMultiplier) {
- var step = (zoomMultiplier || 1) * this.getZoomStep_();
- this.setZoom_(this.renderer.getZoom() - step);
- };
-
- ns.DrawingController.prototype.getZoomStep_ = function () {
- return this.calculateZoom_() / 10;
- };
-
- ns.DrawingController.prototype.setZoom_ = function (zoom) {
- this.compositeRenderer.setZoom(zoom);
- $.publish(Events.ZOOM_CHANGED);
- };
-
- /**
- * @private
- */
- ns.DrawingController.prototype.onKeyup_ = function (event) {
- this.moveTool_(this._clientX, this._clientY, event);
- };
-
- ns.DrawingController.prototype.moveTool_ = function (x, y, event) {
- var coords = this.renderer.getCoordinates(x, y);
- var currentFrame = this.piskelController.getCurrentFrame();
-
- if (this.isClicked) {
- // Warning : do not call setCurrentButton here
- // mousemove do not have the correct mouse button information on all browsers
- this.currentToolBehavior.moveToolAt(
- coords.x | 0,
- coords.y | 0,
- this.getCurrentColor_(),
- currentFrame,
- this.overlayFrame,
- event
- );
- } else {
-
- this.currentToolBehavior.moveUnactiveToolAt(
- coords.x,
- coords.y,
- this.getCurrentColor_(),
- currentFrame,
- this.overlayFrame,
- event
- );
- }
- $.publish(Events.CURSOR_MOVED, [coords.x, coords.y]);
- };
-
- ns.DrawingController.prototype.onMousewheel_ = function (jQueryEvent) {
- var event = jQueryEvent.originalEvent;
- var delta = event.wheelDeltaY || (-2 * event.deltaY);
- var modifier = Math.abs(delta/120);
- if (delta > 0) {
- this.increaseZoom_(modifier);
- } else if (delta < 0) {
- this.decreaseZoom_(modifier);
- }
- };
-
- /**
- * @private
- */
- ns.DrawingController.prototype.onMouseup_ = function (event) {
- if(this.isClicked) {
- // 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.setCurrentButton(event);
-
- var coords = this.renderer.getCoordinates(event.clientX, event.clientY);
- this.currentToolBehavior.releaseToolAt(
- coords.x,
- coords.y,
- this.getCurrentColor_(),
- this.piskelController.getCurrentFrame(),
- this.overlayFrame,
- event
- );
-
- $.publish(Events.TOOL_RELEASED);
- }
- };
-
- /**
- * @private
- */
- ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
- return this.renderer.getCoordinates(event.clientX, event.clientY);
- };
-
- ns.DrawingController.prototype.setCurrentButton = function (event) {
- this.currentMouseButton_ = event.button;
- };
-
- /**
- * @private
- */
- ns.DrawingController.prototype.getCurrentColor_ = function () {
- // WARNING : Do not rely on the current event to get the current color!
- // It might seem like a good idea, and works perfectly fine on Chrome
- // Sadly Firefox and IE found clever, for some reason, to set event.button to 0
- // on a mouse move event
- // This always matches a LEFT mouse button which is __really__ not helpful
-
- if(this.currentMouseButton_ == Constants.RIGHT_BUTTON) {
- return this.paletteController.getSecondaryColor();
- } else if(this.currentMouseButton_ == Constants.LEFT_BUTTON) {
- return this.paletteController.getPrimaryColor();
- } else {
- return Constants.DEFAULT_PEN_COLOR;
- }
- };
-
- /**
- * @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 () {
- var currentFrame = this.piskelController.getCurrentFrame();
- if (!currentFrame.isSameSize(this.overlayFrame)) {
- this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(currentFrame);
- }
-
- var overlaySetting = pskl.UserSettings.get(pskl.UserSettings.OVERLAY);
- if (overlaySetting === Constants.OVERLAY_ONION_SKIN) {
- this.onionSkinRenderer.render();
- } else if (overlaySetting === Constants.OVERLAY_LAYER_PREVIEW) {
- this.layersRenderer.render();
- }
-
- this.renderer.render(currentFrame);
- this.overlayRenderer.render(this.overlayFrame);
- };
-
- /**
- * @private
- */
- ns.DrawingController.prototype.calculateZoom_ = function() {
- var frameHeight = this.piskelController.getCurrentFrame().getHeight(),
- frameWidth = this.piskelController.getCurrentFrame().getWidth();
-
- return Math.min(this.getAvailableWidth_()/frameWidth, this.getAvailableHeight_()/frameHeight);
- };
-
- ns.DrawingController.prototype.getAvailableHeight_ = function () {
- return $('#main-wrapper').height();
- };
-
- ns.DrawingController.prototype.getAvailableWidth_ = function () {
- var leftSectionWidth = $('.left-column').outerWidth(true),
- rightSectionWidth = $('.right-column').outerWidth(true),
- toolsContainerWidth = $('#tool-section').outerWidth(true),
- settingsContainerWidth = $('#application-action-section').outerWidth(true),
- availableWidth = $('#main-wrapper').width() - leftSectionWidth - rightSectionWidth - toolsContainerWidth - settingsContainerWidth;
-
- var comfortMargin = 10;
- return availableWidth - comfortMargin;
- };
-
- ns.DrawingController.prototype.getContainerHeight_ = function () {
- return this.calculateZoom_() * this.piskelController.getCurrentFrame().getHeight();
- };
-
- ns.DrawingController.prototype.getContainerWidth_ = function () {
- return this.calculateZoom_() * this.piskelController.getCurrentFrame().getWidth();
- };
-
- /**
- * @private
- */
- ns.DrawingController.prototype.centerColumnWrapperHorizontally_ = function() {
- var containerHeight = this.getContainerHeight_();
- var verticalGapInPixel = Math.floor(($('#main-wrapper').height() - containerHeight) / 2);
- $('#column-wrapper').css({
- 'top': verticalGapInPixel + 'px'
- });
- };
-
- ns.DrawingController.prototype.getRenderer = function () {
- return this.compositeRenderer;
- };
-
- ns.DrawingController.prototype.setOffset = function (x, y) {
- this.compositeRenderer.setOffset(x, y);
- $.publish(Events.ZOOM_CHANGED);
- };
-})();;(function () {
- var ns = $.namespace("pskl.controller");
-
- var ACTION = {
- SELECT : 'select',
- CLONE : 'clone',
- DELETE : 'delete',
- NEW_FRAME : 'newframe'
- };
-
- ns.PreviewFilmController = function (piskelController, container) {
-
- this.piskelController = piskelController;
- this.container = container;
- this.refreshZoom_();
-
- 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.USER_SETTINGS_CHANGED, this.flagForRedraw_.bind(this));
-
- $.subscribe(Events.PISKEL_RESET, this.refreshZoom_.bind(this));
-
- $('#preview-list-scroller').scroll(this.updateScrollerOverflows.bind(this));
- this.container.get(0).addEventListener('click', this.onContainerClick_.bind(this));
- this.updateScrollerOverflows();
- };
-
- ns.PreviewFilmController.prototype.flagForRedraw_ = function () {
- this.redrawFlag = true;
- };
-
- ns.PreviewFilmController.prototype.refreshZoom_ = function () {
- this.zoom = this.calculateZoom_();
- };
-
- 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.onContainerClick_ = function (event) {
- var target = pskl.utils.Dom.getParentWithData(event.target, 'tileAction');
- if (!target) {
- return;
- }
- var action = target.dataset.tileAction;
- var index = parseInt(target.dataset.tileNumber, 10);
-
- if (action === ACTION.CLONE) {
- this.piskelController.duplicateFrameAt(index);
- this.piskelController.setCurrentFrameIndex(index + 1);
- this.updateScrollerOverflows();
- } else if (action === ACTION.DELETE) {
- this.piskelController.removeFrameAt(index);
- this.updateScrollerOverflows();
- } else if (action === ACTION.SELECT) {
- this.piskelController.setCurrentFrameIndex(index);
- } else if (action === ACTION.NEW_FRAME) {
- this.piskelController.addFrame();
- this.piskelController.setCurrentFrameIndex(this.piskelController.getFrameCount() - 1);
- this.updateScrollerOverflows();
- }
- };
-
- 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.setAttribute('data-tile-action', ACTION.NEW_FRAME);
- newFrameButton.innerHTML = "Add new frame
";
- this.container.append(newFrameButton);
-
- 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);
- };
-
-
- /**
- * @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");
- previewTileRoot.setAttribute("data-tile-number", tileNumber);
- previewTileRoot.setAttribute('data-tile-action', ACTION.SELECT);
- previewTileRoot.classList.add("preview-tile");
- if (this.piskelController.getCurrentFrame() == currentFrame) {
- previewTileRoot.classList.add("selected");
- }
-
- var canvasContainer = document.createElement("div");
- canvasContainer.classList.add("canvas-container", pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
-
-
- var canvasBackground = document.createElement("div");
- canvasBackground.className = "canvas-background";
- canvasContainer.appendChild(canvasBackground);
-
- var cloneFrameButton = document.createElement("button");
- cloneFrameButton.setAttribute('rel', 'tooltip');
- cloneFrameButton.setAttribute('data-placement', 'right');
- cloneFrameButton.setAttribute('data-tile-number', tileNumber);
- cloneFrameButton.setAttribute('data-tile-action', ACTION.CLONE);
- cloneFrameButton.setAttribute('title', 'Duplicate this frame');
- cloneFrameButton.className = "tile-overlay duplicate-frame-action";
- previewTileRoot.appendChild(cloneFrameButton);
-
- var canvasRenderer = new pskl.rendering.CanvasRenderer(currentFrame, this.zoom);
- canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
- var canvas = canvasRenderer.render();
- canvas.classList.add('tile-view', 'canvas');
- canvasContainer.appendChild(canvas);
- 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.setAttribute('data-tile-number', tileNumber);
- deleteButton.setAttribute('data-tile-action', ACTION.DELETE);
- deleteButton.className = "tile-overlay delete-frame-action";
- 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 + 1;
- previewTileRoot.appendChild(tileCount);
-
- return previewTileRoot;
- };
-
- /**
- * Calculate the preview zoom depending on the piskel size
- */
- ns.PreviewFilmController.prototype.calculateZoom_ = function () {
- var curFrame = this.piskelController.getCurrentFrame(),
- frameHeight = curFrame.getHeight(),
- frameWidth = curFrame.getWidth();
-
- return Math.min(Constants.PREVIEW_FILM_SIZE/frameHeight, Constants.PREVIEW_FILM_SIZE/frameWidth);
- };
-})();;(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, index) {
- var isSelected = this.piskelController.getCurrentLayer() === layer;
- var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {
- 'layername' : layer.getName(),
- 'layerindex' : index,
- 'isselected:current-layer-item' : isSelected
- });
- var layerItem = pskl.utils.Template.createFromHTML(layerItemHtml);
- this.layersListEl.insertBefore(layerItem, this.layersListEl.firstChild);
- };
-
- ns.LayersListController.prototype.onClick_ = function (evt) {
- var el = evt.target || evt.srcElement;
- var index;
- if (el.classList.contains('button')) {
- this.onButtonClick_(el);
- } else if (el.classList.contains('layer-item')) {
- index = el.dataset.layerIndex;
- this.piskelController.setCurrentLayerIndex(parseInt(index, 10));
- } else if (el.classList.contains('edit-icon')) {
- index = el.parentNode.dataset.layerIndex;
- this.renameLayerAt_(index);
- }
- };
-
- ns.LayersListController.prototype.renameLayerAt_ = function (index) {
- var layer = this.piskelController.getLayerAt(index);
- var name = window.prompt("Please enter the layer name", layer.getName());
- if (name) {
- this.piskelController.renameLayerAt(index, name);
- this.renderLayerList_();
- }
- };
-
- 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");
-
- // Preview is a square of PREVIEW_SIZE x PREVIEW_SIZE
- var PREVIEW_SIZE = 200;
-
- ns.AnimatedPreviewController = function (piskelController, container) {
- this.piskelController = piskelController;
- this.container = container;
-
- this.elapsedTime = 0;
- this.currentIndex = 0;
-
- this.setFPS(Constants.DEFAULT.FPS);
-
- var frame = this.piskelController.getCurrentFrame();
-
- this.renderer = new pskl.rendering.frame.TiledFrameRenderer(this.container);
- this.updateZoom_();
- $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
- $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
- };
-
- ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function () {
- this.updateZoom_();
- this.updateContainerDimensions_();
- };
-
- ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
- var isTiled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
- var zoom = isTiled ? 1 : this.calculateZoom_();
- this.renderer.setZoom(zoom);
- };
-
- ns.AnimatedPreviewController.prototype.getZoom = function () {
- return this.calculateZoom_();
- };
-
- ns.AnimatedPreviewController.prototype.getCoordinates = function(x, y) {
- var containerOffset = this.container.offset();
- x = x - containerOffset.left;
- y = y - containerOffset.top;
- var zoom = this.getZoom();
- return {
- x : Math.floor(x / zoom),
- y : Math.floor(y / zoom)
- };
- };
-
- 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));
- document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
- };
-
- 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;
- }
- var frame = this.piskelController.getFrameAt(this.currentIndex);
- this.renderer.render(frame);
- }
- };
-
- /**
- * Calculate the preview zoom depending on the framesheet size
- */
- ns.AnimatedPreviewController.prototype.calculateZoom_ = function () {
- var frame = this.piskelController.getCurrentFrame();
- var previewSize = 200,
- hZoom = previewSize / frame.getHeight(),
- wZoom = previewSize / frame.getWidth();
-
- return Math.min(hZoom, wZoom);
- };
-
- ns.AnimatedPreviewController.prototype.onFrameSizeChange_ = function () {
- this.updateZoom_();
- this.updateContainerDimensions_();
- };
-
- ns.AnimatedPreviewController.prototype.updateContainerDimensions_ = function () {
- var containerEl = this.container.get(0);
- var isTiled = pskl.UserSettings.get(pskl.UserSettings.TILED_PREVIEW);
- var height, width;
-
- if (isTiled) {
- height = PREVIEW_SIZE;
- width = PREVIEW_SIZE;
- } else {
- var zoom = this.getZoom();
- var frame = this.piskelController.getCurrentFrame();
- height = frame.getHeight() * zoom;
- width = frame.getWidth() * zoom;
- }
-
- containerEl.style.height = height + "px";
- containerEl.style.width = width + "px";
- containerEl.style.marginTop = ((PREVIEW_SIZE - height) / 2) + "px";
- containerEl.style.marginBottom = ((PREVIEW_SIZE - height) / 2) + "px";
- containerEl.style.marginLeft = ((PREVIEW_SIZE - width) / 2) + "px";
- containerEl.style.marginRight = ((PREVIEW_SIZE - width) / 2) + "px";
- };
-})();;(function () {
- var ns = $.namespace('pskl.controller');
-
- ns.MinimapController = function (piskelController, animationController, drawingController, container) {
- this.piskelController = piskelController;
- this.animationController = animationController;
- this.drawingController = drawingController;
- this.container = container;
-
- this.isClicked = false;
- };
-
- ns.MinimapController.prototype.init = function () {
- // Create minimap DOM elements
- this.cropFrame = document.createElement('DIV');
- this.cropFrame.className = 'minimap-crop-frame';
- this.cropFrame.style.display = 'none';
- $(this.container).append(this.cropFrame);
-
- // Init mouse events
- $(this.container).mousedown(this.onMinimapMousedown_.bind(this));
- $('body').mousemove(this.onMinimapMousemove_.bind(this));
- $('body').mouseup(this.onMinimapMouseup_.bind(this));
-
- $.subscribe(Events.ZOOM_CHANGED, $.proxy(this.renderMinimap_, this));
- };
-
- ns.MinimapController.prototype.renderMinimap_ = function () {
- var zoomRatio = this.getDrawingAreaZoomRatio_();
- if (zoomRatio > 1) {
- this.displayCropFrame_(zoomRatio, this.drawingController.getRenderer().getOffset());
- } else {
- this.hideCropFrame_();
- }
- };
-
- ns.MinimapController.prototype.displayCropFrame_ = function (ratio, offset) {
- this.cropFrame.style.display = 'block';
- this.cropFrame.style.top = (offset.y * this.animationController.getZoom()) + 'px';
- this.cropFrame.style.left = (offset.x * this.animationController.getZoom()) + 'px';
- var zoomRatio = this.getDrawingAreaZoomRatio_();
- this.cropFrame.style.width = (this.container.width() / zoomRatio) + 'px';
- this.cropFrame.style.height = (this.container.height() / zoomRatio) + 'px';
-
- };
-
- ns.MinimapController.prototype.hideCropFrame_ = function () {
- this.cropFrame.style.display = 'none';
- };
-
- ns.MinimapController.prototype.onMinimapMousemove_ = function (evt) {
- if (this.isClicked) {
- if (this.getDrawingAreaZoomRatio_() > 1) {
- var coords = this.getCoordinatesCenteredAround_(evt.clientX, evt.clientY);
- this.drawingController.setOffset(coords.x, coords.y);
- }
- }
- };
-
- ns.MinimapController.prototype.onMinimapMousedown_ = function (evt) {
- this.isClicked = true;
- };
-
- ns.MinimapController.prototype.onMinimapMouseup_ = function (evt) {
- this.isClicked = false;
- };
-
- ns.MinimapController.prototype.getCoordinatesCenteredAround_ = function (x, y) {
- var frameCoords = this.animationController.getCoordinates(x, y);
- var zoomRatio = this.getDrawingAreaZoomRatio_();
- var frameWidth = this.piskelController.getCurrentFrame().getWidth();
- var frameHeight = this.piskelController.getCurrentFrame().getHeight();
-
- var width = frameWidth / zoomRatio;
- var height = frameHeight / zoomRatio;
-
- return {
- x : frameCoords.x - (width/2),
- y : frameCoords.y - (height/2)
- };
- };
-
- ns.MinimapController.prototype.getDrawingAreaZoomRatio_ = function () {
- var drawingAreaZoom = this.drawingController.getRenderer().getZoom();
- var drawingAreaFullHeight = this.piskelController.getCurrentFrame().getHeight() * drawingAreaZoom;
- var zoomRatio = drawingAreaFullHeight / this.drawingController.getRenderer().getDisplaySize().height;
-
- return zoomRatio;
- };
-})();;(function () {
- var ns = $.namespace("pskl.controller");
-
- ns.ToolController = function () {
- var toDescriptor = function (id, shortcut, instance) {
- return {id:id, shortcut:shortcut, instance:instance};
- };
-
- this.tools = [
- toDescriptor('simplePen', 'P', new pskl.drawingtools.SimplePen()),
- toDescriptor('verticalMirrorPen', 'V', new pskl.drawingtools.VerticalMirrorPen()),
- toDescriptor('eraser', 'E', new pskl.drawingtools.Eraser()),
- toDescriptor('paintBucket', 'B', new pskl.drawingtools.PaintBucket()),
- toDescriptor('stroke', 'L', new pskl.drawingtools.Stroke()),
- toDescriptor('rectangle', 'R', new pskl.drawingtools.Rectangle()),
- toDescriptor('circle', 'C', new pskl.drawingtools.Circle()),
- toDescriptor('move', 'M', new pskl.drawingtools.Move()),
- toDescriptor('rectangleSelect', 'S', new pskl.drawingtools.RectangleSelect()),
- toDescriptor('shapeSelect', 'Z', new pskl.drawingtools.ShapeSelect()),
- toDescriptor('lighten', 'U', new pskl.drawingtools.Lighten()),
- toDescriptor('colorPicker', 'O', new pskl.drawingtools.ColorPicker())
- ];
-
- this.currentSelectedTool = this.tools[0];
- this.previousSelectedTool = this.tools[0];
- };
-
- /**
- * @public
- */
- ns.ToolController.prototype.init = function() {
- this.createToolsDom_();
- this.addKeyboardShortcuts_();
-
- // Initialize tool:
- // Set SimplePen as default selected tool:
- this.selectTool_(this.tools[0]);
- // Activate listener on tool panel:
- $("#tool-section").mousedown($.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.removeClass(pskl.drawingtools.Move.TOOL_ID);
- }
- stage.addClass(tool.instance.toolId);
- stage.data("selected-tool-class", tool.instance.toolId);
- };
-
- /**
- * @private
- */
- ns.ToolController.prototype.selectTool_ = function(tool) {
- this.currentSelectedTool = tool;
- this.activateToolOnStage_(this.currentSelectedTool);
-
- var selectedToolElement = $('#tool-section .tool-icon.selected');
- var toolElement = $('[data-tool-id=' + tool.instance.toolId + ']');
-
- selectedToolElement.removeClass('selected');
- toolElement.addClass('selected');
-
- $.publish(Events.TOOL_SELECTED, [tool.instance]);
- };
-
- /**
- * @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);
- }
- }
- };
-
- ns.ToolController.prototype.onKeyboardShortcut_ = function(charkey) {
- for (var i = 0 ; i < this.tools.length ; i++) {
- var tool = this.tools[i];
- if (tool.shortcut.toLowerCase() === charkey.toLowerCase()) {
- this.selectTool_(tool);
- }
- }
- };
-
- ns.ToolController.prototype.getToolById_ = function (toolId) {
- for(var i = 0 ; i < this.tools.length ; i++) {
- var tool = this.tools[i];
- if (tool.instance.toolId == toolId) {
- return tool;
- }
- }
- return null;
- };
-
- /**
- * @private
- */
- ns.ToolController.prototype.createToolsDom_ = function() {
- var toolMarkup = '';
- for(var i = 0 ; i < this.tools.length ; i++) {
- toolMarkup += this.getToolMarkup_(this.tools[i]);
- }
- $('#tools-container').html(toolMarkup);
- };
-
- /**
- * @private
- */
- ns.ToolController.prototype.getToolMarkup_ = function(tool) {
- var toolId = tool.instance.toolId;
-
- var classList = ['tool-icon', toolId];
- if (this.currentSelectedTool == tool) {
- classList.push('selected');
- }
-
- var tpl = pskl.utils.Template.get('drawing-tool-item-template');
- return pskl.utils.Template.replace(tpl, {
- cssclass : classList.join(' '),
- toolid : toolId,
- title : this.getTooltipText_(tool)
- });
- };
-
- ns.ToolController.prototype.getTooltipText_ = function (tool) {
- return tool.instance.helpText + ' (' + tool.shortcut + ')';
- };
-
- ns.ToolController.prototype.addKeyboardShortcuts_ = function () {
- for(var i = 0 ; i < this.tools.length ; i++) {
- pskl.app.shortcutService.addShortcut(this.tools[i].shortcut, this.onKeyboardShortcut_.bind(this));
- }
- };
-})();;(function () {
- var ns = $.namespace("pskl.controller");
-
- ns.PaletteController = function () {
- this.primaryColor = Constants.DEFAULT_PEN_COLOR;
- this.secondaryColor = Constants.TRANSPARENT_COLOR;
- };
-
- /**
- * @public
- */
- ns.PaletteController.prototype.init = function() {
- $.subscribe(Events.SELECT_PRIMARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:true}));
- $.subscribe(Events.SELECT_SECONDARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:false}));
-
- pskl.app.shortcutService.addShortcut('X', this.swapColors.bind(this));
- pskl.app.shortcutService.addShortcut('D', this.resetColors.bind(this));
-
- var spectrumCfg = {
- showPalette: true,
- showButtons: false,
- showInput: true,
- palette: [
- ['rgba(0,0,0,0)']
- ],
- clickoutFiresChange : true,
-
- beforeShow : function(tinycolor) {
- tinycolor.setAlpha(1);
- }
- };
-
- // Initialize colorpickers:
- var colorPicker = $('#color-picker');
- colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg));
- colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
- this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR, colorPicker);
-
- var secondaryColorPicker = $('#secondary-color-picker');
- secondaryColorPicker.spectrum($.extend({color: Constants.TRANSPARENT_COLOR}, spectrumCfg));
- secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
- this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker);
-
- var swapColorsIcon = $('.swap-colors-icon');
- swapColorsIcon.click(this.swapColors.bind(this));
- };
-
- /**
- * @private
- */
- ns.PaletteController.prototype.onPickerChange_ = function(evt, isPrimary) {
- var inputPicker = $(evt.target);
- if(evt.data.isPrimary) {
- this.setPrimaryColor(inputPicker.val());
- } else {
- this.setSecondaryColor(inputPicker.val());
- }
- };
-
- /**
- * @private
- */
- ns.PaletteController.prototype.onColorSelected_ = function(args, evt, color) {
- var inputPicker = $(evt.target);
- if(args.isPrimary) {
- this.setPrimaryColor(color);
- } else {
- this.setSecondaryColor(color);
- }
- };
-
- ns.PaletteController.prototype.setPrimaryColor = function (color) {
- this.primaryColor = color;
- this.updateColorPicker_(color, $('#color-picker'));
- $.publish(Events.PRIMARY_COLOR_SELECTED, [color]);
- };
-
- ns.PaletteController.prototype.setSecondaryColor = function (color) {
- this.secondaryColor = color;
- this.updateColorPicker_(color, $('#secondary-color-picker'));
- $.publish(Events.SECONDARY_COLOR_SELECTED, [color]);
- };
-
- ns.PaletteController.prototype.getPrimaryColor = function () {
- return this.primaryColor;
- };
-
- ns.PaletteController.prototype.getSecondaryColor = function () {
- return this.secondaryColor;
- };
-
- ns.PaletteController.prototype.swapColors = function () {
- var primaryColor = this.getPrimaryColor();
- this.setPrimaryColor(this.getSecondaryColor());
- this.setSecondaryColor(primaryColor);
- };
-
- ns.PaletteController.prototype.resetColors = function () {
- this.setPrimaryColor(Constants.DEFAULT_PEN_COLOR);
- this.setSecondaryColor(Constants.TRANSPARENT_COLOR);
- };
-
- /**
- * @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.spectrum("set", Constants.TRANSPARENT_COLOR);
- colorPicker.val(Constants.TRANSPARENT_COLOR);
- } else {
- colorPicker.spectrum("set", color);
- }
- this.setTitleOnPicker_(color, colorPicker);
- };
-
- ns.PaletteController.prototype.setTitleOnPicker_ = function (title, colorPicker) {
- var spectrumInputSelector = '.sp-replacer';
- colorPicker.next(spectrumInputSelector).attr('title', title);
- };
-})();
-
-
-
-;(function () {
- var ns = $.namespace('pskl.controller');
-
- var PRIMARY_COLOR_CLASSNAME = 'palettes-list-primary-color';
- var SECONDARY_COLOR_CLASSNAME = 'palettes-list-secondary-color';
-
- var HAS_SCROLL_CLASSNAME = 'palettes-list-has-scrollbar';
- // well ... I know that if there are more than 20 colors, a scrollbar will be displayed
- // It's linked to the max-height: 160px; defined in toolbox-palette-list.css !
- // I apologize to my future self for this one.
- var NO_SCROLL_MAX_COLORS = 20;
-
- var MAX_COLORS = 100;
-
- ns.PalettesListController = function (paletteController, usedColorService) {
- this.usedColorService = usedColorService;
- this.paletteController = paletteController;
- };
-
- ns.PalettesListController.prototype.init = function () {
- this.paletteColorTemplate_ = pskl.utils.Template.get('palette-color-template');
- this.colorListContainer_ = document.querySelector('.palettes-list-colors');
- this.colorPaletteSelect_ = document.querySelector('.palettes-list-select');
- this.paletteListOptGroup_ = document.querySelector('.palettes-list-select-group');
-
- this.colorPaletteSelect_.addEventListener('change', this.onPaletteSelected_.bind(this));
- this.colorListContainer_.addEventListener('mouseup', this.onColorContainerMouseup.bind(this));
- this.colorListContainer_.addEventListener('contextmenu', this.onColorContainerContextMenu.bind(this));
-
- $.subscribe(Events.PALETTE_LIST_UPDATED, this.onPaletteListUpdated.bind(this));
- $.subscribe(Events.CURRENT_COLORS_UPDATED, this.fillColorListContainer.bind(this));
- $.subscribe(Events.PRIMARY_COLOR_SELECTED, this.highlightSelectedColors.bind(this));
- $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.highlightSelectedColors.bind(this));
-
- this.fillPaletteList();
- this.selectPaletteFromUserSettings();
- this.fillColorListContainer();
- };
-
- ns.PalettesListController.prototype.fillPaletteList = function () {
- var palettes = [{
- id : Constants.NO_PALETTE_ID,
- name : 'No palette'
- }];
- palettes = palettes.concat(this.retrievePalettes());
-
- var html = palettes.map(function (palette) {
- return pskl.utils.Template.replace('', palette);
- }).join('');
- this.paletteListOptGroup_.innerHTML = html;
- };
-
- ns.PalettesListController.prototype.fillColorListContainer = function () {
- var colors = this.getSelectedPaletteColors_();
-
- var html = colors.map(function (color) {
- return pskl.utils.Template.replace(this.paletteColorTemplate_, {color : color});
- }.bind(this)).join('');
- this.colorListContainer_.innerHTML = html;
-
- this.highlightSelectedColors();
-
- var hasScrollbar = colors.length > NO_SCROLL_MAX_COLORS;
- if (hasScrollbar && !pskl.utils.UserAgent.isChrome) {
- this.colorListContainer_.classList.add(HAS_SCROLL_CLASSNAME);
- } else {
- this.colorListContainer_.classList.remove(HAS_SCROLL_CLASSNAME);
- }
- };
-
- ns.PalettesListController.prototype.getSelectedPaletteColors_ = function () {
- var colors = [];
- var paletteId = this.colorPaletteSelect_.value;
- if (paletteId === Constants.CURRENT_COLORS_PALETTE_ID) {
- colors = this.usedColorService.getCurrentColors();
- } else {
- var palette = this.getPaletteById(paletteId, this.retrievePalettes());
- if (palette) {
- colors = palette.colors;
- }
- }
-
- if (colors.length > MAX_COLORS) {
- colors = colors.slice(0, MAX_COLORS);
- }
-
- return colors;
- };
-
- ns.PalettesListController.prototype.selectPalette = function (paletteId) {
- this.colorPaletteSelect_.value = paletteId;
- };
-
- ns.PalettesListController.prototype.selectPaletteFromUserSettings = function () {
- this.selectPalette(pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE));
- };
-
- ns.PalettesListController.prototype.onPaletteSelected_ = function (evt) {
- var paletteId = this.colorPaletteSelect_.value;
- if (paletteId === Constants.MANAGE_PALETTE_ID) {
- $.publish(Events.DIALOG_DISPLAY, 'manage-palettes');
- this.selectPaletteFromUserSettings();
- } else {
- pskl.UserSettings.set(pskl.UserSettings.SELECTED_PALETTE, paletteId);
- }
-
- this.fillColorListContainer();
- };
-
-
-
- ns.PalettesListController.prototype.onColorContainerContextMenu = function (event) {
- event.preventDefault();
- };
-
- ns.PalettesListController.prototype.onColorContainerMouseup = function (event) {
- var target = event.target;
- var color = target.dataset.color;
-
- if (color) {
- if (event.button == Constants.LEFT_BUTTON) {
- $.publish(Events.SELECT_PRIMARY_COLOR, [color]);
- } else if (event.button == Constants.RIGHT_BUTTON) {
- $.publish(Events.SELECT_SECONDARY_COLOR, [color]);
- }
- }
- };
-
- ns.PalettesListController.prototype.highlightSelectedColors = function () {
- this.removeClass_(PRIMARY_COLOR_CLASSNAME);
- this.removeClass_(SECONDARY_COLOR_CLASSNAME);
-
- var colorContainer = this.getColorContainer_(this.paletteController.getSecondaryColor());
- if (colorContainer) {
- colorContainer.classList.remove(PRIMARY_COLOR_CLASSNAME);
- colorContainer.classList.add(SECONDARY_COLOR_CLASSNAME);
- }
-
- colorContainer = this.getColorContainer_(this.paletteController.getPrimaryColor());
- if (colorContainer) {
- colorContainer.classList.remove(SECONDARY_COLOR_CLASSNAME);
- colorContainer.classList.add(PRIMARY_COLOR_CLASSNAME);
- }
- };
-
- ns.PalettesListController.prototype.getColorContainer_ = function (color) {
- return this.colorListContainer_.querySelector('.palettes-list-color[data-color="'+color+'"]');
- };
-
- ns.PalettesListController.prototype.removeClass_ = function (cssClass) {
- var element = document.querySelector('.' + cssClass);
- if (element) {
- element.classList.remove(cssClass);
- }
- };
-
- ns.PalettesListController.prototype.onPaletteListUpdated = function () {
- this.fillPaletteList();
- this.selectPaletteFromUserSettings();
- this.fillColorListContainer();
- };
-
- ns.PalettesListController.prototype.getPaletteById = function (paletteId, palettes) {
- var match = null;
-
- palettes.forEach(function (palette) {
- if (palette.id === paletteId) {
- match = palette;
- }
- });
-
- return match;
- };
-
- ns.PalettesListController.prototype.retrievePalettes = function () {
- var palettesString = window.localStorage.getItem('piskel.palettes');
- return JSON.parse(palettesString) || [];
- };
-})();;(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) {
- this.removeMessage_();
-
- 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');
-
- ns.CanvasBackgroundController = function () {
- this.body = document.body;
- };
-
- ns.CanvasBackgroundController.prototype.init = function () {
- $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
- this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
- };
-
-
- ns.CanvasBackgroundController.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
- if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
- this.updateBackgroundClass_(settingValue);
- }
- };
-
- ns.CanvasBackgroundController.prototype.updateBackgroundClass_ = function (newClass) {
- var currentClass = this.body.dataset.currentBackgroundClass;
- if (currentClass) {
- this.body.classList.remove(currentClass);
- }
- this.body.classList.add(newClass);
- this.body.dataset.currentBackgroundClass = newClass;
- };
-})();;(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');
-
- // Grid display and size
- var gridWidth = pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH);
- $('#grid-width').val(gridWidth);
- $('#grid-width').change(this.onGridWidthChange.bind(this));
-
- var overlay = pskl.UserSettings.get(pskl.UserSettings.OVERLAY);
- $('#overlay').val(overlay);
- $('#overlay').change(this.onOverlayChange.bind(this));
-
- // Handle canvas background changes:
- $('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
- };
-
- ns.ApplicationSettingsController.prototype.onGridWidthChange = function (evt) {
- var width = $('#grid-width').val();
- pskl.UserSettings.set(pskl.UserSettings.GRID_WIDTH, parseInt(width, 10));
- };
-
- ns.ApplicationSettingsController.prototype.onOverlayChange = function (evt) {
- var overlay = $('#overlay').val();
- pskl.UserSettings.set(pskl.UserSettings.OVERLAY, overlay);
- };
-
- ns.ApplicationSettingsController.prototype.onBackgroundClick = 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.ResizeController = function (piskelController) {
- this.piskelController = piskelController;
- };
-
- ns.ResizeController.prototype.init = function () {
- this.resizeWidth = $('[name=resize-width]');
- this.resizeHeight = $('[name=resize-height]');
-
- this.resizeWidth.val(this.piskelController.getWidth());
- this.resizeHeight.val(this.piskelController.getHeight());
-
- this.cancelButton = $('.resize-cancel-button');
- this.cancelButton.click(this.onCancelButtonClicked_.bind(this));
-
- this.resizeForm = $("[name=resize-form]");
- this.resizeForm.submit(this.onResizeFormSubmit_.bind(this));
-
- this.resizeContentCheckbox = $(".resize-content-checkbox");
- };
-
- ns.ResizeController.prototype.onResizeFormSubmit_ = function (evt) {
- evt.originalEvent.preventDefault();
-
- var width = parseInt(this.resizeWidth.val(), 10);
- var height = parseInt(this.resizeHeight.val(), 10);
-
-
- var resizeContentEnabled = this.isResizeContentEnabled_();
- var resizedLayers = this.piskelController.getLayers().map(this.resizeLayer_.bind(this));
-
- var piskel = pskl.model.Piskel.fromLayers(resizedLayers, this.piskelController.getPiskel().getDescriptor());
-
- pskl.app.piskelController.setPiskel(piskel, true);
- $.publish(Events.CLOSE_SETTINGS_DRAWER);
- };
-
- ns.ResizeController.prototype.resizeLayer_ = function (layer) {
- var resizedFrames = layer.getFrames().map(this.resizeFrame_.bind(this));
- return pskl.model.Layer.fromFrames(layer.getName(), resizedFrames);
- };
-
- ns.ResizeController.prototype.resizeFrame_ = function (frame) {
- var width = parseInt(this.resizeWidth.val(), 10);
- var height = parseInt(this.resizeHeight.val(), 10);
-
- var resizedFrame;
- if (this.isResizeContentEnabled_()) {
- resizedFrame = pskl.utils.FrameUtils.resize(frame, width, height, false);
- } else {
- resizedFrame = new pskl.model.Frame(width, height);
- frame.forEachPixel(function (color, x, y) {
- if (x < resizedFrame.getWidth() && y < resizedFrame.getHeight()) {
- resizedFrame.setPixel(x, y, color);
- }
- });
- }
-
- return resizedFrame;
- };
-
- ns.ResizeController.prototype.isResizeContentEnabled_ = function () {
- return !!this.resizeContentCheckbox.prop('checked');
- };
-
- ns.ResizeController.prototype.onCancelButtonClicked_ = function (evt) {
- $.publish(Events.CLOSE_SETTINGS_DRAWER);
- };
-})();;(function () {
- var ns = $.namespace("pskl.controller.settings");
-
- var URL_MAX_LENGTH = 30;
- var MAX_GIF_COLORS = 256;
-
- ns.GifExportController = function (piskelController) {
- this.piskelController = piskelController;
- };
-
- /**
- * List of Resolutions applicable for Gif export
- * @static
- * @type {Array} array of Objects {zoom:{Number}, default:{Boolean}}
- */
- ns.GifExportController.RESOLUTIONS = [
- {
- 'zoom' : 1
- },{
- 'zoom' : 5
- },{
- 'zoom' : 10,
- 'default' : true
- },{
- 'zoom' : 20
- }
- ];
-
- ns.GifExportController.prototype.init = function () {
- this.optionTemplate_ = pskl.utils.Template.get("gif-export-option-template");
-
- this.uploadStatusContainerEl = document.querySelector(".gif-upload-status");
-
- this.previewContainerEl = document.querySelector(".gif-export-preview");
- this.selectResolutionEl = document.querySelector(".gif-export-select-resolution");
-
- this.uploadButton = $(".gif-upload-button");
- this.uploadButton.click(this.onUploadButtonClick_.bind(this));
-
- this.downloadButton = $(".gif-download-button");
- this.downloadButton.click(this.onDownloadButtonClick_.bind(this));
-
- this.exportForm = $(".gif-export-form");
-
- this.exportProgressStatusEl = document.querySelector('.gif-export-progress-status');
- this.exportProgressBarEl = document.querySelector('.gif-export-progress-bar');
-
- this.createOptionElements_();
- };
-
- ns.GifExportController.prototype.onUploadButtonClick_ = function (evt) {
- evt.originalEvent.preventDefault();
- var zoom = this.getSelectedZoom_(),
- fps = this.piskelController.getFPS();
-
- this.renderAsImageDataAnimatedGIF(zoom, fps, this.onGifRenderingCompleted_.bind(this));
- };
-
- ns.GifExportController.prototype.onDownloadButtonClick_ = function (evt) {
- var fileName = this.piskelController.getPiskel().getDescriptor().name + '.gif';
- var zoom = this.getSelectedZoom_(),
- fps = this.piskelController.getFPS();
-
- this.renderAsImageDataAnimatedGIF(zoom, fps, function (imageData) {
- pskl.app.imageUploadService.upload(imageData, this.onImageUploadCompleted_.bind(this));
- pskl.utils.BlobUtils.dataToBlob(imageData, "image/gif", function(blob) {
- pskl.utils.FileUtils.downloadAsFile(blob, fileName);
- });
- }.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.updateStatus_(imageUrl);
- this.previewContainerEl.classList.remove("preview-upload-ongoing");
- };
-
- ns.GifExportController.prototype.updatePreview_ = function (src) {
- this.previewContainerEl.innerHTML = "";
- };
-
- ns.GifExportController.prototype.getSelectedZoom_ = function () {
- return this.selectResolutionEl.value;
- };
-
- ns.GifExportController.prototype.createOptionElements_ = function () {
- var resolutions = ns.GifExportController.RESOLUTIONS;
- for (var i = 0 ; i < resolutions.length ; i++) {
- var option = this.createOptionForResolution_(resolutions[i]);
- this.selectResolutionEl.appendChild(option);
- }
- };
-
- ns.GifExportController.prototype.createOptionForResolution_ = function (resolution) {
- var zoom = resolution.zoom;
- var label = zoom*this.piskelController.getWidth() + "x" + zoom*this.piskelController.getHeight();
- var value = zoom;
-
- var optionHTML = pskl.utils.Template.replace(this.optionTemplate_, {value : value, label : label});
- var optionEl = pskl.utils.Template.createFromHTML(optionHTML);
-
- return optionEl;
- };
-
- ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {
- var colorCount = pskl.app.currentColorsService.getCurrentColors().length;
- var preserveColors = colorCount < MAX_GIF_COLORS;
- var gif = new window.GIF({
- workers: 2,
- quality: 1,
- width: this.piskelController.getWidth()*zoom,
- height: this.piskelController.getHeight()*zoom,
- preserveColors : preserveColors
- });
-
- for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
- var frame = this.piskelController.getFrameAt(i);
- var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
- var canvas = canvasRenderer.render();
- gif.addFrame(canvas.getContext('2d'), {
- delay: 1000 / fps
- });
- }
-
- gif.on('progress', function(percentage) {
- this.updateProgressStatus_((percentage*100).toFixed(2));
- }.bind(this));
-
- gif.on('finished', function(blob) {
- this.hideProgressStatus_();
- pskl.utils.FileUtils.readFile(blob, cb);
- }.bind(this));
-
- gif.render();
- };
-
- ns.GifExportController.prototype.updateProgressStatus_ = function (percentage) {
- this.exportProgressStatusEl.innerHTML = percentage + '%';
- this.exportProgressBarEl.style.width = percentage + "%";
-
- };
-
- ns.GifExportController.prototype.hideProgressStatus_ = function () {
- this.exportProgressStatusEl.innerHTML = '';
- this.exportProgressBarEl.style.width = "0";
- };
-
- // FIXME : HORRIBLE COPY/PASTA
-
- ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
- if (imageUrl) {
- var linkTpl = "{{shortLink}}";
- var linkHtml = pskl.utils.Template.replace(linkTpl, {
- link : imageUrl,
- shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')
- });
- this.uploadStatusContainerEl.innerHTML = 'Your image is now available at : ' + linkHtml;
- } else {
- // FIXME : Should display error message instead
- }
- };
-
- ns.GifExportController.prototype.shorten_ = function (url, maxLength, suffix) {
- if (url.length > maxLength) {
- var index = Math.round((maxLength-suffix.length) / 2);
- var part1 = url.substring(0, index);
- var part2 = url.substring(url.length - index, url.length);
- url = part1 + suffix + part2;
- }
- return url;
- };
-})();;(function () {
- var ns = $.namespace("pskl.controller.settings");
-
- var URL_MAX_LENGTH = 60;
-
- ns.PngExportController = function (piskelController) {
- this.piskelController = piskelController;
- };
-
- ns.PngExportController.prototype.init = function () {
- this.previewContainerEl = document.querySelectorAll(".png-export-preview")[0];
-
- document.querySelector(".png-download-button").addEventListener('click', this.onPngDownloadButtonClick_.bind(this));
-
- document.querySelector(".zip-generate-button").addEventListener('click', this.onZipButtonClick_.bind(this));
-
- this.updatePreview_(this.getFramesheetAsCanvas().toDataURL("image/png"));
-
- (new ns.GifExportController(this.piskelController)).init();
- };
-
- ns.PngExportController.prototype.onPngDownloadButtonClick_ = function (evt) {
- var fileName = this.getPiskelName_() + '.png';
- pskl.utils.BlobUtils.canvasToBlob(this.getFramesheetAsCanvas(), function(blob) {
- pskl.utils.FileUtils.downloadAsFile(blob, fileName);
- });
- };
-
- ns.PngExportController.prototype.onZipButtonClick_ = function () {
- var zip = new window.JSZip();
-
- for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
- var frame = this.piskelController.getFrameAt(i);
- var canvas = this.getFrameAsCanvas_(frame);
- var filename = "sprite_" + (i+1) + ".png";
- zip.file(filename, pskl.CanvasUtils.getBase64FromCanvas(canvas) + '\n', {base64: true});
- }
-
- var fileName = this.getPiskelName_() + '.zip';
-
- var blob = zip.generate({type:"blob"});
- pskl.utils.FileUtils.downloadAsFile(blob, fileName);
- };
-
- ns.PngExportController.prototype.getFrameAsCanvas_ = function (frame) {
- var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, 1);
- canvasRenderer.drawTransparentAs(Constants.TRANSPARENT_COLOR);
- return canvasRenderer.render();
- };
-
- ns.PngExportController.prototype.getPiskelName_ = function () {
- return this.piskelController.getPiskel().getDescriptor().name;
- };
-
- ns.PngExportController.prototype.getFramesheetAsCanvas = function () {
- var renderer = new pskl.rendering.PiskelRenderer(this.piskelController);
- return renderer.renderAsCanvas();
- };
-
- ns.PngExportController.prototype.onImageUploadCompleted_ = function (imageUrl) {
- this.updatePreview_(imageUrl);
- this.updateStatus_(imageUrl);
- this.previewContainerEl.classList.remove("preview-upload-ongoing");
- };
-
- ns.PngExportController.prototype.updateStatus_ = function (imageUrl, error) {
- if (imageUrl) {
- var linkTpl = "{{shortLink}}";
- var linkHtml = pskl.utils.Template.replace(linkTpl, {
- link : imageUrl,
- shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...')
- });
- this.uploadStatusContainerEl.innerHTML = 'Your image is now available at : ' + linkHtml;
- } else {
- // FIXME : Should display error message instead
- }
- };
-
- ns.PngExportController.prototype.updatePreview_ = function (src) {
- this.previewContainerEl.innerHTML = "![]("+src+")
";
- };
-
- ns.PngExportController.prototype.shorten_ = function (url, maxLength, suffix) {
- if (url.length > maxLength) {
- url = url.substring(0, maxLength);
- url += suffix;
- }
- return url;
- };
-})();;(function () {
- var ns = $.namespace("pskl.controller.settings");
-
- ns.LocalStorageController = function () {};
-
- /**
- * @public
- */
- ns.LocalStorageController.prototype.init = function() {
- this.localStorageItemTemplate_ = pskl.utils.Template.get("local-storage-item-template");
- this.service_ = pskl.app.localStorageService;
- this.piskelsList = $('.local-piskels-list');
-
- this.fillLocalPiskelsList_();
-
- this.piskelsList.click(this.onPiskelsListClick_.bind(this));
- };
-
- ns.LocalStorageController.prototype.onPiskelsListClick_ = function (evt) {
- var action = evt.target.getAttribute('data-action');
- var name = evt.target.getAttribute('data-name');
- if (action === 'load') {
- if (window.confirm('This will erase your current piskel. Continue ?')) {
- this.service_.load(name);
- $.publish(Events.CLOSE_SETTINGS_DRAWER);
- }
- } else if (action === 'delete') {
- if (window.confirm('This will permanently DELETE this piskel from your computer. Continue ?')) {
- this.service_.remove(name);
- $.publish(Events.CLOSE_SETTINGS_DRAWER);
- }
- }
- };
-
- ns.LocalStorageController.prototype.fillLocalPiskelsList_ = function () {
- var html = "";
- var keys = this.service_.getKeys();
-
- var pad = function (num) {
- if (num < 10) {
- return "0" + num;
- } else {
- return "" + num;
- }
- };
-
-
- keys.sort(function (k1, k2) {
- if (k1.date < k2.date) {return 1;}
- if (k1.date > k2.date) {return -1;}
- return 0;
- });
-
- keys.forEach((function (key) {
- var date = new Date(key.date);
- var formattedDate = pskl.utils.Template.replace("{{Y}}/{{M}}/{{D}} {{H}}:{{m}}", {
- Y : date.getFullYear(),
- M : pad(date.getMonth() + 1),
- D : pad(date.getDate()),
- H : pad(date.getHours()),
- m : pad(date.getMinutes())
- });
- html += pskl.utils.Template.replace(this.localStorageItemTemplate_, {name : key.name, date : formattedDate});
- }).bind(this));
-
- var tableBody_ = this.piskelsList.get(0).tBodies[0];
- tableBody_.innerHTML = html;
- };
-
-})();;(function () {
- var ns = $.namespace('pskl.controller.settings');
-
- ns.SaveController = function (piskelController) {
- this.piskelController = piskelController;
- };
-
- /**
- * @public
- */
- ns.SaveController.prototype.init = function () {
- this.saveForm = $('form[name=save-form]');
- this.nameInput = $('#save-name');
- this.descriptionInput = $('#save-description');
- this.isPublicCheckbox = $('input[name=save-public-checkbox]');
- this.saveOnlineButton = $('#save-online-button');
- this.saveLocalButton = $('#save-local-button');
-
- // Only available in app-engine mode ...
- this.piskelName = $('.piskel-name').get(0);
-
- this.saveOnlineStatus = $('#save-online-status');
-
- this.saveLocalStatus = $('#save-local-status');
- this.timestamp = new Date();
-
- var descriptor = this.piskelController.getPiskel().getDescriptor();
- this.nameInput.val(descriptor.name);
- this.descriptionInput.val(descriptor.description);
-
- this.isPublicCheckbox.prop('checked', descriptor.isPublic);
-
- this.saveLocalButton.click(this.onSaveLocalClick_.bind(this));
- this.nameInput.keyup(this.updateLocalStatusFilename_.bind(this));
-
- if (pskl.app.isLoggedIn()) {
- this.saveForm.submit(this.onSaveFormSubmit_.bind(this));
- } else {
- this.saveOnlineButton.hide();
- $('.save-public-section').hide();
- this.saveOnlineStatus.html(pskl.utils.Template.get('save-please-login-partial'));
- this.saveLocalButton.get(0).classList.add('button-primary');
- this.saveForm.submit(this.onSaveLocalClick_.bind(this));
- }
-
- this.updateLocalStatusFilename_();
- };
-
- ns.SaveController.prototype.updateLocalStatusFilename_ = function () {
- this.saveLocalStatus.html(pskl.utils.Template.getAndReplace('save-local-status-template', {
- name : this.getLocalFilename_()
- }));
- };
-
- ns.SaveController.prototype.getLocalFilename_ = function () {
- var piskelName = this.getName();
- var timestamp = pskl.utils.DateUtils.format(this.timestamp, "{{Y}}{{M}}{{D}}-{{H}}{{m}}{{s}}");
- return piskelName + "-" + timestamp + ".piskel";
- };
-
- ns.SaveController.prototype.onSaveFormSubmit_ = function (evt) {
- evt.preventDefault();
- evt.stopPropagation();
-
- this.beforeSaving_();
- pskl.app.storageService.store({
- success : this.onSaveSuccess_.bind(this),
- error : this.onSaveError_.bind(this),
- after : this.afterSaving_.bind(this)
- });
- };
-
- ns.SaveController.prototype.onSaveLocalClick_ = function (evt) {
- this.beforeSaving_();
-
- pskl.utils.BlobUtils.stringToBlob(pskl.app.piskelController.serialize(), function(blob) {
- pskl.utils.FileUtils.downloadAsFile(blob, this.getLocalFilename_());
- this.onSaveSuccess_();
- this.afterSaving_();
- }.bind(this), "application/piskel+json");
- };
-
- ns.SaveController.prototype.getName = function () {
- return this.nameInput.val();
- };
-
- ns.SaveController.prototype.getDescription = function () {
- return this.descriptionInput.val();
- };
-
- ns.SaveController.prototype.beforeSaving_ = function () {
- this.updatePiskelDescriptor_();
-
- this.saveOnlineButton.attr('disabled', true);
- this.saveOnlineStatus.html('Saving ...');
-
- if (this.piskelName) {
- this.piskelName.classList.add('piskel-name-saving');
- }
- };
-
- ns.SaveController.prototype.updatePiskelDescriptor_ = function () {
- var name = this.getName();
- var description = this.getDescription();
- var isPublic = !!this.isPublicCheckbox.prop('checked');
-
- var descriptor = new pskl.model.piskel.Descriptor(name, description, isPublic);
- this.piskelController.getPiskel().setDescriptor(descriptor);
- };
-
- ns.SaveController.prototype.onSaveSuccess_ = function () {
- $.publish(Events.CLOSE_SETTINGS_DRAWER);
- $.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
- $.publish(Events.PISKEL_SAVED);
- };
-
- ns.SaveController.prototype.onSaveError_ = function (status) {
- $.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+status+")"}]);
- };
-
- ns.SaveController.prototype.afterSaving_ = function () {
- this.saveOnlineButton.attr('disabled', false);
- this.submitButton.html('');
-
- if (this.piskelName) {
- this.piskelName.classList.remove('piskel-name-saving');
- }
-
- window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
- };
-})();;(function () {
- var ns = $.namespace('pskl.controller.settings');
- var DEFAULT_FILE_STATUS = '';
- var PREVIEW_HEIGHT = 60;
-
- ns.ImportController = function (piskelController) {
- this.piskelController = piskelController;
- this.importedImage_ = null;
- };
-
- ns.ImportController.prototype.init = function () {
- this.hiddenOpenPiskelInput = $('[name=open-piskel-input]');
- this.openPiskelInputButton = $('.open-piskel-button');
-
- this.importForm = $('[name=import-form]');
- this.hiddenFileInput = $('[name=file-upload-input]');
- this.fileInputButton = $('.file-input-button');
- this.fileInputStatus = $('.file-input-status');
- this.fileInputStatus.html(DEFAULT_FILE_STATUS);
-
- this.importPreview = $('.import-section-preview');
-
- this.resizeWidth = $('[name=resize-width]');
- this.resizeHeight = $('[name=resize-height]');
- this.smoothResize = $('[name=smooth-resize-checkbox]');
-
- $('.import-options').hide();
-
- this.importForm.submit(this.onImportFormSubmit_.bind(this));
- this.hiddenFileInput.change(this.onFileUploadChange_.bind(this));
- this.fileInputButton.click(this.onFileInputClick_.bind(this));
-
- this.hiddenOpenPiskelInput.change(this.onOpenPiskelChange_.bind(this));
- this.openPiskelInputButton.click(this.onOpenPiskelClick_.bind(this));
-
- this.resizeWidth.keyup(this.onResizeInputKeyUp_.bind(this, 'width'));
- this.resizeHeight.keyup(this.onResizeInputKeyUp_.bind(this, 'height'));
- };
-
- ns.ImportController.prototype.reset_ = function () {
- this.importForm.get(0).reset();
- this.fileInputStatus.html(DEFAULT_FILE_STATUS);
- $.publish(Events.CLOSE_SETTINGS_DRAWER);
- };
-
- ns.ImportController.prototype.onResizeInputKeyUp_ = function (from, evt) {
- if (this.importedImage_) {
- this.synchronizeResizeFields_(evt.target.value, from);
- }
- };
-
- ns.ImportController.prototype.synchronizeResizeFields_ = function (value, from) {
- value = parseInt(value, 10);
- if (isNaN(value)) {
- value = 0;
- }
- var height = this.importedImage_.height, width = this.importedImage_.width;
- if (from === 'width') {
- this.resizeHeight.val(Math.round(value * height / width));
- } else {
- this.resizeWidth.val(Math.round(value * width / height));
- }
- };
-
- ns.ImportController.prototype.onImportFormSubmit_ = function (evt) {
- evt.originalEvent.preventDefault();
- this.importImageToPiskel_();
- };
-
- ns.ImportController.prototype.onFileUploadChange_ = function (evt) {
- this.importPictureFromFile_();
- };
-
- ns.ImportController.prototype.onFileInputClick_ = function (evt) {
- this.hiddenFileInput.click();
- };
-
- ns.ImportController.prototype.onOpenPiskelChange_ = function (evt) {
- this.openPiskelFile_();
- };
-
- ns.ImportController.prototype.onOpenPiskelClick_ = function (evt) {
- this.hiddenOpenPiskelInput.click();
- };
-
- ns.ImportController.prototype.openPiskelFile_ = function () {
- var files = this.hiddenOpenPiskelInput.get(0).files;
- if (files.length == 1) {
-
- var file = files[0];
- if (this.isPiskel_(file)){
- pskl.utils.FileUtils.readFile(file, function (content) {
- var rawPiskel = window.atob(content.replace('data:;base64,',''));
- var serializedPiskel = JSON.parse(rawPiskel);
- var name = serializedPiskel.piskel.name;
- var description = serializedPiskel.piskel.description;
- var fps = serializedPiskel.piskel.fps;
-
- pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, function (piskel) {
- piskel.setDescriptor(new pskl.model.piskel.Descriptor(name, description, true));
- pskl.app.piskelController.setPiskel(piskel);
- pskl.app.animationController.setFPS(fps);
- });
- });
- this.reset_();
- }
- }
- };
-
-
- ns.ImportController.prototype.importPictureFromFile_ = function () {
- var files = this.hiddenFileInput.get(0).files;
- if (files.length == 1) {
- var file = files[0];
- if (this.isImage_(file)) {
- this.readImageFile_(file);
- this.enableDisabledSections_();
- } else {
- this.reset_();
- throw 'File is not an image : ' + file.type;
- }
- }
- };
-
- ns.ImportController.prototype.enableDisabledSections_ = function () {
- this.fileInputButton.removeClass('button-primary');
- this.fileInputButton.blur();
- $('.import-options').show();
- };
-
- ns.ImportController.prototype.readImageFile_ = function (imageFile) {
- pskl.utils.FileUtils.readFile(imageFile, this.processImageSource_.bind(this));
- };
-
- /**
- * Create an image from the given source (url or data-url), and onload forward to onImageLoaded
- * TODO : should be a generic utility method, should take a callback
- * @param {String} imageSource url or data-url, will be used as src for the image
- */
- ns.ImportController.prototype.processImageSource_ = function (imageSource) {
- this.importedImage_ = new Image();
- this.importedImage_.onload = this.onImageLoaded_.bind(this);
- this.importedImage_.src = imageSource;
- };
-
- ns.ImportController.prototype.onImageLoaded_ = function (evt) {
- var w = this.importedImage_.width,
- h = this.importedImage_.height;
-
- // FIXME : We remove the onload callback here because JsGif will insert
- // the image again and we want to avoid retriggering the image onload
- this.importedImage_.onload = function () {};
-
- var filePath = this.hiddenFileInput.val();
- var fileName = this.extractFileNameFromPath_(filePath);
- this.fileInputStatus.html(fileName);
-
- this.resizeWidth.val(w);
- this.resizeHeight.val(h);
-
- this.importPreview.width('auto');
- this.importPreview.html('');
- this.importPreview.append(this.createImagePreview_());
- };
-
- ns.ImportController.prototype.createImagePreview_ = function () {
- var image = document.createElement('IMG');
- image.src = this.importedImage_.src;
- image.setAttribute('height', PREVIEW_HEIGHT);
- return image;
- };
-
- ns.ImportController.prototype.extractFileNameFromPath_ = function (path) {
- var parts = [];
- if (path.indexOf('/') !== -1) {
- parts = path.split('/');
- } else if (path.indexOf('\\') !== -1) {
- parts = path.split('\\');
- } else {
- parts = [path];
- }
- return parts[parts.length-1];
- };
-
- ns.ImportController.prototype.importImageToPiskel_ = function () {
- var image = this.importedImage_;
- if (image) {
- if (window.confirm('You are about to create a new Piskel, unsaved changes will be lost.')) {
- var gifLoader = new window.SuperGif({
- gif : image
- });
-
- gifLoader.load({
- success : function(){
- var images = gifLoader.getFrames().map(function (frame) {
- return pskl.CanvasUtils.createFromImageData(frame.data);
- });
- this.createPiskelFromImages_(images);
- }.bind(this),
- error : function () {
- this.createPiskelFromImages_([image]);
- }.bind(this)
- });
-
- }
- }
- };
-
- ns.ImportController.prototype.createFramesFromImages_ = function (images) {
- var w = this.resizeWidth.val();
- var h = this.resizeHeight.val();
- var smoothing = !!this.smoothResize.prop('checked');
-
- var frames = images.map(function (image) {
- var resizedImage = pskl.utils.ImageResizer.resize(image, w, h, smoothing);
- return pskl.utils.FrameUtils.createFromImage(resizedImage);
- });
- return frames;
- };
-
- ns.ImportController.prototype.createPiskelFromImages_ = function (images) {
- var frames = this.createFramesFromImages_(images);
- var layer = pskl.model.Layer.fromFrames('Layer 1', frames);
- var descriptor = new pskl.model.piskel.Descriptor('Imported piskel', '');
- var piskel = pskl.model.Piskel.fromLayers([layer], descriptor);
-
- pskl.app.piskelController.setPiskel(piskel);
- pskl.app.animationController.setFPS(Constants.DEFAULT.FPS);
-
- this.reset_();
- };
-
- ns.ImportController.prototype.isImage_ = function (file) {
- return file.type.indexOf('image') === 0;
- };
-
- ns.ImportController.prototype.isPiskel_ = function (file) {
- return (/\.piskel$/).test(file.name);
- };
-
-})();;(function () {
- var ns = $.namespace('pskl.controller.settings');
-
- var settings = {
- 'user' : {
- template : 'templates/settings/application.html',
- controller : ns.ApplicationSettingsController
- },
- 'resize' : {
- template : 'templates/settings/resize.html',
- controller : ns.ResizeController
- },
- 'png' : {
- template : 'templates/settings/export.html',
- controller : ns.PngExportController
- },
- 'import' : {
- template : 'templates/settings/import.html',
- controller : ns.ImportController
- },
- 'localstorage' : {
- template : 'templates/settings/localstorage.html',
- controller : ns.LocalStorageController
- },
- 'save' : {
- template : 'templates/settings/save.html',
- controller : ns.SaveController
- }
- };
-
- var SEL_SETTING_CLS = 'has-expanded-drawer';
- var EXP_DRAWER_CLS = 'expanded';
-
- ns.SettingsController = function (piskelController) {
- this.piskelController = piskelController;
- this.drawerContainer = document.getElementById('drawer-container');
- this.settingsContainer = $('[data-pskl-controller=settings]');
- this.isExpanded = false;
- this.currentSetting = null;
- };
-
- /**
- * @public
- */
- ns.SettingsController.prototype.init = function() {
- $('[data-setting]').click(this.onSettingIconClick.bind(this));
- $('body').click(this.onBodyClick.bind(this));
- $.subscribe(Events.CLOSE_SETTINGS_DRAWER, this.closeDrawer.bind(this));
- };
-
- ns.SettingsController.prototype.onSettingIconClick = function (evt) {
- var el = evt.originalEvent.currentTarget;
- var setting = el.getAttribute('data-setting');
- if (this.currentSetting != setting) {
- this.loadSetting(setting);
- } else {
- this.closeDrawer();
- }
- evt.originalEvent.stopPropagation();
- evt.originalEvent.preventDefault();
- };
-
- ns.SettingsController.prototype.onBodyClick = function (evt) {
- var target = evt.target;
-
- var isInDrawerContainer = pskl.utils.Dom.isParent(target, this.drawerContainer);
- var isInSettingsIcon = target.getAttribute('data-setting');
- var isInSettingsContainer = isInDrawerContainer || isInSettingsIcon;
-
- if (this.isExpanded && !isInSettingsContainer) {
- this.closeDrawer();
- }
- };
-
- ns.SettingsController.prototype.loadSetting = function (setting) {
- this.drawerContainer.innerHTML = pskl.utils.Template.get(settings[setting].template);
- (new settings[setting].controller(this.piskelController)).init();
-
- this.settingsContainer.addClass(EXP_DRAWER_CLS);
-
- $('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
- $('[data-setting='+setting+']').addClass(SEL_SETTING_CLS);
-
- this.isExpanded = true;
- this.currentSetting = setting;
- };
-
- ns.SettingsController.prototype.closeDrawer = function () {
- this.settingsContainer.removeClass(EXP_DRAWER_CLS);
- $('.' + SEL_SETTING_CLS).removeClass(SEL_SETTING_CLS);
-
- this.isExpanded = false;
- this.currentSetting = null;
-
- document.activeElement.blur();
- };
-
-})();;(function () {
- var ns = $.namespace('pskl.controller.dialogs');
-
- var tinycolor = window.tinycolor;
-
- var SELECTED_CLASSNAME = 'selected';
- var NEW_COLOR_CLASS = 'palette-manager-new-color';
- var CLOSE_ICON_CLASS = 'palette-manager-delete-card';
- var EDIT_NAME_CLASS = 'edit-icon';
-
- ns.PaletteManagerController = function (piskelController) {
- this.piskelController = piskelController;
- this.palettes = this.retrieveUserPalettes();
- this.originalPalettes = this.retrieveUserPalettes();
- this.selectedPaletteId = null;
-
- // Keep track of all spectrum instances created, to dispose them when closing the popup
- this.spectrumContainers = [];
- };
-
- ns.PaletteManagerController.prototype.init = function () {
- this.palettesList = document.querySelector('.palette-manager-list');
- this.paletteBody = document.querySelector('.palette-manager-details-body');
- this.paletteHead = document.querySelector('.palette-manager-details-head');
- this.createButton = document.querySelector('.palette-manager-actions-button[data-action="create"]');
- this.saveAllButton = document.querySelector('.palette-manager-actions-button[data-action="save-all"]');
- this.closeButton = document.querySelector('.palette-manager-close');
-
- this.colorCardTemplate = pskl.utils.Template.get('palette-color-card-template');
- this.newColorTemplate = pskl.utils.Template.get('palette-new-color-template');
- this.paletteHeadTemplate = pskl.utils.Template.get('palette-details-head-template');
-
- // Events
- this.palettesList.addEventListener('click', this.onPaletteListClick.bind(this));
- // Delegated event listener for events repeated on all cards
- this.paletteBody.addEventListener('click', this.delegatedPaletteBodyClick.bind(this));
- this.paletteHead.addEventListener('click', this.delegatedPaletteHeadClick.bind(this));
- this.createButton.addEventListener('click', this.onCreateClick_.bind(this));
- this.saveAllButton.addEventListener('click', this.saveAll.bind(this));
- this.closeButton.addEventListener('click', this.closeDialog.bind(this));
-
- // Init markup
- this.createPaletteListMarkup();
- if (this.palettes.length > 0) {
- this.selectPalette(this.palettes[0].id);
- } else {
- this.createPalette('New palette');
- }
- };
-
- ns.PaletteManagerController.prototype.destroy = function () {
- this.destroySpectrumPickers();
- };
-
- ns.PaletteManagerController.prototype.closeDialog = function () {
- $.publish(Events.DIALOG_HIDE);
- };
-
- ns.PaletteManagerController.prototype.onCreateClick_ = function (evt) {
- this.createPalette();
- };
-
- ns.PaletteManagerController.prototype.createPalette = function (name) {
- if (!name) {
- name = window.prompt('Please enter a name for your palette', 'New palette');
- }
- if (name) {
- var palette = this.createPaletteObject(name);
- this.palettes.push(palette);
- this.createPaletteListMarkup();
- this.selectPalette(palette.id);
- }
- };
-
- ns.PaletteManagerController.prototype.createPaletteObject = function (name) {
- return {
- id : 'palette-' + Date.now() + '-' + Math.floor(Math.random()*1000),
- name : name,
- colors : []
- };
- };
-
- ns.PaletteManagerController.prototype.redraw = function () {
- this.createPaletteListMarkup();
- this.selectPalette(this.selectedPaletteId);
- };
-
- ns.PaletteManagerController.prototype.selectPalette = function (paletteId) {
- this.deselectCurrentPalette();
- var paletteListItem = this.palettesList.querySelector('[data-palette-id='+paletteId+']');
- if (paletteListItem) {
- this.selectedPaletteId = paletteId;
- paletteListItem.classList.add(SELECTED_CLASSNAME);
- this.refreshPaletteDetails();
- }
- };
-
- ns.PaletteManagerController.prototype.refreshPaletteDetails = function () {
- this.createPaletteHeadMarkup();
- this.createPaletteBodyMarkup();
- this.initPaletteDetailsEvents();
- this.initPaletteCardsSpectrum();
- };
-
- ns.PaletteManagerController.prototype.createPaletteListMarkup = function () {
- var html = this.palettes.map(function (palette) {
- var paletteCopy = {
- id : palette.id,
- name : this.isPaletteModified(palette) ? palette.name + " *" : palette.name
- };
- return pskl.utils.Template.replace('{{name}}', paletteCopy);
- }.bind(this)).join('');
- this.palettesList.innerHTML = html;
- };
-
- /**
- * Fill the palette body container with color cards for the selected palette
- */
- ns.PaletteManagerController.prototype.createPaletteHeadMarkup = function () {
- var palette = this.getSelectedPalette();
- var dict = {
- 'name' : palette.name,
- 'save:disabled' : !this.isPaletteModified(palette),
- 'revert:disabled' : !this.isPaletteModified(palette),
- 'delete:disabled' : this.palettes.length < 2
- };
- var html = pskl.utils.Template.replace(this.paletteHeadTemplate, dict);
-
- this.paletteHead.innerHTML = html;
- };
-
- ns.PaletteManagerController.prototype.isPaletteModified = function (palette) {
- var isModified = false;
- var originalPalette = this.getPaletteById(palette.id, this.originalPalettes);
- if (originalPalette) {
- var differentName = originalPalette.name !== palette.name;
- var differentColors = palette.colors.join('') !== originalPalette.colors.join('');
- isModified = differentName || differentColors;
- } else {
- isModified = true;
- }
- return isModified;
- };
-
- /**
- * Fill the palette body container with color cards for the selected palette
- */
- ns.PaletteManagerController.prototype.createPaletteBodyMarkup = function () {
- var palette = this.getSelectedPalette();
-
- var html = this.getColorCardsMarkup(palette.colors);
- html += pskl.utils.Template.replace(this.newColorTemplate, {classname : NEW_COLOR_CLASS});
-
- this.paletteBody.innerHTML = html;
- };
-
- ns.PaletteManagerController.prototype.initPaletteDetailsEvents = function () {
- // New Card click event
- var newCard = this.paletteBody.querySelector('.' + NEW_COLOR_CLASS);
- newCard.addEventListener('click', this.onNewCardClick.bind(this));
-
- if (this.palettes.length < 2) {
- var deleteButton = this.paletteHead.querySelector('.palette-manager-palette-button[data-action="delete"]');
- deleteButton.setAttribute("disabled", "disabled");
- }
- };
-
- ns.PaletteManagerController.prototype.onNewCardClick = function () {
- var color;
- var palette = this.getSelectedPalette();
- if (palette && palette.colors.length > 0) {
- color = palette.colors[palette.colors.length-1];
- } else {
- color = '#FFFFFF';
- }
- this.addColorInSelectedPalette(color);
- };
-
- ns.PaletteManagerController.prototype.delegatedPaletteBodyClick = function (event) {
- var target = event.target;
- if (target.classList.contains(CLOSE_ICON_CLASS)) {
- var colorId = parseInt(target.parentNode.dataset.colorId, 10);
- this.removeColorInSelectedPalette(colorId);
- }
- };
-
- ns.PaletteManagerController.prototype.delegatedPaletteHeadClick = function (event) {
- var target = event.target;
- if (target.classList.contains(EDIT_NAME_CLASS)) {
- this.renameSelectedPalette();
- } else if (target.classList.contains('palette-manager-palette-button')) {
- var action = target.dataset.action;
- if (action === 'save') {
- this.savePalette(this.getSelectedPalette().id);
- this.redraw();
- } else if (action === 'revert') {
- this.revertChanges();
- } else if (action === 'delete') {
- this.deleteSelectedPalette();
- }
- }
- };
-
- ns.PaletteManagerController.prototype.getSpectrumSelector_ = function () {
- return ':not(.' + NEW_COLOR_CLASS + ')>.palette-manager-color-square';
- };
-
- ns.PaletteManagerController.prototype.initPaletteCardsSpectrum = function () {
- var oSelf = this;
- var container = $(this.getSpectrumSelector_());
- container.spectrum({
- clickoutFiresChange : true,
- showInput: true,
- showButtons: false,
- change : function (color) {
- var target = this;
- var colorId = parseInt(target.parentNode.dataset.colorId, 10);
- oSelf.updateColorInSelectedPalette(colorId, color);
- },
- beforeShow : function() {
- var target = this;
- var colorId = parseInt(target.parentNode.dataset.colorId, 10);
- var palette = oSelf.getSelectedPalette();
- var color = palette.colors[colorId];
- container.spectrum("set", color);
- }
- });
-
- this.spectrumContainers.push(container);
- };
-
- /**
- * Destroy all spectrum instances generated by the palette manager
- */
- ns.PaletteManagerController.prototype.destroySpectrumPickers = function () {
- this.spectrumContainers.forEach(function (container) {
- container.spectrum("destroy");
- });
- this.spectrumContainers = [];
- };
-
- ns.PaletteManagerController.prototype.updateColorInSelectedPalette = function (colorId, color) {
- var palette = this.getSelectedPalette();
- var hexColor = '#' + (color.toHex().toUpperCase());
- palette.colors.splice(colorId, 1, hexColor);
-
- this.redraw();
- };
-
- ns.PaletteManagerController.prototype.addColorInSelectedPalette = function (color) {
- var selectedPalette = this.getSelectedPalette();
- selectedPalette.colors.push(color);
-
- this.redraw();
- };
-
- ns.PaletteManagerController.prototype.removeColorInSelectedPalette = function (colorId) {
- var palette = this.getSelectedPalette();
- palette.colors.splice(colorId, 1);
-
- this.redraw();
- };
-
- ns.PaletteManagerController.prototype.renameSelectedPalette = function () {
- var palette = this.getSelectedPalette();
- var name = window.prompt('Please enter a new name for palette "' + palette.name + '"', palette.name);
- if (name) {
- palette.name = name;
- this.redraw();
- }
- };
-
- ns.PaletteManagerController.prototype.getSelectedPalette = function () {
- return this.getPaletteById(this.selectedPaletteId, this.palettes);
- };
-
- ns.PaletteManagerController.prototype.getColorCardsMarkup = function (colors) {
- var html = colors.map(function (color, index) {
- var dict = {
- colorId : index,
- hex : color,
- rgb : tinycolor(color).toRgbString(),
- hsl : tinycolor(color).toHslString()
- };
- return pskl.utils.Template.replace(this.colorCardTemplate, dict);
- }.bind(this)).join('');
- return html;
- };
-
- ns.PaletteManagerController.prototype.getPaletteById = function (paletteId, palettes) {
- var match = null;
-
- palettes.forEach(function (palette) {
- if (palette.id === paletteId) {
- match = palette;
- }
- });
-
- return match;
- };
-
- ns.PaletteManagerController.prototype.removePaletteById = function (paletteId, palettes) {
- var palette = this.getPaletteById(paletteId, palettes);
- if (palette) {
- var index = palettes.indexOf(palette);
- palettes.splice(index, 1);
- }
- };
-
- ns.PaletteManagerController.prototype.deselectCurrentPalette = function () {
- var selectedItem = this.palettesList.querySelector('.' + SELECTED_CLASSNAME);
- if (selectedItem) {
- this.selectedPaletteId = null;
- selectedItem.classList.remove(SELECTED_CLASSNAME);
- }
- };
-
- ns.PaletteManagerController.prototype.revertChanges = function () {
- var palette = this.getSelectedPalette();
- var originalPalette = this.getPaletteById(palette.id, this.originalPalettes);
- palette.name = originalPalette.name;
- palette.colors = originalPalette.colors.slice(0);
-
- this.redraw();
- };
-
- ns.PaletteManagerController.prototype.deleteSelectedPalette = function () {
- var palette = this.getSelectedPalette();
- if (this.palettes.length > 1) {
- if (window.confirm('Are you sure you want to delete "' + palette.name + '" ?')) {
- this.removePaletteById(palette.id, this.palettes);
- this.removePaletteById(palette.id, this.originalPalettes);
-
- this.persistToLocalStorage();
-
- this.createPaletteListMarkup();
- this.selectPalette(this.palettes[0].id);
- }
- }
- };
-
- ns.PaletteManagerController.prototype.onPaletteListClick = function (event) {
- var target = event.target;
- if (target.dataset.paletteId) {
- this.selectPalette(target.dataset.paletteId);
- }
- };
-
- ns.PaletteManagerController.prototype.saveAll = function () {
- this.palettes.forEach(function (palette) {
- this.savePalette(palette.id);
- }.bind(this));
-
- this.redraw();
- };
-
- ns.PaletteManagerController.prototype.savePalette = function (paletteId) {
- var palette = this.getPaletteById(paletteId, this.palettes);
- var originalPalette = this.getPaletteById(paletteId, this.originalPalettes);
- if (originalPalette) {
- originalPalette.name = palette.name;
- originalPalette.colors = palette.colors;
- } else {
- this.originalPalettes.push(palette);
- }
-
- this.persistToLocalStorage();
-
- $.publish(Events.SHOW_NOTIFICATION, [{"content": "Palette " + palette.name + " successfully saved !"}]);
- window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 2000);
- };
-
- ns.PaletteManagerController.prototype.persistToLocalStorage = function () {
- window.localStorage.setItem('piskel.palettes', JSON.stringify(this.originalPalettes));
- this.originalPalettes = this.retrieveUserPalettes();
- $.publish(Events.PALETTE_LIST_UPDATED);
- };
-
- ns.PaletteManagerController.prototype.retrieveUserPalettes = function () {
- var palettesString = window.localStorage.getItem('piskel.palettes');
- return JSON.parse(palettesString) || [];
- };
-
-})();;(function () {
- var ns = $.namespace('pskl.controller.dialogs');
-
- var dialogs = {
- 'manage-palettes' : {
- template : 'templates/dialogs/manage-palettes.html',
- controller : ns.PaletteManagerController
- }
- };
-
- ns.DialogsController = function (piskelController) {
- this.piskelController = piskelController;
- this.currentDialog_ = null;
- };
-
- ns.DialogsController.prototype.init = function () {
- this.dialogContainer_ = document.getElementById('dialog-container');
- this.dialogWrapper_ = document.getElementById('dialog-container-wrapper');
- $.subscribe(Events.DIALOG_DISPLAY, this.onDialogDisplayEvent_.bind(this));
- $.subscribe(Events.DIALOG_HIDE, this.onDialogHideEvent_.bind(this));
-
- pskl.app.shortcutService.addShortcut('alt+P', this.onDialogDisplayEvent_.bind(this, null, 'manage-palettes'));
- };
-
- ns.DialogsController.prototype.onDialogDisplayEvent_ = function (evt, dialogId) {
- if (!this.isDisplayed()) {
- var config = dialogs[dialogId];
- if (config) {
- this.dialogContainer_.innerHTML = pskl.utils.Template.get(config.template);
- var controller = new config.controller(this.piskelController);
- controller.init();
-
- this.showDialogWrapper_();
- this.currentDialog_ = {
- id : dialogId,
- controller : controller
- };
- } else {
- console.error('Could not find dialog configuration for dialogId : ' + dialogId);
- }
- }
- };
-
- ns.DialogsController.prototype.onDialogHideEvent_ = function () {
- this.hideDialog();
- };
-
- ns.DialogsController.prototype.showDialogWrapper_ = function () {
- pskl.app.shortcutService.addShortcut('ESC', this.hideDialog.bind(this));
- this.dialogWrapper_.classList.add('show');
- };
-
- ns.DialogsController.prototype.hideDialog = function () {
- var currentDialog = this.currentDialog_;
- if (currentDialog) {
- currentDialog.controller.destroy();
- }
-
- this.hideDialogWrapper_();
- this.currentDialog_ = null;
- };
-
- ns.DialogsController.prototype.hideDialogWrapper_ = function () {
- pskl.app.shortcutService.removeShortcut('ESC');
- this.dialogWrapper_.classList.remove('show');
- };
-
- ns.DialogsController.prototype.isDisplayed = function () {
- return this.currentDialog_ !== null;
- };
-
-})();;(function () {
- var ns = $.namespace("pskl.service");
-
- ns.LocalStorageService = function (piskelController) {
-
- if(piskelController === undefined) {
- throw "Bad LocalStorageService initialization: ";
- }
- this.piskelController = piskelController;
- };
-
- ns.LocalStorageService.prototype.init = function() {};
-
-// localStorage.setItem('piskel_bkp', pskl.app.piskelController.serialize())
-
- ns.LocalStorageService.prototype.save = function(name, description, piskel) {
- this.removeFromKeys_(name);
- this.addToKeys_(name, description, Date.now());
- window.localStorage.setItem('piskel.' + name, piskel);
- };
-
- ns.LocalStorageService.prototype.load = function(name) {
- var piskelString = this.getPiskel(name);
- var key = this.getKey_(name);
-
- pskl.utils.serialization.Deserializer.deserialize(JSON.parse(piskelString), function (piskel) {
- piskel.setDescriptor(new pskl.model.piskel.Descriptor(name, key.description, true));
- pskl.app.piskelController.setPiskel(piskel);
- });
- };
-
- ns.LocalStorageService.prototype.remove = function(name) {
- this.removeFromKeys_(name);
- window.localStorage.removeItem('piskel.' + name);
- };
-
- ns.LocalStorageService.prototype.saveKeys_ = function(keys) {
- window.localStorage.setItem('piskel.keys', JSON.stringify(keys));
- };
-
- ns.LocalStorageService.prototype.removeFromKeys_ = function(name) {
- var keys = this.getKeys();
- var otherKeys = keys.filter(function (key) {
- return key.name !== name;
- });
-
- this.saveKeys_(otherKeys);
- };
-
- ns.LocalStorageService.prototype.getKey_ = function(name) {
- var matches = this.getKeys().filter(function (key) {
- return key.name === name;
- });
- if (matches.length > 0) {
- return matches[0];
- } else {
- return null;
- }
- };
-
- ns.LocalStorageService.prototype.addToKeys_ = function(name, description, date) {
- var keys = this.getKeys();
- keys.push({
- name : name,
- description : description,
- date : date
- });
- this.saveKeys_(keys);
- };
-
- ns.LocalStorageService.prototype.getPiskel = function(name) {
- return window.localStorage.getItem('piskel.' + name);
- };
-
- ns.LocalStorageService.prototype.getKeys = function(name) {
- var keysString = window.localStorage.getItem('piskel.keys');
- return JSON.parse(keysString) || [];
- };
-
-})();;(function () {
- var ns = $.namespace('pskl.service');
-
- ns.GithubStorageService = function (piskelController) {
- this.piskelController = piskelController;
- };
-
- ns.GithubStorageService.prototype.init = function () {};
-
- ns.GithubStorageService.prototype.store = function (callbacks) {
- throw "Github save is no longer available. Use local save instead";
- };
-})();;(function () {
- var ns = $.namespace('pskl.service');
-
- ns.AppEngineStorageService = function (piskelController) {
- this.piskelController = piskelController;
- };
-
- ns.AppEngineStorageService.prototype.init = function () {};
-
- ns.AppEngineStorageService.prototype.store = function (callbacks) {
- var formData = this.prepareFormData_();
-
- var xhr = new XMLHttpRequest();
- xhr.open('POST', Constants.APPENGINE.URL.SAVE, true);
-
- xhr.onload = function(e) {
- if (this.status == 200) {
- callbacks.success();
- callbacks.after();
- } else {
- this.onerror(e);
- }
- };
- xhr.onerror = function(e) {
- callbacks.error(this.status);
- callbacks.after();
- };
- xhr.send(formData);
- };
-
- ns.AppEngineStorageService.prototype.prepareFormData_ = function () {
- var piskel = this.piskelController.getPiskel();
- var descriptor = piskel.getDescriptor();
-
- var formData = new FormData();
- formData.append('framesheet', this.piskelController.serialize());
- formData.append('fps', this.piskelController.getFPS());
- formData.append('name', descriptor.name);
- formData.append('description', descriptor.description);
- if (descriptor.isPublic) {
- formData.append('public', true);
- }
- formData.append('frames', this.piskelController.getFrameCount());
- formData.append('first_frame_as_png', pskl.app.getFirstFrameAsPng());
- formData.append('framesheet_as_png', pskl.app.getFramesheetAsPng());
-
- return formData;
- };
-})();;(function () {
- var ns = $.namespace('pskl.service');
-
- var SNAPSHOT_PERIOD = 50;
- var LOAD_STATE_INTERVAL = 50;
-
- ns.HistoryService = function (piskelController) {
- this.piskelController = piskelController;
- this.stateQueue = [];
- this.currentIndex = -1;
- this.saveState__b = this.onSaveStateEvent.bind(this);
-
- this.lastLoadState = -1;
- };
-
- ns.HistoryService.SNAPSHOT = 'SNAPSHOT';
- ns.HistoryService.REPLAY = 'REPLAY';
-
- ns.HistoryService.prototype.init = function () {
- $.subscribe(Events.PISKEL_SAVE_STATE, this.saveState__b);
-
- pskl.app.shortcutService.addShortcut('ctrl+Z', this.undo.bind(this));
- pskl.app.shortcutService.addShortcut('ctrl+Y', this.redo.bind(this));
-
- this.saveState({
- type : ns.HistoryService.SNAPSHOT
- });
- };
-
- ns.HistoryService.prototype.onSaveStateEvent = function (evt, stateInfo) {
- this.saveState(stateInfo);
- };
-
- ns.HistoryService.prototype.saveState = function (stateInfo) {
- this.stateQueue = this.stateQueue.slice(0, this.currentIndex + 1);
- this.currentIndex = this.currentIndex + 1;
-
- var state = {
- action : stateInfo,
- frameIndex : this.piskelController.currentFrameIndex,
- layerIndex : this.piskelController.currentLayerIndex
- };
-
- if (stateInfo.type === ns.HistoryService.SNAPSHOT || this.currentIndex % SNAPSHOT_PERIOD === 0) {
- state.piskel = this.piskelController.serialize(true);
- }
-
- this.stateQueue.push(state);
- };
-
- ns.HistoryService.prototype.undo = function () {
- this.loadState(this.currentIndex - 1);
- };
-
- ns.HistoryService.prototype.redo = function () {
- this.loadState(this.currentIndex + 1);
- };
-
- ns.HistoryService.prototype.isLoadStateAllowed_ = function (index) {
- var timeOk = (Date.now() - this.lastLoadState) > LOAD_STATE_INTERVAL;
- var indexInRange = index >= 0 && index < this.stateQueue.length;
- return timeOk && indexInRange;
- };
-
- ns.HistoryService.prototype.getPreviousSnapshotIndex_ = function (index) {
- while (this.stateQueue[index] && !this.stateQueue[index].piskel) {
- index = index - 1;
- }
- return index;
- };
-
- ns.HistoryService.prototype.loadState = function (index) {
- if (this.isLoadStateAllowed_(index)) {
- this.lastLoadState = Date.now();
-
- var snapshotIndex = this.getPreviousSnapshotIndex_(index);
- if (snapshotIndex < 0) {
- throw 'Could not find previous SNAPSHOT saved in history stateQueue';
- }
-
- var serializedPiskel = this.getSnapshotFromState_(snapshotIndex);
- var onPiskelLoadedCb = this.onPiskelLoaded_.bind(this, index, snapshotIndex);
- pskl.utils.serialization.Deserializer.deserialize(serializedPiskel, onPiskelLoadedCb);
- }
- };
-
- ns.HistoryService.prototype.getSnapshotFromState_ = function (stateIndex) {
- var state = this.stateQueue[stateIndex];
- var piskelSnapshot = state.piskel;
-
- // If the snapshot is stringified, parse it and backup the result for faster access next time
- // FIXME : Memory consumption might go crazy if we keep unpacking big piskels indefinitely
- // ==> should ensure I remove some of them :)
- if (typeof piskelSnapshot === "string") {
- piskelSnapshot = JSON.parse(piskelSnapshot);
- state.piskel = piskelSnapshot;
- }
-
- return piskelSnapshot;
- };
-
- ns.HistoryService.prototype.onPiskelLoaded_ = function (index, snapshotIndex, piskel) {
- var originalSize = this.getPiskelSize_();
- piskel.setDescriptor(this.piskelController.piskel.getDescriptor());
- this.piskelController.setPiskel(piskel);
-
- for (var i = snapshotIndex + 1 ; i <= index ; i++) {
- var state = this.stateQueue[i];
- this.setupState(state);
- this.replayState(state);
- }
-
- var lastState = this.stateQueue[index+1];
- if (lastState) {
- this.setupState(lastState);
- }
- this.currentIndex = index;
- $.publish(Events.PISKEL_RESET);
- if (originalSize !== this.getPiskelSize_()) {
- $.publish(Events.FRAME_SIZE_CHANGED);
- }
- };
-
- ns.HistoryService.prototype.getPiskelSize_ = function () {
- return this.piskelController.getWidth() + 'x' + this.piskelController.getHeight();
- };
-
- ns.HistoryService.prototype.setupState = function (state) {
- this.piskelController.setCurrentFrameIndex(state.frameIndex);
- this.piskelController.setCurrentLayerIndex(state.layerIndex);
- };
-
- ns.HistoryService.prototype.replayState = function (state) {
- var action = state.action;
- var type = action.type;
- var layer = this.piskelController.getLayerAt(state.layerIndex);
- var frame = layer.getFrameAt(state.frameIndex);
- action.scope.replay(frame, action.replay);
- };
-
-})();;(function () {
- var ns = $.namespace('pskl.service');
-
- ns.SavedStatusService = function (piskelController) {
- this.piskelController = piskelController;
- };
-
- ns.SavedStatusService.prototype.init = function () {
- $.subscribe(Events.TOOL_RELEASED, this.onToolReleased.bind(this));
- $.subscribe(Events.PISKEL_RESET, this.onPiskelReset.bind(this));
-
- $.subscribe(Events.PISKEL_SAVED, this.onPiskelSaved.bind(this));
-
- window.addEventListener("beforeunload", this.onBeforeUnload.bind(this));
- };
-
- ns.SavedStatusService.prototype.onPiskelReset = function () {
- var piskel = this.piskelController.getPiskel();
- // A first PISKEL_RESET is triggered during the load of a new Piskel, it should be ignored
- // putting a firstResetDone flag as a nasty workaround for this
- if (piskel.firstResetDone_) {
- this.updateDirtyStatus(true);
- } else {
- piskel.firstResetDone_ = true;
- }
- };
-
- ns.SavedStatusService.prototype.onToolReleased = function () {
- this.updateDirtyStatus(true);
- };
-
- ns.SavedStatusService.prototype.onPiskelSaved = function () {
- this.updateDirtyStatus(false);
- };
-
- ns.SavedStatusService.prototype.updateDirtyStatus = function (status) {
- var piskel = this.piskelController.getPiskel();
- if (piskel.isDirty_ !== status) {
- // Redraw piskel name only if dirty status actually changed
- piskel.isDirty_ = status;
- this.updatePiskelName();
- }
- };
-
- ns.SavedStatusService.prototype.updatePiskelName = function () {
- var piskel = this.piskelController.getPiskel();
- var name = piskel.getDescriptor().name;
- if (piskel.isDirty_) {
- $('.piskel-name').html(name + ' *');
- } else {
- $('.piskel-name').html(name);
- }
- };
-
- ns.SavedStatusService.prototype.onBeforeUnload = function (evt) {
- var piskel = this.piskelController.getPiskel();
- if (piskel.isDirty_) {
- var confirmationMessage = "Your Piskel seems to have unsaved changes";
-
- (evt || window.event).returnValue = confirmationMessage;
- return confirmationMessage;
- }
- };
-})();;(function () {
- var ns = $.namespace('pskl.service.keyboard');
-
- ns.ShortcutService = function () {
- this.shortcuts_ = {};
- };
-
- /**
- * @public
- */
- ns.ShortcutService.prototype.init = function() {
- $(document.body).keydown($.proxy(this.onKeyUp_, this));
- };
-
- /**
- * Add a keyboard shortcut
- * @param {String} rawKey (case insensitive) key can be a meta (optional) + [a-z0-9] or
- * a special key (check list of supported keys in KeycodeTranslator)
- * eg. 'ctrl+A', 'del'
- * @param {Function} callback should return true to let the original event perform its default action
- */
- ns.ShortcutService.prototype.addShortcut = function (rawKey, callback) {
- var parsedKey = this.parseKey_(rawKey.toLowerCase());
-
- var key = parsedKey.key,
- meta = parsedKey.meta;
-
- this.shortcuts_[key] = this.shortcuts_[key] || {};
-
- if (this.shortcuts_[key][meta]) {
- var keyStr = (meta !== 'normal' ? meta + ' + ' : '') + key;
- console.error('[ShortcutService] >>> Shortcut [' + keyStr + '] already registered');
- } else {
- this.shortcuts_[key][meta] = callback;
- }
- };
-
- ns.ShortcutService.prototype.removeShortcut = function (rawKey) {
- var parsedKey = this.parseKey_(rawKey.toLowerCase());
-
- var key = parsedKey.key,
- meta = parsedKey.meta;
-
- this.shortcuts_[key] = this.shortcuts_[key] || {};
-
- this.shortcuts_[key][meta] = null;
- };
-
- ns.ShortcutService.prototype.parseKey_ = function (key) {
- var meta = this.getMetaKey_({
- alt : key.indexOf('alt+') != -1,
- shift : key.indexOf('shift+') != -1,
- ctrl : key.indexOf('ctrl+') != -1
- });
-
- var parts = key.split(/\+(?!$)/);
- key = parts[parts.length-1];
- return {meta : meta, key : key};
- };
-
- ns.ShortcutService.prototype.getMetaKey_ = function (meta) {
- var keyBuffer = [];
- ['alt', 'ctrl', 'shift'].forEach(function (metaKey) {
- if (meta[metaKey]) {
- keyBuffer.push(metaKey);
- }
- });
-
- if (keyBuffer.length > 0) {
- return keyBuffer.join('+');
- } else {
- return 'normal';
- }
- };
- /**
- * @private
- */
- ns.ShortcutService.prototype.onKeyUp_ = function(evt) {
- if (!this.isInInput_(evt)) {
- // jquery names FTW ...
- var keycode = evt.which;
- var targetTagName = evt.target.nodeName.toUpperCase();
- var charkey = pskl.service.keyboard.KeycodeTranslator.toChar(keycode);
-
- var keyShortcuts = this.shortcuts_[charkey];
- if(keyShortcuts) {
- var meta = this.getMetaKey_({
- alt : this.isAltKeyPressed_(evt),
- shift : this.isShiftKeyPressed_(evt),
- ctrl : this.isCtrlKeyPressed_(evt)
- });
- var cb = keyShortcuts[meta];
-
- if(cb) {
- var bubble = cb(charkey);
- if (bubble !== true) {
- evt.preventDefault();
- }
- }
- }
- }
- };
-
- ns.ShortcutService.prototype.isInInput_ = function (evt) {
- var targetTagName = evt.target.nodeName.toUpperCase();
- return targetTagName === 'INPUT' || targetTagName === 'TEXTAREA';
- };
-
- ns.ShortcutService.prototype.isCtrlKeyPressed_ = function (evt) {
- return this.isMac_() ? evt.metaKey : evt.ctrlKey;
- };
-
- ns.ShortcutService.prototype.isShiftKeyPressed_ = function (evt) {
- return evt.shiftKey;
- };
-
- ns.ShortcutService.prototype.isAltKeyPressed_ = function (evt) {
- return evt.altKey;
- };
-
- ns.ShortcutService.prototype.isMac_ = function () {
- return navigator.appVersion.indexOf("Mac") != -1;
- };
-})();;(function () {
- var specialKeys = {
- 191 : "?",
- 8 : "back",
- 27 : "esc",
- 38 : "up",
- 40 : "down",
- 46 : "del",
- 189 : "-",
- 187 : "+"
- };
-
- var ns = $.namespace('pskl.service.keyboard');
-
- ns.KeycodeTranslator= {
- toChar : function (keycode) {
- if (keycode >= 48 && keycode <= 57) {
- // key is 0-9
- return (keycode - 48) + "";
- } else if (keycode >= 65 && keycode <= 90) {
- // key is a-z, use base 36 to get the string representation
- return (keycode - 65 + 10).toString(36);
- } else {
- return specialKeys[keycode];
- }
- }
- };
-})();;(function () {
- var ns = $.namespace('pskl.service.keyboard');
-
- ns.CheatsheetService = function () {
- this.isDisplayed_ = false;
- };
-
- ns.CheatsheetService.prototype.init = function () {
- this.cheatsheetEl_ = document.getElementById('cheatsheet-wrapper');
- if (!this.cheatsheetEl_) {
- throw 'cheatsheetEl_ DOM element could not be retrieved';
- }
- this.initMarkup_();
- pskl.app.shortcutService.addShortcut('shift+?', this.toggleCheatsheet_.bind(this));
- pskl.app.shortcutService.addShortcut('?', this.toggleCheatsheet_.bind(this));
-
- var link = $('.cheatsheet-link');
- link.click(this.toggleCheatsheet_.bind(this));
-
- $.subscribe(Events.TOGGLE_HELP, this.toggleCheatsheet_.bind(this));
- $.subscribe(Events.ESCAPE, this.onEscape_.bind(this));
- };
-
- ns.CheatsheetService.prototype.toggleCheatsheet_ = function () {
- if (this.isDisplayed_) {
- this.hideCheatsheet_();
- } else {
- this.showCheatsheet_();
- }
- };
-
- ns.CheatsheetService.prototype.onEscape_ = function () {
- if (this.isDisplayed_) {
- this.hideCheatsheet_();
- }
- };
-
- ns.CheatsheetService.prototype.showCheatsheet_ = function () {
- pskl.app.shortcutService.addShortcut('ESC', this.hideCheatsheet_.bind(this));
- this.cheatsheetEl_.style.display = 'block';
- this.isDisplayed_ = true;
- };
-
-
- ns.CheatsheetService.prototype.hideCheatsheet_ = function () {
- pskl.app.shortcutService.removeShortcut('ESC');
- this.cheatsheetEl_.style.display = 'none';
- this.isDisplayed_ = false;
- };
-
- ns.CheatsheetService.prototype.initMarkup_ = function () {
- this.initMarkupForTools_();
- this.initMarkupForMisc_();
- this.initMarkupForSelection_();
- };
-
- ns.CheatsheetService.prototype.toDescriptor_ = function (shortcut, description, icon) {
- return {
- 'shortcut' : shortcut,
- 'description' : description,
- 'icon' : icon
- };
- };
-
- ns.CheatsheetService.prototype.getDomFromDescriptor_ = function (descriptor) {
- var shortcutTemplate = pskl.utils.Template.get('cheatsheet-shortcut-template');
- var markup = pskl.utils.Template.replace(shortcutTemplate, {
- shortcutIcon : descriptor.icon,
- shortcutDescription : descriptor.description,
- shortcutKey : descriptor.shortcut
- });
-
- return pskl.utils.Template.createFromHTML(markup);
- };
-
- ns.CheatsheetService.prototype.initMarkupAbstract_ = function (descriptors, containerSelector) {
- var container = $(containerSelector, this.cheatsheetEl_).get(0);
- for (var i = 0 ; i < descriptors.length ; i++) {
- var descriptor = descriptors[i];
- var shortcutEl = this.getDomFromDescriptor_(descriptor);
- container.appendChild(shortcutEl);
- }
- };
-
- ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
- var descriptors = pskl.app.toolController.tools.map(function (tool) {
- return this.toDescriptor_(tool.shortcut, tool.instance.helpText, 'tool-icon ' + tool.instance.toolId);
- }.bind(this));
-
- this.initMarkupAbstract_(descriptors, '.cheatsheet-tool-shortcuts');
- };
-
- ns.CheatsheetService.prototype.initMarkupForMisc_ = function () {
- var descriptors = [
- this.toDescriptor_('0', 'Reset zoom level'),
- this.toDescriptor_('+/-', 'Zoom in/Zoom out'),
- this.toDescriptor_('X', 'Swap primary/secondary colors'),
- this.toDescriptor_('D', 'Reset default colors'),
- this.toDescriptor_('ctrl + Z', 'Undo'),
- this.toDescriptor_('ctrl + Y', 'Redo'),
- this.toDescriptor_('￪', 'Select previous frame'), /* ASCII for up-arrow */
- this.toDescriptor_('￬', 'Select next frame'), /* ASCII for down-arrow */
- this.toDescriptor_('N', 'Create new frame'),
- this.toDescriptor_('shift + N', 'Duplicate selected frame'),
- this.toDescriptor_('shift + ?', 'Open/Close this popup'),
- this.toDescriptor_('alt + P', 'Open the Palette Manager')
- ];
-
- this.initMarkupAbstract_(descriptors, '.cheatsheet-misc-shortcuts');
- };
-
- ns.CheatsheetService.prototype.initMarkupForSelection_ = function () {
- var descriptors = [
- this.toDescriptor_('ctrl + X', 'Cut selection'),
- this.toDescriptor_('ctrl + C', 'Copy selection'),
- this.toDescriptor_('ctrl + V', 'Paste selection'),
- this.toDescriptor_('del', 'Delete selection')
- ];
-
- this.initMarkupAbstract_(descriptors, '.cheatsheet-selection-shortcuts');
- };
-
-})();
-;(function () {
- var ns = $.namespace("pskl.service");
- ns.ImageUploadService = function () {};
- ns.ImageUploadService.prototype.init = function () {};
-
- /**
- * Upload a base64 image data to distant service. If successful, will call provided callback with the image URL as first argument;
- * @param {String} imageData base64 image data (such as the return value of canvas.toDataUrl())
- * @param {Function} cbSuccess success callback. 1st argument will be the uploaded image URL
- * @param {Function} cbError error callback
- */
- ns.ImageUploadService.prototype.upload = function (imageData, cbSuccess, cbError) {
- var xhr = new XMLHttpRequest();
- var formData = new FormData();
- formData.append('data', imageData);
- xhr.open('POST', Constants.IMAGE_SERVICE_UPLOAD_URL, true);
- xhr.onload = function (e) {
- if (this.status == 200) {
- var imageUrl = Constants.IMAGE_SERVICE_GET_URL + this.responseText;
- cbSuccess(imageUrl);
- } else {
- cbError();
- }
- };
-
- xhr.send(formData);
- };
-})();
-;(function () {
- var ns = $.namespace('pskl.service');
-
- ns.CurrentColorsService = function (piskelController) {
- this.piskelController = piskelController;
- this.currentColors = [];
- this.framesColorsCache_ = {};
- };
-
- ns.CurrentColorsService.prototype.init = function () {
- $.subscribe(Events.PISKEL_RESET, this.onPiskelUpdated_.bind(this));
- $.subscribe(Events.TOOL_RELEASED, this.onPiskelUpdated_.bind(this));
- };
-
- ns.CurrentColorsService.prototype.getCurrentColors = function () {
- return this.currentColors;
- };
-
- ns.CurrentColorsService.prototype.onPiskelUpdated_ = function (evt) {
- var layers = this.piskelController.getLayers();
- var frames = layers.map(function (l) {return l.getFrames();}).reduce(function (p, n) {return p.concat(n);});
- var colors = {};
- frames.forEach(function (f) {
- var frameHash = f.getHash();
- if (!this.framesColorsCache_[frameHash]) {
- var frameColors = {};
- f.forEachPixel(function (color, x, y) {
- frameColors[color] = true;
- });
- this.framesColorsCache_[frameHash] = frameColors;
- }
- Object.keys(this.framesColorsCache_[frameHash]).forEach(function (color) {
- colors[color] = true;
- });
- }.bind(this));
- delete colors[Constants.TRANSPARENT_COLOR];
- this.currentColors = Object.keys(colors);
- this.currentColors = this.currentColors.sort(function (c1, c2) {
- if (c1 < c2) {
- return -1;
- } else if (c1 > c2) {
- return 1;
- } else {
- return 0;
- }
- });
-
- // TODO : only fire if there was a change
- $.publish(Events.CURRENT_COLORS_UPDATED, colors);
- };
-})();;/**
- * @provide pskl.drawingtools.BaseTool
- *
- * @require pskl.utils
- */
-(function() {
- var ns = $.namespace("pskl.drawingtools");
-
- ns.BaseTool = function() {
- this.toolId = "tool-base";
- };
-
- ns.BaseTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {};
-
- ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {};
-
- ns.BaseTool.prototype.replay = Constants.ABSTRACT_FUNCTION;
-
- ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay, event) {
-
- if (overlay.containsPixel(col, row)) {
- if (!isNaN(this.highlightedPixelCol) &&
- !isNaN(this.highlightedPixelRow) &&
- (this.highlightedPixelRow != row ||
- this.highlightedPixelCol != col)) {
-
- // Clean the previously highlighted pixel:
- overlay.clear();
- }
-
- // Show the current pixel targeted by the tool:
- overlay.setPixel(col, row, Constants.TOOL_TARGET_HIGHLIGHT_COLOR);
-
- this.highlightedPixelCol = col;
- this.highlightedPixelRow = row;
- } else {
- this.hideHighlightedPixel(overlay);
- }
- };
-
- ns.BaseTool.prototype.hideHighlightedPixel = function(overlay) {
- if (this.highlightedPixelRow !== null && this.highlightedPixelCol !== null) {
- try {
- overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR);
- } catch (e) {
- console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed');
- }
- this.highlightedPixelRow = null;
- this.highlightedPixelCol = null;
- }
- };
-
- ns.BaseTool.prototype.raiseSaveStateEvent = function (replayData) {
- $.publish(Events.PISKEL_SAVE_STATE, {
- type : pskl.service.HistoryService.REPLAY,
- scope : this,
- replay : replayData
- });
- };
-
-
- ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {};
-
- /**
- * Bresenham line algorihtm: Get an array of pixels from
- * start and end coordinates.
- *
- * http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
- * http://stackoverflow.com/questions/4672279/bresenham-algorithm-in-javascript
- *
- * @private
- */
- ns.BaseTool.prototype.getLinePixels_ = function(x0, x1, y0, y1) {
- x1 = pskl.utils.normalize(x1, 0);
- y1 = pskl.utils.normalize(y1, 0);
-
- var pixels = [];
- var dx = Math.abs(x1-x0);
- var dy = Math.abs(y1-y0);
- var sx = (x0 < x1) ? 1 : -1;
- var sy = (y0 < y1) ? 1 : -1;
- var err = dx-dy;
- while(true){
-
- // Do what you need to for this
- pixels.push({"col": x0, "row": y0});
-
- if ((x0==x1) && (y0==y1)) {
- break;
- }
-
- var e2 = 2*err;
- if (e2>-dy){
- err -= dy;
- x0 += sx;
- }
- if (e2 < dx) {
- err += dx;
- y0 += sy;
- }
- }
- return pixels;
- };
-})();
-;(function () {
- var ns = $.namespace('pskl.drawingtools');
- /**
- * Abstract shape tool class, parent to all shape tools (rectangle, circle).
- * Shape tools should override only the draw_ method
- */
- ns.ShapeTool = function() {
- // Shapes's first point coordinates (set in applyToolAt)
- this.startCol = null;
- this.startRow = null;
- };
-
- pskl.utils.inherit(ns.ShapeTool, ns.BaseTool);
-
- /**
- * @override
- */
- ns.ShapeTool.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
- $.publish(Events.DRAG_START, [col, row]);
- this.startCol = col;
- this.startRow = row;
-
- // Drawing the first point of the rectangle in the fake overlay canvas:
- overlay.setPixel(col, row, color);
- };
-
- ns.ShapeTool.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
- var coords = this.getCoordinates_(col, row, event);
- $.publish(Events.CURSOR_MOVED, [coords.col, coords.row]);
-
- overlay.clear();
- if(color == Constants.TRANSPARENT_COLOR) {
- color = Constants.SELECTION_TRANSPARENT_COLOR;
- }
-
- // draw in overlay
- this.draw_(coords.col, coords.row, color, overlay);
- };
-
- /**
- * @override
- */
- ns.ShapeTool.prototype.releaseToolAt = function(col, row, color, frame, overlay, event) {
- overlay.clear();
- var coords = this.getCoordinates_(col, row, event);
- this.draw_(coords.col, coords.row, color, frame);
-
- $.publish(Events.DRAG_END, [col, row]);
- this.raiseSaveStateEvent({
- col : col,
- row : row,
- startCol : this.startCol,
- startRow : this.startRow,
- color : color
- });
- };
-
- /**
- * @override
- */
- ns.ShapeTool.prototype.replay = function(frame, replayData) {
- this.startCol = replayData.startCol;
- this.startRow = replayData.startRow;
- this.draw_(replayData.col, replayData.row, replayData.color, frame);
- };
-
- /**
- * Transform the current coordinates based on the original event
- * @param {Number} col current col/x coordinate in the frame
- * @param {Number} row current row/y coordinate in the frame
- * @param {Event} event current event (can be mousemove, mouseup ...)
- * @return {Object} {row : Number, col : Number}
- */
- ns.ShapeTool.prototype.getCoordinates_ = function(col, row, event) {
- if (event.shiftKey) {
- return this.getScaledCoordinates_(col, row);
- } else {
- return {col : col, row : row};
- }
- };
-
- /**
- * Transform the coordinates to preserve a square 1:1 ratio from the origin of the shape
- * @param {Number} col current col/x coordinate in the frame
- * @param {Number} row current row/y coordinate in the frame
- * @return {Object} {row : Number, col : Number}
- */
- ns.ShapeTool.prototype.getScaledCoordinates_ = function(col, row) {
- var dX = this.startCol - col;
- var absX = Math.abs(dX);
-
- var dY = this.startRow - row;
- var absY = Math.abs(dY);
-
- var delta = Math.min(absX, absY);
- row = this.startRow - ((dY/absY)*delta);
- col = this.startCol - ((dX/absX)*delta);
-
- return {
- col : col,
- row : row
- };
- };
-
- ns.ShapeTool.prototype.draw_ = Constants.ABSTRACT_FUNCTION;
-
-})();;/**
- * @provide pskl.drawingtools.SimplePen
- *
- * @require pskl.utils
- */
-(function() {
- var ns = $.namespace("pskl.drawingtools");
-
- ns.SimplePen = function() {
- this.toolId = "tool-pen";
- this.helpText = "Pen tool";
-
- this.previousCol = null;
- this.previousRow = null;
-
- this.pixels = [];
- };
-
- pskl.utils.inherit(ns.SimplePen, ns.BaseTool);
-
- /**
- * @override
- */
- ns.SimplePen.prototype.applyToolAt = function(col, row, color, frame, overlay, event) {
- frame.setPixel(col, row, color);
- this.previousCol = col;
- this.previousRow = row;
- this.pixels.push({
- col : col,
- row : row
- });
- };
-
- /**
- * @override
- */
- ns.SimplePen.prototype.moveToolAt = function(col, row, color, frame, overlay, event) {
- if((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
- // The pen movement is too fast for the mousemove frequency, there is a gap between the
- // current point and the previously drawn one.
- // We fill the gap by calculating missing dots (simple linear interpolation) and draw them.
- var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
- for(var i=0, l=interpolatedPixels.length; i
-
-
-
-
-
Selection shortcuts
-
-
-