`;
6 | }
7 | },
8 |
9 | init: function(api, options) {
10 | this.options = $.extend(this.defaults, options);
11 | api.$trigger = $(this.options.template.call(this, api.namespace));
12 | this.$triggerInner = api.$trigger.children('span');
13 |
14 | api.$trigger.insertAfter(api.$element);
15 | api.$trigger.on('click', () => {
16 | if (!api.opened) {
17 | api.open();
18 | } else {
19 | api.close();
20 | }
21 | return false;
22 | });
23 | const that = this;
24 | api.$element.on('asColorPicker::update', (e, api, color, gradient) => {
25 | if (typeof gradient === 'undefined') {
26 | gradient = false;
27 | }
28 | that.update(color, gradient);
29 | });
30 |
31 | this.update(api.color);
32 | },
33 |
34 | update: function(color, gradient) {
35 | if (gradient) {
36 | this.$triggerInner.css('background', gradient.toString(true));
37 | } else {
38 | this.$triggerInner.css('background', color.toRGBA());
39 | }
40 | },
41 |
42 | destroy: function(api) {
43 | api.$trigger.remove();
44 | }
45 | };
46 |
--------------------------------------------------------------------------------
/src/keyboard.js:
--------------------------------------------------------------------------------
1 | // keyboard
2 | import $ from 'jquery';
3 |
4 | const $doc = $(document);
5 | const keyboard = {
6 | keys: {
7 | 'UP': 38,
8 | 'DOWN': 40,
9 | 'LEFT': 37,
10 | 'RIGHT': 39,
11 | 'RETURN': 13,
12 | 'ESCAPE': 27,
13 | 'BACKSPACE': 8,
14 | 'SPACE': 32
15 | },
16 | map: {},
17 | bound: false,
18 | press(e) {
19 | const key = e.keyCode || e.which;
20 | if (key in keyboard.map && typeof keyboard.map[key] === 'function') {
21 | keyboard.map[key](e);
22 | }
23 | return false;
24 | },
25 | attach(map) {
26 | let key;
27 | let up;
28 | for (key in map) {
29 | if (map.hasOwnProperty(key)) {
30 | up = key.toUpperCase();
31 | if (up in keyboard.keys) {
32 | keyboard.map[keyboard.keys[up]] = map[key];
33 | } else {
34 | keyboard.map[up] = map[key];
35 | }
36 | }
37 | }
38 | if (!keyboard.bound) {
39 | keyboard.bound = true;
40 | $doc.bind('keydown', keyboard.press);
41 | }
42 | },
43 | detach() {
44 | keyboard.bound = false;
45 | keyboard.map = {};
46 | $doc.unbind('keydown', keyboard.press);
47 | }
48 | };
49 | $doc.on('asColorPicker::init', (event, instance) => {
50 | if (instance.options.keyboard === true) {
51 | instance._keyboard = keyboard;
52 | }
53 | });
54 |
--------------------------------------------------------------------------------
/gulp/tasks/assets.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import config from '../../config';
4 | import merge from 'merge-stream';
5 | import gulp from 'gulp';
6 | import notify from 'gulp-notify';
7 | import AssetsManager from 'assets-manager';
8 | import {argv} from 'yargs';
9 |
10 | function getPackage() {
11 | if (argv.package) {
12 | return argv.package;
13 | }
14 | return null;
15 | }
16 |
17 | /*
18 | * Checkout https://github.com/amazingSurge/assets-manager
19 | */
20 | export function copy(options = config.assets, message = 'Assets task complete') {
21 | return function (done) {
22 | let pkgName = getPackage();
23 | const manager = new AssetsManager('manifest.json', options);
24 |
25 | if(pkgName) {
26 | manager.copyPackage(pkgName).then(()=>{
27 | done();
28 | });
29 | } else {
30 | manager.copyPackages().then(()=>{
31 | done();
32 | });
33 | }
34 | }
35 | }
36 |
37 | export function clean(options = config.assets, message = 'Assets clean task complete') {
38 | return function (done) {
39 | let pkgName = getPackage();
40 | const manager = new AssetsManager('manifest.json', options);
41 |
42 | if(pkgName) {
43 | manager.cleanPackage(pkgName).then(()=>{
44 | done();
45 | });
46 | } else {
47 | manager.cleanPackages().then(()=>{
48 | done();
49 | });
50 | }
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | ##################################
2 | # project-specific.gitattributes #
3 | ##################################
4 |
5 |
6 | ###########################
7 | # documents.gitattributes #
8 | ###########################
9 | *.doc diff=astextplain
10 | *.docx diff=astextplain
11 | *.dot diff=astextplain
12 | *.pdf diff=astextplain
13 | *.rtf diff=astextplain
14 | *.css text eol=lf
15 | *.scss text eol=lf
16 | *.less text eol=lf
17 | *.html text eol=lf
18 | *.js text eol=lf
19 | *.json text eol=lf
20 | *.md text eol=lf
21 | *.txt text eol=lf
22 | *.hbs text eol=lf
23 | *.mustache text eol=lf
24 | *.xml text eol=lf
25 | *.csv text eol=lf
26 | *.tab text eol=lf
27 | *.tsv text eol=lf
28 | *.sql text eol=lf
29 |
30 | ############################
31 | ### graphics.gitattributes #
32 | ############################
33 | *.png binary
34 | *.jpg binary
35 | *.jpeg binary
36 | *.gif binary
37 | *.tif binary
38 | *.tiff binary
39 | *.ico binary
40 | *.svg binary
41 | *.eps binary
42 | *.psd binary
43 | *.ai binary
44 |
45 | ###########################
46 | # git-crypt.gitattributes #
47 | ###########################
48 | vault_* binary filter=git-crypt diff=git-crypt
49 | vault.* binary filter=git-crypt diff=git-crypt
50 |
51 | #######################
52 | # shell.gitattributes #
53 | #######################
54 | # Linux
55 | *.sh text eol=lf
56 |
57 | # Windows
58 | *.bat text eol=crlf
59 | *.cmd text eol=crlf
60 | *.ps1 text eol=crlf
--------------------------------------------------------------------------------
/src/components/buttons.js:
--------------------------------------------------------------------------------
1 | // buttons
2 | export default {
3 | defaults: {
4 | apply: false,
5 | cancel: true,
6 | applyText: null,
7 | cancelText: null,
8 | template(namespace) {
9 | return ``;
10 | },
11 | applyTemplate(namespace) {
12 | return `${this.options.applyText}`;
13 | },
14 | cancelTemplate(namespace) {
15 | return `${this.options.cancelText}`;
16 | }
17 | },
18 |
19 | init: function(api, options) {
20 | const that = this;
21 |
22 | this.options = $.extend(this.defaults, {
23 | applyText: api.getString('applyText', 'apply'),
24 | cancelText: api.getString('cancelText', 'cancel')
25 | }, options);
26 | this.$buttons = $(this.options.template.call(this, api.namespace)).appendTo(api.$dropdown);
27 |
28 | api.$element.on('asColorPicker::firstOpen', () => {
29 | if (that.options.apply) {
30 | that.$apply = $(that.options.applyTemplate.call(that, api.namespace)).appendTo(that.$buttons).on('click', () => {
31 | api.apply();
32 | return false;
33 | });
34 | }
35 |
36 | if (that.options.cancel) {
37 | that.$cancel = $(that.options.cancelTemplate.call(that, api.namespace)).appendTo(that.$buttons).on('click', () => {
38 | api.cancel();
39 | return false;
40 | });
41 | }
42 | });
43 | }
44 | };
45 |
--------------------------------------------------------------------------------
/src/components/preview.js:
--------------------------------------------------------------------------------
1 | // preview
2 | export default {
3 | defaults: {
4 | template(namespace) {
5 | return `
`;
8 | }
9 | },
10 |
11 | width: 0,
12 | height: 0,
13 | size: 6,
14 | data: {},
15 |
16 | init: function(api, options) {
17 | const that = this;
18 | this.options = $.extend(this.defaults, options);
19 | this.api = api;
20 |
21 | //build element and add component to picker
22 | this.$saturation = $(this.options.template.call(that, api.namespace)).appendTo(api.$dropdown);
23 | this.$handle = this.$saturation.find('i');
24 |
25 | api.$element.on('asColorPicker::firstOpen', () => {
26 | // init variable
27 | that.width = that.$saturation.width();
28 | that.height = that.$saturation.height();
29 | that.step = {
30 | left: that.width / 20,
31 | top: that.height / 20
32 | };
33 | that.size = that.$handle.width() / 2;
34 |
35 | // bind events
36 | that.bindEvents();
37 | that.keyboard(api);
38 | });
39 |
40 | api.$element.on('asColorPicker::update asColorPicker::setup', (e, api, color) => {
41 | that.update(color);
42 | });
43 | },
44 |
45 | bindEvents: function() {
46 | const that = this;
47 |
48 | this.$saturation.on(this.api.eventName('mousedown'), e => {
49 | const rightclick = (e.which) ? (e.which === 3) : (e.button === 2);
50 | if (rightclick) {
51 | return false;
52 | }
53 | that.mousedown(e);
54 | });
55 | },
56 |
57 | mousedown: function(e) {
58 | const offset = this.$saturation.offset();
59 |
60 | this.data.startY = e.pageY;
61 | this.data.startX = e.pageX;
62 | this.data.top = e.pageY - offset.top;
63 | this.data.left = e.pageX - offset.left;
64 | this.data.cach = {};
65 |
66 | this.move(this.data.left, this.data.top);
67 |
68 | this.mousemove = function(e) {
69 | const x = this.data.left + (e.pageX || this.data.startX) - this.data.startX;
70 | const y = this.data.top + (e.pageY || this.data.startY) - this.data.startY;
71 | this.move(x, y);
72 | return false;
73 | };
74 |
75 | this.mouseup = function() {
76 | $(document).off({
77 | mousemove: this.mousemove,
78 | mouseup: this.mouseup
79 | });
80 | this.data.left = this.data.cach.left;
81 | this.data.top = this.data.cach.top;
82 |
83 | return false;
84 | };
85 |
86 | $(document).on({
87 | mousemove: $.proxy(this.mousemove, this),
88 | mouseup: $.proxy(this.mouseup, this)
89 | });
90 |
91 | return false;
92 | },
93 |
94 | move: function(x, y, update) {
95 | y = Math.max(0, Math.min(this.height, y));
96 | x = Math.max(0, Math.min(this.width, x));
97 |
98 | if (this.data.cach === undefined) {
99 | this.data.cach = {};
100 | }
101 | this.data.cach.left = x;
102 | this.data.cach.top = y;
103 |
104 | this.$handle.css({
105 | top: y - this.size,
106 | left: x - this.size
107 | });
108 |
109 | if (update !== false) {
110 | this.api.set({
111 | s: x / this.width,
112 | v: 1 - (y / this.height)
113 | });
114 | }
115 | },
116 |
117 | update: function(color) {
118 | if (color.value.h === undefined) {
119 | color.value.h = 0;
120 | }
121 | this.$saturation.css('backgroundColor', AsColor.HSLtoHEX({
122 | h: color.value.h,
123 | s: 1,
124 | l: 0.5
125 | }));
126 |
127 | const x = color.value.s * this.width;
128 | const y = (1 - color.value.v) * this.height;
129 |
130 | this.move(x, y, false);
131 | },
132 |
133 | moveLeft: function() {
134 | const step = this.step.left;
135 | const data = this.data;
136 | data.left = Math.max(0, Math.min(this.width, data.left - step));
137 | this.move(data.left, data.top);
138 | },
139 |
140 | moveRight: function() {
141 | const step = this.step.left;
142 | const data = this.data;
143 | data.left = Math.max(0, Math.min(this.width, data.left + step));
144 | this.move(data.left, data.top);
145 | },
146 |
147 | moveUp: function() {
148 | const step = this.step.top;
149 | const data = this.data;
150 | data.top = Math.max(0, Math.min(this.width, data.top - step));
151 | this.move(data.left, data.top);
152 | },
153 |
154 | moveDown: function() {
155 | const step = this.step.top;
156 | const data = this.data;
157 | data.top = Math.max(0, Math.min(this.width, data.top + step));
158 | this.move(data.left, data.top);
159 | },
160 |
161 | keyboard: function() {
162 | let keyboard;
163 | const that = this;
164 | if (this.api._keyboard) {
165 | keyboard = $.extend(true, {}, this.api._keyboard);
166 | } else {
167 | return false;
168 | }
169 |
170 | this.$saturation.attr('tabindex', '0').on('focus', () => {
171 | keyboard.attach({
172 | left() {
173 | that.moveLeft();
174 | },
175 | right() {
176 | that.moveRight();
177 | },
178 | up() {
179 | that.moveUp();
180 | },
181 | down() {
182 | that.moveDown();
183 | }
184 | });
185 | return false;
186 | }).on('blur', () => {
187 | keyboard.detach();
188 | });
189 | },
190 |
191 | destroy: function() {
192 | $(document).off({
193 | mousemove: this.mousemove,
194 | mouseup: this.mouseup
195 | });
196 | }
197 | };
198 |
--------------------------------------------------------------------------------
/src/components/hue.js:
--------------------------------------------------------------------------------
1 | // hue
2 | export default {
3 | size: 150,
4 |
5 | defaults: {
6 | direction: 'vertical', // horizontal
7 | template() {
8 | const namespace = this.api.namespace;
9 | return `
`;
10 | }
11 | },
12 |
13 | data: {},
14 |
15 | init: function(api, options) {
16 | const that = this;
17 |
18 | this.options = $.extend(this.defaults, options);
19 | this.direction = this.options.direction;
20 | this.api = api;
21 |
22 | this.$hue = $(this.options.template.call(that)).appendTo(api.$dropdown);
23 | this.$handle = this.$hue.find('i');
24 |
25 | api.$element.on('asColorPicker::firstOpen', () => {
26 | // init variable
27 | if (that.direction === 'vertical') {
28 | that.size = that.$hue.height();
29 | } else {
30 | that.size = that.$hue.width();
31 | }
32 | that.step = that.size / 360;
33 |
34 | // bind events
35 | that.bindEvents(api);
36 | that.keyboard(api);
37 | });
38 |
39 | api.$element.on('asColorPicker::update asColorPicker::setup', (e, api, color) => {
40 | that.update(color);
41 | });
42 | },
43 |
44 | bindEvents: function() {
45 | const that = this;
46 | this.$hue.on(this.api.eventName('mousedown'), e => {
47 | const rightclick = (e.which) ? (e.which === 3) : (e.button === 2);
48 | if (rightclick) {
49 | return false;
50 | }
51 | $.proxy(that.mousedown, that)(e);
52 | });
53 | },
54 |
55 | mousedown: function(e) {
56 | const offset = this.$hue.offset();
57 | if (this.direction === 'vertical') {
58 | this.data.startY = e.pageY;
59 | this.data.top = e.pageY - offset.top;
60 | this.move(this.data.top);
61 | } else {
62 | this.data.startX = e.pageX;
63 | this.data.left = e.pageX - offset.left;
64 | this.move(this.data.left);
65 | }
66 |
67 | this.mousemove = function(e) {
68 | let position;
69 | if (this.direction === 'vertical') {
70 | position = this.data.top + (e.pageY || this.data.startY) - this.data.startY;
71 | } else {
72 | position = this.data.left + (e.pageX || this.data.startX) - this.data.startX;
73 | }
74 |
75 | this.move(position);
76 | return false;
77 | };
78 |
79 | this.mouseup = function() {
80 | $(document).off({
81 | mousemove: this.mousemove,
82 | mouseup: this.mouseup
83 | });
84 | if (this.direction === 'vertical') {
85 | this.data.top = this.data.cach;
86 | } else {
87 | this.data.left = this.data.cach;
88 | }
89 |
90 | return false;
91 | };
92 |
93 | $(document).on({
94 | mousemove: $.proxy(this.mousemove, this),
95 | mouseup: $.proxy(this.mouseup, this)
96 | });
97 |
98 | return false;
99 | },
100 |
101 | move: function(position, hub, update) {
102 | position = Math.max(0, Math.min(this.size, position));
103 | this.data.cach = position;
104 | if (typeof hub === 'undefined') {
105 | hub = (1 - position / this.size) * 360;
106 | }
107 | hub = Math.max(0, Math.min(360, hub));
108 | if (this.direction === 'vertical') {
109 | this.$handle.css({
110 | top: position
111 | });
112 | } else {
113 | this.$handle.css({
114 | left: position
115 | });
116 | }
117 | if (update !== false) {
118 | this.api.set({
119 | h: hub
120 | });
121 | }
122 | },
123 |
124 | moveLeft: function() {
125 | const step = this.step;
126 | const data = this.data;
127 | data.left = Math.max(0, Math.min(this.width, data.left - step));
128 | this.move(data.left);
129 | },
130 |
131 | moveRight: function() {
132 | const step = this.step;
133 | const data = this.data;
134 | data.left = Math.max(0, Math.min(this.width, data.left + step));
135 | this.move(data.left);
136 | },
137 |
138 | moveUp: function() {
139 | const step = this.step;
140 | const data = this.data;
141 | data.top = Math.max(0, Math.min(this.width, data.top - step));
142 | this.move(data.top);
143 | },
144 |
145 | moveDown: function() {
146 | const step = this.step;
147 | const data = this.data;
148 | data.top = Math.max(0, Math.min(this.width, data.top + step));
149 | this.move(data.top);
150 | },
151 |
152 | keyboard: function() {
153 | let keyboard;
154 | const that = this;
155 | if (this.api._keyboard) {
156 | keyboard = $.extend(true, {}, this.api._keyboard);
157 | } else {
158 | return false;
159 | }
160 |
161 | this.$hue.attr('tabindex', '0').on('focus', function() {
162 | if (this.direction === 'vertical') {
163 | keyboard.attach({
164 | up() {
165 | that.moveUp();
166 | },
167 | down() {
168 | that.moveDown();
169 | }
170 | });
171 | } else {
172 | keyboard.attach({
173 | left() {
174 | that.moveLeft();
175 | },
176 | right() {
177 | that.moveRight();
178 | }
179 | });
180 | }
181 | return false;
182 | }).on('blur', () => {
183 | keyboard.detach();
184 | });
185 | },
186 |
187 | update: function(color) {
188 | const position = (color.value.h === 0) ? 0 : this.size * (1 - color.value.h / 360);
189 | this.move(position, color.value.h, false);
190 | },
191 |
192 | destroy: function() {
193 | $(document).off({
194 | mousemove: this.mousemove,
195 | mouseup: this.mouseup
196 | });
197 | }
198 | };
199 |
--------------------------------------------------------------------------------
/src/components/alpha.js:
--------------------------------------------------------------------------------
1 | // alpha
2 | export default {
3 | size: 150,
4 |
5 | defaults: {
6 | direction: 'vertical', // horizontal
7 | template(namespace) {
8 | return `
`;
9 | }
10 | },
11 |
12 | data: {},
13 |
14 | init: function(api, options) {
15 | const that = this;
16 |
17 | this.options = $.extend(this.defaults, options);
18 | that.direction = this.options.direction;
19 | this.api = api;
20 |
21 | this.$alpha = $(this.options.template.call(that, api.namespace)).appendTo(api.$dropdown);
22 | this.$handle = this.$alpha.find('i');
23 |
24 | api.$element.on('asColorPicker::firstOpen', () => {
25 | // init variable
26 | if (that.direction === 'vertical') {
27 | that.size = that.$alpha.height();
28 | } else {
29 | that.size = that.$alpha.width();
30 | }
31 | that.step = that.size / 360;
32 |
33 | // bind events
34 | that.bindEvents();
35 | that.keyboard();
36 | });
37 |
38 | api.$element.on('asColorPicker::update asColorPicker::setup', (e, api, color) => {
39 | that.update(color);
40 | });
41 | },
42 |
43 | bindEvents: function() {
44 | const that = this;
45 | this.$alpha.on(this.api.eventName('mousedown'), e => {
46 | const rightclick = (e.which) ? (e.which === 3) : (e.button === 2);
47 | if (rightclick) {
48 | return false;
49 | }
50 | $.proxy(that.mousedown, that)(e);
51 | });
52 | },
53 |
54 | mousedown: function(e) {
55 | const offset = this.$alpha.offset();
56 | if (this.direction === 'vertical') {
57 | this.data.startY = e.pageY;
58 | this.data.top = e.pageY - offset.top;
59 | this.move(this.data.top);
60 | } else {
61 | this.data.startX = e.pageX;
62 | this.data.left = e.pageX - offset.left;
63 | this.move(this.data.left);
64 | }
65 |
66 | this.mousemove = function(e) {
67 | let position;
68 | if (this.direction === 'vertical') {
69 | position = this.data.top + (e.pageY || this.data.startY) - this.data.startY;
70 | } else {
71 | position = this.data.left + (e.pageX || this.data.startX) - this.data.startX;
72 | }
73 |
74 | this.move(position);
75 | return false;
76 | };
77 |
78 | this.mouseup = function() {
79 | $(document).off({
80 | mousemove: this.mousemove,
81 | mouseup: this.mouseup
82 | });
83 | if (this.direction === 'vertical') {
84 | this.data.top = this.data.cach;
85 | } else {
86 | this.data.left = this.data.cach;
87 | }
88 |
89 | return false;
90 | };
91 |
92 | $(document).on({
93 | mousemove: $.proxy(this.mousemove, this),
94 | mouseup: $.proxy(this.mouseup, this)
95 | });
96 | return false;
97 | },
98 |
99 | move: function(position, alpha, update) {
100 | position = Math.max(0, Math.min(this.size, position));
101 | this.data.cach = position;
102 | if (typeof alpha === 'undefined') {
103 | alpha = 1 - (position / this.size);
104 | }
105 | alpha = Math.max(0, Math.min(1, alpha));
106 | if (this.direction === 'vertical') {
107 | this.$handle.css({
108 | top: position
109 | });
110 | } else {
111 | this.$handle.css({
112 | left: position
113 | });
114 | }
115 |
116 | if (update !== false) {
117 | this.api.set({
118 | a: Math.round(alpha * 100) / 100
119 | });
120 | }
121 | },
122 |
123 | moveLeft: function() {
124 | const step = this.step;
125 | const data = this.data;
126 | data.left = Math.max(0, Math.min(this.width, data.left - step));
127 | this.move(data.left);
128 | },
129 |
130 | moveRight: function() {
131 | const step = this.step;
132 | const data = this.data;
133 | data.left = Math.max(0, Math.min(this.width, data.left + step));
134 | this.move(data.left);
135 | },
136 |
137 | moveUp: function() {
138 | const step = this.step;
139 | const data = this.data;
140 | data.top = Math.max(0, Math.min(this.width, data.top - step));
141 | this.move(data.top);
142 | },
143 |
144 | moveDown: function() {
145 | const step = this.step;
146 | const data = this.data;
147 | data.top = Math.max(0, Math.min(this.width, data.top + step));
148 | this.move(data.top);
149 | },
150 |
151 | keyboard: function() {
152 | let keyboard;
153 | const that = this;
154 | if (this.api._keyboard) {
155 | keyboard = $.extend(true, {}, this.api._keyboard);
156 | } else {
157 | return false;
158 | }
159 |
160 | this.$alpha.attr('tabindex', '0').on('focus', function() {
161 | if (this.direction === 'vertical') {
162 | keyboard.attach({
163 | up() {
164 | that.moveUp();
165 | },
166 | down() {
167 | that.moveDown();
168 | }
169 | });
170 | } else {
171 | keyboard.attach({
172 | left() {
173 | that.moveLeft();
174 | },
175 | right() {
176 | that.moveRight();
177 | }
178 | });
179 | }
180 | return false;
181 | }).on('blur', () => {
182 | keyboard.detach();
183 | });
184 | },
185 |
186 | update: function(color) {
187 | const position = this.size * (1 - color.value.a);
188 | this.$alpha.css('backgroundColor', color.toHEX());
189 |
190 | this.move(position, color.value.a, false);
191 | },
192 |
193 | destroy: function() {
194 | $(document).off({
195 | mousemove: this.mousemove,
196 | mouseup: this.mouseup
197 | });
198 | }
199 | };
200 |
--------------------------------------------------------------------------------
/dist/css/asColorPicker.min.css:
--------------------------------------------------------------------------------
1 | /**
2 | * asColorPicker v0.4.4
3 | * https://github.com/amazingSurge/jquery-asColorPicker
4 | *
5 | * Copyright (c) amazingSurge
6 | * Released under the LGPL-3.0 license
7 | */
8 | .asColorPicker-wrap{position:relative;display:inline-block}.asColorPicker_hideInput,.asColorPicker_hideInput .asColorPicker-clear{display:none}.asColorPicker-dropdown{position:absolute;z-index:9999;display:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.asColorPicker-dropdown *{padding:0;margin:0}.asColorPicker_open{display:block}.asColorPicker-mask{position:fixed;top:0;left:0;z-index:9998;width:100%;height:100%}.asColorPicker-trigger{position:relative;display:inline-block;width:18px;height:20px;cursor:pointer;background-image:url(../images/transparent.png)}.asColorPicker-trigger span{display:inline-block;width:100%;height:100%}.asColorPicker-input,.asColorPicker-trigger{vertical-align:middle}.asColorPicker-clear{position:absolute;top:0;right:26px;display:none;color:#777;text-decoration:none}.asColorPicker-clear:after{content:"x"}.asColorPicker-wrap:hover .asColorPicker-clear{display:inline-block}.asColorPicker-preview{float:left;list-style:none}.asColorPicker-preview li{display:inline-block;vertical-align:top;background-image:url(../images/transparent.png);*display:inline;*zoom:1}.asColorPicker-preview li span{display:block;height:100%}.asColorPicker-preview-previous{cursor:pointer}.asColorPicker-palettes ul{display:block}.asColorPicker-palettes ul:after,.asColorPicker-palettes ul:before{display:table;content:""}.asColorPicker-palettes ul:after{clear:both}.asColorPicker-palettes li{display:block;float:left;overflow:hidden;text-indent:100%;white-space:nowrap;cursor:pointer;background-image:url(../images/transparent.png)}.asColorPicker-palettes li span{display:block;height:100%}.asColorPicker-saturation{position:relative;display:inline-block;width:175px;height:175px;clear:both;background-image:url(../images/saturation.png);*display:inline;*zoom:1}.asColorPicker-saturation i{position:absolute}.asColorPicker-alpha,.asColorPicker-hue{position:relative;display:inline-block;width:20px;height:175px;cursor:pointer;*display:inline;*zoom:1}.asColorPicker-alpha i,.asColorPicker-hue i{position:absolute;cursor:row-resize}.asColorPicker-hue{background-image:url(../images/hue.png)}.asColorPicker-alpha{background-image:url(../images/alpha.png)}.asColorPicker-buttons a,.asColorPicker-gradient-control a{text-decoration:none;cursor:pointer}.asColorPicker-gradient{display:none}.asColorPicker-gradient_enable{display:block}.asColorPicker-gradient-preview{float:left;height:20px}.asColorPicker-gradient-markers{position:relative;width:100%}.asColorPicker-gradient-marker{position:absolute;outline:none}.asColorPicker-gradient-wheel{position:relative;float:left;width:20px;height:20px;border:1px solid #bbb;border-radius:100%}.asColorPicker-gradient-wheel i{position:absolute;width:3px;height:3px;border-radius:100%}.asColorPicker-gradient-angle{float:left}.asColorPicker-dropdown{min-width:205px;max-width:235px;padding:10px;background:#fefefe;border:1px solid #bbb}[data-mode=palettes] .asColorPicker-dropdown{min-width:auto;max-width:auto}.asColorPicker-trigger{border:1px solid #bbb}.asColorPicker-saturation{-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.asColorPicker-saturation i{width:5px;height:5px;margin-top:-2px;margin-left:-2px;border:2px solid #fff;border-radius:100%}.asColorPicker-alpha,.asColorPicker-hue{margin-left:10px;-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.asColorPicker-alpha i,.asColorPicker-hue i{left:-2px;width:20px;height:2px;margin-top:-2px;border:2px solid #fff}.asColorPicker-preview{position:relative;height:33px;margin-right:10px;margin-bottom:10px}.asColorPicker-preview:after{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;content:"";-webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.asColorPicker-preview li{width:48px;height:33px}.asColorPicker-hex{width:100px;border-color:rgba(0,0,0,.05)}.asColorPicker-palettes li{width:21px;height:15px;margin-right:6px;margin-bottom:3px}.asColorPicker-palettes li span{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid rgba(0,0,0,.05)}.asColorPicker-palettes li:nth-child(5n){margin-right:0}[data-mode=palettes] .asColorPicker-palettes li:nth-child(5n){margin-right:6px}.asColorPicker-buttons,.asColorPicker-gradient-control{float:right}.asColorPicker-buttons a,.asColorPicker-gradient-control a{margin-left:5px}.asColorPicker-gradient{padding-top:20px;margin-top:10px;border-top:1px solid rgba(0,0,0,.05)}.asColorPicker-gradient-preview{position:relative;width:160px;border:1px solid rgba(0,0,0,.05)}.asColorPicker-gradient-preview:after{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;content:"";background-image:url(../images/transparent.png)}.asColorPicker-gradient-markers{top:-16px;display:block;width:160px;height:16px;padding:0;margin:0;list-style:none}.asColorPicker-gradient-marker{width:10px;height:10px;margin-left:-6px;background:#fff;border:1px solid #bbb}.asColorPicker-gradient-marker span{display:block;width:100%;height:100%}.asColorPicker-gradient-marker i{position:absolute;bottom:-3px;left:2px;width:4px;height:4px;background:#fff;border:1px solid transparent;border-right-color:rgba(0,0,0,.05);border-bottom-color:rgba(0,0,0,.05);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.asColorPicker-gradient-marker_active{z-index:1;border:2px solid #41a9e5}.asColorPicker-gradient-marker_active i{left:1px;border:2px solid transparent;border-right-color:#41a9e5;border-bottom-color:#41a9e5}.asColorPicker-gradient-wheel{margin-left:10px}.asColorPicker-gradient-wheel i{background-color:#888}.asColorPicker-gradient-angle{width:24px;margin-left:10px}
9 | /*# sourceMappingURL=asColorPicker.min.css.map */
10 |
--------------------------------------------------------------------------------
/examples/js/jquery.toc.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * toc - jQuery Table of Contents Plugin
3 | * v0.3.2
4 | * http://projects.jga.me/toc/
5 | * copyright Greg Allen 2014
6 | * MIT License
7 | */
8 | /*!
9 | * smooth-scroller - Javascript lib to handle smooth scrolling
10 | * v0.1.2
11 | * https://github.com/firstandthird/smooth-scroller
12 | * copyright First+Third 2014
13 | * MIT License
14 | */
15 | //smooth-scroller.js
16 |
17 | (function($) {
18 | $.fn.smoothScroller = function(options) {
19 | options = $.extend({}, $.fn.smoothScroller.defaults, options);
20 | var el = $(this);
21 |
22 | $(options.scrollEl).animate({
23 | scrollTop: el.offset().top - $(options.scrollEl).offset().top - options.offset
24 | }, options.speed, options.ease, function() {
25 | var hash = el.attr('id');
26 |
27 | if(hash.length) {
28 | if(history.pushState) {
29 | history.pushState(null, null, '#' + hash);
30 | } else {
31 | document.location.hash = hash;
32 | }
33 | }
34 |
35 | el.trigger('smoothScrollerComplete');
36 | });
37 |
38 | return this;
39 | };
40 |
41 | $.fn.smoothScroller.defaults = {
42 | speed: 400,
43 | ease: 'swing',
44 | scrollEl: 'body,html',
45 | offset: 0
46 | };
47 |
48 | $('body').on('click', '[data-smoothscroller]', function(e) {
49 | e.preventDefault();
50 | var href = $(this).attr('href');
51 |
52 | if(href.indexOf('#') === 0) {
53 | $(href).smoothScroller();
54 | }
55 | });
56 | }(jQuery));
57 |
58 | (function($) {
59 | var verboseIdCache = {};
60 | $.fn.toc = function(options) {
61 | var self = this;
62 | var opts = $.extend({}, jQuery.fn.toc.defaults, options);
63 |
64 | var container = $(opts.container);
65 | var headings = $(opts.selectors, container);
66 | var headingOffsets = [];
67 | var activeClassName = opts.activeClass;
68 |
69 | var scrollTo = function(e, callback) {
70 | if (opts.smoothScrolling && typeof opts.smoothScrolling === 'function') {
71 | e.preventDefault();
72 | var elScrollTo = $(e.target).attr('href');
73 |
74 | opts.smoothScrolling(elScrollTo, opts, callback);
75 | }
76 | $('li', self).removeClass(activeClassName);
77 | $(e.target).parent().addClass(activeClassName);
78 | };
79 |
80 | //highlight on scroll
81 | var timeout;
82 | var highlightOnScroll = function(e) {
83 | if (timeout) {
84 | clearTimeout(timeout);
85 | }
86 | timeout = setTimeout(function() {
87 | var top = $(window).scrollTop(),
88 | highlighted, closest = Number.MAX_VALUE, index = 0;
89 |
90 | for (var i = 0, c = headingOffsets.length; i < c; i++) {
91 | var currentClosest = Math.abs(headingOffsets[i] - top);
92 | if (currentClosest < closest) {
93 | index = i;
94 | closest = currentClosest;
95 | }
96 | }
97 |
98 | $('li', self).removeClass(activeClassName);
99 | highlighted = $('li:eq('+ index +')', self).addClass(activeClassName);
100 | opts.onHighlight(highlighted);
101 | }, 50);
102 | };
103 | if (opts.highlightOnScroll) {
104 | $(window).bind('scroll', highlightOnScroll);
105 | highlightOnScroll();
106 | }
107 |
108 | return this.each(function() {
109 | //build TOC
110 | var el = $(this);
111 | var ul = $(opts.listType);
112 |
113 | headings.each(function(i, heading) {
114 | var $h = $(heading);
115 | headingOffsets.push($h.offset().top - opts.highlightOffset);
116 |
117 | var anchorName = opts.anchorName(i, heading, opts.prefix);
118 |
119 | //add anchor
120 | if(heading.id !== anchorName) {
121 | var anchor = $('').attr('id', anchorName).insertBefore($h);
122 | }
123 |
124 | //build TOC item
125 | var a = $('')
126 | .text(opts.headerText(i, heading, $h))
127 | .attr('href', '#' + anchorName)
128 | .bind('click', function(e) {
129 | $(window).unbind('scroll', highlightOnScroll);
130 | scrollTo(e, function() {
131 | $(window).bind('scroll', highlightOnScroll);
132 | });
133 | el.trigger('selected', $(this).attr('href'));
134 | });
135 |
136 | var li = $('')
137 | .addClass(opts.itemClass(i, heading, $h, opts.prefix))
138 | .append(a);
139 |
140 | ul.append(li);
141 | });
142 | el.html(ul);
143 | });
144 | };
145 |
146 |
147 | jQuery.fn.toc.defaults = {
148 | container: 'body',
149 | listType: '
25 |
26 |
39 |
40 |
55 |
56 |
71 |
72 |
87 |
88 |
110 |
111 |
124 |
125 |
138 |
139 |
140 |
157 |
158 |
175 |
176 |
193 |
194 |
199 |
200 |
201 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to this project
2 |
3 | Please take a moment to review this document in order to make the contribution
4 | process easy and effective for everyone involved.
5 |
6 | Following these guidelines helps to communicate that you respect the time of
7 | the developers managing and developing this open source project. In return,
8 | they should reciprocate that respect in addressing your issue or assessing
9 | patches and features.
10 |
11 |
12 | ## Using the issue tracker
13 |
14 | The issue tracker is the preferred channel for [bug reports](#bug-reports),
15 | [features requests](#feature-requests) and submitting pull requests, but please
16 | respect the following restrictions:
17 |
18 | * Please **do not** use the issue tracker for personal support requests (use
19 | [Stack Overflow](http://stackoverflow.com) or IRC).
20 |
21 | * Please **do not** derail or troll issues. Keep the discussion on topic and
22 | respect the opinions of others.
23 |
24 |
25 | ## Bug reports
26 |
27 | A bug is a _demonstrable problem_ that is caused by the code in the repository.
28 | Good bug reports are extremely helpful - thank you!
29 |
30 | Guidelines for bug reports:
31 |
32 | 1. **Use the GitHub issue search.** Check if the issue has already been
33 | reported.
34 |
35 | 2. **Check if the issue has been fixed.** Try to reproduce it using the
36 | latest `master` or development branch in the repository.
37 |
38 | 3. **Provide environment details.** Provide your operating system, browser(s),
39 | devices, and jquery-asColorPicker version.
40 |
41 | 4. **Create an isolated and reproducible test case.** Create a [reduced test
42 | case](http://css-tricks.com/6263-reduced-test-cases/).
43 |
44 | 5. **Include a live example.** Make use of jsFiddle or jsBin to share your
45 | isolated test cases.
46 |
47 | A good bug report shouldn't leave others needing to chase you up for more
48 | information. Please try to be as detailed as possible in your report. What is
49 | your environment? What steps will reproduce the issue? What browser(s) and OS
50 | experience the problem? What would you expect to be the outcome? All these
51 | details will help people to fix any potential bugs.
52 |
53 | Example:
54 |
55 | > Short and descriptive example bug report title
56 | >
57 | > A summary of the issue and the browser/OS environment in which it occurs. If
58 | > suitable, include the steps required to reproduce the bug.
59 | >
60 | > 1. This is the first step
61 | > 2. This is the second step
62 | > 3. Further steps, etc.
63 | >
64 | > `Default
27 |
28 | $(".example_default").asColorPicker();
29 |
31 |
32 |
37 |
38 | Mode: palettes
41 |
42 | $(".example_palettes").asColorPicker({
43 | mode: 'palettes'
44 | });
45 |
47 |
48 |
53 |
54 | Mode: complex
57 |
58 | $(".example_complex").asColorPicker({
59 | mode: 'complex'
60 | });
61 |
63 |
64 |
69 |
70 | Mode: gradient
73 |
74 | $(".example_gradient").asColorPicker({
75 | mode: 'gradient'
76 | });
77 |
79 |
80 |
85 |
86 | Mode: gradient without switchable
89 |
90 | $(".example_gradient_2").asColorPicker({
91 | mode: 'gradient',
92 | gradient: {
93 | switchable: false
94 | }
95 | });
96 |
98 |
99 |
108 |
109 | Mode: gradient with gradient value
112 |
113 | $(".example_gradient_value").asColorPicker();
114 |
116 |
117 |
122 |
123 | Mode: gradient with color value
126 |
127 | $(".example_gradient_color").asColorPicker();
128 |
130 |
131 |
136 |
137 | Hide Input
141 |
142 | $(".example_5").asColorPicker({
143 | hideInput: true
144 | });
145 |
147 |
148 |
155 |
156 | Read Only
159 |
160 | $(".example_6").asColorPicker({
161 | readonly: true
162 | });
163 |
165 |
166 |
173 |
174 | Disable hideFireChange
177 |
178 | $(".example_7").asColorPicker({
179 | hideFireChange: false
180 | });
181 |
183 |
184 |
191 |
192 | 
| 
| 
| 
| 
| 
|
260 | |:--:|:--:|:--:|:--:|:--:|:--:|
261 | | Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | 9-11 ✓ | Latest ✓ |
262 |
263 | As a jQuery plugin, you also need to see the [jQuery Browser Support](http://jquery.com/browser-support/).
264 |
265 | ## Contributing
266 | Anyone and everyone is welcome to contribute. Please take a moment to
267 | review the [guidelines for contributing](CONTRIBUTING.md). Make sure you're using the latest version of `jquery-asColorPicker` before submitting an issue. There are several ways to help out:
268 |
269 | * [Bug reports](CONTRIBUTING.md#bug-reports)
270 | * [Feature requests](CONTRIBUTING.md#feature-requests)
271 | * [Pull requests](CONTRIBUTING.md#pull-requests)
272 | * Write test cases for open bug issues
273 | * Contribute to the documentation
274 |
275 | ## Development
276 | `jquery-asColorPicker` is built modularly and uses Gulp as a build system to build its distributable files. To install the necessary dependencies for the build system, please run:
277 |
278 | ```sh
279 | npm install -g gulp
280 | npm install -g babel-cli
281 | npm install
282 | ```
283 |
284 | Then you can generate new distributable files from the sources, using:
285 | ```
286 | gulp build
287 | ```
288 |
289 | More gulp tasks can be found [here](CONTRIBUTING.md#available-tasks).
290 |
291 | ## Changelog
292 | To see the list of recent changes, see [Releases section](https://github.com/amazingSurge/jquery-asColorPicker/releases).
293 |
294 | ## Copyright and license
295 | Copyright (C) 2016 amazingSurge.
296 |
297 | Licensed under [the LGPL license](LICENSE).
298 |
299 | [⬆ back to top](#table-of-contents)
300 |
301 | [bower-image]: https://img.shields.io/bower/v/jquery-asColorPicker.svg?style=flat
302 | [bower-link]: https://david-dm.org/amazingSurge/jquery-asColorPicker/dev-status.svg
303 | [npm-image]: https://badge.fury.io/js/jquery-asColorPicker.svg?style=flat
304 | [npm-url]: https://npmjs.org/package/jquery-asColorPicker
305 | [license]: https://img.shields.io/npm/l/jquery-asColorPicker.svg?style=flat
306 | [prs-welcome]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg
307 | [daviddm-image]: https://david-dm.org/amazingSurge/jquery-asColorPicker.svg?style=flat
308 | [daviddm-url]: https://david-dm.org/amazingSurge/jquery-asColorPicker
--------------------------------------------------------------------------------
/src/asColorPicker.js:
--------------------------------------------------------------------------------
1 | import $ from 'jquery';
2 | import DEFAULTS from './defaults';
3 | import MODES from './modes';
4 |
5 | import AsColor from 'jquery-asColor';
6 |
7 | import alpha from './components/alpha';
8 | import hex from './components/hex';
9 | import hue from './components/hue';
10 | import saturation from './components/saturation';
11 | import buttons from './components/buttons';
12 | import trigger from './components/trigger';
13 | import clear from './components/clear';
14 | import info from './components/info';
15 | import palettes from './components/palettes';
16 | import preview from './components/preview';
17 | import gradient from './components/gradient';
18 |
19 | const NAMESPACE = 'asColorPicker';
20 | const COMPONENTS = {};
21 | const LOCALIZATIONS = {
22 | en: {
23 | cancelText: 'cancel',
24 | applyText: 'apply'
25 | }
26 | };
27 |
28 | let id = 0;
29 |
30 | function createId(api) {
31 | api.id = id;
32 | id++;
33 | }
34 |
35 | class AsColorPicker {
36 | constructor(element, options) {
37 | this.element = element;
38 | this.$element = $(element);
39 |
40 | //flag
41 | this.opened = false;
42 | this.firstOpen = true;
43 | this.disabled = false;
44 | this.initialed = false;
45 | this.originValue = this.element.value;
46 | this.isEmpty = false;
47 |
48 | createId(this);
49 |
50 | this.options = $.extend(true, {}, DEFAULTS, options, this.$element.data());
51 | this.namespace = this.options.namespace;
52 |
53 | this.classes = {
54 | wrap: `${this.namespace}-wrap`,
55 | dropdown: `${this.namespace}-dropdown`,
56 | input: `${this.namespace}-input`,
57 | skin: `${this.namespace}_${this.options.skin}`,
58 | open: `${this.namespace}_open`,
59 | mask: `${this.namespace}-mask`,
60 | hideInput: `${this.namespace}_hideInput`,
61 | disabled: `${this.namespace}_disabled`,
62 | mode: `${this.namespace}-mode_${this.options.mode}`
63 | };
64 |
65 | if (this.options.hideInput) {
66 | this.$element.addClass(this.classes.hideInput);
67 | }
68 |
69 | this.components = MODES[this.options.mode];
70 | this._components = $.extend(true, {}, COMPONENTS);
71 |
72 | this._trigger('init');
73 | this.init();
74 | }
75 |
76 | _trigger(eventType, ...params) {
77 | let data = [this].concat(params);
78 |
79 | // event
80 | this.$element.trigger(`${NAMESPACE}::${eventType}`, data);
81 |
82 | // callback
83 | eventType = eventType.replace(/\b\w+\b/g, (word) => {
84 | return word.substring(0, 1).toUpperCase() + word.substring(1);
85 | });
86 | let onFunction = `on${eventType}`;
87 |
88 | if (typeof this.options[onFunction] === 'function') {
89 | this.options[onFunction].apply(this, params);
90 | }
91 | }
92 |
93 | eventName(events) {
94 | if (typeof events !== 'string' || events === '') {
95 | return `.${this.options.namespace}`;
96 | }
97 | events = events.split(' ');
98 |
99 | let length = events.length;
100 | for (let i = 0; i < length; i++) {
101 | events[i] = `${events[i]}.${this.options.namespace}`;
102 | }
103 | return events.join(' ');
104 | }
105 |
106 | init() {
107 | this.color = AsColor(this.element.value, this.options.color);
108 |
109 | this._create();
110 |
111 | if (this.options.skin) {
112 | this.$dropdown.addClass(this.classes.skin);
113 | this.$element.parent().addClass(this.classes.skin);
114 | }
115 |
116 | if (this.options.readonly) {
117 | this.$element.prop('readonly', true);
118 | }
119 |
120 | this._bindEvent();
121 |
122 | this.initialed = true;
123 | this._trigger('ready');
124 | }
125 |
126 | _create() {
127 | this.$dropdown = $(``);
128 | this.$element.wrap(``).addClass(this.classes.input);
129 |
130 | this.$wrap = this.$element.parent();
131 | this.$body = $('body');
132 |
133 | this.$dropdown.data(NAMESPACE, this);
134 |
135 | let component;
136 | $.each(this.components, (key, options) => {
137 | if (options === true) {
138 | options = {};
139 | }
140 | if (this.options[key] !== undefined) {
141 | options = $.extend(true, {}, options, this.options[key]);
142 | }
143 | if (Object.hasOwnProperty.call(this._components, key)) {
144 | component = this._components[key];
145 | component.init(this, options);
146 | }
147 | });
148 |
149 | this._trigger('create');
150 | }
151 |
152 | _bindEvent() {
153 | this.$element.on(this.eventName('click'), () => {
154 | if (!this.opened) {
155 | this.open();
156 | }
157 | return false;
158 | });
159 |
160 | this.$element.on(this.eventName('keydown'), (e) => {
161 | if (e.keyCode === 9) {
162 | this.close();
163 | } else if (e.keyCode === 13) {
164 | this.val(this.element.value);
165 | this.close();
166 | }
167 | });
168 |
169 | this.$element.on(this.eventName('keyup'), () => {
170 | if (this.color.matchString(this.element.value)) {
171 | this.val(this.element.value);
172 | }
173 | });
174 | }
175 |
176 | opacity(v) {
177 | if (v) {
178 | this.color.alpha(v);
179 | } else {
180 | return this.color.alpha();
181 | }
182 | }
183 |
184 | position() {
185 | const hidden = !this.$element.is(':visible');
186 | const offset = hidden ? this.$trigger.offset() : this.$element.offset();
187 | const height = hidden ? this.$trigger.outerHeight() : this.$element.outerHeight();
188 | const width = hidden ? this.$trigger.outerWidth() : this.$element.outerWidth() + this.$trigger.outerWidth();
189 | const pickerWidth = this.$dropdown.outerWidth(true);
190 | const pickerHeight = this.$dropdown.outerHeight(true);
191 | let top;
192 | let left;
193 |
194 | if (pickerHeight + offset.top > $(window).height() + $(window).scrollTop()) {
195 | top = offset.top - pickerHeight;
196 | } else {
197 | top = offset.top + height;
198 | }
199 |
200 | if (pickerWidth + offset.left > $(window).width() + $(window).scrollLeft()) {
201 | left = offset.left - pickerWidth + width;
202 | } else {
203 | left = offset.left;
204 | }
205 |
206 | this.$dropdown.css({
207 | position: 'absolute',
208 | top,
209 | left
210 | });
211 | }
212 |
213 | open() {
214 | if (this.disabled) {
215 | return;
216 | }
217 | this.originValue = this.element.value;
218 |
219 | if (this.$dropdown[0] !== this.$body.children().last()[0]) {
220 | this.$dropdown.detach().appendTo(this.$body);
221 | }
222 |
223 | this.$mask = $(`.${this.classes.mask}`);
224 | if (this.$mask.length === 0) {
225 | this.createMask();
226 | }
227 |
228 | // ensure the mask is always right before the dropdown
229 | if (this.$dropdown.prev()[0] !== this.$mask[0]) {
230 | this.$dropdown.before(this.$mask);
231 | }
232 |
233 | $("#asColorPicker-dropdown").removeAttr("id");
234 | this.$dropdown.attr("id", "asColorPicker-dropdown");
235 |
236 | // show the mask
237 | this.$mask.show();
238 |
239 | this.position();
240 |
241 | $(window).on(this.eventName('resize'), $.proxy(this.position, this));
242 |
243 | this.$dropdown.addClass(this.classes.open);
244 |
245 | this.opened = true;
246 |
247 | if (this.firstOpen) {
248 | this.firstOpen = false;
249 | this._trigger('firstOpen');
250 | }
251 | this._setup();
252 | this._trigger('open');
253 | }
254 |
255 | createMask() {
256 | this.$mask = $(document.createElement("div"));
257 | this.$mask.attr("class", this.classes.mask);
258 | this.$mask.hide();
259 | this.$mask.appendTo(this.$body);
260 |
261 | this.$mask.on(this.eventName("mousedown touchstart click"), e => {
262 | const $dropdown = $("#asColorPicker-dropdown");
263 | let self;
264 | if ($dropdown.length > 0) {
265 | self = $dropdown.data(NAMESPACE);
266 | if (self.opened) {
267 | if (self.options.hideFireChange) {
268 | self.apply();
269 | } else {
270 | self.cancel();
271 | }
272 | }
273 |
274 | e.preventDefault();
275 | e.stopPropagation();
276 | }
277 | });
278 | }
279 |
280 | close() {
281 | this.opened = false;
282 | this.$element.blur();
283 | this.$mask.hide();
284 |
285 | this.$dropdown.removeClass(this.classes.open);
286 |
287 | $(window).off(this.eventName('resize'));
288 |
289 | this._trigger('close');
290 | }
291 |
292 | clear() {
293 | this.val('');
294 | }
295 |
296 | cancel() {
297 | this.close();
298 |
299 | this.set(this.originValue);
300 | }
301 |
302 | apply() {
303 | this._trigger('apply', this.color);
304 | this.close();
305 | }
306 |
307 | val(value) {
308 | if (typeof value === 'undefined') {
309 | return this.color.toString();
310 | }
311 |
312 | this.set(value);
313 | }
314 |
315 | _update() {
316 | this._trigger('update', this.color);
317 | this._updateInput();
318 | }
319 |
320 | _updateInput() {
321 | let value = this.color.toString();
322 | if (this.isEmpty) {
323 | value = '';
324 | }
325 | this._trigger('change', value);
326 | this.$element.val(value);
327 | }
328 |
329 | set(value) {
330 | if (value !== '') {
331 | this.isEmpty = false;
332 | } else {
333 | this.isEmpty = true;
334 | }
335 | return this._set(value);
336 | }
337 |
338 | _set(value) {
339 | if (typeof value === 'string') {
340 | this.color.val(value);
341 | } else {
342 | this.color.set(value);
343 | }
344 |
345 | this._update();
346 | }
347 |
348 | _setup() {
349 | this._trigger('setup', this.color);
350 | }
351 |
352 | get() {
353 | return this.color;
354 | }
355 |
356 | enable() {
357 | this.disabled = false;
358 | this.$parent.addClass(this.classes.disabled);
359 | this._trigger('enable');
360 | return this;
361 | }
362 |
363 | disable() {
364 | this.disabled = true;
365 | this.$parent.removeClass(this.classes.disabled);
366 | this._trigger('disable');
367 | return this;
368 | }
369 |
370 | destroy() {
371 | this.$element.unwrap();
372 | this.$element.off(this.eventName());
373 | this.$mask.remove();
374 | this.$dropdown.remove();
375 |
376 | this.initialized = false;
377 | this.$element.data(NAMESPACE, null);
378 |
379 | this._trigger('destroy');
380 | return this;
381 | }
382 |
383 | getString(name, def) {
384 | if(this.options.lang in LOCALIZATIONS && typeof LOCALIZATIONS[this.options.lang][name] !== 'undefined') {
385 | return LOCALIZATIONS[this.options.lang][name];
386 | }
387 | return def;
388 | }
389 |
390 | static setLocalization(lang, strings) {
391 | LOCALIZATIONS[lang] = strings;
392 | }
393 |
394 | static registerComponent(name, method) {
395 | COMPONENTS[name] = method;
396 | }
397 |
398 | static setDefaults(options) {
399 | $.extend(true, DEFAULTS, $.isPlainObject(options) && options);
400 | }
401 | }
402 |
403 | AsColorPicker.registerComponent('alpha', alpha);
404 | AsColorPicker.registerComponent('hex', hex);
405 | AsColorPicker.registerComponent('hue', hue);
406 | AsColorPicker.registerComponent('saturation', saturation);
407 | AsColorPicker.registerComponent('buttons', buttons);
408 | AsColorPicker.registerComponent('trigger', trigger);
409 | AsColorPicker.registerComponent('clear', clear);
410 | AsColorPicker.registerComponent('info', info);
411 | AsColorPicker.registerComponent('palettes', palettes);
412 | AsColorPicker.registerComponent('preview', preview);
413 | AsColorPicker.registerComponent('gradient', gradient);
414 |
415 | export default AsColorPicker;
416 |
--------------------------------------------------------------------------------
/src/components/gradient.js:
--------------------------------------------------------------------------------
1 | import AsGradient from 'jquery-asGradient';
2 | import AsColor from 'jquery-asColor';
3 |
4 | // gradient
5 | function conventToPercentage(n) {
6 | if (n < 0) {
7 | n = 0;
8 | } else if (n > 1) {
9 | n = 1;
10 | }
11 | return `${n * 100}%`;
12 | }
13 |
14 | var Gradient = function(api, options) {
15 | this.api = api;
16 | this.options = options;
17 | this.classes = {
18 | enable: `${api.namespace}-gradient_enable`,
19 | marker: `${api.namespace}-gradient-marker`,
20 | active: `${api.namespace}-gradient-marker_active`,
21 | focus: `${api.namespace}-gradient_focus`
22 | };
23 | this.isEnabled = false;
24 | this.initialized = false;
25 | this.current = null;
26 | this.value = AsGradient(this.options.settings);
27 | this.$doc = $(document);
28 |
29 | const that = this;
30 | $.extend(that, {
31 | init() {
32 | that.$wrap = $(that.options.template.call(that)).appendTo(api.$dropdown);
33 |
34 | that.$gradient = that.$wrap.filter(`.${api.namespace}-gradient`);
35 |
36 | this.angle.init();
37 | this.preview.init();
38 | this.markers.init();
39 | this.wheel.init();
40 |
41 | this.bind();
42 |
43 | if (that.options.switchable === false || this.value.matchString(api.element.value)) {
44 | that.enable();
45 | }
46 | this.initialized = true;
47 | },
48 | bind() {
49 | const namespace = api.namespace;
50 |
51 | that.$gradient.on('update', () => {
52 | const current = that.value.getById(that.current);
53 |
54 | if (current) {
55 | api._trigger('update', current.color, that.value);
56 | }
57 |
58 | if (api.element.value !== that.value.toString()) {
59 | api._updateInput();
60 | }
61 | });
62 |
63 | // that.$gradient.on('add', function(e, data) {
64 | // if (data.stop) {
65 | // that.active(data.stop.id);
66 | // api._trigger('update', data.stop.color, that.value);
67 | // api._updateInput();
68 | // }
69 | // });
70 |
71 | if (that.options.switchable) {
72 | that.$wrap.on('click', `.${namespace}-gradient-switch`, () => {
73 | if (that.isEnabled) {
74 | that.disable();
75 | } else {
76 | that.enable();
77 | }
78 |
79 | return false;
80 | });
81 | }
82 |
83 | that.$wrap.on('click', `.${namespace}-gradient-cancel`, () => {
84 | if (that.options.switchable === false || AsGradient.matchString(api.originValue)) {
85 | that.overrideCore();
86 | }
87 |
88 | api.cancel();
89 |
90 | return false;
91 | });
92 | },
93 | overrideCore() {
94 | api.set = value => {
95 | if (value !== '') {
96 | api.isEmpty = false;
97 | } else {
98 | api.isEmpty = true;
99 | }
100 | if (typeof value === 'string') {
101 | if (that.options.switchable === false || AsGradient.matchString(value)) {
102 | if (that.isEnabled) {
103 | that.val(value);
104 | api.color = that.value;
105 | that.$gradient.trigger('update', that.value.value);
106 | } else {
107 | that.enable(value);
108 | }
109 | } else {
110 | that.disable();
111 | api.val(value);
112 | }
113 | } else {
114 | const current = that.value.getById(that.current);
115 |
116 | if (current) {
117 | current.color.val(value)
118 | api._trigger('update', current.color, that.value);
119 | }
120 |
121 | that.$gradient.trigger('update', {
122 | id: that.current,
123 | stop: current
124 | });
125 | }
126 | };
127 |
128 | api._setup = () => {
129 | const current = that.value.getById(that.current);
130 |
131 | api._trigger('setup', current.color);
132 | };
133 | },
134 | revertCore() {
135 | api.set = $.proxy(api._set, api);
136 | api._setup = () => {
137 | api._trigger('setup', api.color);
138 | };
139 | },
140 | preview: {
141 | init() {
142 | that.$preview = that.$gradient.find(`.${api.namespace}-gradient-preview`);
143 |
144 | that.$gradient.on('add del update empty', () => {
145 | this.render();
146 | });
147 | },
148 | render() {
149 | that.$preview.css({
150 | 'background-image': that.value.toStringWithAngle('to right', true),
151 | });
152 | that.$preview.css({
153 | 'background-image': that.value.toStringWithAngle('to right'),
154 | });
155 | }
156 | },
157 | markers: {
158 | width: 160,
159 | init() {
160 | that.$markers = that.$gradient.find(`.${api.namespace}-gradient-markers`).attr('tabindex', 0);
161 |
162 | that.$gradient.on('add', (e, data) => {
163 | this.add(data.stop);
164 | });
165 |
166 | that.$gradient.on('active', (e, data) => {
167 | this.active(data.id);
168 | });
169 |
170 | that.$gradient.on('del', (e, data) => {
171 | this.del(data.id);
172 | });
173 |
174 | that.$gradient.on('update', (e, data) => {
175 | if (data.stop) {
176 | this.update(data.stop.id, data.stop.color);
177 | }
178 | });
179 |
180 | that.$gradient.on('empty', () => {
181 | this.empty();
182 | });
183 |
184 | that.$markers.on(that.api.eventName('mousedown'), e => {
185 | const rightclick = (e.which) ? (e.which === 3) : (e.button === 2);
186 | if (rightclick) {
187 | return false;
188 | }
189 |
190 | const position = parseFloat((e.pageX - that.$markers.offset().left) / that.markers.width, 10);
191 | that.add('#fff', position);
192 | return false;
193 | });
194 |
195 | /* eslint consistent-this: "off" */
196 | let self = this;
197 | that.$markers.on(that.api.eventName('mousedown'), 'li', function(e) {
198 | const rightclick = (e.which) ? (e.which === 3) : (e.button === 2);
199 | if (rightclick) {
200 | return false;
201 | }
202 | self.mousedown(this, e);
203 | return false;
204 | });
205 |
206 | that.$doc.on(that.api.eventName('keydown'), e => {
207 | if (that.api.opened && that.$markers.is(`.${that.classes.focus}`)) {
208 |
209 | const key = e.keyCode || e.which;
210 | if (key === 46 || key === 8) {
211 | if (that.value.length <= 2) {
212 | return false;
213 | }
214 |
215 | that.del(that.current);
216 |
217 | return false;
218 | }
219 | }
220 | });
221 |
222 | that.$markers.on(that.api.eventName('focus'), () => {
223 | that.$markers.addClass(that.classes.focus);
224 | }).on(that.api.eventName('blur'), () => {
225 | that.$markers.removeClass(that.classes.focus);
226 | });
227 |
228 | that.$markers.on(that.api.eventName('click'), 'li', function() {
229 | const id = $(this).data('id');
230 | that.active(id);
231 | });
232 | },
233 | getMarker(id) {
234 | return that.$markers.find(`[data-id="${id}"]`);
235 | },
236 | update(id, color) {
237 | const $marker = this.getMarker(id);
238 | $marker.find('span').css('background-color', color.toHEX());
239 | $marker.find('i').css('background-color', color.toHEX());
240 | },
241 | add(stop) {
242 | $(``;
606 | if (this.options.switchable) {
607 | control += `${this.options.switchText}`;
608 | }
609 | control += `${this.options.cancelText}
`;
610 |
611 | return `${control}