From ca518007945a76f53310772fbb942ca4a10e8399 Mon Sep 17 00:00:00 2001 From: windy <1374721899@qq.com> Date: Wed, 6 Mar 2019 14:07:57 +0800 Subject: [PATCH] =?UTF-8?q?BI-41321=20refactor:=20farbtastic=E5=8E=BBjquer?= =?UTF-8?q?y?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/base.css | 33 +- dist/bundle.css | 39 +- dist/bundle.ie.js | 509 +++++++---------- dist/bundle.ie.min.js | 40 +- dist/bundle.js | 509 +++++++---------- dist/bundle.min.css | 2 +- dist/bundle.min.js | 40 +- dist/case.js | 515 +++++++----------- dist/fineui.css | 39 +- dist/fineui.ie.js | 509 +++++++---------- dist/fineui.ie.min.js | 40 +- dist/fineui.js | 509 +++++++---------- dist/fineui.min.css | 2 +- dist/fineui.min.js | 40 +- dist/resource.css | 6 +- dist/utils.min.js | 2 +- public/css/background.css | 6 +- .../colorchooser/farbtastic/farbtastic.js | 286 +++++++++- .../farbtastic/jquery.farbtastic.js | 340 ------------ .../base/colorchooser/colorpicker/editor.css | 6 +- .../colorchooser/farbtastic/farbtastic.css | 27 +- src/css/resource/background.css | 6 +- src/css/resource/font.css | 11 + .../colorchooser/farbtastic/farbtastic.less | 37 +- src/less/resource/background.less | 6 +- ui/css/background.css | 6 +- 26 files changed, 1439 insertions(+), 2126 deletions(-) delete mode 100644 src/case/colorchooser/farbtastic/jquery.farbtastic.js diff --git a/dist/base.css b/dist/base.css index e1e8c2bef6..87033af937 100644 --- a/dist/base.css +++ b/dist/base.css @@ -19,17 +19,17 @@ .bi-theme-dark .bi-color-picker-button .color-picker-button-mask { border: 1px solid #ffffff; } -.farbtastic .wheel { +.bi-farbtastic .wheel { background: url('images/1x/background/wheel.png') no-repeat center center; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/wheel.png'); _background: none; } -.farbtastic .overlay { +.bi-farbtastic .overlay { background: url('images/1x/background/mask.png') no-repeat center center; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/mask.png'); _background: none; } -.farbtastic .marker { +.bi-farbtastic .marker { background: url('images/1x/background/marker.png') no-repeat center center; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/marker.png'); _background: none; @@ -390,34 +390,11 @@ _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_disable.png'); _background: none; } -.farbtastic { - position: relative; -} -.farbtastic * { - position: absolute; +.bi-farbtastic * { cursor: crosshair; } -.farbtastic, -.farbtastic .wheel { - width: 195px; - height: 195px; -} -.farbtastic .color, -.farbtastic .overlay { - top: 47px; - left: 47px; - width: 101px; - height: 101px; -} -.farbtastic .wheel { - width: 195px; - height: 195px; -} -.farbtastic .marker { - width: 17px; - height: 17px; +.bi-farbtastic .marker { margin: -8px 0 0 -8px; - overflow: hidden; } .bi-bubble-combo .button-combo-triangle-wrapper { position: fixed !important; diff --git a/dist/bundle.css b/dist/bundle.css index 275c0819a0..188a41730c 100644 --- a/dist/bundle.css +++ b/dist/bundle.css @@ -1990,17 +1990,17 @@ textarea { .bi-theme-dark .bi-color-picker-button .color-picker-button-mask { border: 1px solid #ffffff; } -.farbtastic .wheel { +.bi-farbtastic .wheel { background: url('images/1x/background/wheel.png') no-repeat center center; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/wheel.png'); _background: none; } -.farbtastic .overlay { +.bi-farbtastic .overlay { background: url('images/1x/background/mask.png') no-repeat center center; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/mask.png'); _background: none; } -.farbtastic .marker { +.bi-farbtastic .marker { background: url('images/1x/background/marker.png') no-repeat center center; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/marker.png'); _background: none; @@ -2361,34 +2361,11 @@ textarea { _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1x/background/trans_disable.png'); _background: none; } -.farbtastic { - position: relative; -} -.farbtastic * { - position: absolute; +.bi-farbtastic * { cursor: crosshair; } -.farbtastic, -.farbtastic .wheel { - width: 195px; - height: 195px; -} -.farbtastic .color, -.farbtastic .overlay { - top: 47px; - left: 47px; - width: 101px; - height: 101px; -} -.farbtastic .wheel { - width: 195px; - height: 195px; -} -.farbtastic .marker { - width: 17px; - height: 17px; +.bi-farbtastic .marker { margin: -8px 0 0 -8px; - overflow: hidden; } .bi-bubble-combo .button-combo-triangle-wrapper { position: fixed !important; @@ -4296,17 +4273,17 @@ textarea::-webkit-scrollbar-thumb:hover { background-color: rgba(208, 212, 218, 0.7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b3d0d4da,endColorstr=#b3d0d4da); } -.farbtastic .wheel { +.bi-farbtastic .wheel { background: url('https://fanruan.coding.me/fineui/dist/images/1x/background/wheel.png') no-repeat center center; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/background/wheel.png'); _background: none; } -.farbtastic .overlay { +.bi-farbtastic .overlay { background: url('https://fanruan.coding.me/fineui/dist/images/1x/background/mask.png') no-repeat center center; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/background/mask.png'); _background: none; } -.farbtastic .marker { +.bi-farbtastic .marker { background: url('https://fanruan.coding.me/fineui/dist/images/1x/background/marker.png') no-repeat center center; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://fanruan.coding.me/fineui/dist/images/1x/background/marker.png'); _background: none; diff --git a/dist/bundle.ie.js b/dist/bundle.ie.js index 18329fb4f8..3551159c87 100644 --- a/dist/bundle.ie.js +++ b/dist/bundle.ie.js @@ -52776,168 +52776,210 @@ BI.SimpleColorPickerEditor = BI.inherit(BI.Widget, { } }); BI.SimpleColorPickerEditor.EVENT_CHANGE = "ColorPickerEditor.EVENT_CHANGE"; -BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor);/** - * 选色控件 - * - * Created by GUY on 2015/11/16. - * @class BI.Farbtastic - * @extends BI.Widget - */ -BI.Farbtastic = BI.inherit(BI.Widget, { +BI.shortcut("bi.simple_color_picker_editor", BI.SimpleColorPickerEditor);BI.Farbtastic = BI.inherit(BI.BasicButton, { - _defaultConfig: function () { - return BI.extend(BI.Farbtastic.superclass._defaultConfig.apply(this, arguments), { - baseCls: "bi-farbtastic", - width: 195, - height: 195 - }); + constants: { + RADIUS: 84, + SQUARE: 100, + WIDTH: 194 }, - _init: function () { - BI.Farbtastic.superclass._init.apply(this, arguments); + props: { + baseCls: "bi-farbtastic", + width: 195, + height: 195, + stopPropagation: true, + value: "#000000" }, - mounted: function () { + render: function () { var self = this; - this.farbtastic = $.farbtastic(this.element, function (v) { - self.fireEvent(BI.Farbtastic.EVENT_CHANGE, self.getValue(), self); - }); + return { + type: "bi.absolute", + items: [{ + el: { + type: "bi.layout", + cls: "", + ref: function (_ref) { + self.colorWrapper = _ref; + } + }, + top: 47, + left: 47, + width: 101, + height: 101 + }, { + el: { + type: "bi.layout", + cls: "wheel", + ref: function (_ref) { + self.wheel = _ref; + } + }, + left: 0, + right: 0, + top: 0, + bottom: 0 + }, { + el: { + type: "bi.layout", + cls: "overlay", + ref: function (_ref) { + self.overlay = _ref; + } + }, + top: 47, + left: 47, + width: 101, + height: 101 + }, { + el: { + type: "bi.layout", + cls: "marker", + ref: function (_ref) { + self.hMarker = _ref; + }, + scrollable: false, + width: 17, + height: 17 + } + }, { + el: { + type: "bi.layout", + cls: "marker", + ref: function (_ref) { + self.slMarker = _ref; + }, + scrollable: false, + width: 17, + height: 17 + } + }] + }; }, - setValue: function (color) { - this.farbtastic.setColor(color); + mounted: function () { + var o = this.options; + if (BI.isKey(o.value)) { + this.setValue(o.value); + } }, - getValue: function () { - return this.farbtastic.color; - } -}); -BI.Farbtastic.EVENT_CHANGE = "Farbtastic.EVENT_CHANGE"; -BI.shortcut("bi.farbtastic", BI.Farbtastic);/** - * Farbtastic Color Picker 1.2 - * © 2008 Steven Wittens - * - * This program is free software; you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation; either version 2 of the License, or - * (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program; if not, write to the Free Software - * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA - */ + _unpack: function (color) { + if (color.length === 7) { + return [parseInt("0x" + color.substring(1, 3)) / 255, + parseInt("0x" + color.substring(3, 5)) / 255, + parseInt("0x" + color.substring(5, 7)) / 255]; + } else if (color.length === 4) { + return [parseInt("0x" + color.substring(1, 2)) / 15, + parseInt("0x" + color.substring(2, 3)) / 15, + parseInt("0x" + color.substring(3, 4)) / 15]; + } + }, -jQuery.fn.farbtastic = function (callback) { - $.farbtastic(this, callback); - return this; -}; + _pack: function (rgb) { + var r = Math.round(rgb[0] * 255); + var g = Math.round(rgb[1] * 255); + var b = Math.round(rgb[2] * 255); + return "#" + (r < 16 ? "0" : "") + r.toString(16) + + (g < 16 ? "0" : "") + g.toString(16) + + (b < 16 ? "0" : "") + b.toString(16); + }, -jQuery.farbtastic = function (container, callback) { - var container = $(container).get(0); - return container.farbtastic || (container.farbtastic = new jQuery._farbtastic(container, callback)); -}; + _setColor: function (color) { + var unpack = this._unpack(color); + if (this.value !== color && unpack) { + this.value = color; + this.rgb = unpack; + this.hsl = this._RGBToHSL(this.rgb); + this._updateDisplay(); + } + }, -jQuery._farbtastic = function (container, callback) { - // Store farbtastic object - var fb = this; - - // Insert markup - $(container).html("