diff options
Diffstat (limited to 'js/panels/color/colorpanelbase.reel/colorpanelbase.js')
-rwxr-xr-x | js/panels/color/colorpanelbase.reel/colorpanelbase.js | 163 |
1 files changed, 82 insertions, 81 deletions
diff --git a/js/panels/color/colorpanelbase.reel/colorpanelbase.js b/js/panels/color/colorpanelbase.reel/colorpanelbase.js index 0223b9d8..3606bad2 100755 --- a/js/panels/color/colorpanelbase.reel/colorpanelbase.js +++ b/js/panels/color/colorpanelbase.reel/colorpanelbase.js | |||
@@ -1,24 +1,25 @@ | |||
1 | /* <copyright> | 1 | /* <copyright> |
2 | Copyright (c) 2012, Motorola Mobility, Inc | 2 | Copyright (c) 2012, Motorola Mobility LLC. |
3 | All Rights Reserved. | 3 | All Rights Reserved. |
4 | BSD License. | ||
5 | 4 | ||
6 | Redistribution and use in source and binary forms, with or without | 5 | Redistribution and use in source and binary forms, with or without |
7 | modification, are permitted provided that the following conditions are met: | 6 | modification, are permitted provided that the following conditions are met: |
8 | 7 | ||
9 | - Redistributions of source code must retain the above copyright notice, | 8 | * Redistributions of source code must retain the above copyright notice, |
10 | this list of conditions and the following disclaimer. | 9 | this list of conditions and the following disclaimer. |
11 | - Redistributions in binary form must reproduce the above copyright | 10 | |
12 | notice, this list of conditions and the following disclaimer in the | 11 | * Redistributions in binary form must reproduce the above copyright notice, |
13 | documentation and/or other materials provided with the distribution. | 12 | this list of conditions and the following disclaimer in the documentation |
14 | - Neither the name of Motorola Mobility nor the names of its contributors | 13 | and/or other materials provided with the distribution. |
15 | may be used to endorse or promote products derived from this software | 14 | |
16 | without specific prior written permission. | 15 | * Neither the name of Motorola Mobility LLC nor the names of its |
16 | contributors may be used to endorse or promote products derived from this | ||
17 | software without specific prior written permission. | ||
17 | 18 | ||
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | 21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE |
21 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE | 22 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE |
22 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | 23 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
23 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | 24 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
24 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | 25 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
@@ -30,12 +31,12 @@ POSSIBILITY OF SUCH DAMAGE. | |||
30 | 31 | ||
31 | //////////////////////////////////////////////////////////////////////// | 32 | //////////////////////////////////////////////////////////////////////// |
32 | // | 33 | // |
33 | var Montage = require("montage/core/core").Montage, | 34 | var Montage = require("montage/core/core").Montage, |
34 | Component = require("montage/ui/component").Component, | 35 | Component = require("montage/ui/component").Component, |
35 | Popup = require("js/components/popup.reel").Popup, | 36 | Popup = require("js/components/popup.reel").Popup, |
36 | Slider = require("js/components/slider.reel").Slider, | 37 | Slider = require("js/components/slider.reel").Slider, |
37 | HotText = require("js/components/hottext.reel").HotText, | 38 | HotText = require("js/components/hottext.reel").HotText, |
38 | ColorBar = require("js/components/colorbar.reel").ColorBar; | 39 | ColorBar = require("js/components/colorbar.reel").ColorBar; |
39 | //////////////////////////////////////////////////////////////////////// | 40 | //////////////////////////////////////////////////////////////////////// |
40 | //Exporting as ColorPanelBase | 41 | //Exporting as ColorPanelBase |
41 | exports.ColorPanelBase = Montage.create(Component, { | 42 | exports.ColorPanelBase = Montage.create(Component, { |
@@ -47,7 +48,7 @@ exports.ColorPanelBase = Montage.create(Component, { | |||
47 | //////////////////////////////////////////////////////////////////// | 48 | //////////////////////////////////////////////////////////////////// |
48 | //Storing ColorPanel sliders mode | 49 | //Storing ColorPanel sliders mode |
49 | _panelMode: { | 50 | _panelMode: { |
50 | value: 'rgb' | 51 | value: 'rgb' |
51 | }, | 52 | }, |
52 | //////////////////////////////////////////////////////////////////// | 53 | //////////////////////////////////////////////////////////////////// |
53 | //Storing ColorPanel sliders mode | 54 | //Storing ColorPanel sliders mode |
@@ -505,11 +506,11 @@ exports.ColorPanelBase = Montage.create(Component, { | |||
505 | if (c && c.css) { | 506 | if (c && c.css) { |
506 | this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height); | 507 | this.ctx.clearRect(0, 0, this.cvs.width, this.cvs.height); |
507 | if (m === 'gradient') { | 508 | if (m === 'gradient') { |
508 | this.style.backgroundImage = c.css; | 509 | this.style.backgroundImage = c.css; |
509 | this.style.backgroundColor = 'transparent'; | 510 | this.style.backgroundColor = 'transparent'; |
510 | } else { | 511 | } else { |
511 | this.style.backgroundColor = c.css; | 512 | this.style.backgroundColor = c.css; |
512 | this.style.backgroundImage = 'none'; | 513 | this.style.backgroundImage = 'none'; |
513 | } | 514 | } |
514 | } else { | 515 | } else { |
515 | this.drawNoColor(this, this.cvs); | 516 | this.drawNoColor(this, this.cvs); |
@@ -559,7 +560,7 @@ exports.ColorPanelBase = Montage.create(Component, { | |||
559 | this.drawButtonNoColor(button, button.getElementsByTagName('canvas')[0]); | 560 | this.drawButtonNoColor(button, button.getElementsByTagName('canvas')[0]); |
560 | } | 561 | } |
561 | break; | 562 | break; |
562 | //////////////////////////////////////////////////////// | 563 | //////////////////////////////////////////////////////// |
563 | case 'fillicon': | 564 | case 'fillicon': |
564 | button.innerHTML = ''; | 565 | button.innerHTML = ''; |
565 | this._buttons.fill.push(button); | 566 | this._buttons.fill.push(button); |
@@ -572,7 +573,7 @@ exports.ColorPanelBase = Montage.create(Component, { | |||
572 | button.className = button.className + ' selected'; | 573 | button.className = button.className + ' selected'; |
573 | } | 574 | } |
574 | break; | 575 | break; |
575 | //////////////////////////////////////////////////////// | 576 | //////////////////////////////////////////////////////// |
576 | case 'stroke': | 577 | case 'stroke': |
577 | this._buttons.stroke.push(button); | 578 | this._buttons.stroke.push(button); |
578 | button.style.cursor = 'pointer'; | 579 | button.style.cursor = 'pointer'; |
@@ -602,7 +603,7 @@ exports.ColorPanelBase = Montage.create(Component, { | |||
602 | //this.selectInputHighlight(this._buttons['stroke'], this._buttons['fill'], false, true); | 603 | //this.selectInputHighlight(this._buttons['stroke'], this._buttons['fill'], false, true); |
603 | } | 604 | } |
604 | break; | 605 | break; |
605 | //////////////////////////////////////////////////////// | 606 | //////////////////////////////////////////////////////// |
606 | case 'strokeicon': | 607 | case 'strokeicon': |
607 | button.innerHTML = ''; | 608 | button.innerHTML = ''; |
608 | this._buttons.stroke.push(button); | 609 | this._buttons.stroke.push(button); |
@@ -615,7 +616,7 @@ exports.ColorPanelBase = Montage.create(Component, { | |||
615 | button.className = button.className + ' selected'; | 616 | button.className = button.className + ' selected'; |
616 | } | 617 | } |
617 | break; | 618 | break; |
618 | //////////////////////////////////////////////////////// | 619 | //////////////////////////////////////////////////////// |
619 | case 'current': | 620 | case 'current': |
620 | this._buttons.current.push(button); | 621 | this._buttons.current.push(button); |
621 | button.style.cursor = 'default'; | 622 | button.style.cursor = 'default'; |
@@ -636,7 +637,7 @@ exports.ColorPanelBase = Montage.create(Component, { | |||
636 | } | 637 | } |
637 | } | 638 | } |
638 | break; | 639 | break; |
639 | //////////////////////////////////////////////////////// | 640 | //////////////////////////////////////////////////////// |
640 | case 'previous': | 641 | case 'previous': |
641 | this._buttons.previous.push(button); | 642 | this._buttons.previous.push(button); |
642 | button.addEventListener('click', this.setPreviousColor.bind(this)); | 643 | button.addEventListener('click', this.setPreviousColor.bind(this)); |
@@ -657,49 +658,49 @@ exports.ColorPanelBase = Montage.create(Component, { | |||
657 | } | 658 | } |
658 | } | 659 | } |
659 | break; | 660 | break; |
660 | //////////////////////////////////////////////////////// | 661 | //////////////////////////////////////////////////////// |
661 | case 'mlabel1': | 662 | case 'mlabel1': |
662 | this._buttons.mlabel1.push(button); | 663 | this._buttons.mlabel1.push(button); |
663 | break; | 664 | break; |
664 | //////////////////////////////////////////////////////// | 665 | //////////////////////////////////////////////////////// |
665 | case 'mlabel2': | 666 | case 'mlabel2': |
666 | this._buttons.mlabel2.push(button); | 667 | this._buttons.mlabel2.push(button); |
667 | break; | 668 | break; |
668 | //////////////////////////////////////////////////////// | 669 | //////////////////////////////////////////////////////// |
669 | case 'mlabel3': | 670 | case 'mlabel3': |
670 | this._buttons.mlabel3.push(button); | 671 | this._buttons.mlabel3.push(button); |
671 | break; | 672 | break; |
672 | //////////////////////////////////////////////////////// | 673 | //////////////////////////////////////////////////////// |
673 | case 'rgbmode': | 674 | case 'rgbmode': |
674 | this._buttons.rgbmode.push(button); | 675 | this._buttons.rgbmode.push(button); |
675 | button.title = 'Color Mode: RGB'; | 676 | button.title = 'Color Mode: RGB'; |
676 | button.addEventListener('click', this.rgbMode.bind(this)); | 677 | button.addEventListener('click', this.rgbMode.bind(this)); |
677 | break; | 678 | break; |
678 | //////////////////////////////////////////////////////// | 679 | //////////////////////////////////////////////////////// |
679 | case 'hslmode': | 680 | case 'hslmode': |
680 | this._buttons.hslmode.push(button); | 681 | this._buttons.hslmode.push(button); |
681 | button.title = 'Color Mode: HSL'; | 682 | button.title = 'Color Mode: HSL'; |
682 | button.addEventListener('click', this.hslMode.bind(this)); | 683 | button.addEventListener('click', this.hslMode.bind(this)); |
683 | break; | 684 | break; |
684 | //////////////////////////////////////////////////////// | 685 | //////////////////////////////////////////////////////// |
685 | case 'reset': | 686 | case 'reset': |
686 | this._buttons.reset.push(button); | 687 | this._buttons.reset.push(button); |
687 | button.title = 'Default Colors'; | 688 | button.title = 'Default Colors'; |
688 | button.addEventListener('click', this.applyDefaultColors.bind(this)); | 689 | button.addEventListener('click', this.applyDefaultColors.bind(this)); |
689 | break; | 690 | break; |