Compare Revisions

Linear-gradient Generator

Revision 472591:

Revision 472591 by teoli on

Revision 472597:

Revision 472597 by gabriel_ivanica on

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

Revision 472591
Revision 472597
n2612        GradientGeneratorTool.init();n2612        LinearGradientTool.init();
n2615var GradientGeneratorTool = (function GradientGeneratorTool() {n2615var LinearGradientTool = (function LinearGradientTool() {
2616        'use strict';
nn2620        var units = {'%': 1, 'px' : 0};
n2664                function makeResizable(elem, axis, callback) {n2666                function makeResizable(elem, axis, callback, endF
 >unc) {
nn2671 
2672                        endFunc = endFunc || function(e) {};
nn2704                                endFunc();
nn2807                if (this.Axis.unit ='%')
2802                this.position = parseFloat(((this.CSSposition / 12808                        this.position = parseFloat(((this.CSSposi
>00) * (2 * this.Axis.lsize)).toFixed(1));;>tion / 100) * (2 * this.Axis.lsize)).toFixed(1));;
n2825        GradientPoint.prototype.updateCSSPosition = function updan2831        GradientPoint.prototype.updateCSSPosition = function upda
>tePosition() {>teCSSPosition() {
n3004 n
3005                var dp = 0;
3006                if (this.unit === '%') dp = 1;
3007                DropDownManager.setValue('axis-unit', dp);3010                DropDownManager.setValue('axis-unit', units[this.
 >unit], false);
nn3150 
3151        /**
3152         * AxesManager
3153         */
3154        var AxesManager = (function AxesManager() {
3155 
3156                var lg_axes = [];
3157                var ActiveAxis = null;
3158                var ActiveShortcut = null;
3159                var axes_menu = null;
3160                var gradient_container = null;
3161                var add_axis_btn;
3162                var delete_axis_btn;
3163                var delete_point_btn;
3164                var update_output;
3165                var dragElem;
3166 
3167                var createStartAxis = function createStartAxis(an
 >gle) {
3168 
3169                        if (ActiveAxis)
3170                                ActiveAxis.deactivate();
3171 
3172                        var axisID = getNextAxisID();
3173                        var axis = new GradientAxis(gradient_cont
 >ainer, axisID);
3174                        var color = new HSVColor(210, 90, 90);
3175                        ActiveAxis = axis;
3176 
3177                        axis.activate();
3178                        axis.setAxisAngle(angle);
3179                        axis.newGradientPoint(10);
3180                        axis.updatePointColor(color);
3181 
3182                        color.setAlpha(0.5);
3183                        axis.newGradientPoint(50);
3184                        axis.updatePointColor(color);
3185 
3186                        color.setHue(275);
3187                        axis.newGradientPoint(50);
3188                        axis.updatePointColor(color);
3189 
3190                        color.setAlpha(1);
3191                        axis.newGradientPoint(90);
3192                        axis.updatePointColor(color);
3193 
3194                        UIColorPicker.setColor('picker', color);
3195                        lg_axes.push(axis);
3196 
3197                        axis.Shortcut = createAxisShortcut(axisID
 >);
3198                        axis.activate();
3199                };
3200 
3201                var createAxis = function createAxis(angle) {
3202 
3203                        if (ActiveAxis)
3204                                ActiveAxis.deactivate();
3205 
3206                        var axisID = getNextAxisID();
3207                        var axis = new GradientAxis(gradient_cont
 >ainer, axisID);
3208                        var color = new HSVColor(0, 0, 50);
3209                        ActiveAxis = axis;
3210 
3211                        axis.activate();
3212                        axis.setAxisAngle(angle);
3213                        axis.newGradientPoint(10);
3214                        axis.updatePointColor(color);
3215 
3216                        color.setValue(90);
3217                        axis.newGradientPoint(90);
3218                        axis.updatePointColor(color);
3219 
3220                        UIColorPicker.setColor('picker', color);
3221                        lg_axes.push(axis);
3222 
3223                        axis.Shortcut = createAxisShortcut(axisID
 >);
3224                        axis.activate();
3225                };
3226 
3227                var createAxisShortcut = function createAxisShort
 >cut(axisID) {
3228                        var axis = createClassElement('div', 'axi
 >s', axes_menu);
3229 
3230                        axis.setAttribute('axisID', axisID);
3231                        axis.setAttribute('draggable', 'true');
3232                        axis.style.left = (lg_axes.length - 1) * 
 >60 + 'px';
3233 
3234                        axis.addEventListener('click', function()
 > {
3235                                activateAxisShortcut(axis);
3236                                var axisID = this.getAttribute('a
 >xisID') | 0;
3237                                activateAxis(axisID);
3238                        });
3239 
3240                        axis.addEventListener('dragstart', functi
 >on (e) {
3241                                dragElem = this;
3242                                e.dataTransfer.setData('axisID', 
 >this.getAttribute('axisID'));
3243                        });
3244                        axis.addEventListener('dragover', allowDr
 >opEvent);
3245                        axis.addEventListener('drop', function sw
 >ap(e) {
3246                                if (dragElem === this)
3247                                        return;
3248 
3249                                var from = getOrderID(e.dataTrans
 >fer.getData('axisID'));
3250                                var to = getOrderID(this.getAttri
 >bute('axisID'));
3251 
3252                                var swap = lg_axes[from];
3253                                lg_axes[from] = lg_axes[to];
3254                                lg_axes[to] = swap;
3255 
3256                                var left = dragElem.offsetLeft;
3257                                dragElem.style.left = this.offset
 >Left + 'px';
3258                                this.style.left = left + 'px';
3259 
3260                                updateCSSGradient();
3261                        });
3262 
3263                        activateAxisShortcut(axis);
3264                        return axis;
3265                };
3266 
3267                var activateAxisShortcut = function activateAxisS
 >hortcut(node) {
3268                        if (ActiveShortcut)
3269                                ActiveShortcut.removeAttribute('d
 >ata-state');
3270                        node.setAttribute('data-state', 'active')
 >;
3271                        ActiveShortcut = node;
3272                };
3273 
3274                var getNextAxisID = function getNextAxisID() {
3275                        var ids = [];
3276                        var idx = 0;
3277                        var len = lg_axes.length;
3278 
3279                        for (var i=0; i< lg_axes.length) {
3280                                if (ids[idx] !== true)
3281                                        return idx;
3282                                idx++;
3283                        }
3284 
3285                        return idx;
3286                };
3287 
3288                var getOrderID = function getOrderID(axisID) {
3289                        var len = lg_axes.length;
3290                        for (var i=0; i 1)
3291                                delete_axis_btn.removeAttribute('
 >data-state');
3292                };
3293 
3294                /* Axis functions */
3295 
3296                var updateAxisRotation = function updateAxisRotat
 >ion(value) {
3297                        ActiveAxis.setAxisAngle(value);
3298                };
3299 
3300                var setAxisUnit = function setAxisUnit(obj) {
3301                        ActiveAxis.setUnit(obj.value);
3302                };
3303 
3304                var setAddAxisButton = function setAddAxisButton(
 >) {
3305                        add_axis_btn = getElemById('add-axis');
3306                        add_axis_btn.addEventListener('click', fu
 >nction() {
3307                                if (lg_axes.length === 4)
3308                                        return;
3309 
3310                                createAxis(0);
3311 
3312                                if (lg_axes.length > 1)
3313                                        delete_axis_btn.removeAtt
 >ribute('data-state');
3314                                if (lg_axes.length === 4)
3315                                        this.setAttribute('data-s
 >tate', 'disabled');
3316                        });
3317                };
3318 
3319                var setDeleteAxisButton = function setDeleteAxisB
 >utton() {
3320                        delete_axis_btn = getElemById('delete-axi
 >s');
3321                        delete_axis_btn.addEventListener('click',
 > function () {
3322                                if (this.hasAttribute('data-state
 >'))
3323                                        return;
3324                                if (lg_axes.length === 1)
3325                                        return;
3326 
3327                                axes_menu.removeChild(ActiveAxis.
 >Shortcut);
3328                                ActiveAxis.deleteAxis();
3329                                lg_axes.splice(getOrderID(ActiveA
 >xis.id), 1);
3330 
3331                                ActiveAxis = null;
3332                                updateCSSGradient();
3333 
3334                                var len = lg_axes.length;
3335                                for (var i=0; i< 4)
3336                                        add_axis_btn.removeAttrib
 >ute('data-state');
3337                        });
3338                };
3339 
3340                /* Point methods */
3341 
3342                var updatePointColor = function updatePointColor(
 >color) {
3343                        ActiveAxis.updatePointColor(color);
3344                };
3345 
3346                var updatePointPosition = function updatePointPos
 >ition(color) {
3347                        ActiveAxis.updatePointPosition(color);
3348                };
3349 
3350                var setDeletePointButton = function setDeletePoin
 >tButton() {
3351                        delete_point_btn = getElemById('delete-po
 >int');
3352                        delete_point_btn.addEventListener('click'
 >, function () {
3353                                if (this.getAttribute('data-state
 >') === 'disabled')
3354                                        return;
3355 
3356                                ActiveAxis.deleteActivePoint();
3357                                updateCSSGradient();
3358                                setDeleteButtonState('disabled');
3359                        });
3360                };
3361 
3362                var setDeleteButtonState = function setDeleteButt
 >onState(state) {
3363                        if (delete_point_btn)
3364                                delete_point_btn.setAttribute('da
 >ta-state', state);
3365                };
3366 
3367                /* Container box functions */
3368 
3369                var resizeContainer = function resizeContainer() 
 >{
3370                        var len = lg_axes.length;
3371                        for(var i = 0; i < len; i++)
3372                                lg_axes[i].updateOnResize();
3373                };
3374 
3375                var resizeEnd = function resizeEnd() {
3376                        var len = lg_axes.length;
3377                        for(var i = 0; i < len; i++)
3378                                lg_axes[i].updateAbsolutePosition
 >();
3379                };
3380 
3381                /* General functions */
3382 
3383                var updateCSSGradient = function () {
3384                        var gradient = [];
3385                        var k = 0;
3386                        var len = lg_axes.length;
3387                        for(var i = 0; i < len; i++) {
3388                                gradient.push(lg_axes[i].getCSSGr
 >adient());
3389                        }
3390 
3391                        gradient_container.style.background = gra
 >dient.join(', ');
3392 
3393                        if (update_output)
3394                                window.clearTimeout(update_output
 >);
3395 
3396                        update_output = setTimeout( function() {
3397                                Tool.updateOutputCSSCode(gradient
 >);
3398                        }, 500);
3399                };
3400 
3401                var init = function init() {
3402                        gradient_container = getElemById('gradien
 >t-container');
3403                        axes_menu = getElemById('gradient-axes');
3404 
3405                        setDeletePointButton();
3406                        setDeleteAxisButton();
3407                        setAddAxisButton();
3408 
3409                        createStartAxis(18);
3410                        createStartAxis(-18);
3411 
3412                        updateCSSGradient();
3413 
3414                        UIColorPicker.subscribe('picker', updateP
 >ointColor);
3415                        InputSliderManager.subscribe('point-posit
 >ion', updatePointPosition);
3416 
3417                        DropDownManager.subscribe('axis-unit', se
 >tAxisUnit);
3418                        SliderManager.subscribe('axis-rotation', 
 >updateAxisRotation);
3419 
3420                        UIComponent.makeResizable(gradient_contai
 >ner, 'both', resizeContainer, resizeEnd);
3421                        window.addEventListener('resize', resizeC
 >ontainer);
3422                };
3423 
3424                return {
3425                        init : init,
3426                        updateCSSGradient : updateCSSGradient,
3427                        setDeleteButtonState : setDeleteButtonSta
 >te
3428                };
3429 
3430        })();
nn3489 
n3207        /**n
3208         * AxesManager Manager
3209         */
3210        var AxesManager = (function AxesManager() {
t3212                var lg_axes = [];t
3213                var ActiveAxis = null;
3214                var ActiveShortcut = null;
3215                var lg_axes_menu = null;
3216                var gradient_container = null;
3217                var add_axis_btn;
3218                var delete_axis_btn;
3219                var delete_point_btn;
3220                var update_output;
3221                var dragElem;
3222 
3223                var createAxis = function createAxis(angle) {
3224 
3225                        if (ActiveAxis)
3226                                ActiveAxis.deactivate();
3227 
3228                        var axisID = getNextAxisID();
3229                        var axis = new GradientAxis(gradient_cont
>ainer, axisID); 
3230                        var color = new HSVColor(210, 90, 90);
3231                        ActiveAxis = axis;
3232 
3233                        axis.activate();
3234                        axis.setAxisAngle(angle);
3235                        axis.newGradientPoint(10);
3236                        axis.updatePointColor(color);
3237 
3238                        color.setAlpha(0.5);
3239                        axis.newGradientPoint(50);
3240                        axis.updatePointColor(color);
3241 
3242                        color.setHue(275);
3243                        axis.newGradientPoint(50);
3244                        axis.updatePointColor(color);
3245 
3246                        color.setAlpha(1);
3247                        axis.newGradientPoint(90);
3248                        axis.updatePointColor(color);
3249 
3250                        UIColorPicker.setColor('picker', color);
3251                        lg_axes.push(axis);
3252 
3253                        axis.Shortcut = createAxisShortcut(axisID
>); 
3254                        axis.activate();
3255                };
3256 
3257                var createAxisShortcut = function createAxisShort
>cut(axisID) { 
3258                        var axis = createClassElement('div', 'axi
>s', lg_axes_menu); 
3259 
3260                        axis.setAttribute('axisID', axisID);
3261                        axis.setAttribute('draggable', 'true');
3262                        axis.style.left = (lg_axes.length - 1) * 
>60 + 'px'; 
3263 
3264                        axis.addEventListener('click', function()
> { 
3265                                activateAxisShortcut(axis);
3266                                var axisID = this.getAttribute('a
>xisID') | 0; 
3267                                activateAxis(axisID);
3268                        });
3269 
3270                        axis.addEventListener('dragstart', functi
>on (e) { 
3271                                dragElem = this;
3272                                e.dataTransfer.setData('axisID', 
>this.getAttribute('axisID')); 
3273                        });
3274                        axis.addEventListener('dragover', allowDr
>opEvent); 
3275                        axis.addEventListener('drop', function sw
>ap(e) { 
3276                                if (dragElem === this)
3277                                        return;
3278 
3279                                var from = getOrderID(e.dataTrans
>fer.getData('axisID')); 
3280                                var to = getOrderID(this.getAttri
>bute('axisID')); 
3281 
3282                                var swap = lg_axes[from];
3283                                lg_axes[from] = lg_axes[to];
3284                                lg_axes[to] = swap;
3285 
3286                                var left = dragElem.offsetLeft;
3287                                dragElem.style.left = this.offset
>Left + 'px'; 
3288                                this.style.left = left + 'px';
3289 
3290                                updateCSSGradient();
3291                        });
3292 
3293                        activateAxisShortcut(axis);
3294                        return axis;
3295                };
3296 
3297                var activateAxisShortcut = function activateAxisS
>hortcut(node) { 
3298                        if (ActiveShortcut)
3299                                ActiveShortcut.removeAttribute('d
>ata-state'); 
3300                        node.setAttribute('data-state', 'active')
>; 
3301                        ActiveShortcut = node;
3302                };
3303 
3304                var activateAxis = function activateAxis(axisID) 
>{ 
3305                        var axis = lg_axes[getOrderID(axisID)];
3306                        if (axis === null) return;
3307 
3308                        if (ActiveAxis && ActiveAxis !== 
>axis) 
3309                                ActiveAxis.deactivate();
3310                        ActiveAxis = axis;
3311                        ActiveAxis.activate();
3312 
3313                        if (lg_axes.length > 1)
3314                                delete_axis_btn.removeAttribute('
>data-state'); 
3315                };
3316 
3317                /* Axis functions */
3318 
3319                var updateAxisRotation = function updateAxisRotat
>ion(value) { 
3320                        ActiveAxis.setAxisAngle(value);
3321                };
3322 
3323                var setAxisUnit = function setAxisUnit(obj) {
3324                        ActiveAxis.setUnit(obj.value);
3325                };
3326 
3327                var setAddAxisButton = function setAddAxisButton(
>) { 
3328                        add_axis_btn = getElemById('add-axis');
3329                        add_axis_btn.addEventListener('click', fu
>nction() { 
3330                                if (lg_axes.length === 4)
3331                                        return;
3332 
3333                                createAxis(0);
3334 
3335                                if (lg_axes.length > 1)
3336                                        delete_axis_btn.removeAtt
>ribute('data-state'); 
3337                                if (lg_axes.length === 4)
3338                                        this.setAttribute('data-s
>tate', 'disabled'); 
3339                        });
3340                };
3341 
3342                /* Point methods */
3343 
3344                var updatePointColor = function updatePointColor(
>color) { 
3345                        ActiveAxis.updatePointColor(color);
3346                };
3347 
3348                var updatePointPosition = function updatePointPos
>ition(color) { 
3349                        ActiveAxis.updatePointPosition(color);
3350                };
3351 
3352                var setDeletePointButton = function setDeletePoin
>tButton() { 
3353                        delete_point_btn = getElemById('delete-po
>int'); 
3354                        delete_point_btn.addEventListener('click'
>, function () { 
3355                                if (this.getAttribute('data-state
>') === 'disabled') 
3356                                        return;
3357 
3358                                ActiveAxis.deleteActivePoint();
3359                                updateCSSGradient();
3360                                setDeleteButtonState('disabled');
3361                        });
3362                };
3363 
3364                var setDeleteButtonState = function setDeleteButt
>onState(state) { 
3365                        if (delete_point_btn)
3366                                delete_point_btn.setAttribute('da
>ta-state', state); 
3367                };
3368 
3369                /* Container box functions */
3370 
3371                var resizeContainer = function resizeContainer() 
>{ 
3372                        var len = lg_axes.length;
3373                        for(var i = 0; i < len; i++)
3374                                lg_axes[i].updateOnResize();
3375                };
3376 
3377                /* General functions */
3378 
3379                var updateCSSGradient = function () {
3380                        var gradient = [];
3381                        var k = 0;
3382                        var len = lg_axes.length;
3383                        for(var i = 0; i < len; i++) {
3384                                gradient.push(lg_axes[i].getCSSGr
>adient()); 
3385                        }
3386 
3387                        gradient_container.style.background = gra
>dient.join(', '); 
3388 
3389                        if (update_output)
3390                                window.clearTimeout(update_output
>); 
3391 
3392                        update_output = setTimeout( function() {
3393                                Tool.updateOutputCSSCode(gradient
>); 
3394                        }, 500);
3395                };
3396 
3397                        var init = function init() {
3398                        gradient_container = getElemById('gradien
>t-container'); 
3399                        axes_menu = getElemById('gradient-axes');
3400 
3401                        setDeletePointButton();
3402                        setDeleteAxisButton();
3403                        setAddAxisButton();
3404 
3405                        createStartAxis(18);
3406                        createStartAxis(-18);
3407 
3408                        updateCSSGradient();
3409 
3410                        UIColorPicker.subscribe('picker', updateP
>ointColor); 
3411                        InputSliderManager.subscribe('point-posit
>ion', updatePointPosition); 
3412 
3413                        DropDownManager.subscribe('axis-unit', se
>tAxisUnit); 
3414                        SliderManager.subscribe('axis-rotation', 
>updateAxisRotation); 
3415 
3416                        UIComponent.makeResizable(gradient_contai
>ner, 'both', resizeContainer, resizeEnd); 
3417                        window.addEventListener('resize', resizeC
>ontainer); 
3418                };
3419 
3420                return {
3421                        init : init,
3422                        updateCSSGradient : updateCSSGradient,
3423                        setDeleteButtonState : setDeleteButtonSta
>te 
3424                };
3425 
3426        })(); 

Back to History