9 | 10 | 11 |
12 |13 | 14 | 15 |
16 |
9 | 10 | 11 |
12 |13 | 14 | 15 |
16 |
20 |
21 |
22 |
23 |
35 |
--------------------------------------------------------------------------------
/nativeColorPicker.js:
--------------------------------------------------------------------------------
1 | (function (window) {
2 | var document = window.document,
3 | nativeColorPicker = {
4 | // initialized flag
5 | started: false,
6 |
7 | // start color
8 | color: '#000000',
9 |
10 | // inputs where plugin was initialized
11 | inputs: {},
12 |
13 | // flag to know if color input is supported
14 | hasNativeColorSupport: false,
15 |
16 | // inits the plugin on specified input
17 | init: function (inputId) {
18 | // start the plugin
19 | this.start();
20 |
21 | if (this.hasNativeColorSupport) {
22 | return;
23 | }
24 |
25 | if (typeof inputId !== 'string') {
26 | throw 'inputId have to be a string id selector';
27 | }
28 |
29 | // set the input
30 | this.input = (this.inputs[inputId] = this.inputs[inputId]) || document.getElementById(inputId);
31 |
32 | if (!this.input) {
33 | throw 'There was no input found with id: "' + inputId + '"';
34 | }
35 |
36 | // input defaults
37 | this.input.value = this.color;
38 | this.input.unselectable = 'on';
39 | this.css(this.input, {
40 | backgroundColor: this.color,
41 | borderWidth: '0.4em 0.3em',
42 | width: '3em',
43 | cursor: 'default'
44 | });
45 |
46 | // register input event
47 | this.input.onfocus = function () {
48 | nativeColorPicker.onFocus(this.id);
49 | };
50 | },
51 |
52 | // initialize once
53 | start: function () {
54 | // is already started
55 | if (this.started) {
56 | return;
57 | }
58 |
59 | // test if browser has native support for color input
60 | try { this.hasNativeColorSupport = !!(document.createElement('input').type = 'color'); } catch (e) {};
61 |
62 | // no native support...
63 | if (!this.hasNativeColorSupport) {
64 | // create object element
65 | var object_element = document.createElement('object');
66 | object_element.classid = 'clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b';
67 | // set attributes
68 | object_element.id = 'colorHelperObj';
69 | this.css(object_element, {
70 | width: '0',
71 | height: '0'
72 | });
73 | document.body.appendChild(object_element);
74 | }
75 | // mark as started
76 | this.started = true;
77 | },
78 |
79 | // destroys the plugin
80 | destroy: function (inputId) {
81 | var i;
82 | // destroy one input or all the plugin if no input id
83 | if (typeof inputId === 'string') {
84 | this.off(this.inputs[inputId]);
85 | } else {
86 | // remove helper object
87 | document.body.removeChild(document.getElementById('colorHelperObj'));
88 | // remove input events and styles
89 | for (i in this.inputs) {
90 | this.off(this.inputs[i]);
91 | }
92 | // mark not started
93 | this.started = false;
94 | }
95 | },
96 |
97 | off: function (input) {
98 | input.onfocus = null;
99 | this.css(input, {
100 | backgroundColor: '',
101 | borderWidth: '',
102 | width: '',
103 | cursor: ''
104 | });
105 | },
106 |
107 | // input focus function
108 | onFocus: function (inputId) {
109 | this.input = this.inputs[inputId];
110 | this.color = this.getColor();
111 | this.input.value = this.color;
112 | nativeColorPicker.css(this.input, {
113 | backgroundColor: this.color,
114 | color: this.color
115 | });
116 | this.input.blur();
117 | },
118 |
119 | // gets the color from the object
120 | // and normalize it
121 | getColor: function () {
122 | // get decimal color, (passing the previous one)
123 | // and change to hex
124 | var hex = colorHelperObj.ChooseColorDlg(this.color.replace(/#/, '')).toString(16);
125 |
126 | // add extra zeroes if hex number is less than 6 digits
127 | if (hex.length < 6) {
128 | var tmpstr = '000000'.substring(0, 6 - hex.length);
129 | hex = tmpstr.concat(hex);
130 | }
131 |
132 | return '#' + hex;
133 | },
134 |
135 | // set css properties
136 | css: function (el, props) {
137 | for (var prop in props) {
138 | el.style[prop] = props[prop];
139 | }
140 | }
141 | };
142 |
143 | // expose to global
144 | window.nativeColorPicker = nativeColorPicker;
145 | }(window));
146 |
--------------------------------------------------------------------------------