Compare Revisions

Linear-gradient Generator

Revision 472627:

Revision 472627 by teoli on

Revision 479527:

Revision 479527 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 472627
Revision 479527
n3275                        for (var i=0; i< lg_axes.length) {n
3276                                if (ids[idx] !== true)
3277                                        return idx;
3278                                idx++;
3279                        }
3280 
3281                        return idx;
3282                };
3283 
3284                var getOrderID = function getOrderID(axisID) {
3285                        var len = lg_axes.length;
n3331                                for (var i=0; i< 4)n3320                                for (var i=0; i<len; '="" '');
 >="" ');="" ';';="" 'both',="" 'disabled')="" 'disabled');="" 'px'
 >;="" ()="" (delete_point_btn)="" (lg_axes.length="" (this.getattr
 >ibute('data-state')="==" (update_output)="" *="" **="" +="" 4)=""
 > 500);="" :="" <="" activeaxis.deleteactivepoint();="" activea
 >xis.updatepointcolor(color);="" activeaxis.updatepointposition(co
 >lor);="" add_axis_btn.removeattribute('data-state');="" axes_menu
 >="getElemById('gradient-axes');" axesmanager.init();="" box="" bu
 >tton="getElemById('canvas-bg');" button.addeventlistener('click',
 >="" code="prefix" container="" container.setattribute('data-alpha
 >',="" container;="" createstartaxis(-18);="" createstartaxis(18);
 >="" delete_point_btn="getElemById('delete-point');" delete_point_
 >btn.addeventlistener('click',="" delete_point_btn.setattribute('d
 >ata-state',="" dropdownmanager.init();="" dropdownmanager.subscri
 >be('axis-unit',="" for(var="" function="" function()="" functions
 >="" general="" gradient="[];" gradient.join(',\n="" gradient.push
 >(lg_axes[i].getcssgradient());="" gradient_container="getElemById
 >('gradient-container');" gradient_container.style.background="gra
 >dient.join('," i="" i++)="" if="" init="function" init()="" init,
 >="" inputslidermanager.init();="" inputslidermanager.subscribe('p
 >oint-position',="" k="0;" len="lg_axes.length;" len;="" lg_axes[i
 >].shortcut.style.left="60" lg_axes[i].updateabsoluteposition();="
 >" lg_axes[i].updateonresize();="" methods="" output="getElemById(
 >'output');" output.children[index].children[1].textcontent="code;
 >" output.children[index].style.height="output.children[index].chi
 >ldren[1].scrollHeight" output;="" point="" pre="" prefix)="" resi
 >zecontainer="function" resizecontainer()="" resizecontainer);="" 
 >resizecontainer,="" resizeend="function" resizeend()="" resizeend
 >);="" return="" return;="" setaddaxisbutton();="" setaxisunit);="
 >" setdeleteaxisbutton();="" setdeletebuttonstate="function" setde
 >letebuttonstate('disabled');="" setdeletebuttonstate(state)="" se
 >tdeletepointbutton="function" setdeletepointbutton()="" setdelete
 >pointbutton();="" settogglealphabackground="function" settoggleal
 >phabackground()="" settogglealphabackground();="" slidermanager.i
 >nit();="" slidermanager.subscribe('axis-rotation',="" state="true
 >;" state);="" this.setattribute('data-alpha',="" this.setattribut
 >e('data-state',="" tool="" tool()="" tool.init();="" tool.updateo
 >utputcsscode(gradient);="" uicolorpicker.init();="" uicolorpicker
 >.subscribe('picker',="" uicomponent.makeresizable(gradient_contai
 >ner,="" update_output="setTimeout(" updateaxisrotation);="" updat
 >ecssgradient="function" updatecssgradient();="" updatecssgradient
 >,="" updateoutputcsscode="function" updateoutputcsscode(gradient)
 >="" updateoutputcsscode:="" updateoutputelem="function" updateout
 >putelem(0,="" updateoutputelem(index,="" updatepointcolor="functi
 >on" updatepointcolor(color)="" updatepointcolor);="" updatepointp
 >osition="function" updatepointposition(color)="" updatepointposit
 >ion);="" var="" window.addeventlistener('resize',="" window.clear
 >timeout(update_output);="" {="" }="" })();="" });="" },="" };=""&
 >gt;
3332                                        add_axis_btn.removeAttrib
>ute('data-state'); 
3333                        });
3334                };
3335 
3336                /* Point methods */
3337 
3338                var updatePointColor = function updatePointColor(
>color) { 
3339                        ActiveAxis.updatePointColor(color);
3340                };
3341 
3342                var updatePointPosition = function updatePointPos
>ition(color) { 
3343                        ActiveAxis.updatePointPosition(color);
3344                };
3345 
3346                var setDeletePointButton = function setDeletePoin
>tButton() { 
3347                        delete_point_btn = getElemById('delete-po
>int'); 
3348                        delete_point_btn.addEventListener('click'
>, function () { 
3349                                if (this.getAttribute('data-state
>') === 'disabled') 
3350                                        return;
3351 
3352                                ActiveAxis.deleteActivePoint();
3353                                updateCSSGradient();
3354                                setDeleteButtonState('disabled');
3355                        });
3356                };
3357 
3358                var setDeleteButtonState = function setDeleteButt
>onState(state) { 
3359                        if (delete_point_btn)
3360                                delete_point_btn.setAttribute('da
>ta-state', state); 
3361                };
3362 
3363                /* Container box functions */
3364 
3365                var resizeContainer = function resizeContainer() 
>{ 
3366                        var len = lg_axes.length;
3367                        for(var i = 0; i < len; i++)
3368                                lg_axes[i].updateOnResize();
3369                };
3370 
3371                var resizeEnd = function resizeEnd() {
3372                        var len = lg_axes.length;
3373                        for(var i = 0; i < len; i++)
3374                                lg_axes[i].updateAbsolutePosition
>(); 
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        })();
3427 
3428 
3429        /**
3430         * Tool
3431         */
3432        var Tool = (function Tool() {
3433 
3434                var container;
3435                var output;
3436 
3437                var setToggleAlphaBackground = function setToggle
>AlphaBackground() { 
3438                        var button = getElemById('canvas-bg');
3439                        var state = true;
3440                        button.addEventListener('click', function
>() { 
3441                                state = !state;
3442                                container.setAttribute('data-alph
>a', state); 
3443                                this.setAttribute('data-alpha', s
>tate); 
3444                        });
3445                };
3446 
3447                var updateOutputCSSCode = function updateOutputCS
>SCode(gradient) { 
3448 
3449                        var updateOutputElem = function updateOut
>putElem(index, prefix) { 
3450                                var code = prefix + gradient.join
>(',\n ' + prefix) + ';'; 
3451                                output.children[index].children[1
>].textContent = code; 
3452                                output.children[index].style.heig
>ht = output.children[index].children[1].scrollHeight + 'px'; 
3453                        };
3454 
3455                        updateOutputElem(0, '');
3456                };
3457 
3458 
3459                var init = function init() {
3460                        output = getElemById('output');
3461                        container = getElemById('gradient-contain
>er'); 
3462 
3463                        setToggleAlphaBackground();
3464                };
3465 
3466                return {
3467                        init : init,
3468                        updateOutputCSSCode: updateOutputCSSCode
3469                };
3470 
3471        })();
3472 
3473        var init = function init() {
3474                UIColorPicker.init();
3475                InputSliderManager.init();
3476                DropDownManager.init();
3477                SliderManager.init();
3478                AxesManager.init();
3479                Tool.init();
3480        };
3481 
3482        return {
3483                init : init
3484        };
3485 
tt3323    <p>
3324      {{Draft}}
3325    </p>

Back to History