butcherman /
Tech_Bench
| @@ 5777-5847 (lines=71) @@ | ||
| 5774 | init: function (settings) { |
|
| 5775 | this._super(settings); |
|
| 5776 | }, |
|
| 5777 | postRender: function () { |
|
| 5778 | var self = this; |
|
| 5779 | var color = self.color(); |
|
| 5780 | var hsv, hueRootElm, huePointElm, svRootElm, svPointElm; |
|
| 5781 | hueRootElm = self.getEl('h'); |
|
| 5782 | huePointElm = self.getEl('hp'); |
|
| 5783 | svRootElm = self.getEl('sv'); |
|
| 5784 | svPointElm = self.getEl('svp'); |
|
| 5785 | function getPos(elm, event) { |
|
| 5786 | var pos = funcs.getPos(elm); |
|
| 5787 | var x, y; |
|
| 5788 | x = event.pageX - pos.x; |
|
| 5789 | y = event.pageY - pos.y; |
|
| 5790 | x = Math.max(0, Math.min(x / elm.clientWidth, 1)); |
|
| 5791 | y = Math.max(0, Math.min(y / elm.clientHeight, 1)); |
|
| 5792 | return { |
|
| 5793 | x: x, |
|
| 5794 | y: y |
|
| 5795 | }; |
|
| 5796 | } |
|
| 5797 | function updateColor(hsv, hueUpdate) { |
|
| 5798 | var hue = (360 - hsv.h) / 360; |
|
| 5799 | funcs.css(huePointElm, { top: hue * 100 + '%' }); |
|
| 5800 | if (!hueUpdate) { |
|
| 5801 | funcs.css(svPointElm, { |
|
| 5802 | left: hsv.s + '%', |
|
| 5803 | top: 100 - hsv.v + '%' |
|
| 5804 | }); |
|
| 5805 | } |
|
| 5806 | svRootElm.style.background = global$g({ |
|
| 5807 | s: 100, |
|
| 5808 | v: 100, |
|
| 5809 | h: hsv.h |
|
| 5810 | }).toHex(); |
|
| 5811 | self.color().parse({ |
|
| 5812 | s: hsv.s, |
|
| 5813 | v: hsv.v, |
|
| 5814 | h: hsv.h |
|
| 5815 | }); |
|
| 5816 | } |
|
| 5817 | function updateSaturationAndValue(e) { |
|
| 5818 | var pos; |
|
| 5819 | pos = getPos(svRootElm, e); |
|
| 5820 | hsv.s = pos.x * 100; |
|
| 5821 | hsv.v = (1 - pos.y) * 100; |
|
| 5822 | updateColor(hsv); |
|
| 5823 | self.fire('change'); |
|
| 5824 | } |
|
| 5825 | function updateHue(e) { |
|
| 5826 | var pos; |
|
| 5827 | pos = getPos(hueRootElm, e); |
|
| 5828 | hsv = color.toHsv(); |
|
| 5829 | hsv.h = (1 - pos.y) * 360; |
|
| 5830 | updateColor(hsv, true); |
|
| 5831 | self.fire('change'); |
|
| 5832 | } |
|
| 5833 | self._repaint = function () { |
|
| 5834 | hsv = color.toHsv(); |
|
| 5835 | updateColor(hsv); |
|
| 5836 | }; |
|
| 5837 | self._super(); |
|
| 5838 | self._svdraghelper = new DragHelper(self._id + '-sv', { |
|
| 5839 | start: updateSaturationAndValue, |
|
| 5840 | drag: updateSaturationAndValue |
|
| 5841 | }); |
|
| 5842 | self._hdraghelper = new DragHelper(self._id + '-h', { |
|
| 5843 | start: updateHue, |
|
| 5844 | drag: updateHue |
|
| 5845 | }); |
|
| 5846 | self._repaint(); |
|
| 5847 | }, |
|
| 5848 | rgb: function () { |
|
| 5849 | return this.color().toRgb(); |
|
| 5850 | }, |
|
| @@ 5595-5665 (lines=71) @@ | ||
| 5592 | init: function (settings) { |
|
| 5593 | this._super(settings); |
|
| 5594 | }, |
|
| 5595 | postRender: function () { |
|
| 5596 | var self = this; |
|
| 5597 | var color = self.color(); |
|
| 5598 | var hsv, hueRootElm, huePointElm, svRootElm, svPointElm; |
|
| 5599 | hueRootElm = self.getEl('h'); |
|
| 5600 | huePointElm = self.getEl('hp'); |
|
| 5601 | svRootElm = self.getEl('sv'); |
|
| 5602 | svPointElm = self.getEl('svp'); |
|
| 5603 | function getPos(elm, event) { |
|
| 5604 | var pos = funcs.getPos(elm); |
|
| 5605 | var x, y; |
|
| 5606 | x = event.pageX - pos.x; |
|
| 5607 | y = event.pageY - pos.y; |
|
| 5608 | x = Math.max(0, Math.min(x / elm.clientWidth, 1)); |
|
| 5609 | y = Math.max(0, Math.min(y / elm.clientHeight, 1)); |
|
| 5610 | return { |
|
| 5611 | x: x, |
|
| 5612 | y: y |
|
| 5613 | }; |
|
| 5614 | } |
|
| 5615 | function updateColor(hsv, hueUpdate) { |
|
| 5616 | var hue = (360 - hsv.h) / 360; |
|
| 5617 | funcs.css(huePointElm, { top: hue * 100 + '%' }); |
|
| 5618 | if (!hueUpdate) { |
|
| 5619 | funcs.css(svPointElm, { |
|
| 5620 | left: hsv.s + '%', |
|
| 5621 | top: 100 - hsv.v + '%' |
|
| 5622 | }); |
|
| 5623 | } |
|
| 5624 | svRootElm.style.background = global$e({ |
|
| 5625 | s: 100, |
|
| 5626 | v: 100, |
|
| 5627 | h: hsv.h |
|
| 5628 | }).toHex(); |
|
| 5629 | self.color().parse({ |
|
| 5630 | s: hsv.s, |
|
| 5631 | v: hsv.v, |
|
| 5632 | h: hsv.h |
|
| 5633 | }); |
|
| 5634 | } |
|
| 5635 | function updateSaturationAndValue(e) { |
|
| 5636 | var pos; |
|
| 5637 | pos = getPos(svRootElm, e); |
|
| 5638 | hsv.s = pos.x * 100; |
|
| 5639 | hsv.v = (1 - pos.y) * 100; |
|
| 5640 | updateColor(hsv); |
|
| 5641 | self.fire('change'); |
|
| 5642 | } |
|
| 5643 | function updateHue(e) { |
|
| 5644 | var pos; |
|
| 5645 | pos = getPos(hueRootElm, e); |
|
| 5646 | hsv = color.toHsv(); |
|
| 5647 | hsv.h = (1 - pos.y) * 360; |
|
| 5648 | updateColor(hsv, true); |
|
| 5649 | self.fire('change'); |
|
| 5650 | } |
|
| 5651 | self._repaint = function () { |
|
| 5652 | hsv = color.toHsv(); |
|
| 5653 | updateColor(hsv); |
|
| 5654 | }; |
|
| 5655 | self._super(); |
|
| 5656 | self._svdraghelper = new DragHelper(self._id + '-sv', { |
|
| 5657 | start: updateSaturationAndValue, |
|
| 5658 | drag: updateSaturationAndValue |
|
| 5659 | }); |
|
| 5660 | self._hdraghelper = new DragHelper(self._id + '-h', { |
|
| 5661 | start: updateHue, |
|
| 5662 | drag: updateHue |
|
| 5663 | }); |
|
| 5664 | self._repaint(); |
|
| 5665 | }, |
|
| 5666 | rgb: function () { |
|
| 5667 | return this.color().toRgb(); |
|
| 5668 | }, |
|
