Mercurial > mbsePi-apps / file comparison
comparison: www-thermferm/jqwidgets/jqxmaterialcolorpicker.js
www-thermferm/jqwidgets/jqxmaterialcolorpicker.js
- changeset 709
- 5b6d7b640e52
- parent 708
- 13555c27b592
- child 710
- abe60578d695
equal
deleted
inserted
replaced
| 708:13555c27b592 | 709:5b6d7b640e52 |
|---|---|
| 1 /* tslint:disable */ | |
| 2 /* eslint-disable */ | |
| 3 (function ($) { | |
| 4 | |
| 5 $.jqx.jqxWidget('jqxMaterialColorPicker', '', {}); | |
| 6 | |
| 7 $.extend($.jqx._jqxMaterialColorPicker.prototype, { | |
| 8 defineInstance: function () { | |
| 9 var settings = { | |
| 10 events: ['colorchange'] | |
| 11 }; | |
| 12 if (this === $.jqx._jqxMaterialColorPicker.prototype) { | |
| 13 return settings; | |
| 14 } | |
| 15 $.extend(true, this, settings); | |
| 16 return settings; | |
| 17 }, | |
| 18 | |
| 19 createInstance: function () { | |
| 20 var that = this; | |
| 21 | |
| 22 that._renderGrid(); | |
| 23 that._addHandlers(); | |
| 24 }, | |
| 25 | |
| 26 _renderGrid() { | |
| 27 var that = this; | |
| 28 var labelsAndPaletteContainer = document.createElement('div'); | |
| 29 | |
| 30 that._renderShades(); | |
| 31 that._renderColorPalette(); | |
| 32 that._renderColorLabels(); | |
| 33 | |
| 34 labelsAndPaletteContainer.classList = 'jqx-labels-and-palette' | |
| 35 labelsAndPaletteContainer.appendChild(that._colorLabelsContainer); | |
| 36 labelsAndPaletteContainer.appendChild(that._paletteContainer); | |
| 37 that.element.appendChild(labelsAndPaletteContainer); | |
| 38 }, | |
| 39 | |
| 40 _renderColorPalette: function () { | |
| 41 var that = this; | |
| 42 var colorsArray = [ | |
| 43 ['#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252', '#ff1744', '#d50000'], | |
| 44 ['#fce4ec', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab', '#ff4081', '#f50057', '#c51162'], | |
| 45 ['#f3e5f5', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#6a1b9a', '#4a148c', '#ea80fc', '#e040fb', '#d500f9', '#aa00ff'], | |
| 46 ['#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#512da8', '#4527a0', '#311b92', '#b388ff', '#7c4dff', '#651fff', '#6200ea'], | |
| 47 ['#e8eaf6', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe'], | |
| 48 ['#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff', '#2962ff'], | |
| 49 ['#e1f5fe', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff', '#00b0ff', '#0091ea'], | |
| 50 ['#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', '#84ffff', '#18ffff', '#00e5ff', '#00b8d4'], | |
| 51 ['#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#004d40', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5'], | |
| 52 ['#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676', '#00c853'], | |
| 53 ['#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90', '#b2ff59', '#76ff03', '#64dd17'], | |
| 54 ['#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00'], | |
| 55 ['#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00', '#ffd600'], | |
| 56 ['#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f', '#ffd740', '#ffc400', '#ffab00'], | |
| 57 ['#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00'], | |
| 58 ['#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00', '#dd2c00'], | |
| 59 ['#efebe9', '#d7ccc8', '#bcaaa4', '#a1887f', '#8d6e63', '#795548', '#6d4c41', '#5d4037', '#4e342e', '#3e2723'], | |
| 60 ['#fafafa', '#f5f5f5', '#eeeeee', '#e0e0e0', '#bdbdbd', '#9e9e9e', '#757575', '#616161', '#424242', '#212121'], | |
| 61 ['#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c', '#607d8b', '#546e7a', '#455a64', '#37474f', '#263238'], | |
| 62 ] | |
| 63 var paletteContainer = document.createElement('div'); | |
| 64 | |
| 65 for (var index = 0, length = colorsArray.length; index < length; index++) { | |
| 66 var currentRow = colorsArray[index]; | |
| 67 var currentUl = that._renderRow(currentRow, 'jqx-color-cell', false); | |
| 68 | |
| 69 paletteContainer.appendChild(currentUl); | |
| 70 } | |
| 71 | |
| 72 paletteContainer.className = 'jqx-palette'; | |
| 73 that._paletteContainer = paletteContainer; | |
| 74 }, | |
| 75 | |
| 76 _renderShades: function () { | |
| 77 var that = this; | |
| 78 var shadesContainer = document.createElement('div'); | |
| 79 var shadesArray = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A 100', 'A 200', 'A 400', 'A 700']; | |
| 80 var shadesRow = that._renderRow(shadesArray, 'jqx-shade-cell', true); | |
| 81 | |
| 82 shadesContainer.className = 'jqx-shades'; | |
| 83 shadesContainer.appendChild(shadesRow); | |
| 84 that.element.appendChild(shadesContainer); | |
| 85 }, | |
| 86 | |
| 87 _renderColorLabels: function () { | |
| 88 var that = this; | |
| 89 var colorLabelsContainer = document.createElement('div'); | |
| 90 var colorLabelsArray = ['Red', 'Pink', 'Purple', 'Deep Purple', 'Indigo', 'Blue', 'Light Blue', 'Cyan', 'Teal', 'Green', 'Light Green', 'Lime', 'Yellow', 'Amber', 'Orange', 'Deep Orange', 'Brown', 'Grey', 'Blue Grey']; | |
| 91 var colorLabelsColumn = that._renderRow(colorLabelsArray, 'jqx-color-label', true); | |
| 92 | |
| 93 colorLabelsContainer.className = 'jqx-color-labels'; | |
| 94 colorLabelsContainer.appendChild(colorLabelsColumn); | |
| 95 that._colorLabelsContainer = colorLabelsContainer; | |
| 96 }, | |
| 97 | |
| 98 | |
| 99 _renderRow: function (array, cellClass, addInnerHtml) { | |
| 100 var ul = document.createElement('ul'); | |
| 101 | |
| 102 for (var index = 0, length = array.length; index < length; index++) { | |
| 103 var currentElement = array[index]; | |
| 104 var li = document.createElement('li'); | |
| 105 | |
| 106 if (addInnerHtml) { | |
| 107 li.innerHTML = currentElement; | |
| 108 } else { | |
| 109 li.style.background = currentElement; | |
| 110 li.setAttribute('data-color', currentElement); | |
| 111 } | |
| 112 | |
| 113 li.className = cellClass; | |
| 114 | |
| 115 ul.appendChild(li); | |
| 116 } | |
| 117 | |
| 118 return ul; | |
| 119 }, | |
| 120 | |
| 121 _addHandlers: function () { | |
| 122 var that = this; | |
| 123 | |
| 124 this.host.find('.jqx-color-cell').on('click', function () { | |
| 125 that._currentColorHex = event.target.getAttribute('data-color'); | |
| 126 that._currentColorRgb = event.target.style.background; | |
| 127 that._raiseEvent(0, { color: that.getColor() }); | |
| 128 }); | |
| 129 }, | |
| 130 | |
| 131 _raiseEvent: function (id, arg) { | |
| 132 if (arg == undefined) | |
| 133 arg = { owner: null }; | |
| 134 | |
| 135 var evt = this.events[id]; | |
| 136 var args = arg ? arg : {}; | |
| 137 | |
| 138 args.owner = this; | |
| 139 var event = new $.Event(evt); | |
| 140 event.owner = this; | |
| 141 event.args = args; | |
| 142 | |
| 143 var result = this.host.trigger(event); | |
| 144 | |
| 145 return result; | |
| 146 }, | |
| 147 | |
| 148 getColor: function () { | |
| 149 var that = this; | |
| 150 var rgb = that._currentColorRgb.match(/\d+/g); | |
| 151 | |
| 152 return { | |
| 153 hex: that._currentColorHex.substring(1), | |
| 154 r: parseInt(rgb[0]), | |
| 155 g: parseInt(rgb[1]), | |
| 156 b: parseInt(rgb[2]) | |
| 157 }; | |
| 158 }, | |
| 159 | |
| 160 destroy: function () { | |
| 161 var that = this; | |
| 162 | |
| 163 that.host.remove(); | |
| 164 } | |
| 165 }); | |
| 166 | |
| 167 })(jqxBaseFramework); |
