Layer Styles

'))\n .append($('

')\n .append($('

').css({ 'background': tools.toColor(color) }))\n );\n },\n select: function(){\n // fire \"unselect\" event\n // show middlepoints\n // add active class to this one\n // show color and position below\n // add pick event listener to the colorField\n // add event listener to the input field to update the position\n // add event listener on \"unselect\" to unselect\n },\n blur: function(){\n // remove active class\n // hide middle points\n // remove \"unselect\" listener\n },\n pick: function(){\n colorpicker.pick(this.color, this.updateColor, this);\n },\n updateColor: function(newColor){\n var colorString = color.toColor(newColor);\n this.color = newColor;\n this.$stopColor.css(\"background\", colorString);\n this.$colorField.css(\"background\", colorString);\n // add color to stops\n },\n updatePosition: function(newPos){\n this.position = newPos;\n // update position at stops\n }\n },\n middlepoint: {\n threshhold: 5,\n position: null,\n percentage: null,\n init: function(position, percentage){\n this.position = position;\n this.percentage = percentage;\n this.$el = this.create();\n return this.$el;\n },\n create: function(){\n return $('')\n .attr({\n 'data-percentage': this.percentage,\n })\n .css({ 'left': this.position+'%' })\n .bind(mousedown, $.proxy( this, \"startMoving\" ));\n },\n startMoving: function(event){\n event.preventDefault();\n this.select();\n gradienteditor.gradientOffset = gradienteditor.$gradient.offset();\n $(document).bind('mousemove.global', $.proxy(this, \"move\") );\n // add event listener to listen to input field changes\n // show percentage in the input field\n },\n move: function(event){\n \n // stay in the range of the previous and following step +/- 5 (min 5, max 95)\n // if position is 55-65 round to 50\n // update input field value\n },\n show: function(){\n this.$el.addClass('visible');\n },\n hide: function(){\n this.$el.removeClass('visible');\n },\n select: function(){\n this.$el.addClass('selected');\n },\n unselect: function(){\n this.$el.removeClass('selected');\n }\n },\n addPicker: function(position, rgb){\n return $('

')\n .css({ 'left': position+'%' })\n .attr({\n 'data-color': JSON.stringify(rgb),\n 'data-percentage': position\n })\n .bind({\n mousedown: $.proxy( this, \"selectPicker\" ),\n dblclick: $.proxy( this, \"startPicking\" )\n })\n .append($('

'))\n .append($('

')\n .append($('

').css({ 'background': tools.toColor(rgb) }))\n );\n },\n selectPicker: function(event){\n event.preventDefault();\n var obj = $(event.target).parents('.picker');\n this.selectStop(obj);\n this.showMiddlepoints(obj);\n this.gradientOffset = this.$gradient.offset();\n this.extract();\n $(document).bind('mousemove.global', $.proxy(this, \"movePicker\") );\n $(document).one('mouseup', $.proxy(this, \"stopPicking\") );\n },\n startPicking: function(event){\n event.preventDefault();\n colorpicker.pick(this.currentStopColor, this.updatePicker, this);\n },\n stopPicking: function(){\n if(this.changed){\n this.currentPick.attr('data-percentage', this.currentPercentage);\n }\n },\n extract: function(){\n this.tempStops = this.expand( $.extend(true, [], this.currentGradient.stops) );\n this.tempStops.splice(this.currentPosition,1);\n },\n inject: function(percentage){\n if(this._percentage === undefined || percentage !== this._percentage){\n var injectedStops = $.extend(true, [], this.tempStops),\n pos = injectedStops.length,\n stop = [this.currentStopColor, percentage];\n\n for(var i = 0, l = injectedStops.length; i percentage){\n pos = i;\n break;\n }\n }\n injectedStops.splice(pos, 0, stop);\n this.updateGradient( this.shrink(injectedStops) );\n this._percentage = percentage;\n }\n },\n expand: function(stops){\n var last = stops.length-1;\n if(stops[0].length === 3) stops[0] = [stops[0], 0];\n if(stops[last].length === 3) stops[last] = [stops[last], 100];\n return stops;\n },\n shrink: function(stops){\n var last = stops.length-1;\n if(stops[0][1] === 0) stops[0] = stops[0][0];\n if(stops[last][1] === 100) stops[last] = stops[last][0];\n return stops;\n },\n getArrayPos: function(percentage, stops){\n for(var i = 0, l = stops.length; i (this.gradientOffset.left + this.gradientDimensions.width + 26) ||\n event.pageY < (this.gradientOffset.top - 26) ||\n event.pageY > (this.gradientOffset.top + this.gradientDimensions.height + 69) ){\n // more than 2 color stops \n if(!this._hasMinimumSize){\n x = event.pageX - this.gradientOffset.left;\n y = event.pageY - this.gradientOffset.top;\n \n if (this.puff === null) {\n this.puff = $('

').appendTo($body);\n $(document).bind('mouseup.puff', $.proxy( this, \"removeCurrentPicker\" ));\n }\n this.puff.css({ 'left': event.pageX+2, 'top': event.pageY+16 });\n this.updateGradient( this.shrink(this.tempStops) );\n } \n }\n else {\n // move picker\n this.currentPercentage = percentage;\n this.$stopLocation.val(percentage);\n this.inject(percentage);\n \n if(!this.changed){\n this.$gradientName.val(lang.Custom);\n this.changed = true;\n };\n \n if(this.puff != null){\n $(document).unbind('mouseup.puff');\n $('#puff').remove();\n this.puff = null;\n }\n }\n \n $(this.currentPick).css({ 'left': x+'px', 'top': y+'px' });\n },\n removeCurrentPicker: function(event){\n this.puff = null;\n $('#puff').remove();\n $(this).unbind(event);\n },\n updatePicker: function(newColor){\n var colorString, stops;\n // newColor RGB-{Array}\n if(!this.changed){\n this.$gradientName.val(lang.Custom);\n this.changed = true;\n };\n colorString = tools.toColor(newColor);\n $(this.currentPick).attr('data-color', JSON.stringify(newColor));\n this.currentColorField.css(\"background\", colorString);\n this.$stopColor.css(\"background\", colorString);\n stops = gradienteditor.currentGradient.stops;\n // search for the position and inject new color\n if(this.currentPosition > 0 && this.currentPosition < stops.length-1){\n stops[this.currentPosition][1] = newColor;\n }\n else {\n stops[this.currentPosition] = newColor;\n }\n this.updateGradient(stops);\n },\n addMiddlepoint: function(position, realpos){\n return $('')\n .attr({\n 'data-percentage': realpos,\n })\n .css({ 'left': position+'%' })\n .bind({\n mousedown: function(e){ \n gradienteditor.selectStop(this);\n //gradienteditor.selectMiddlePoint(this);\n }\n });\n },\n updateGradient: function(stops){\n gradienteditor.currentGradient.stops = stops;\n this.$gradient.css('background', css.cssGradient( stops, 0, \"linear\" ));\n if(gradienteditor.callback) gradienteditor.callback.call(gradienteditor.thisArg, stops);\n },\n setGradient: function(gradient){\n this.hideStop();\n this.currentGradient = $.extend(true, [], gradient);\n this.$gradient.css('background', css.cssGradient( this.currentGradient.stops, 0, \"linear\" ));\n this.$gradientName.val(this.currentGradient.name);\n this.$gradient.children().remove();\n var helpers = $('

');\n for(var i=0,length = this.currentGradient.stops.length; i [255,255,255] or [[255,255,255], 33]\n if(stop.length === 3){ // => [255,255,255]\n color = stop;\n pos = i === 0 ? 0 : 100;\n }\n else {\n color = stop[0];\n pos = stop[1]; \n }\n helpers.append( this.addPicker(pos, color) );\n if(typeof this.currentGradient.stops[i+1] !== 'number' && i != length-1){\n var nextStop = this.currentGradient.stops[i+1];\n var nextPos = nextStop.length !== 3 ? nextStop[1] : 100;\n helpers.append( this.addMiddlepoint(tools.getCenter(pos, nextPos), 50) );\n }\n break;\n case 'number':\n var middlepoint = tools.getMiddlepoint(this.currentGradient.stops[i-1], stop, this.currentGradient.stops[i+1]);\n helpers.append( this.addMiddlepoint(middlepoint[1], middlepoint[1]) );\n break;\n }\n }\n this.$gradient.append(helpers);\n },\n addGradientPreset: function(name, stops){\n var preset = $('

')\n .attr({'title': name})\n .css({\n 'background': css.cssGradient( stops, 135, \"linear\" )\n })\n .bind('click', $.proxy( this, \"handlePreset\" ))\n return preset.get(0);\n },\n handlePreset: function(e){\n e.stopPropagation();\n // find out the gradients position in the gradient array\n var family = $(e.target).parent().children();\n var pos = family.index(e.target);\n // if alt is pressed while clicking: remove gradient\n if(e.altKey){\n // slice out the gradient from the gradient array (method by John Resig)\n var rest = this.gradients.slice(pos + 1);\n this.gradients.length = pos;\n this.gradients.push.apply(this.gradients, rest);\n localStorage[\"gradients\"] = JSON.stringify(this.gradients);\n $(e.target).remove();\n }\n else {\n // else get the gradient\n this.setGradient(this.gradients[pos]);\n this.updateGradient(this.gradients[pos].stops);\n }\n },\n showStop: function(pos, color){\n this.$stopLocation.prop(\"disabled\", false).val(pos).parent().removeClass(\"disabled\");\n if (color !== null) {\n if(!this._hasMinimumSize) this.$removeStop.prop(\"disabled\", false);\n this.$stopColor.css({'background-color': color}).parent().removeClass(\"disabled\");\n this.$stopColor.bind('mousedown', $.proxy( this, \"startPicking\" ));\n }\n else {\n this.$removeStop.prop(\"disabled\", true);\n this.$stopColor.css({'background-color': 'transparent'}).parent().addClass(\"disabled\");\n }\n },\n updateStopColor: function(color){\n this.$stopColor.css({'background-color': color});\n },\n hideStop: function(){\n this.$removeStop.prop(\"disabled\", true);\n this.$stopLocation.prop(\"disabled\", true).val(\"\").parent().addClass(\"disabled\");\n this.$stopColor.css({'background-color': 'transparent'}).parent().addClass(\"disabled\");\n },\n selectStop: function(object){\n var $o = $(object), color;\n this.currentPick = $o;\n this.currentPercentage = parseInt($o.attr('data-percentage'), 10);\n this.currentPosition = this.getArrayPos(this.currentPercentage, this.currentGradient.stops);\n this.currentColorField = $o.find('.color_field');\n color = $o.attr('data-color');\n this.currentStopColor = color ? JSON.parse(color) : null;\n this._hasMinimumSize = this.currentGradient.stops.length == 2 ? true : false;\n this.showStop(this.currentPercentage, this.currentStopColor);\n $o.siblings().removeClass('selected');\n $o.addClass('selected');\n },\n showMiddlepoints: function(object){\n $(object).siblings('span').removeClass('visible');\n $(object).next('span').add($(object).prev('span')).addClass('visible');\n },\n cancelAction: function(){\n gradienteditor.updateGradient(gradienteditor.prevStops);\n nav.goTo(1);\n },\n okAction: function(){\n nav.goTo(1);\n },\n newAction: function(){\n if(this.changed){\n var newGradient = {\n 'name': this.$gradientName.val(),\n 'stops': this.currentGradient.stops\n };\n this.gradients.push(newGradient);\n this.renderPresets([newGradient]);\n localStorage[\"gradients\"] = JSON.stringify(this.gradients);\n this.changed = false;\n };\n },\n renderPresets: function(gradients){\n var presets = document.createDocumentFragment();\n for(var i = 0, length = gradients.length; i= 96 && keycode <= 105){\n character = numbers.numpadKeys[keycode];\n } else {\n character = String.fromCharCode(keycode);\n }\n if(numbers.commandKeyPressed){\n isCopyCutPasteKey = numbers.copyCutPasteKeys.join(\",\").match(new RegExp(keycode));\n if(isCopyCutPasteKey){\n return true;\n }\n }\n if(keycode === 91) {\n numbers.commandKeyPressed = true;\n return false;\n }\n // 1 for key up (keycode 38), -1 for key down (keycode 40), 0 for other keys\n numbers.direction = 0;\n switch(keycode){\n case 38: numbers.direction = 1; break;\n case 40: numbers.direction = -1; break;\n }\n if (numbers.direction !== 0 && numbers.restrict === numbers.DIGITS) {\n numbers.accelerate();\n return false;\n }\n else {\n isControlKey = numbers.controlKeys.join(\",\").match(new RegExp(keycode));\n if (isControlKey) {\n return true;\n }\n else if (character.match(numbers.restrict)) {\n numbers.value += character;\n return true;\n }\n event.preventDefault();\n return false;\n }\n },\n accelerate: function() {\n if(numbers.timeout) clearTimeout(numbers.timeout);\n if(numbers.value === '') {\n numbers.value = 0;\n }\n var number = parseInt(numbers.value, 10);\n number += numbers.direction;\n number = Math.max(numbers.min, Math.min(numbers.max, number));\n if('-'+numbers.max === numbers.min) { // as in angle from -180 to 180\n if(number === numbers.min) number = numbers.max;\n else if(number === numbers.max) number = numbers.min;\n }\n numbers.$input.val(number);\n numbers.value = number;\n numbers.updateField();\n if(!numbers.pressed){\n numbers.speed = 500;\n numbers.pressed = true;\n }\n else {\n numbers.speed = 150;\n }\n numbers.timeout = setTimeout(function(){ jQuery.proxy(numbers, \"accelerate\") }, numbers.speed);\n },\n validateInput: function(event) {\n var integer, errorString, nearestInt;\n numbers.value = numbers.$input.val();\n integer = parseInt(numbers.value, 10);\n if(numbers.regex.test(integer)){\n console.log(integer);\n numbers.$input.val(integer ? integer : \"\");\n return true;\n }\n event.preventDefault();\n errorString = lang.AnIntegerBetween+\" \"+ numbers.min +\" \"+lang.and+\" \"+ numbers.max +\" \"+lang.isRequired+\". \"+lang.ClosestValueInserted+\".\";\n alert(errorString);\n nearestInt = Math.abs(numbers.max - integer) < Math.abs(numbers.min - integer) ? numbers.max : numbers.min;\n numbers.$input.val(nearestInt).focus().change();\n }\n};" }, { "path": "js/style.js", "content": "var style = {\n background: {\n elements: {\n \".opacity\": { name: \"opacity\", handle: \"slider\" },\n \".gradientField\": \"gradientField\",\n \".reverse\": \"reverse\",\n \".angle\": { name: \"angle\", handle: \"pot\" },\n \".globalLight\": \"globalLight\"\n },\n $styles: $('#background_style'),\n init: function(el){\n this.$el = $(\"#\"+el);\n this.selector = el;\n this.$menuItem = $('.nav-'+el);\n this.$checkbox = this.$menuItem.find('input[type=checkbox]');\n this.$inputs = this.$el.find('input[type=text]');\n this.initElements();\n this.updateStops();\n this.$gradientField.click( $.proxy( this, \"edit\" ) );\n this.$reverse.change( $.proxy( this, \"switchReverse\" ) );\n this.$globalLight.click( $.proxy( this, \"switchLight\" ) );\n this.$checkbox.click( $.proxy( this, \"check\" ) );\n this.$menuItem.click( $.proxy( this, \"select\" ) );\n this.$styles.change( $.proxy( this, \"updateStyle\" ) );\n $(document).bind('styleChange', $.proxy( this, \"populateInputs\" ));\n },\n initElements: function(){\n for (var key in this.elements) {\n var el = this.elements[key];\n if(typeof el === 'object'){\n this[\"$\"+el.name] = $(key, this.$el);\n switch(el.handle){\n case \"slider\":\n this[el.name+\"Slider\"] = Object.create(slider);\n this[el.name+\"Slider\"].init(this.selector, el.name);\n break;\n case \"pot\":\n this[el.name+\"Pot\"] = Object.create(pot);\n this[el.name+\"Pot\"].init(this.selector);\n break;\n }\n } else {\n this[\"$\"+el] = $(key, this.$el);\n }\n }\n },\n populateInputs: function(){\n this.setActive();\n this.opacitySlider.update(currentStyle[this.selector].opacity);\n this.updateStops();\n this.setReverse();\n this.displayStyle();\n this.setLight();\n },\n select: function(){\n if(!currentStyle[this.selector].isActive){\n currentStyle[this.selector].isActive = true;\n this.$checkbox.prop('checked', true);\n this.$el.removeClass('inactive');\n this.$inputs.prop('disabled', false);\n this.paint();\n }\n },\n check: function(e){\n e.stopPropagation();\n if(currentStyle[this.selector].isActive){\n currentStyle[this.selector].isActive = false;\n } else { \n currentStyle[this.selector].isActive = true;\n } \n this.setActive();\n this.paint();\n },\n setActive: function(){\n if(currentStyle[this.selector].isActive){\n this.$checkbox.prop('checked', true);\n this.$el.removeClass('inactive');\n this.$inputs.prop('disabled', false);\n } else { \n this.$checkbox.prop('checked', false);\n this.$el.addClass('inactive');\n this.$inputs.prop('disabled', true);\n }\n },\n edit: function(){\n gradienteditor.edit(currentStyle[this.selector].stops, this.updateStops, this);\n },\n setReverse: function(){\n if(currentStyle[this.selector].isReverse){\n this.$reverse.prop('checked', true);\n } else { \n this.$reverse.prop('checked', false);\n } \n this.updateStops();\n this.paint();\n },\n switchReverse: function(){\n if(currentStyle[this.selector].isReverse){\n currentStyle[this.selector].isReverse = false;\n } else { \n currentStyle[this.selector].isReverse = true;\n }\n this.setReverse();\n },\n setLight: function(){\n if(currentStyle[this.selector].hasGlobalLight){\n this.$globalLight.prop('checked', true);\n this.anglePot.update(currentStyle.globalAngle);\n } else {\n this.$globalLight.prop('checked', false);\n this.anglePot.update(currentStyle[this.selector].angle);\n } \n },\n switchLight: function(){\n if(currentStyle[this.selector].hasGlobalLight){\n currentStyle[this.selector].hasGlobalLight = false;\n } else {\n currentStyle[this.selector].hasGlobalLight = true;\n }\n this.setLight();\n this.paint();\n },\n updateStyle: function(){\n currentStyle[this.selector].style = this.$styles.val();\n this.paint();\n },\n displayStyle: function(){\n this.$styles.val(currentStyle[this.selector].style);\n },\n updateStops: function(stops){\n if(stops){\n currentStyle[this.selector].stops = stops;\n currentStyle[this.selector].translucidStops = $.extend(true, [], stops);\n this.paint();\n }\n this.$gradientField.css('background', css.cssGradient( currentStyle[this.selector].stops, currentStyle[this.selector].isReverse ? 180 : 0, \"linear\" ));\n },\n paint: function(){\n $(document).trigger('paint');\n }\n },\n shadow: {\n elements: {\n \".opacity\": { name: \"opacity\", handle: \"slider\" },\n \".color_field\": \"color\",\n \".angle\": { name: \"angle\", handle: \"pot\" },\n \".globalLight\": \"globalLight\",\n \".distance\": { name: \"distance\", handle: \"slider\" },\n \".blur\": { name: \"blur\", handle: \"slider\" },\n \".size\": { name: \"size\", handle: \"slider\" }\n },\n init: function(el){\n this.$el = $(\"#\"+el);\n this.selector = el;\n this.$menuItem = $('.nav-'+el);\n this.$checkbox = this.$menuItem.find('input[type=checkbox]');\n this.$inputs = this.$el.find('input[type=text]');\n this.initElements();\n this.updateColor();\n this.$color.click( $.proxy( this, \"pick\" ) );\n this.$checkbox.click( $.proxy( this, \"check\" ) );\n this.$menuItem.click( $.proxy( this, \"select\" ) );\n this.$globalLight.click( $.proxy( this, \"switchLight\" ) );\n $(document).bind('styleChange', $.proxy( this, \"populateInputs\" ));\n },\n initElements: function(){\n for (var key in this.elements) {\n var el = this.elements[key];\n if(typeof el === 'object'){\n this[\"$\"+el.name] = $(key, this.$el);\n switch(el.handle){\n case \"slider\":\n this[el.name+\"Slider\"] = Object.create(slider);\n this[el.name+\"Slider\"].init(this.selector, el.name);\n //if(el.autoUpdate) currentStyle[this.selector].__defineSetter__( el.name , $.proxy( this[el.name+\"Slider\"], \"set\" ) );\n break;\n case \"pot\":\n this[el.name+\"Pot\"] = Object.create(pot);\n this[el.name+\"Pot\"].init(this.selector);\n break;\n }\n } else {\n this[\"$\"+el] = $(key, this.$el);\n }\n }\n },\n populateInputs: function(){\n this.setActive();\n this.updateColor();\n this.opacitySlider.update(currentStyle[this.selector].opacity);\n this.distanceSlider.update(currentStyle[this.selector].distance);\n this.blurSlider.update(currentStyle[this.selector].blur);\n this.sizeSlider.update(currentStyle[this.selector].size);\n this.setLight();\n },\n select: function(){\n if(!currentStyle[this.selector].isActive){\n currentStyle[this.selector].isActive = true;\n this.$checkbox.prop('checked', true);\n this.$el.removeClass('inactive');\n this.$inputs.prop('disabled', false);\n this.paint();\n }\n },\n check: function(e){\n e.stopPropagation();\n if(currentStyle[this.selector].isActive){\n currentStyle[this.selector].isActive = false;\n } else { \n currentStyle[this.selector].isActive = true;\n } \n this.setActive();\n this.paint();\n },\n setActive: function(){\n if(currentStyle[this.selector].isActive){\n this.$checkbox.prop('checked', true);\n this.$el.removeClass('inactive');\n this.$inputs.prop('disabled', false);\n } else { \n this.$checkbox.prop('checked', false);\n this.$el.addClass('inactive');\n this.$inputs.prop('disabled', true);\n }\n },\n pick: function(){\n colorpicker.pick(currentStyle[this.selector].color, this.updateColor, this);\n },\n setLight: function(){\n if(currentStyle[this.selector].hasGlobalLight){\n this.$globalLight.prop('checked', true);\n this.anglePot.update(currentStyle.globalAngle);\n } else {\n this.$globalLight.prop('checked', false);\n this.anglePot.update(currentStyle[this.selector].angle);\n }\n },\n switchLight: function(){\n if(currentStyle[this.selector].hasGlobalLight){\n currentStyle[this.selector].hasGlobalLight = false;\n } else {\n currentStyle[this.selector].hasGlobalLight = true;\n }\n this.setLight(); \n this.paint();\n },\n updateColor: function(currentColor){\n if(currentColor){\n currentStyle[this.selector].color = currentColor;\n this.paint();\n }\n this.$color.css('background', '#'+color.hexFromRgb(currentStyle[this.selector].color));\n },\n paint: function(){\n $(document).trigger('paint');\n }\n },\n border: {\n elements: {\n \".color_field\": \"color\",\n \".opacity\": { name: \"opacity\", handle: \"slider\" },\n \".size\": { name: \"size\", handle: \"slider\" }\n },\n $styles: $('#border_styles').find('> div'),\n init: function(el){\n this.$el = $(\"#\"+el);\n this.selector = el;\n this.$menuItem = $('.nav-'+el);\n this.$checkbox = this.$menuItem.find('input[type=checkbox]');\n this.$inputs = this.$el.find('input[type=text]');\n this.initElements();\n this.updateColor();\n this.$color.click( $.proxy( this, \"pick\" ) );\n this.$checkbox.click( $.proxy( this, \"check\" ) );\n this.$menuItem.click( $.proxy( this, \"select\" ) );\n this.$styles.click( $.proxy( this, \"updateStyle\" ) );\n $(document).bind('styleChange', $.proxy( this, \"populateInputs\" ));\n },\n initElements: function(){\n for (var key in this.elements) {\n var el = this.elements[key];\n if(typeof el === 'object'){\n this[\"$\"+el.name] = $(key, this.$el);\n switch(el.handle){\n case \"slider\":\n this[el.name+\"Slider\"] = Object.create(slider);\n this[el.name+\"Slider\"].init(this.selector, el.name);\n break;\n case \"pot\":\n this[el.name+\"Pot\"] = Object.create(pot);\n this[el.name+\"Pot\"].init(this.selector);\n break;\n }\n } else {\n this[\"$\"+el] = $(key, this.$el);\n }\n }\n },\n populateInputs: function(){\n this.setActive();\n this.updateColor();\n this.opacitySlider.update(currentStyle[this.selector].opacity);\n this.sizeSlider.update(currentStyle[this.selector].size);\n this.setStyle();\n },\n select: function(){\n if(!currentStyle[this.selector].isActive){\n currentStyle[this.selector].isActive = true;\n this.$checkbox.prop('checked', true);\n this.$el.removeClass('inactive');\n this.$inputs.prop('disabled', false);\n this.paint();\n }\n },\n check: function(e){\n e.stopPropagation();\n if(currentStyle[this.selector].isActive){\n currentStyle[this.selector].isActive = false;\n } else { \n currentStyle[this.selector].isActive = true;\n } \n this.setActive();\n this.paint();\n },\n setActive: function(){\n if(currentStyle[this.selector].isActive){\n this.$checkbox.prop('checked', true);\n this.$el.removeClass('inactive');\n this.$inputs.prop('disabled', false);\n } else { \n this.$checkbox.prop('checked', false);\n this.$el.addClass('inactive');\n this.$inputs.prop('disabled', true);\n }\n },\n pick: function(){\n colorpicker.pick(currentStyle[this.selector].color, this.updateColor, this);\n },\n setStyle: function(){\n for(var i=0, l=this.$styles.length; i')\n .attr({ 'title': name, 'data-pos': pos })\n .bind('mousedown', { self : this }, styleStore.select )\n .append( $('

').css(cssObj) );\n return swatch.get(0);\n },\n select: function(e){\n e.stopPropagation();\n var self = e.data.self;\n var $obj = $(this);\n var family = $obj.parent().children();\n var pos = family.index(this);\n // if alt is pressed while clicking: remove style\n if(e.altKey){\n // double check - styles are precious\n if(pos !== 0 && window.confirm( lang.DeleteStyle + ' \"'+ self.styles[pos].name +'\"?' )){\n // slice out the gradient from the gradient array (method by John Resig)\n var rest = self.styles.slice(pos + 1);\n self.styles.length = pos;\n self.styles.push.apply(self.styles, rest);\n localStorage[\"styles\"] = JSON.stringify(self.styles);\n $obj.remove();\n }\n }\n else {\n // else set the style\n family.removeClass('active');\n self.loadStyle(pos);\n }\n },\n compress: function(style){\n var slimStyle = {};\n var fatStyle = $.extend(true, {}, style);\n for( key in fatStyle ){\n var value = fatStyle[key];\n if(typeof style === \"object\"){\n if(value.isActive){\n slimStyle[key] = {};\n for( prop in value ){\n var propVal = value[prop];\n if( defaults[key][prop] === undefined ) continue;\n if( typeof propVal === \"object\" ){\n if( !jQuery.compare(propVal, defaults[key][prop]) ){\n slimStyle[key][prop] = propVal;\n }\n } \n else if( propVal != defaults[key][prop] && prop !== \"isActive\" ){\n slimStyle[key][prop] = propVal;\n }\n }\n if( jQuery.isEmptyObject(slimStyle[key]) ) delete slimStyle[key];\n } else {\n if(defaults[key].isActive){\n slimStyle[key] = { isActive: false };\n }\n }\n }\n else if(key === \"globalAngle\" && value !== defaults.globalAngle){\n slimStyle[\"globalAngle\"] = value;\n }\n }\n return slimStyle;\n },\n decompress: function(packedStyle){\n var expandedStyle = $.extend(true, {}, defaults);\n for(key in packedStyle){\n expandedStyle[key] = $.extend({}, defaults[key], packedStyle[key]);\n if(packedStyle[key].isActive !== undefined){\n expandedStyle[key].isActive = packedStyle[key].isActive;\n } else {\n expandedStyle[key].isActive = true;\n }\n }\n return expandedStyle;\n },\n loadStyle: function(pos){\n this.$el.children().eq(pos).addClass('active');\n currentStyle = this.decompress(this.styles[pos].style);\n $(document).trigger('styleChange').trigger('paint');\n },\n create: function(){\n var newStyle, name = prompt(lang.NewStyle,\"Style \"+this.styles.length);\n if(name){\n newStyle = {'name': name, 'style': this.compress(currentStyle)};\n this.styles.push(newStyle);\n this.renderStyles([newStyle]);\n localStorage[\"styles\"] = JSON.stringify(this.styles);\n }\n }\n}\n" }, { "path": "js/tools.js", "content": "var tools = {\n options: {\n hex: true\n },\n /**\n * @method averageGradientColor\n * @param fullStops {stops-array}\n * @return color {string}\n * @example averageGradientColor([[255,255,255], [0,0,0]]) returns gray\n */\n averageGradientColor: function(fullStops){\n var stops = gradienteditor.expand( $.extend(true, [], fullStops) ),\n reducedArray = [],\n l = stops.length;\n\n for(var i = 0; i < l; i++){\n var stop = stops[i];\n if(typeof stop === 'number'){\n stops[i] = this.getMiddlepoint(stops[i-1], stop, stops[i+1]);\n }\n } \n\n for(var i = 0; i < l-1; i++){\n var stopA = stops[i],\n stopB = stops[i+1];\n\n reducedArray.push(this.averageStop(stopA, stopB));\n } \n // reduce array to one rgb array\n reducedArray = reducedArray.reduce(this.averageColor, [0,0,0]);\n\n // round its values\n for(var i=0; i<3; i++){\n reducedArray[i] = Math.round(reducedArray[i]);\n }\n\n // return said array as color string\n return this.toColor(reducedArray);\n },\n /**\n * @method averageStop\n * @param stopA {stop-array}\n * @param stopB {stop-array}\n * @return color-stop {stop-array}\n * @example averageStop([[255,255,255], 0], [[0,0,0], 100]) returns [[128,128,128], 50]\n */\n averageStop: function(stopA, stopB){\n var colorA = stopA[0],\n posA = stopA[1],\n colorB = stopB[0],\n posB = stopB[1];\n\n return [\n [\n this.getCenter(colorA[0],colorB[0]),\n this.getCenter(colorA[1],colorB[1]),\n this.getCenter(colorA[2],colorB[2])\n ], \n posB - posA\n ];\n },\n /**\n * @method averageColor\n * @param previousValue {color-array}\n * @param currentValue {stop-array}\n * @return color {color-array}\n */\n averageColor: function(previousValue, currentValue, index, array){\n var color = currentValue[0],\n weight = currentValue[1]/100;\n\n return [\n previousValue[0] + color[0] * weight, // r\n previousValue[1] + color[1] * weight, // g\n previousValue[2] + color[2] * weight // b\n ];\n },\n /**\n * @method roundToMultiple\n * @param number {integer}\n * @param multiple {integer} multiple to round to\n * @return rounded number {integer}\n * @example roundToMultiple(35, 15) returns 30\n * @usage in ui.js -> pot; to round to 15° steps\n */\n roundToMultiple: function(number, multiple){\n var value = number/multiple,\n integer = Math.floor(value),\n rest = value - integer;\n return rest > 0.5 ? (integer+1)*multiple : integer*multiple;\n },\n /**\n * @method toColor\n * @param rgb {array} RGB or RGBA Color Array\n * @return CSS Color {string}\n * @example toColor([255,255,255]) returns 'rgb(255,255,255)'\n * toColor([255,255,255,0.5]) returns 'rgba(255,255,255,0.5)'\n */\n toColor: function(rgb){\n var mode = rgb.length === 3 ? 'rgb' : 'rgba',\n string = mode+'('+rgb.join(',')+')';\n \n if (css.colors[string]) {\n return css.colors[string];\n }\n else if(this.options.hex && mode === 'rgb'){\n return \"#\"+color.hexFromRgb(rgb);\n }\n return string;\n },\n /**\n * @method getCenter returns the center between a starting and an ending point\n * @param start {integer} \n * end {integer}\n * offset {integer} [optional] if the center has an offset\n * @return center {integer}\n * @example getCenter(0, 60) returns 30\n * getCenter(0, 60, 75) returns 45\n */\n getCenter: function(start, end, offset){\n var o = offset || 50;\n return start + Math.round(o/100*(end-start));\n },\n /**\n * @method getMiddlepoint returns the color at a specific position on a color gradient defined through a start and end color\n * @param start {array} eiter a rgb color (like [255,255,255])or a rgb color and a positon (e.g. [[255,255,255], 10])\n * pos {integer} position\n * end {array} rgb color [r, g, b]\n * @return {array} of the rgb color {array} and relative index {integer}\n * @example getCenter(0, 60) returns 30\n * getCenter(0, 60, 75) returns 45\n */\n getMiddlepoint: function(start, pos, end){\n var startColor = start,\n endColor = end, \n startIndex = 0,\n endIndex = 100,\n index = 0,\n color = [];\n if(start.length === 2){ startIndex = start[1]; startColor = start[0]; }\n if(end.length === 2){ endIndex = end[1]; endColor = end[0]; }\n index = this.getCenter(startIndex, endIndex, pos);\n for (var i=0, l = startColor.length; i [255,255,255] or [[255,255,255], 33]\n if(stop.length > 2){ // => [255,255,255]\n steps[i] = this.toColor(stop);\n }\n else { // => [[255,255,255], 33]\n steps[i] = this.toColor(stop[0])+\" \"+stop[1]+\"%\";\n }\n break;\n case 'number': // => 11\n var middlepoint = this.getMiddlepoint(stops[i-1], stop, stops[i+1]);\n steps[i] = this.toColor(middlepoint[0])+\" \"+middlepoint[1]+\"%\";\n break;\n } \n }\n return steps;\n },\n /**\n * @method decodeCanvasGradient\n * @param stops {array} the color stops\n * @param angle {integer} the gradients angle\n * @param ctx {canvas 2d context} the context the gradient is for\n * @param x {integer} the x coordinate where the gradient should start\n * @param y {integer} the y coordinate where the gradient should start\n * @param width {integer} the width of the gradients box\n * @param height {integer} the height of the gradients box\n * @return {canvas-gradient}\n */\n decodeCanvasGradient: function(stops, angle, style, ctx, x, y, width, height){\n var gradient,\n // looks like stops is still referenced to currentStyle.background.translucentStops at this point\n tempStops = $.extend(true, [], stops);\n \n switch(style){\n case \"linear\":\n /* missing: angle support\n \n 0° -> x+width, y, x, y\n 45° -> x+width, y, x, y+height\n 90° -> x, y, x, y+height\n 135°-> x, y, x+width, y+height\n 180°-> x, y, x+width, y\n 225°-> x, y+height, x+width, y\n 270°-> x, y+height, x, y\n 315°-> x+width, y+height, x, y\n \n there is a pattern :) something with sin & cos\n for now now default to 90\n */\n gradient = ctx.createLinearGradient(x, y, x, y+height);\n break;\n case \"reflected\":\n tempStops = this.reflectStops(tempStops);\n gradient = ctx.createLinearGradient(x, y, x, y+height);\n break;\n case \"contain\":\n var closestSide = width < height ? width/2 : height/2;\n gradient = ctx.createRadialGradient(x+width/2, y+height/2, 0, x+width/2, y+height/2, closestSide); // centered\n break;\n case \"cover\":\n // farest corner = half diagonal side >> pitagoras\n var farestCorner = Math.sqrt( width * width + height * height )/2;\n gradient = ctx.createRadialGradient(x+width/2, y+height/2, 0, x+width/2, y+height/2, farestCorner); // centered\n break;\n }\n // bring the stops in the right order for canvas gradient:\n for(var i=0, length=tempStops.length; i [255,255,255] or [[255,255,255], 33]\n if(stop.length === 3){ // => [255,255,255]\n pos = i === 0 ? 0 : 100; // can either be the start or the end\n color = this.toColor(stop);\n }\n else { // => [[255,255,255], 33]\n color = this.toColor(stop[0]);\n pos = stop[1];\n }\n break;\n case 'number': // => 11\n var middlepoint = this.getMiddlepoint(tempStops[i-1], stop, tempStops[i+1]);\n color = this.toColor(middlepoint[0]);\n pos = middlepoint[1];\n break;\n }\n // pos is now between 0-100 - for canvas we need it between 0-1\n pos = pos/100;\n pos = pos+''; // <-- to change from number to string seems to fix a bug in firefox on ubuntu\n gradient.addColorStop(pos, color);\n }\n return gradient;\n },\n /**\n * @method opposite \n * @param direction {String}\n * @return {String} opposite direction\n * @example opposite('top') returns 'bottom'\n */\n opposite: function(direction) {\n switch(direction){\n case 'top':\n return 'bottom';\n case 'right':\n return 'left';\n case 'bottom':\n return 'top';\n case 'left':\n return 'right';\n }\n },\n reflectStops: function(stops){\n var first = [],\n second = [];\n // bug: turns everything around\n for(var i=0, l=stops.length; i div');\n this.model = el;\n this.$el.bind(\"mousedown\", $.proxy( this, \"start\" ) );\n this.$input = this.$el.next('div').children('input:first-child');\n this.$input.change( $.proxy( this, \"get\" ) );\n },\n start: function(event){\n var myOffset = this.$el.offset();\n this.offset = { x: myOffset.left+(this.width/2), y: myOffset.top+(this.height/2) };\n this.turn(event);\n $(document).bind('mousemove.global', $.proxy( this, \"turn\") );\n },\n get: function(){\n var value = parseInt(this.$input.val());\n this.update(value);\n },\n set: function(value){\n this.$input.val(value);\n },\n update: function(value){\n this.move(value);\n if(currentStyle[this.model].hasGlobalLight) currentStyle.globalAngle = value;\n currentStyle[this.model].angle = value;\n this.set(value);\n style[this.model].paint();\n },\n move: function(degrees){\n this.$pointer.css('transform', 'rotate('+-degrees+'deg)');\n },\n turn: function(event){\n event.preventDefault();\n var opposite = this.offset.y - event.pageY,\n adjacent = event.pageX - this.offset.x,\n radiants = Math.atan(opposite/adjacent),\n degrees = Math.round(radiants*(180/Math.PI), 10);\n \n if(event.shiftKey) degrees = tools.roundToMultiple(degrees, 15);\n \n if(adjacent < 0 && opposite >= 0){ degrees+= 180; }\n else if(opposite < 0 && adjacent < 0){ degrees-= 180; }\n if(degrees === -180) degrees = 180;\n \n this.update(degrees);\n }\n};\n\nvar toggle = {\n _treshhold: 2,\n _moving: false,\n init: function(el, toggle, thisArg, callback){\n this.$el = $(\"#\"+el);\n this.$slider = this.$el.find('.slidePanel');\n this.width = this.$el.width();\n this.toggle = toggle;\n this.model = thisArg;\n // render befor the callback gets asigned to not call the callback at init\n this.render();\n this.callback = callback;\n this.$el.bind('mousedown', $.proxy( this, \"start\" ) );\n },\n start: function(event){\n event.preventDefault();\n this._startPos = event.pageX - this.$el.offset().left;\n this.$el.addClass('down');\n $(document).bind('mousemove.global', $.proxy( this, \"move\") );\n $(document).one('mouseup', $.proxy( this, \"stop\") );\n },\n move: function(event){\n var distance = event.pageX - this._startPos;\n if(!this._moving && Math.abs(distance) > this._treshhold){\n this.$el.addClass('moving');\n this._moving = true;\n }\n if(this._moving){\n this._pos = Math.min(0, Math.max(-this.width/2, this._offset + distance));\n this.$slider.css('left', this._pos);\n }\n },\n render: function(){\n this._offset = this.model[this.toggle] ? -this.width/2 : 0;\n this.$slider.css('left', this._offset);\n if(this.callback) this.callback();\n },\n stop: function(event){\n this.$el.removeClass('down');\n if(this._moving){\n this._moving = false;\n this.$el.removeClass('moving');\n if(this._pos >= -this.width/4){\n this.model[this.toggle] = false;\n } else {\n this.model[this.toggle] = true;\n }\n } else {\n this.model[this.toggle] = !this.model[this.toggle];\n } \n this.render();\n }\n};\n\nvar slider = {\n init: function(el, model){\n this.$el = $(\"#\"+el+\" .\"+model).prev(\"div.slider\");\n this.$pointer = this.$el.find('> div:nth-child(2)');\n this.$input = this.$el.next('input');\n this.max = this.$input.data(\"max\");\n this.length = this.$el.width();\n this.ease = this.$el.data(\"easing\");\n this.style = el;\n this.model = model;\n this.$el.bind(\"mousedown\", $.proxy( this, \"start\" ) );\n this.$input.change( $.proxy( this, \"get\" ) );\n },\n acc: function(x){\n return this.ease ? x*x : x;\n },\n invAcc: function(x){\n return this.ease ? Math.sqrt(x) : x;\n },\n get: function(){\n var value = parseInt(this.$input.val());\n this.update(value);\n },\n set: function(value){\n this.$input.val(value);\n },\n update: function(value, position){\n this.move(this.toPos(value));\n currentStyle[this.style][this.model] = value;\n this.move(position || this.toPos(value));\n this.set(value);\n style[this.style].paint();\n },\n move: function(x){\n this.$pointer.css({ left: x+'px' });\n },\n toPos: function(value){\n var percentage = this.invAcc(value/this.max);\n return Math.round(this.length*percentage);\n },\n toValue: function(position){\n var percentage = this.acc(position/this.length);\n return Math.round(percentage*this.max);\n },\n start: function(event){\n this.offset = { x: this.$el.offset().left };\n this.slide(event);\n $(document).bind('mousemove.global', $.proxy( this, \"slide\" ) );\n },\n slide: function(event){\n event.preventDefault();\n var value, position = Math.max(0, Math.min(this.length, event.pageX - this.offset.x)); \n \n value = this.toValue(position);\n this.update(value, position);\n }\n};" }, { "path": "js/universe.js", "content": "var parallelUniverse = {\n x: 0,\n y: 0,\n KAPPA: 4*(Math.SQRT2-1)/3,\n roundToHalf: function(value){\n // makes the borders crisp\n return (value - parseInt(value, 10)) === 0.5 ? value+1 : value + 1.5;\n },\n draw: function(){\n this.x = this.roundToHalf(dimensions.width/2 - currentStyle.width/2);\n this.y = this.roundToHalf(dimensions.height/2 - currentStyle.height/2);\n \n pu.clearRect(0,0,dimensions.width,dimensions.height); \n \n this.background();\n this.drawCanvases();\n \n this.shadow();\n pu.beginPath();\n this.rect(pu);\n pu.closePath();\n this.layerBackground();\n this.innerShadow();\n this.border();\n },\n background: function(){\n pu.fillStyle = tools.decodeCanvasGradient(\n background.background[1].stops, background.background[1].angle, background.background[1].style, pu, 0, 0, dimensions.width, dimensions.height\n );\n pu.fillRect(0, 0, dimensions.width, dimensions.height);\n },\n rect: function(ctx){\n var br = currentStyle.borderRadius;\n if(br.isActive){\n for(var i=3; i>=0; i--){\n var radiusX, radiusY, unit, percentage;\n unit = br.radii[i][1];\n if(unit === \"%\"){\n percentage = Math.min(0.5, br.radii[i][0]/100);\n radiusY = percentage*currentStyle.height;\n radiusX = percentage*currentStyle.width;\n } else {\n radiusX = radiusY = Math.min(currentStyle.width/2, br.radii[i][0]);\n }\n switch(i){ // anti-clockwise because of the innerShadow-mask\n case 3: // start at left middle; then bottom left\n ctx.moveTo(this.x, this.y+currentStyle.height/2);\n ctx.lineTo(this.x, this.y+currentStyle.height-radiusY);\n ctx.bezierCurveTo(this.x, this.y+currentStyle.height-radiusY+radiusY*this.KAPPA, this.x+(radiusX-radiusX*this.KAPPA), this.y+currentStyle.height, this.x+radiusX, this.y+currentStyle.height);\n break;\n case 2: // upper right\n ctx.lineTo(this.x+currentStyle.width-radiusX, this.y+currentStyle.height);\n ctx.bezierCurveTo(this.x+currentStyle.width-radiusX+radiusX*this.KAPPA, this.y+currentStyle.height, this.x+currentStyle.width, this.y+currentStyle.height-radiusY+radiusY*this.KAPPA, this.x+currentStyle.width, this.y+currentStyle.height-radiusY);\n break;\n case 1: // bottom right\n ctx.lineTo(this.x+currentStyle.width, this.y+radiusY);\n ctx.bezierCurveTo(this.x+currentStyle.width, this.y+(radiusY-radiusY*this.KAPPA), this.x+currentStyle.width-radiusX+radiusX*this.KAPPA, this.y, this.x+currentStyle.width-radiusX, this.y);\n break;\n case 0: // upper left and then back to left middle;\n ctx.lineTo(this.x+radiusX, this.y);\n ctx.bezierCurveTo(this.x+(radiusX-radiusX*this.KAPPA), this.y, this.x, this.y+(radiusY-radiusY*this.KAPPA), this.x, this.y+radiusY);\n ctx.lineTo(this.x, this.y+currentStyle.height/2);\n break;\n }\n }\n } else {\n // outwritten rect anti-clockwise instead of the ctx.rect(x,y,width,height) because of the innerShadow mask\n ctx.moveTo(this.x, this.y);\n ctx.lineTo(this.x, this.y+currentStyle.height);\n ctx.lineTo(this.x+currentStyle.width, this.y+currentStyle.height);\n ctx.lineTo(this.x+currentStyle.width, this.y);\n ctx.lineTo(this.x, this.y);\n }\n \n },\n drawCanvases: function(){\n var $canvases = $workspace.find('canvas.moveable');\n $.each($canvases, function(i, canvas){\n var $canvas = $(canvas),\n offset = $canvas.offset();\n pu.drawImage(canvas, offset.left, offset.top);\n });\n },\n shadow: function(){\n var sd = currentStyle.dropShadow, dropColor;\n if(sd.isActive){\n pu.save();\n pu.beginPath();\n \n this.rect(pu);\n \n dropColor = sd.color.slice(0);\n dropColor.push(sd.opacity/100);\n dropColor = tools.toColor(dropColor);\n pu.fillStyle = dropColor;\n pu.shadowOffsetX = sd.dropX;\n pu.shadowOffsetY = sd.dropY;\n pu.shadowBlur = sd.blur;\n pu.shadowColor = dropColor;\n pu.fill();\n pu.closePath();\n pu.restore();\n }\n },\n innerShadow: function(){\n var is = currentStyle.innerShadow, dropColor;\n if(is.isActive){\n iu.save();\n iu.beginPath();\n \n // draw the layer box as negativ area and use normal dropShadow in another universe\n // idea by Alistair MacDonald https://gist.github.com/787544\n \n iu.rect(0,0,dimensions.width,dimensions.height);\n iu.moveTo(this.x, this.y);\n this.rect(iu);\n \n dropColor = is.color.slice(0);\n dropColor.push(is.opacity/100);\n dropColor = tools.toColor(dropColor);\n iu.shadowOffsetX = is.dropX;\n iu.shadowOffsetY = is.dropY;\n iu.shadowBlur = is.blur;\n iu.shadowColor = dropColor;\n iu.fill();\n iu.closePath();\n iu.restore();\n \n // clip the paralell universe temporarily to the layers size (border-radius!) \n // and draw the inner shadow from the other universe to the main parallel Universe\n pu.save();\n pu.beginPath();\n this.rect(pu);\n pu.closePath();\n pu.clip();\n pu.drawImage($innerShadowUniverse.get(0), this.x, this.y, currentStyle.width, currentStyle.height, this.x, this.y, currentStyle.width, currentStyle.height);\n pu.restore();\n iu.clearRect(0,0,dimensions.width,dimensions.height);\n }\n },\n layerBackground: function(){\n var bg = currentStyle.background, \n tempAngle, tempStops;\n \n if(bg.isActive) {\n tempAngle = bg.angle;\n \n tempStops = $.extend(true, [], bg.translucidStops); // no deep copy!\n if(bg.hasGlobalLight) bg.angle = currentStyle.globalAngle;\n if(bg.isReverse) tempStops = tools.reverseStops(tempStops);\n pu.fillStyle = tools.decodeCanvasGradient(\n tempStops, tempAngle, bg.style,\n pu, this.x, this.y, currentStyle.width, currentStyle.height\n );\n pu.fill();\n }\n },\n border: function(){\n var bd = currentStyle.border, borderColor;\n if(bd.isActive){\n borderColor = bd.color.slice(0);\n borderColor.push(bd.opacity/100);\n pu.strokeStyle = tools.toColor(borderColor);\n pu.lineWidth = bd.size;\n pu.stroke();\n }\n }\n};" }, { "path": "js/zeroclipboard/ZeroClipboard.as", "content": "package {\n\t// Simple Set Clipboard System\n\t// Author: Joseph Huckaby\n\t\n\timport flash.display.Stage;\n\timport flash.display.Sprite;\n\timport flash.display.LoaderInfo;\n\timport flash.display.StageScaleMode;\n\timport flash.events.*;\n\timport flash.display.StageAlign;\n\timport flash.display.StageScaleMode;\n\timport flash.external.ExternalInterface;\n\timport flash.system.Security;\n\timport flash.utils.*;\n\timport flash.system.System;\n \n\tpublic class ZeroClipboard extends Sprite {\n\t\t\n\t\tprivate var id:String = '';\n\t\tprivate var button:Sprite;\n\t\tprivate var clipText:String = '';\n\t\t\n\t\tpublic function ZeroClipboard() {\n\t\t\t// constructor, setup event listeners and external interfaces\n\t\t\tstage.scaleMode = StageScaleMode.EXACT_FIT;\n\t\t\tflash.system.Security.allowDomain(\"*\");\n\t\t\t\n\t\t\t// import flashvars\n\t\t\tvar flashvars:Object = LoaderInfo( this.root.loaderInfo ).parameters;\n\t\t\tid = flashvars.id;\n\t\t\t\n\t\t\t// invisible button covers entire stage\n\t\t\tbutton = new Sprite();\n\t\t\tbutton.buttonMode = true;\n\t\t\tbutton.useHandCursor = true;\n\t\t\tbutton.graphics.beginFill(0xCCFF00);\n\t\t\tbutton.graphics.drawRect(0, 0, Math.floor(flashvars.width), Math.floor(flashvars.height));\n\t\t\tbutton.alpha = 0.0;\n\t\t\taddChild(button);\n\t\t\tbutton.addEventListener(MouseEvent.CLICK, clickHandler);\n\t\t\t\n\t\t\tbutton.addEventListener(MouseEvent.MOUSE_OVER, function(event:Event) {\n\t\t\t\tExternalInterface.call( 'ZeroClipboard.dispatch', id, 'mouseOver', null );\n\t\t\t} );\n\t\t\tbutton.addEventListener(MouseEvent.MOUSE_OUT, function(event:Event) {\n\t\t\t\tExternalInterface.call( 'ZeroClipboard.dispatch', id, 'mouseOut', null );\n\t\t\t} );\n\t\t\tbutton.addEventListener(MouseEvent.MOUSE_DOWN, function(event:Event) {\n\t\t\t\tExternalInterface.call( 'ZeroClipboard.dispatch', id, 'mouseDown', null );\n\t\t\t} );\n\t\t\tbutton.addEventListener(MouseEvent.MOUSE_UP, function(event:Event) {\n\t\t\t\tExternalInterface.call( 'ZeroClipboard.dispatch', id, 'mouseUp', null );\n\t\t\t} );\n\t\t\t\n\t\t\t// external functions\n\t\t\tExternalInterface.addCallback(\"setHandCursor\", setHandCursor);\n\t\t\tExternalInterface.addCallback(\"setText\", setText);\n\t\t\t\n\t\t\t// signal to the browser that we are ready\n\t\t\tExternalInterface.call( 'ZeroClipboard.dispatch', id, 'load', null );\n\t\t}\n\t\t\n\t\tpublic function setText(newText) {\n\t\t\t// set the maximum number of files allowed\n\t\t\tclipText = newText;\n\t\t}\n\t\t\n\t\tpublic function setHandCursor(enabled:Boolean) {\n\t\t\t// control whether the hand cursor is shown on rollover (true)\n\t\t\t// or the default arrow cursor (false)\n\t\t\tbutton.useHandCursor = enabled;\n\t\t}\n\t\t\n\t\tprivate function clickHandler(event:Event):void {\n\t\t\t// user click copies text to clipboard\n\t\t\t// as of flash player 10, this MUST happen from an in-movie flash click event\n\t\t\tSystem.setClipboard( clipText );\n\t\t\tExternalInterface.call( 'ZeroClipboard.dispatch', id, 'complete', clipText );\n\t\t}\n\t}\n}\n" }, { "path": "js/zeroclipboard/ZeroClipboard.js", "content": "// Simple Set Clipboard System\n// Author: Joseph Huckaby\n\nvar ZeroClipboard = {\n\t\n\tversion: \"1.0.7\",\n\tclients: {}, // registered upload clients on page, indexed by id\n\tmoviePath: 'ZeroClipboard.swf', // URL to movie\n\tnextId: 1, // ID of next movie\n\t\n\t$: function(thingy) {\n\t\t// simple DOM lookup utility function\n\t\tif (typeof(thingy) == 'string') thingy = document.getElementById(thingy);\n\t\tif (!thingy.addClass) {\n\t\t\t// extend element with a few useful methods\n\t\t\tthingy.hide = function() { this.style.display = 'none'; };\n\t\t\tthingy.show = function() { this.style.display = ''; };\n\t\t\tthingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; };\n\t\t\tthingy.removeClass = function(name) {\n\t\t\t\tvar classes = this.className.split(/\\s+/);\n\t\t\t\tvar idx = -1;\n\t\t\t\tfor (var k = 0; k < classes.length; k++) {\n\t\t\t\t\tif (classes[k] == name) { idx = k; k = classes.length; }\n\t\t\t\t}\n\t\t\t\tif (idx > -1) {\n\t\t\t\t\tclasses.splice( idx, 1 );\n\t\t\t\t\tthis.className = classes.join(' ');\n\t\t\t\t}\n\t\t\t\treturn this;\n\t\t\t};\n\t\t\tthingy.hasClass = function(name) {\n\t\t\t\treturn !!this.className.match( new RegExp(\"\\\\s*\" + name + \"\\\\s*\") );\n\t\t\t};\n\t\t}\n\t\treturn thingy;\n\t},\n\t\n\tsetMoviePath: function(path) {\n\t\t// set path to ZeroClipboard.swf\n\t\tthis.moviePath = path;\n\t},\n\t\n\tdispatch: function(id, eventName, args) {\n\t\t// receive event from flash movie, send to client\t\t\n\t\tvar client = this.clients[id];\n\t\tif (client) {\n\t\t\tclient.receiveEvent(eventName, args);\n\t\t}\n\t},\n\t\n\tregister: function(id, client) {\n\t\t// register new client to receive events\n\t\tthis.clients[id] = client;\n\t},\n\t\n\tgetDOMObjectPosition: function(obj, stopObj) {\n\t\t// get absolute coordinates for dom element\n\t\tvar info = {\n\t\t\tleft: 0, \n\t\t\ttop: 0, \n\t\t\twidth: obj.width ? obj.width : obj.offsetWidth, \n\t\t\theight: obj.height ? obj.height : obj.offsetHeight\n\t\t};\n\n\t\twhile (obj && (obj != stopObj)) {\n\t\t\tinfo.left += obj.offsetLeft;\n\t\t\tinfo.top += obj.offsetTop;\n\t\t\tobj = obj.offsetParent;\n\t\t}\n\n\t\treturn info;\n\t},\n\t\n\tClient: function(elem) {\n\t\t// constructor for new simple upload client\n\t\tthis.handlers = {};\n\t\t\n\t\t// unique ID\n\t\tthis.id = ZeroClipboard.nextId++;\n\t\tthis.movieId = 'ZeroClipboardMovie_' + this.id;\n\t\t\n\t\t// register client with singleton to receive flash events\n\t\tZeroClipboard.register(this.id, this);\n\t\t\n\t\t// create movie\n\t\tif (elem) this.glue(elem);\n\t}\n};\n\nZeroClipboard.Client.prototype = {\n\t\n\tid: 0, // unique ID for us\n\tready: false, // whether movie is ready to receive events or not\n\tmovie: null, // reference to movie object\n\tclipText: '', // text to copy to clipboard\n\thandCursorEnabled: true, // whether to show hand cursor, or default pointer cursor\n\tcssEffects: true, // enable CSS mouse effects on dom container\n\thandlers: null, // user event handlers\n\t\n\tglue: function(elem, appendElem, stylesToAdd) {\n\t\t// glue to DOM element\n\t\t// elem can be ID or actual DOM element object\n\t\tthis.domElement = ZeroClipboard.$(elem);\n\t\t\n\t\t// float just above object, or zIndex 99 if dom element isn't set\n\t\tvar zIndex = 99;\n\t\tif (this.domElement.style.zIndex) {\n\t\t\tzIndex = parseInt(this.domElement.style.zIndex, 10) + 1;\n\t\t}\n\t\t\n\t\tif (typeof(appendElem) == 'string') {\n\t\t\tappendElem = ZeroClipboard.$(appendElem);\n\t\t}\n\t\telse if (typeof(appendElem) == 'undefined') {\n\t\t\tappendElem = document.getElementsByTagName('body')[0];\n\t\t}\n\t\t\n\t\t// find X/Y position of domElement\n\t\tvar box = ZeroClipboard.getDOMObjectPosition(this.domElement, appendElem);\n\t\t\n\t\t// create floating DIV above element\n\t\tthis.div = document.createElement('div');\n\t\tvar style = this.div.style;\n\t\tstyle.position = 'absolute';\n\t\tstyle.left = '' + box.left + 'px';\n\t\tstyle.top = '' + box.top + 'px';\n\t\tstyle.width = '' + box.width + 'px';\n\t\tstyle.height = '' + box.height + 'px';\n\t\tstyle.zIndex = zIndex;\n\t\t\n\t\tif (typeof(stylesToAdd) == 'object') {\n\t\t\tfor (addedStyle in stylesToAdd) {\n\t\t\t\tstyle[addedStyle] = stylesToAdd[addedStyle];\n\t\t\t}\n\t\t}\n\t\t\n\t\t// style.backgroundColor = '#f00'; // debug\n\t\t\n\t\tappendElem.appendChild(this.div);\n\t\t\n\t\tthis.div.innerHTML = this.getHTML( box.width, box.height );\n\t},\n\t\n\tgetHTML: function(width, height) {\n\t\t// return HTML for movie\n\t\tvar html = '';\n\t\tvar flashvars = 'id=' + this.id + \n\t\t\t'&width=' + width + \n\t\t\t'&height=' + height;\n\t\t\t\n\t\tif (navigator.userAgent.match(/MSIE/)) {\n\t\t\t// IE gets an OBJECT tag\n\t\t\tvar protocol = location.href.match(/^https/i) ? 'https://' : 'http://';\n\t\t\thtml += '

';\n\t\t}\n\t\telse {\n\t\t\t// all other browsers get an EMBED tag\n\t\t\thtml += '

';\n\t\t}\n\t\treturn html;\n\t},\n\t\n\thide: function() {\n\t\t// temporarily hide floater offscreen\n\t\tif (this.div) {\n\t\t\tthis.div.style.left = '-2000px';\n\t\t}\n\t},\n\t\n\tshow: function() {\n\t\t// show ourselves after a call to hide()\n\t\tthis.reposition();\n\t},\n\t\n\tdestroy: function() {\n\t\t// destroy control and floater\n\t\tif (this.domElement && this.div) {\n\t\t\tthis.hide();\n\t\t\tthis.div.innerHTML = '';\n\t\t\t\n\t\t\tvar body = document.getElementsByTagName('body')[0];\n\t\t\ttry { body.removeChild( this.div ); } catch(e) {;}\n\t\t\t\n\t\t\tthis.domElement = null;\n\t\t\tthis.div = null;\n\t\t}\n\t},\n\t\n\treposition: function(elem) {\n\t\t// reposition our floating div, optionally to new container\n\t\t// warning: container CANNOT change size, only position\n\t\tif (elem) {\n\t\t\tthis.domElement = ZeroClipboard.$(elem);\n\t\t\tif (!this.domElement) this.hide();\n\t\t}\n\t\t\n\t\tif (this.domElement && this.div) {\n\t\t\tvar box = ZeroClipboard.getDOMObjectPosition(this.domElement);\n\t\t\tvar style = this.div.style;\n\t\t\tstyle.left = '' + box.left + 'px';\n\t\t\tstyle.top = '' + box.top + 'px';\n\t\t}\n\t},\n\t\n\tsetText: function(newText) {\n\t\t// set text to be copied to clipboard\n\t\tthis.clipText = newText;\n\t\tif (this.ready) this.movie.setText(newText);\n\t},\n\t\n\taddEventListener: function(eventName, func) {\n\t\t// add user event listener for event\n\t\t// event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, cancel\n\t\teventName = eventName.toString().toLowerCase().replace(/^on/, '');\n\t\tif (!this.handlers[eventName]) this.handlers[eventName] = [];\n\t\tthis.handlers[eventName].push(func);\n\t},\n\t\n\tsetHandCursor: function(enabled) {\n\t\t// enable hand cursor (true), or default arrow cursor (false)\n\t\tthis.handCursorEnabled = enabled;\n\t\tif (this.ready) this.movie.setHandCursor(enabled);\n\t},\n\t\n\tsetCSSEffects: function(enabled) {\n\t\t// enable or disable CSS effects on DOM container\n\t\tthis.cssEffects = !!enabled;\n\t},\n\t\n\treceiveEvent: function(eventName, args) {\n\t\t// receive event from flash\n\t\teventName = eventName.toString().toLowerCase().replace(/^on/, '');\n\t\t\t\t\n\t\t// special behavior for certain events\n\t\tswitch (eventName) {\n\t\t\tcase 'load':\n\t\t\t\t// movie claims it is ready, but in IE this isn't always the case...\n\t\t\t\t// bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function\n\t\t\t\tthis.movie = document.getElementById(this.movieId);\n\t\t\t\tif (!this.movie) {\n\t\t\t\t\tvar self = this;\n\t\t\t\t\tsetTimeout( function() { self.receiveEvent('load', null); }, 1 );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\t// firefox on pc needs a \"kick\" in order to set these in certain cases\n\t\t\t\tif (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) {\n\t\t\t\t\tvar self = this;\n\t\t\t\t\tsetTimeout( function() { self.receiveEvent('load', null); }, 100 );\n\t\t\t\t\tthis.ready = true;\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t\n\t\t\t\tthis.ready = true;\n\t\t\t\tthis.movie.setText( this.clipText );\n\t\t\t\tthis.movie.setHandCursor( this.handCursorEnabled );\n\t\t\t\tbreak;\n\t\t\t\n\t\t\tcase 'mouseover':\n\t\t\t\tif (this.domElement && this.cssEffects) {\n\t\t\t\t\tthis.domElement.addClass('hover');\n\t\t\t\t\tif (this.recoverActive) this.domElement.addClass('active');\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t\n\t\t\tcase 'mouseout':\n\t\t\t\tif (this.domElement && this.cssEffects) {\n\t\t\t\t\tthis.recoverActive = false;\n\t\t\t\t\tif (this.domElement.hasClass('active')) {\n\t\t\t\t\t\tthis.domElement.removeClass('active');\n\t\t\t\t\t\tthis.recoverActive = true;\n\t\t\t\t\t}\n\t\t\t\t\tthis.domElement.removeClass('hover');\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t\n\t\t\tcase 'mousedown':\n\t\t\t\tif (this.domElement && this.cssEffects) {\n\t\t\t\t\tthis.domElement.addClass('active');\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t\n\t\t\tcase 'mouseup':\n\t\t\t\tif (this.domElement && this.cssEffects) {\n\t\t\t\t\tthis.domElement.removeClass('active');\n\t\t\t\t\tthis.recoverActive = false;\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t} // switch eventName\n\t\t\n\t\tif (this.handlers[eventName]) {\n\t\t\tfor (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) {\n\t\t\t\tvar func = this.handlers[eventName][idx];\n\t\t\t\n\t\t\t\tif (typeof(func) == 'function') {\n\t\t\t\t\t// actual function reference\n\t\t\t\t\tfunc(this, args);\n\t\t\t\t}\n\t\t\t\telse if ((typeof(func) == 'object') && (func.length == 2)) {\n\t\t\t\t\t// PHP style object + method, i.e. [myObject, 'myMethod']\n\t\t\t\t\tfunc[0][ func[1] ](this, args);\n\t\t\t\t}\n\t\t\t\telse if (typeof(func) == 'string') {\n\t\t\t\t\t// name of function\n\t\t\t\t\twindow[func](this, args);\n\t\t\t\t}\n\t\t\t} // foreach event handler defined\n\t\t} // user defined handler for event\n\t}\n\t\n};\n" } ]

Layer Style

Styles

Drop Shadow

Inner Shadow

Background

Border

Border Radius

Gradient Editor

Presets

Gradient

Stops

Colorpicker

LayerStyles

just like your favorite graphics editor

but in your browser. And it creates CSS.

Unfortunately your browser doesn't support the following requirements: