mozilla

Compare Revisions

Linear-gradient Generator

Change Revisions

Revision 480729:

Revision 480729 by gabriel_ivanica on

Revision 525175:

Revision 525175 by gabriel_ivanica on

Title:
Linear-gradient Generator
Linear-gradient Generator
Slug:
Web/CSS/Tools/Linear-gradient_Generator
Web/CSS/Tools/Linear-gradient_Generator
Tags:
"Tools", "CSS"
"Tools", "CSS"
Content:

Revision 480729
Revision 525175
n1072 n
n1334                if (H >= 0 && H < 1) {  this.setRGBn1333                if (H >= 0 && H < 1) {    this.setR
>A(C, X, m);  return; }>GBA(C, X, m);  return; }
1335                if (H >= 1 && H < 2) {  this.setRGB1334                if (H >= 1 && H < 2) {    this.setR
>A(X, C, m);  return; }>GBA(X, C, m);  return; }
1336                if (H >= 2 && H < 3) {  this.setRGB1335                if (H >= 2 && H < 3) {    this.setR
>A(m, C, X);  return; }>GBA(m, C, X);  return; }
1337                if (H >= 3 && H < 4) {  this.setRGB1336                if (H >= 3 && H < 4) {    this.setR
>A(m, X, C);  return; }>GBA(m, X, C);  return; }
1338                if (H >= 4 && H < 5) {  this.setRGB1337                if (H >= 4 && H < 5) {    this.setR
>A(X, m, C);  return; }>GBA(X, m, C);  return; }
1339                if (H >= 5 && H < 6) {  this.setRGB1338                if (H >= 5 && H < 6) {    this.setR
>A(C, m, X);  return; }>GBA(C, m, X);  return; }
n1355                if (H >= 0 && H < 1) {  this.setRGBn1354                if (H >= 0 && H < 1) {    this.setR
>A(C, X, m);  return; }>GBA(C, X, m);  return; }
1356                if (H >= 1 && H < 2) {  this.setRGB1355                if (H >= 1 && H < 2) {    this.setR
>A(X, C, m);  return; }>GBA(X, C, m);  return; }
1357                if (H >= 2 && H < 3) {  this.setRGB1356                if (H >= 2 && H < 3) {    this.setR
>A(m, C, X);  return; }>GBA(m, C, X);  return; }
1358                if (H >= 3 && H < 4) {  this.setRGB1357                if (H >= 3 && H < 4) {    this.setR
>A(m, X, C);  return; }>GBA(m, X, C);  return; }
1359                if (H >= 4 && H < 5) {  this.setRGB1358                if (H >= 4 && H < 5) {    this.setR
>A(X, m, C);  return; }>GBA(X, m, C);  return; }
1360                if (H >= 5 && H < 6) {  this.setRGB1359                if (H >= 5 && H < 6) {    this.setR
>A(C, m, X);  return; }>GBA(C, m, X);  return; }
n2277                if (value < slider.min) value = slider.min;n2276                if (value < slider.min)      value = slider.mi
 >n;
t2616var LinearGradientTool = (function LinearGradientTool() {t2615var LinearGradientTool=function(){"use strict";function i(e){retu
 >rn document.getElementById(e)}function s(e){e.preventDefault()}fu
 >nction o(e,t,n){var r=document.createElement(e);r.className=t;if(
 >n)n.appendChild(r);return r}function u(e,t,n,r){n=n||function(e){
 >};r=r||function(e){};e.addEventListener("mousedown",function(e){e
 >.preventDefault();n(e);document.addEventListener("mousemove",t);d
 >ocument.addEventListener("mouseup",function i(e){document.removeE
 >ventListener("mousemove",t);document.removeEventListener("mouseup
 >",i);r(e)})});e.addEventListener("click",function(e){e.stopPropag
 >ation()})}function h(e,t){var n=o("div","gradient-axis",null);var
 > r=o("div","gradient-line",n);var i=o("div","rotate-point",n);n.s
 >etAttribute("axisID",t);var s=this.createSVGArrow(t);i.appendChil
 >d(s);this.id=t;this.axis=n;this.unit="%";this.line=r;this.contain
 >er=e;this.lsize=e.clientWidth/2;this.FirstPoint=null;this.ActiveP
 >oint=null;this.gradient="";this.num_points=0;this.size=0;this.ang
 >le=0;this.state=false;this.updateOnResize();u(i,this.updateAxisAn
 >gle.bind(this),this.startRotation.bind(this));e.appendChild(n);r.
 >addEventListener("click",this.placeGradientPoint.bind(this))}var 
 >t=180/Math.PI;var n=Math.PI/180;var r={"%":1,px:0};var a=UIColorP
 >icker.Color;var f=UIColorPicker.HSVColor;var l=function(){functio
 >n t(e,t,n,r){var i=0;var s=0;var o=0;var n=typeof n==="function"?
 >n:null;r=r||function(e){};var u=function(r){r.stopPropagation();r
 >.preventDefault();if(r.button!==0)return;i=r.clientX-e.clientWidt
 >h;s=r.clientY-e.clientHeight;document.body.setAttribute("data-res
 >ize",t);document.addEventListener("mousemove",a);document.addEven
 >tListener("mouseup",f)};var a=function(r){if(o>=0)e.style.widt
 >h=r.clientX-i+"px";if(o<=0)e.style.height=r.clientY-s+"px";if(
 >n)n()};var f=function c(e){if(e.button!==0)return;document.body.r
 >emoveAttribute("data-resize",t);document.removeEventListener("mou
 >semove",a);document.removeEventListener("mouseup",c);r()};var l=d
 >ocument.createElement("div");l.className="resize-handle";if(t==="
 >width")o=1;else if(t==="height")o=-1;else t="both";l.className="r
 >esize-handle";l.setAttribute("data-resize",t);l.addEventListener(
 >"mousedown",u);e.appendChild(l)}return{makeResizable:t}}();var c=
 >function(t){var n=document.createElement("div");n.className="grad
 >ient-point";this.position=0;this.node=n;this.Axis=t;this.color=ne
 >w f(0,0,100);this.CSScolor=this.color.getColor();this.CSSposition
 >=0;this.PrevPoint=null;this.NextPoint=null;this.Axis.num_points++
 >;n.addEventListener("click",this.activate.bind(this));u(n,this.up
 >datePositionM.bind(this),this.startMove.bind(this),this.endMove.b
 >ind(this));t.line.appendChild(n);return this};c.prototype.deleteP
 >oint=function(){this.Axis.line.removeChild(this.node)};c.prototyp
 >e.activate=function(){if(this.Axis.state===false)return;this.Axis
 >.setActivePoint(this);this.node.setAttribute("data-active","true"
 >);UIColorPicker.setColor("picker",this.color);InputSliderManager.
 >setValue("point-position",this.CSSposition);if(this.Axis.num_poin
 >ts>2)p.setDeleteButtonState("active")};c.prototype.deactivate=
 >function(){this.node.removeAttribute("data-active")};c.prototype.
 >startMove=function(t){this.Axis.updateCenterPointPos();this.node.
 >setAttribute("data-active","true");document.body.setAttribute("da
 >ta-dragging","true")};c.prototype.endMove=function(t){this.node.r
 >emoveAttribute("data-active","true");document.body.removeAttribut
 >e("data-dragging")};c.prototype.updatePositionM=function(t){var n
 >=this.Axis;var r=t.clientX-n.centerX;var i=t.clientY-n.centerY;th
 >is.position=(n.Px*r+n.Py*i)/n.Pmod+n.lsize;this.updateCSSPosition
 >();this.Axis.reorderPoint(this);this.Axis.updateGradient();this.u
 >pdateSlider()};c.prototype.setPositionM=function(t,n){var r=this.
 >Axis;var i=t-r.centerX;var s=n-r.centerY;this.position=(r.Px*i+r.
 >Py*s)/r.Pmod+r.lsize;this.updateCSSPosition();this.Axis.reorderPo
 >int(this);this.Axis.updateGradient();this.updateSlider()};c.proto
 >type.updateAbsolutePosition=function(){if(this.Axis.unit="%")this
 >.position=parseFloat((this.CSSposition/100*2*this.Axis.lsize).toF
 >ixed(1));};c.prototype.setPosition=function(t){this.position=t;if
 >(this.Axis.unit==="%")this.position=parseFloat((this.position/100
 >*2*this.Axis.lsize).toFixed(1));this.updateCSSPosition();this.Axi
 >s.reorderPoint(this);this.Axis.updateGradient()};c.prototype.upda
 >teSlider=function(){if(this.Axis.ActivePoint===this&&this
 >.Axis.state===true)InputSliderManager.setValue("point-position",t
 >his.CSSposition,false)};c.prototype.updateColor=function(t){this.
 >color.copy(t);this.CSScolor=t.getColor();this.updateCSSvalue()};c
 >.prototype.updateCSSPosition=function(){this.CSSposition=this.pos
 >ition|0;if(this.Axis.unit==="%")this.CSSposition=parseFloat((100*
 >this.position/(2*this.Axis.lsize)).toFixed(1));this.node.style.le
 >ft=this.CSSposition+this.Axis.unit;this.updateCSSvalue()};c.proto
 >type.updateCSSvalue=function(){this.CSSvalue=this.CSScolor+" "+th
 >is.CSSposition+this.Axis.unit};c.prototype.insertBefore=function(
 >t){this.NextPoint=t;this.PrevPoint=t.PrevPoint;t.PrevPoint=this;i
 >f(this.PrevPoint)this.PrevPoint.NextPoint=this};c.prototype.inser
 >tAfter=function(t){this.NextPoint=t.NextPoint;this.PrevPoint=t;t.
 >NextPoint=this;if(this.NextPoint)this.NextPoint.PrevPoint=this};h
 >.prototype.createSVGArrow=function(t){var n="http://www.w3.org/20
 >00/svg";var r=document.createElementNS(n,"svg");var i=document.cr
 >eateElementNS(n,"path");r.setAttribute("class","gradient-arrow");
 >r.setAttribute("width","25");r.setAttribute("height","25");i.setA
 >ttribute("fill","#CCC");i.setAttribute("d","M 25,12.5 L 0,0 L 7.5
 >,12.5 L 0,25");r.appendChild(i);return r};h.prototype.placeGradie
 >ntPoint=function(t){this.updateCenterPointPos();var n=new c(this)
 >;n.setPositionM(t.clientX,t.clientY);n.activate();this.attachPoin
 >t(n);this.updateGradient()};h.prototype.newGradientPoint=function
 >(t){var n=new c(this);n.setPosition(t);n.activate();this.attachPo
 >int(n);this.updateGradient()};h.prototype.attachPoint=function(t)
 >{if(this.FirstPoint===null){this.FirstPoint=t;return}var n=this.F
 >irstPoint;while(n.NextPoint){if(t.CSSpositiont.CSSposition&&a
 >mp;t.PrevPoint&&t.PrevPoint.CSSposition1)p.removeAttribut
 >e("data-state")};var N=function(t){n.setAxisAngle(t)};var C=funct
 >ion(t){n.setUnit(t.value)};var k=function(){c=i("add-axis");c.add
 >EventListener("click",function(){if(t.length===4)return;b(0);if(t
 >.length>1)p.removeAttribute("data-state");if(t.length===4)this
 >.setAttribute("data-state","disabled")})};var L=function(){p=i("d
 >elete-axis");p.addEventListener("click",function(){if(this.hasAtt
 >ribute("data-state"))return;if(t.length===1)return;u.removeChild(
 >n.Shortcut);n.deleteAxis();t.splice(x(n.id),1);n=null;H();var e=t
 >.length;for(var r=0;r<4)c.removeattribute("data-state")})};var
 > .textcontent="s;n.children[r].style.height=n.children[r].childre
 >n[1].scrollHeight+"px"};r(0,"")};var" _="function(t){if(v)v.setAt
 >tribute("data-state",t)};var" a="function(t){n.updatePointColor(t
 >)};var" b="function(){a=i("gradient-container");u=i("gradient-axe
 >s");M();L();k();y(18);y(-18);H();UIColorPicker.subscribe("picker"
 >,A);InputSliderManager.subscribe("point-position",O);DropDownMana
 >ger.subscribe("axis-unit",C);SliderManager.subscribe("axis-rotati
 >on",N);l.makeResizable(a,"both",D,P);window.addEventListener("res
 >ize",D)};return{init:B,updateCSSGradient:H,setDeleteButtonState:_
 >}}();var" d="function(){var" e="[];var" h="function(){var" i="0;i
 ><r;i++){e.push(t[i].getCSSGradient())}a.style.background=e.joi
 >n("," m="setTimeout(function(){d.updateOutputCSSCode(e)},500)};va
 >r" n="t.length;for(var" o="function(t){n.updatePointPosition(t)};
 >var" p="function(){var" pre="" r="0;r<n;r++)t[r].updateOnResiz
 >e()};var" s="function(t){var" v="function(){UIColorPicker.init();
 >InputSliderManager.init();DropDownManager.init();SliderManager.in
 >it();p.init();d.init()};return{init:v}}();" var="">
2617        'use strict';
2618 
2619        var radian = 180 / Math.PI;
2620        var inv_radian = Math.PI / 180;
2621        var units = {'%': 1, 'px' : 0};
2622 
2623        /*========== DOM Methods ==========*/
2624 
2625        function getElemById(id) {
2626                return document.getElementById(id);
2627        }
2628 
2629        function allowDropEvent(e) {
2630                e.preventDefault();
2631        }
2632 
2633        function createClassElement(tag, className, parent) {
2634                var elem = document.createElement(tag);
2635                elem.className = className;
2636                if (parent) parent.appendChild(elem);
2637                return elem;
2638        };
2639 
2640        function trackMouse(elem, callback, startFunc, endFunc) {
2641                startFunc = startFunc || function(e) {};
2642                endFunc = endFunc || function(e) {};
2643 
2644                elem.addEventListener('mousedown', function(e) {
2645                        e.preventDefault();
2646                        startFunc(e);
2647 
2648                        document.addEventListener('mousemove', ca
>llback); 
2649 
2650                        document.addEventListener('mouseup', func
>tion up(e) { 
2651                                document.removeEventListener('mou
>semove', callback); 
2652                                document.removeEventListener('mou
>seup', up); 
2653                                endFunc(e);
2654                        });
2655                });
2656 
2657                elem.addEventListener('click', function(e) {
2658                        e.stopPropagation();
2659                });
2660        }
2661 
2662        var Color = UIColorPicker.Color;
2663        var HSVColor = UIColorPicker.HSVColor;
2664 
2665        var UIComponent = (function UIComponent() {
2666 
2667                function makeResizable(elem, axis, callback, endF
>unc) { 
2668                        var valueX = 0;
2669                        var valueY = 0;
2670                        var action = 0;
2671                        var callback = typeof callback === "funct
>ion" ? callback : null; 
2672 
2673                        endFunc = endFunc || function(e) {};
2674 
2675                        var resizeStart = function resizeStart(e)
> { 
2676                                e.stopPropagation();
2677                                e.preventDefault();
2678                                if (e.button !== 0)
2679                                        return;
2680 
2681                                valueX = e.clientX - elem.clientW
>idth; 
2682                                valueY = e.clientY - elem.clientH
>eight; 
2683 
2684                                document.body.setAttribute('data-
>resize', axis); 
2685                                document.addEventListener('mousem
>ove', mouseMove); 
2686                                document.addEventListener('mouseu
>p', resizeEnd); 
2687                        };
2688 
2689                        var mouseMove = function mouseMove(e) {
2690                                if (action >= 0)
2691                                        elem.style.width = e.clie
>ntX - valueX + 'px'; 
2692                                if (action <= 0)
2693                                        elem.style.height = e.cli
>entY - valueY + 'px'; 
2694                                if (callback)
2695                                        callback();
2696                        };
2697 
2698                        var resizeEnd = function resizeEnd(e) {
2699                                if (e.button !== 0)
2700                                        return;
2701 
2702                                document.body.removeAttribute('da
>ta-resize', axis); 
2703                                document.removeEventListener('mou
>semove', mouseMove); 
2704                                document.removeEventListener('mou
>seup', resizeEnd); 
2705                                endFunc();
2706                        };
2707 
2708                        var handle = document.createElement('div'
>); 
2709                        handle.className = 'resize-handle';
2710 
2711                        if (axis === 'width') action = 1;
2712                        else if (axis === 'height') action = -1;
2713                        else axis = 'both';
2714 
2715                        handle.className = 'resize-handle';
2716                        handle.setAttribute('data-resize', axis);
2717                        handle.addEventListener('mousedown', resi
>zeStart); 
2718                        elem.appendChild(handle);
2719                };
2720 
2721                return {
2722                        makeResizable : makeResizable
2723                };
2724        })();
2725 
2726 
2727        /**
2728         * Gradient Point
2729         */
2730        var GradientPoint = function GradientPoint(Axis) {
2731                var point = document.createElement('div');
2732 
2733                point.className = 'gradient-point';
2734 
2735                this.position = 0;
2736                this.node = point;
2737                this.Axis = Axis;
2738                this.color = new HSVColor(0, 0, 100);
2739                this.CSScolor = this.color.getColor();
2740                this.CSSposition = 0;
2741                this.PrevPoint = null;
2742                this.NextPoint = null;
2743 
2744                this.Axis.num_points++;
2745 
2746                point.addEventListener('click', this.activate.bin
>d(this)); 
2747                trackMouse(point, this.updatePositionM.bind(this)
>, this.startMove.bind(this), 
2748                        this.endMove.bind(this));
2749 
2750                Axis.line.appendChild(point);
2751                return this;
2752        };
2753 
2754        GradientPoint.prototype.deletePoint = function deletePoin
>t() { 
2755                this.Axis.line.removeChild(this.node);
2756        };
2757 
2758        GradientPoint.prototype.activate = function activate() {
2759                if (this.Axis.state === false)
2760                        return;
2761 
2762                this.Axis.setActivePoint(this);
2763                this.node.setAttribute('data-active', 'true');
2764                UIColorPicker.setColor('picker', this.color);
2765                InputSliderManager.setValue('point-position', thi
>s.CSSposition); 
2766                if (this.Axis.num_points > 2)
2767                        AxesManager.setDeleteButtonState('active'
>); 
2768        };
2769 
2770        GradientPoint.prototype.deactivate = function deactivate(
>) { 
2771                this.node.removeAttribute('data-active');
2772        };
2773 
2774        GradientPoint.prototype.startMove = function startMove(e)
> { 
2775                this.Axis.updateCenterPointPos();
2776                this.node.setAttribute('data-active', 'true');
2777                document.body.setAttribute('data-dragging', 'true
>'); 
2778        };
2779 
2780        GradientPoint.prototype.endMove = function endMove(e) {
2781                this.node.removeAttribute('data-active', 'true');
2782                document.body.removeAttribute('data-dragging');
2783        };
2784 
2785        GradientPoint.prototype.updatePositionM = function update
>PositionM(e) { 
2786                var A = this.Axis;
2787                var Qx = e.clientX - A.centerX;
2788                var Qy = e.clientY - A.centerY;
2789                this.position = (A.Px * Qx + A.Py * Qy) / A.Pmod 
>+ A.lsize; 
2790                this.updateCSSPosition();
2791                this.Axis.reorderPoint(this);
2792                this.Axis.updateGradient();
2793                this.updateSlider();
2794        };
2795 
2796        GradientPoint.prototype.setPositionM = function setPositi
>onM(posX, posY) { 
2797                var A = this.Axis;
2798                var Qx = posX - A.centerX;
2799                var Qy = posY - A.centerY;
2800                this.position = (A.Px * Qx + A.Py * Qy) / A.Pmod 
>+ A.lsize; 
2801                this.updateCSSPosition();
2802                this.Axis.reorderPoint(this);
2803                this.Axis.updateGradient();
2804                this.updateSlider();
2805        };
2806 
2807        GradientPoint.prototype.updateAbsolutePosition = function
> updateAbsolutePosition() { 
2808                if (this.Axis.unit ='%')
2809                        this.position = parseFloat(((this.CSSposi
>tion / 100) * (2 * this.Axis.lsize)).toFixed(1));; 
2810        };
2811 
2812        GradientPoint.prototype.setPosition = function setPositio
>n(pos) { 
2813                this.position = pos;
2814                if (this.Axis.unit === '%')
2815                        this.position = parseFloat(((this.positio
>n / 100) * (2 * this.Axis.lsize)).toFixed(1));; 
2816                this.updateCSSPosition();
2817                this.Axis.reorderPoint(this);
2818                this.Axis.updateGradient();
2819        };
2820 
2821        GradientPoint.prototype.updateSlider = function updateSli
>der() { 
2822                if (this.Axis.ActivePoint === this && thi
>s.Axis.state === true) 
2823                        InputSliderManager.setValue('point-positi
>on', this.CSSposition, false); 
2824        };
2825 
2826        GradientPoint.prototype.updateColor = function updateColo
>r(color) { 
2827                this.color.copy(color);
2828                this.CSScolor = color.getColor();
2829                this.updateCSSvalue();
2830        };
2831 
2832        GradientPoint.prototype.updateCSSPosition = function upda
>teCSSPosition() { 
2833                this.CSSposition = this.position | 0;
2834                if (this.Axis.unit === '%')
2835                        this.CSSposition = parseFloat((100 * this
>.position / (2 * this.Axis.lsize)).toFixed(1)); 
2836 
2837                this.node.style.left = this.CSSposition + this.Ax
>is.unit; 
2838                this.updateCSSvalue();
2839        };
2840 
2841        GradientPoint.prototype.updateCSSvalue = function updateC
>SSvalue() { 
2842                this.CSSvalue = this.CSScolor + ' ' + this.CSSpos
>ition + this.Axis.unit; 
2843        };
2844 
2845        GradientPoint.prototype.insertBefore = function insertBef
>ore(point) { 
2846                this.NextPoint = point;
2847                this.PrevPoint = point.PrevPoint;
2848                point.PrevPoint = this;
2849                if (this.PrevPoint)
2850                        this.PrevPoint.NextPoint = this;
2851        };
2852 
2853        GradientPoint.prototype.insertAfter = function insertAfte
>r(point) { 
2854                this.NextPoint = point.NextPoint;
2855                this.PrevPoint = point;
2856                point.NextPoint = this;
2857                if (this.NextPoint)
2858                        this.NextPoint.PrevPoint = this;
2859        };
2860 
2861 
2862        /**
2863         * Gradient Axis
2864         */
2865        function GradientAxis(container, id) {
2866                var axis = createClassElement('div', 'gradient-ax
>is', null); 
2867                var line = createClassElement('div', 'gradient-li
>ne', axis); 
2868                var rotate_point = createClassElement('div', 'rot
>ate-point', axis); 
2869 
2870                axis.setAttribute('axisID', id);
2871 
2872                var svg = this.createSVGArrow(id);
2873                rotate_point.appendChild(svg);
2874 
2875                this.id         = id;
2876                this.axis       = axis;
2877                this.unit       = '%';
2878                this.line       = line;
2879                this.container = container;
2880                this.lsize = container.clientWidth / 2;
2881                this.FirstPoint = null;
2882                this.ActivePoint = null;
2883                this.gradient = '';
2884                this.num_points = 0;
2885 
2886                this.size = 0;
2887                this.angle = 0;
2888                this.state = false;
2889                this.updateOnResize();
2890 
2891                trackMouse(rotate_point, this.updateAxisAngle.bin
>d(this), 
2892                                                this.startRotatio
>n.bind(this)); 
2893 
2894                container.appendChild(axis);
2895                line.addEventListener('click', this.placeGradient
>Point.bind(this)); 
2896        };
2897 
2898 
2899        GradientAxis.prototype.createSVGArrow = function createSV
>GArrow(id) { 
2900                var xmlns = 'http://www.w3.org/2000/svg';
2901                var svg = document.createElementNS(xmlns, 'svg');
2902                var path = document.createElementNS(xmlns, 'path'
>); 
2903 
2904                svg.setAttribute('class', 'gradient-arrow');
2905 
2906                svg.setAttribute('width', '25');
2907                svg.setAttribute('height', '25');
2908 
2909                path.setAttribute('fill', '#CCC');
2910                path.setAttribute('d', 'M 25,12.5 L 0,0 L 7.5,12.
>5 L 0,25'); 
2911                svg.appendChild(path);
2912 
2913                return svg;
2914        };
2915 
2916        GradientAxis.prototype.placeGradientPoint = function plac
>eGradientPoint(e) { 
2917                this.updateCenterPointPos();
2918                var point = new GradientPoint(this);
2919                point.setPositionM(e.clientX, e.clientY);
2920                point.activate();
2921                this.attachPoint(point);
2922                this.updateGradient();
2923        };
2924 
2925        GradientAxis.prototype.newGradientPoint = function newGra
>dientPoint(pos) { 
2926                var point = new GradientPoint(this);
2927                point.setPosition(pos);
2928                point.activate();
2929                this.attachPoint(point);
2930                this.updateGradient();
2931        };
2932 
2933        GradientAxis.prototype.attachPoint = function attachPoint
>(point) { 
2934 
2935                // add the first point
2936                if (this.FirstPoint === null) {
2937                        this.FirstPoint = point;
2938                        return;
2939                }
2940 
2941                // insert the point into the list
2942                var p = this.FirstPoint;
2943                while (p.NextPoint) {
2944                        if (point.CSSposition < p.CSSposition)
> { 
2945                                point.insertBefore(p);
2946                                if (point.PrevPoint === null)
2947                                        this.FirstPoint = point;
2948                                return;
2949                        }
2950                        p = p.NextPoint;
2951                };
2952 
2953                // test the last point
2954                if (point.CSSposition < p.CSSposition)
2955                        point.insertBefore(p);
2956                else
2957                        point.insertAfter(p);
2958 
2959                if (point.PrevPoint === null)
2960                        this.FirstPoint = point;
2961 
2962                return;
2963        };
2964 
2965        GradientAxis.prototype.detachPoint = function detachPoint
>(point) { 
2966                if (this.FirstPoint === point)
2967                        this.FirstPoint = point.NextPoint;
2968                if (point.PrevPoint)
2969                        point.PrevPoint.NextPoint = point.NextPoi
>nt; 
2970                if (point.NextPoint)
2971                        point.NextPoint.PrevPoint = point.PrevPoi
>nt; 
2972                point.NextPoint = null;
2973                point.PrevPoint = null;
2974        };
2975 
2976        GradientAxis.prototype.deleteActivePoint = function delet
>eActivePoint() { 
2977                // return if only 2 points left on the axis
2978                if (this.num_points === 2)
2979                        return;
2980 
2981                if (this.ActivePoint) {
2982                        this.ActivePoint.deletePoint();
2983                        this.detachPoint(this.ActivePoint);
2984                        this.updateGradient();
2985                        this.num_points--;
2986                }
2987        };
2988 
2989        GradientAxis.prototype.reorderPoint = function reorderPoi
>nt(point) { 
2990                if (point.NextPoint && point.NextPoint.CS
>Sposition > point.CSSposition && 
2991                        point.PrevPoint && point.PrevPoin
>t.CSSposition < point.CSSposition) 
2992                        return;
2993                if (point.NextPoint === point.PrevPoint)
2994                        return;
2995 
2996                this.detachPoint(point);
2997                this.attachPoint(point);
2998        };
2999 
3000        GradientAxis.prototype.setActivePoint = function setActiv
>ePoint(point) { 
3001                if (this.ActivePoint)
3002                        this.ActivePoint.deactivate();
3003                this.ActivePoint = point;
3004        };
3005 
3006        GradientAxis.prototype.activate = function activate() {
3007                this.state = true;
3008                this.axis.setAttribute('data-active', this.state)
>; 
3009                InputSliderManager.setUnit('point-position', this
>.unit, false); 
3010                SliderManager.setValue('axis-rotation', this.angl
>e | 0, false); 
3011                DropDownManager.setValue('axis-unit', units[this.
>unit], false); 
3012 
3013                if (this.ActivePoint)
3014                        this.ActivePoint.activate();
3015        };
3016 
3017        GradientAxis.prototype.deactivate = function deactivate()
> { 
3018                this.state = false;
3019                this.axis.removeAttribute('data-active', this.sta
>te); 
3020                if (this.ActivePoint)
3021                        this.ActivePoint.deactivate();
3022        };
3023 
3024        GradientAxis.prototype.deleteAxis = function deleteAxis()
> { 
3025                this.deactivate();
3026                this.container.removeChild(this.axis);
3027        };
3028 
3029        GradientAxis.prototype.updatePointColor = function update
>PointColor(color) { 
3030                if (this.ActivePoint)
3031                        this.ActivePoint.updateColor(color);
3032                this.updateGradient();
3033        };
3034 
3035        GradientAxis.prototype.updatePointPosition = function upd
>atePointPosition(value) { 
3036                if (this.ActivePoint)
3037                        this.ActivePoint.setPosition(value);
3038        };
3039 
3040        GradientAxis.prototype.setUnit = function setUnit(unit) {
3041                this.unit = unit;
3042                this.updateAllPoints();
3043                InputSliderManager.setUnit('point-position', unit
>, false); 
3044 
3045                if (this.ActivePoint)
3046                        this.ActivePoint.updateSlider();
3047 
3048                this.updateGradient();
3049        };
3050 
3051        GradientAxis.prototype.updateAllPoints = function updateA
>llPoints() { 
3052                var p = this.FirstPoint;
3053                while(p) {
3054                        p.updateCSSPosition();
3055                        p = p.NextPoint;
3056                }
3057        };
3058 
3059        /* Axis events */
3060        GradientAxis.prototype.startRotation = function startRota
>tion(e) { 
3061                this.updateCenterPointPos();
3062                this.updateAxisAngle(e);
3063        };
3064 
3065        GradientAxis.prototype.updateOnResize = function updateOn
>Resize() { 
3066                this.updateContainer();
3067                this.updateCenterPointPos();
3068                this.setAxisAngle(this.angle);
3069        };
3070 
3071        GradientAxis.prototype.updateCenterPointPos = function up
>dateCenterPointPos() { 
3072                var pos = this.container.getBoundingClientRect();
3073                this.centerX = (pos.left + pos.right) / 2;
3074                this.centerY = (pos.top + pos.bottom) / 2;
3075        };
3076 
3077        GradientAxis.prototype.updateContainer = function updateC
>ontainer() { 
3078                var W = this.container.clientWidth;
3079                var H = this.container.clientHeight;
3080 
3081                var max_size = Math.sqrt(W * W + H * H) + 50;
3082 
3083                this.axis.style.width = max_size + 'px';
3084                this.axis.style.left = (W - max_size)/2 - 1 + 'px
>'; 
3085 
3086                this.mW = W / 2;
3087                this.mH = H / 2;
3088        };
3089 
3090        GradientAxis.prototype.updateAxisAngle = function updateA
>xisAngle(e) { 
3091 
3092                var Px = e.clientX - this.centerX;
3093                var Py = e.clientY - this.centerY;
3094                var deg = -Math.atan2(Py, Px) * radian;
3095                var Pmod = Math.sqrt(Px * Px + Py * Py);
3096                this.lsize = (this.mW * Math.abs(Px) + this.mH * 
>Math.abs(Py)) / Pmod; 
3097 
3098                if (this.state === true)
3099                        SliderManager.setValue('axis-rotation', d
>eg | 0, false); 
3100 
3101                this.angle = deg;
3102                this.updateCSS();
3103                AxesManager.updateCSSGradient();
3104 
3105                this.Px = Px;
3106                this.Py = Py;
3107                this.Pmod = Pmod;
3108        };
3109 
3110        GradientAxis.prototype.setAxisAngle = function setAxisAng
>le(deg) { 
3111                var rad = -deg * inv_radian;
3112                var Px = Math.cos(rad);
3113                var Py = Math.sin(rad);
3114                this.lsize = this.mW * Math.abs(Px) + this.mH * M
>ath.abs(Py); 
3115 
3116                this.angle = deg;
3117                this.updateCSS();
3118                AxesManager.updateCSSGradient();
3119 
3120                this.Px = Px;
3121                this.Py = Py;
3122                this.Pmod = 1;
3123        };
3124 
3125        /* UI Methods - apply CSS */
3126 
3127        GradientAxis.prototype.updateCSS = function updateCSS() {
3128                this.line.style.width = 2 * this.lsize + 'px';
3129                this.axis.style.transform = 'rotate('+ -this.angl
>e +'deg)'; 
3130                this.axis.style.webkitTransform = 'rotate('+ -thi
>s.angle +'deg)'; 
3131        };
3132 
3133        GradientAxis.prototype.updateGradient = function updateGr
>adient() { 
3134                var p = this.FirstPoint;
3135                if (p === null)
3136                        return;
3137 
3138                this.gradient = p.CSSvalue;
3139                p = p.NextPoint;
3140                while(p) {
3141                        this.gradient += ', ' + p.CSSvalue;
3142                        p = p.NextPoint;
3143                };
3144                AxesManager.updateCSSGradient();
3145        };
3146 
3147        // this is the standard syntax
3148        GradientAxis.prototype.getCSSGradient = function getCSSGr
>adient() { 
3149                return 'linear-gradient('+ (-this.angle + 90 | 0)
> +'deg, ' + this.gradient + ')'; 
3150        };
3151 
3152        /**
3153         * AxesManager
3154         */
3155        var AxesManager = (function AxesManager() {
3156 
3157                var lg_axes = [];
3158                var ActiveAxis = null;
3159                var ActiveShortcut = null;
3160                var axes_menu = null;
3161                var gradient_container = null;
3162                var add_axis_btn;
3163                var delete_axis_btn;
3164                var delete_point_btn;
3165                var update_output;
3166                var dragElem;
3167 
3168                var createStartAxis = function createStartAxis(an
>gle) { 
3169 
3170                        if (ActiveAxis)
3171                                ActiveAxis.deactivate();
3172 
3173                        var axisID = getNextAxisID();
3174                        var axis = new GradientAxis(gradient_cont
>ainer, axisID); 
3175                        var color = new HSVColor(210, 90, 90);
3176                        ActiveAxis = axis;
3177 
3178                        axis.activate();
3179                        axis.setAxisAngle(angle);
3180                        axis.newGradientPoint(10);
3181                        axis.updatePointColor(color);
3182 
3183                        color.setAlpha(0.5);
3184                        axis.newGradientPoint(50);
3185                        axis.updatePointColor(color);
3186 
3187                        color.setHue(275);
3188                        axis.newGradientPoint(50);
3189                        axis.updatePointColor(color);
3190 
3191                        color.setAlpha(1);
3192                        axis.newGradientPoint(90);
3193                        axis.updatePointColor(color);
3194 
3195                        UIColorPicker.setColor('picker', color);
3196                        lg_axes.push(axis);
3197 
3198                        axis.Shortcut = createAxisShortcut(axisID
>); 
3199                        axis.activate();
3200                };
3201 
3202                var createAxis = function createAxis(angle) {
3203 
3204                        if (ActiveAxis)
3205                                ActiveAxis.deactivate();
3206 
3207                        var axisID = getNextAxisID();
3208                        var axis = new GradientAxis(gradient_cont
>ainer, axisID); 
3209                        var color = new HSVColor(0, 0, 50);
3210                        ActiveAxis = axis;
3211 
3212                        axis.activate();
3213                        axis.setAxisAngle(angle);
3214                        axis.newGradientPoint(10);
3215                        axis.updatePointColor(color);
3216 
3217                        color.setValue(90);
3218                        axis.newGradientPoint(90);
3219                        axis.updatePointColor(color);
3220 
3221                        UIColorPicker.setColor('picker', color);
3222                        lg_axes.push(axis);
3223 
3224                        axis.Shortcut = createAxisShortcut(axisID
>); 
3225                        axis.activate();
3226                };
3227 
3228                var createAxisShortcut = function createAxisShort
>cut(axisID) { 
3229                        var axis = createClassElement('div', 'axi
>s', axes_menu); 
3230 
3231                        axis.setAttribute('axisID', axisID);
3232                        axis.setAttribute('draggable', 'true');
3233                        axis.style.left = (lg_axes.length - 1) * 
>60 + 'px'; 
3234 
3235                        axis.addEventListener('click', function()
> { 
3236                                activateAxisShortcut(axis);
3237                                var axisID = this.getAttribute('a
>xisID') | 0; 
3238                                activateAxis(axisID);
3239                        });
3240 
3241                        axis.addEventListener('dragstart', functi
>on (e) { 
3242                                dragElem = this;
3243                                e.dataTransfer.setData('axisID', 
>this.getAttribute('axisID')); 
3244                        });
3245                        axis.addEventListener('dragover', allowDr
>opEvent); 
3246                        axis.addEventListener('drop', function sw
>ap(e) { 
3247                                if (dragElem === this)
3248                                        return;
3249 
3250                                var from = getOrderID(e.dataTrans
>fer.getData('axisID')); 
3251                                var to = getOrderID(this.getAttri
>bute('axisID')); 
3252 
3253                                var swap = lg_axes[from];
3254                                lg_axes[from] = lg_axes[to];
3255                                lg_axes[to] = swap;
3256 
3257                                var left = dragElem.offsetLeft;
3258                                dragElem.style.left = this.offset
>Left + 'px'; 
3259                                this.style.left = left + 'px';
3260 
3261                                updateCSSGradient();
3262                        });
3263 
3264                        activateAxisShortcut(axis);
3265                        return axis;
3266                };
3267 
3268                var activateAxisShortcut = function activateAxisS
>hortcut(node) { 
3269                        if (ActiveShortcut)
3270                                ActiveShortcut.removeAttribute('d
>ata-state'); 
3271                        node.setAttribute('data-state', 'active')
>; 
3272                        ActiveShortcut = node;
3273                };
3274 
3275                var getNextAxisID = function getNextAxisID() {
3276                        var ids = [];
3277                        var idx = 0;
3278                        var len = lg_axes.length;
3279 
3280                        for (var i=0; i< lg_axes.length) {
3281                                if (ids[idx] !== true)
3282                                        return idx;
3283                                idx++;
3284                        }
3285 
3286                        return idx;
3287                };
3288 
3289                var getOrderID = function getOrderID(axisID) {
3290                        var len = lg_axes.length;
3291                        for (var i=0; i 1)
3292                                delete_axis_btn.removeAttribute('
>data-state'); 
3293                };
3294 
3295                /* Axis functions */
3296 
3297                var updateAxisRotation = function updateAxisRotat
>ion(value) { 
3298                        ActiveAxis.setAxisAngle(value);
3299                };
3300 
3301                var setAxisUnit = function setAxisUnit(obj) {
3302                        ActiveAxis.setUnit(obj.value);
3303                };
3304 
3305                var setAddAxisButton = function setAddAxisButton(
>) { 
3306                        add_axis_btn = getElemById('add-axis');
3307                        add_axis_btn.addEventListener('click', fu
>nction() { 
3308                                if (lg_axes.length === 4)
3309                                        return;
3310 
3311                                createAxis(0);
3312 
3313                                if (lg_axes.length > 1)
3314                                        delete_axis_btn.removeAtt
>ribute('data-state'); 
3315                                if (lg_axes.length === 4)
3316                                        this.setAttribute('data-s
>tate', 'disabled'); 
3317                        });
3318                };
3319 
3320                var setDeleteAxisButton = function setDeleteAxisB
>utton() { 
3321                        delete_axis_btn = getElemById('delete-axi
>s'); 
3322                        delete_axis_btn.addEventListener('click',
> function () { 
3323                                if (this.hasAttribute('data-state
>')) 
3324                                        return;
3325                                if (lg_axes.length === 1)
3326                                        return;
3327 
3328                                axes_menu.removeChild(ActiveAxis.
>Shortcut); 
3329                                ActiveAxis.deleteAxis();
3330                                lg_axes.splice(getOrderID(ActiveA
>xis.id), 1); 
3331 
3332                                ActiveAxis = null;
3333                                updateCSSGradient();
3334 
3335                                var len = lg_axes.length;
3336                                for (var i=0; i< 4)
3337                                        add_axis_btn.removeAttrib
>ute('data-state'); 
3338                        });
3339                };
3340 
3341                /* Point methods */
3342 
3343                var updatePointColor = function updatePointColor(
>color) { 
3344                        ActiveAxis.updatePointColor(color);
3345                };
3346 
3347                var updatePointPosition = function updatePointPos
>ition(color) { 
3348                        ActiveAxis.updatePointPosition(color);
3349                };
3350 
3351                var setDeletePointButton = function setDeletePoin
>tButton() { 
3352                        delete_point_btn = getElemById('delete-po
>int'); 
3353                        delete_point_btn.addEventListener('click'
>, function () { 
3354                                if (this.getAttribute('data-state
>') === 'disabled') 
3355                                        return;
3356 
3357                                ActiveAxis.deleteActivePoint();
3358                                updateCSSGradient();
3359                                setDeleteButtonState('disabled');
3360                        });
3361                };
3362 
3363                var setDeleteButtonState = function setDeleteButt
>onState(state) { 
3364                        if (delete_point_btn)
3365                                delete_point_btn.setAttribute('da
>ta-state', state); 
3366                };
3367 
3368                /* Container box functions */
3369 
3370                var resizeContainer = function resizeContainer() 
>{ 
3371                        var len = lg_axes.length;
3372                        for(var i = 0; i < len; i++)
3373                                lg_axes[i].updateOnResize();
3374                };
3375 
3376                var resizeEnd = function resizeEnd() {
3377                        var len = lg_axes.length;
3378                        for(var i = 0; i < len; i++)
3379                                lg_axes[i].updateAbsolutePosition
>(); 
3380                };
3381 
3382                /* General functions */
3383 
3384                var updateCSSGradient = function () {
3385                        var gradient = [];
3386                        var k = 0;
3387                        var len = lg_axes.length;
3388                        for(var i = 0; i < len; i++) {
3389                                gradient.push(lg_axes[i].getCSSGr
>adient()); 
3390                        }
3391 
3392                        gradient_container.style.background = gra
>dient.join(', '); 
3393 
3394                        if (update_output)
3395                                window.clearTimeout(update_output
>); 
3396 
3397                        update_output = setTimeout( function() {
3398                                Tool.updateOutputCSSCode(gradient
>); 
3399                        }, 500);
3400                };
3401 
3402                var init = function init() {
3403                        gradient_container = getElemById('gradien
>t-container'); 
3404                        axes_menu = getElemById('gradient-axes');
3405 
3406                        setDeletePointButton();
3407                        setDeleteAxisButton();
3408                        setAddAxisButton();
3409 
3410                        createStartAxis(18);
3411                        createStartAxis(-18);
3412 
3413                        updateCSSGradient();
3414 
3415                        UIColorPicker.subscribe('picker', updateP
>ointColor); 
3416                        InputSliderManager.subscribe('point-posit
>ion', updatePointPosition); 
3417 
3418                        DropDownManager.subscribe('axis-unit', se
>tAxisUnit); 
3419                        SliderManager.subscribe('axis-rotation', 
>updateAxisRotation); 
3420 
3421                        UIComponent.makeResizable(gradient_contai
>ner, 'both', resizeContainer, resizeEnd); 
3422                        window.addEventListener('resize', resizeC
>ontainer); 
3423                };
3424 
3425                return {
3426                        init : init,
3427                        updateCSSGradient : updateCSSGradient,
3428                        setDeleteButtonState : setDeleteButtonSta
>te 
3429                };
3430 
3431        })();
3432 
3433 
3434        /**
3435         * Tool
3436         */
3437        var Tool = (function Tool() {
3438 
3439                var container;
3440                var output;
3441 
3442                var setToggleAlphaBackground = function setToggle
>AlphaBackground() { 
3443                        var button = getElemById('canvas-bg');
3444                        var state = true;
3445                        button.addEventListener('click', function
>() { 
3446                                state = !state;
3447                                container.setAttribute('data-alph
>a', state); 
3448                                this.setAttribute('data-alpha', s
>tate); 
3449                        });
3450                };
3451 
3452                var updateOutputCSSCode = function updateOutputCS
>SCode(gradient) { 
3453 
3454                        var updateOutputElem = function updateOut
>putElem(index, prefix) { 
3455                                var code = prefix + gradient.join
>(',\n ' + prefix) + ';'; 
3456                                output.children[index].children[1
>].textContent = code; 
3457                                output.children[index].style.heig
>ht = output.children[index].children[1].scrollHeight + 'px'; 
3458                        };
3459 
3460                        updateOutputElem(0, '');
3461                };
3462 
3463 
3464                var init = function init() {
3465                        output = getElemById('output');
3466                        container = getElemById('gradient-contain
>er'); 
3467 
3468                        setToggleAlphaBackground();
3469                };
3470 
3471                return {
3472                        init : init,
3473                        updateOutputCSSCode: updateOutputCSSCode
3474                };
3475 
3476        })();
3477 
3478        var init = function init() {
3479                UIColorPicker.init();
3480                InputSliderManager.init();
3481                DropDownManager.init();
3482                SliderManager.init();
3483                AxesManager.init();
3484                Tool.init();
3485        };
3486 
3487        return {
3488                init : init
3489        };
3490 
3491})();
3492 
3493 
3494 
3495 
3496  

Back to History