");tooltip.setHtml(tooltipAnnotation);tooltip.show();editor.on("mousewheel",hideTooltip);if(mouseHandler.$tooltipFollowsMouse){moveTooltip(mouseEvent);}else{var gutterElement=mouseEvent.domEvent.target;var rect=gutterElement.getBoundingClientRect();var style=tooltip.getElement().style;style.left=rect.right+"px";style.top=rect.bottom+"px";}} +return;tooltipAnnotation=annotation.text.join("
");tooltip.setHtml(tooltipAnnotation);tooltip.show();editor._signal("showGutterTooltip",tooltip);editor.on("mousewheel",hideTooltip);if(mouseHandler.$tooltipFollowsMouse){moveTooltip(mouseEvent);}else{var gutterElement=mouseEvent.domEvent.target;var rect=gutterElement.getBoundingClientRect();var style=tooltip.getElement().style;style.left=rect.right+"px";style.top=rect.bottom+"px";}} function hideTooltip(){if(tooltipTimeout) -tooltipTimeout=clearTimeout(tooltipTimeout);if(tooltipAnnotation){tooltip.hide();tooltipAnnotation=null;editor.removeEventListener("mousewheel",hideTooltip);}} +tooltipTimeout=clearTimeout(tooltipTimeout);if(tooltipAnnotation){tooltip.hide();tooltipAnnotation=null;editor._signal("hideGutterTooltip",tooltip);editor.removeEventListener("mousewheel",hideTooltip);}} function moveTooltip(e){tooltip.setPosition(e.x,e.y);} mouseHandler.editor.setDefaultHandler("guttermousemove",function(e){var target=e.domEvent.target||e.domEvent.srcElement;if(dom.hasCssClass(target,"ace_fold-widget")) return hideTooltip();if(tooltipAnnotation&&mouseHandler.$tooltipFollowsMouse) @@ -1370,7 +1369,7 @@ if(success&&e&&hashId!=-1&&toExecute.passEvent!=true&&toExecute.command.passEven if(success) break;} if(!success&&hashId==-1){toExecute={command:"insertstring"};success=commands.exec("insertstring",this.$editor,keyString);} -if(success) +if(success&&this.$editor._signal) this.$editor._signal("keyboardActivity",toExecute);return success;};this.onCommandKey=function(e,hashId,keyCode){var keyString=keyUtil.keyCodeToString(keyCode);this.$callKeyboardHandlers(hashId,keyString,keyCode,e);};this.onTextInput=function(text){this.$callKeyboardHandlers(-1,text);};}).call(KeyBinding.prototype);exports.KeyBinding=KeyBinding;});ace.define("ace/range",["require","exports","module"],function(require,exports,module){"use strict";var comparePoints=function(p1,p2){return p1.row-p2.row||p1.column-p2.column;};var Range=function(startRow,startColumn,endRow,endColumn){this.start={row:startRow,column:startColumn};this.end={row:endRow,column:endColumn};};(function(){this.isEqual=function(range){return this.start.row===range.start.row&&this.end.row===range.end.row&&this.start.column===range.start.column&&this.end.column===range.end.column;};this.toString=function(){return("Range: ["+this.start.row+"/"+this.start.column+"] -> ["+this.end.row+"/"+this.end.column+"]");};this.contains=function(row,column){return this.compare(row,column)==0;};this.compareRange=function(range){var cmp,end=range.end,start=range.start;cmp=this.compare(end.row,end.column);if(cmp==1){cmp=this.compare(start.row,start.column);if(cmp==1){return 2;}else if(cmp==0){return 1;}else{return 0;}}else if(cmp==-1){return-2;}else{cmp=this.compare(start.row,start.column);if(cmp==-1){return-1;}else if(cmp==1){return 42;}else{return 0;}}};this.comparePoint=function(p){return this.compare(p.row,p.column);};this.containsRange=function(range){return this.comparePoint(range.start)==0&&this.comparePoint(range.end)==0;};this.intersects=function(range){var cmp=this.compareRange(range);return(cmp==-1||cmp==0||cmp==1);};this.isEnd=function(row,column){return this.end.row==row&&this.end.column==column;};this.isStart=function(row,column){return this.start.row==row&&this.start.column==column;};this.setStart=function(row,column){if(typeof row=="object"){this.start.column=row.column;this.start.row=row.row;}else{this.start.row=row;this.start.column=column;}};this.setEnd=function(row,column){if(typeof row=="object"){this.end.column=row.column;this.end.row=row.row;}else{this.end.row=row;this.end.column=column;}};this.inside=function(row,column){if(this.compare(row,column)==0){if(this.isEnd(row,column)||this.isStart(row,column)){return false;}else{return true;}} return false;};this.insideStart=function(row,column){if(this.compare(row,column)==0){if(this.isEnd(row,column)){return false;}else{return true;}} return false;};this.insideEnd=function(row,column){if(this.compare(row,column)==0){if(this.isStart(row,column)){return false;}else{return true;}} @@ -1546,15 +1545,33 @@ this.inherit=function(mode,filter){if(typeof mode==="function"){var behaviours=n this.addBehaviours(behaviours);} this.getBehaviours=function(filter){if(!filter){return this.$behaviours;}else{var ret={} for(var i=0;i
-
diff --git a/modules/backend/formwidgets/colorpicker/assets/css/colorpicker.css b/modules/backend/formwidgets/colorpicker/assets/css/colorpicker.css
index bc37a0b4c..fc82aaa6c 100644
--- a/modules/backend/formwidgets/colorpicker/assets/css/colorpicker.css
+++ b/modules/backend/formwidgets/colorpicker/assets/css/colorpicker.css
@@ -57,10 +57,205 @@
bottom: 3px;
right: 3px;
}
-.colpick {
+.sp-hue,
+.sp-slider {
+ cursor: row-resize;
+}
+.sp-color,
+.sp-dragger {
+ cursor: crosshair;
+}
+.sp-alpha-inner,
+.sp-alpha-handle {
+ cursor: col-resize;
+}
+.sp-hue {
+ left: 90%;
+}
+.sp-color {
+ right: 15%;
+}
+.sp-container {
border: none;
border-radius: 3px;
z-index: 10100;
-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.sp-picker-container {
+ border: none;
+}
+.sp-alpha-handle {
+ background-color: #ccc;
+ border: 1px solid #666;
+ width: 4px;
+}
+.sp-color,
+.sp-hue {
+ border: 1px solid #ccc;
+}
+.sp-slider {
+ background-color: #ccc;
+ border: 1px solid #666;
+ height: 3px;
+ left: -4px;
+ width: 22px;
+}
+.sp-dragger {
+ background: transparent;
+ box-shadow: 0 0 0 1px #111;
+}
+.sp-input {
+ outline: none !important;
+ -webkit-appearance: none;
+ border: 1px solid #d1d6d9;
+ -webkit-box-shadow: inset 0 1px 0 rgba(209, 214, 217, 0.25), 0 1px 0 rgba(255,255,255,.5);
+ box-shadow: inset 0 1px 0 rgba(209, 214, 217, 0.25), 0 1px 0 rgba(255,255,255,.5);
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+}
+.sp-input:focus {
+ border: 1px solid #d1d6d9;
+}
+.sp-button-container {
+ width: 100%;
+ position: relative;
+ text-align: right;
+ padding-top: 4px;
+}
+.sp-container button,
+.sp-container button:hover,
+.sp-container button:active {
+ text-shadow: none;
+ font-size: 13px;
+ text-align: left;
+ outline: none !important;
+ font-weight: normal;
+ -webkit-box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
+ box-shadow: inset 0 -2px 0 rgba(0,0,0,.15);
+ border: 1px solid transparent;
+ color: #ffffff;
+ border: none;
+ background: #656d79;
+ padding: 1px 7.5px;
+ font-size: 12px;
+ line-height: 1.5;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+}
+.sp-container button:hover,
+.sp-container button:hover:hover,
+.sp-container button:active:hover,
+.sp-container button:focus,
+.sp-container button:hover:focus,
+.sp-container button:active:focus,
+.sp-container button:active,
+.sp-container button:hover:active,
+.sp-container button:active:active,
+.sp-container button.active,
+.sp-container button:hover.active,
+.sp-container button:active.active,
+.open .dropdown-toggle.sp-container button,
+.open .dropdown-toggle.sp-container button:hover,
+.open .dropdown-toggle.sp-container button:active {
+ color: #ffffff;
+ background: #1681ba;
+ border-color: #1681ba;
+}
+.sp-container button:active,
+.sp-container button:hover:active,
+.sp-container button:active:active,
+.sp-container button.active,
+.sp-container button:hover.active,
+.sp-container button:active.active,
+.open .dropdown-toggle.sp-container button,
+.open .dropdown-toggle.sp-container button:hover,
+.open .dropdown-toggle.sp-container button:active {
+ background: #126896;
+ border-color: #105b83;
+ background-image: none;
+}
+.sp-container button.on,
+.sp-container button:hover.on,
+.sp-container button:active.on {
+ background: #494f58;
+ border-color: #40454d;
+ background-image: none;
+}
+.sp-container button.disabled,
+.sp-container button:hover.disabled,
+.sp-container button:active.disabled,
+.sp-container button[disabled],
+.sp-container button:hover[disabled],
+.sp-container button:active[disabled],
+.sp-container button.disabled:hover,
+.sp-container button:hover.disabled:hover,
+.sp-container button:active.disabled:hover,
+.sp-container button[disabled]:hover,
+.sp-container button:hover[disabled]:hover,
+.sp-container button:active[disabled]:hover,
+.sp-container button.disabled:focus,
+.sp-container button:hover.disabled:focus,
+.sp-container button:active.disabled:focus,
+.sp-container button[disabled]:focus,
+.sp-container button:hover[disabled]:focus,
+.sp-container button:active[disabled]:focus,
+.sp-container button.disabled:active,
+.sp-container button:hover.disabled:active,
+.sp-container button:active.disabled:active,
+.sp-container button[disabled]:active,
+.sp-container button:hover[disabled]:active,
+.sp-container button:active[disabled]:active,
+.sp-container button.disabled.active,
+.sp-container button:hover.disabled.active,
+.sp-container button:active.disabled.active,
+.sp-container button[disabled].active,
+.sp-container button:hover[disabled].active,
+.sp-container button:active[disabled].active {
+ background: #656d79;
+ border-color: #656d79;
+}
+.sp-container button .badge,
+.sp-container button:hover .badge,
+.sp-container button:active .badge {
+ color: #656d79;
+ background: #ffffff;
+}
+.sp-cancel {
+ bottom: -3px;
+ left: 0;
+ position: absolute;
+ text-decoration: none;
+ font-family: serif;
+ font-size: 21px;
+ font-weight: bold;
+ line-height: 1;
+ color: #000000 !important;
+ text-shadow: 0 1px 0 #ffffff;
+ opacity: 0.2;
+ filter: alpha(opacity=20);
+}
+.sp-cancel:hover,
+.sp-cancel:focus {
+ text-decoration: none;
+ cursor: pointer;
+ opacity: 0.5;
+ filter: alpha(opacity=50);
+}
+.sp-palette-container {
+ border: none;
+ float: none;
+ margin: 0;
+ padding: 5px 10px 0;
+}
+.sp-palette .sp-thumb-el,
+.sp-palette .sp-thumb-el:hover {
+ border: 1px solid rgba(0, 0, 0, 0.9);
+}
+.sp-palette .sp-thumb-el:hover,
+.sp-palette .sp-thumb-el.sp-thumb-active {
+ border-color: rgba(0, 0, 0, 0.9);
}
diff --git a/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js b/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js
index 812ee16dd..fb725683f 100644
--- a/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js
+++ b/modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js
@@ -26,6 +26,8 @@
}
ColorPicker.DEFAULTS = {
+ showAlpha: false,
+ allowEmpty: false,
dataLocker: null
}
@@ -34,31 +36,52 @@
this.$dataLocker = $(this.options.dataLocker, this.$el)
this.$colorList = $('>ul', this.$el)
this.$customColor = $('[data-custom-color]', this.$el)
+ this.$customColorSpan = $('>span', this.$customColor)
+ this.originalColor = this.$customColor.data('hexColor')
this.$colorList.on('click', '>li', function(){
self.selectColor(this)
+ self.$dataLocker.trigger('change')
})
/*
* Custom color
*/
if (this.$customColor.length) {
- this.$customColor.colpick({
- layout: 'hex',
- submit: 0,
+ this.$customColor.spectrum({
+ preferredFormat: 'hex',
+ showInput: true,
+ showAlpha: this.options.showAlpha,
+ allowEmpty: this.options.allowEmpty,
color: this.$customColor.data('hexColor'),
- onShow: function(cal) {
- var el = $(cal).data('colpick').el
- self.selectColor(el)
+ chooseText: $.oc.lang.get('colorpicker.choose', 'Ok'),
+ cancelText: '⨯',
+ hide: function(color) {
+ var hex = color ? color.toHexString() : ''
+ self.$customColorSpan.css('background', hex)
},
- onChange: function(hsb, hex, rgb, el, bySetColor) {
- $('>span', el).css('background', '#'+hex)
- $(el).data('hexColor', '#'+hex)
- self.setColor('#'+hex)
+ show: function(color) {
+ self.selectColor(self.$customColor)
+ },
+ move: function(color) {
+ var hex = color ? color.toHexString() : ''
+ self.$customColorSpan.css('background', hex)
+ },
+ change: function(color) {
+ var hex = color ? color.toHexString() : ''
+ self.setCustomColor(hex)
}
})
}
+ }
+ ColorPicker.prototype.setCustomColor = function(hexColor) {
+ if (this.$customColor.length) {
+ this.$customColor.data('hexColor', hexColor)
+ this.$customColor.spectrum('set', hexColor)
+ }
+
+ this.setColor(hexColor)
}
ColorPicker.prototype.setColor = function(hexColor) {
@@ -111,4 +134,4 @@
$('[data-control="colorpicker"]').colorPicker()
})
-}(window.jQuery);
\ No newline at end of file
+}(window.jQuery);
diff --git a/modules/backend/formwidgets/colorpicker/assets/less/colorpicker.less b/modules/backend/formwidgets/colorpicker/assets/less/colorpicker.less
index 9072450a0..b64dca607 100644
--- a/modules/backend/formwidgets/colorpicker/assets/less/colorpicker.less
+++ b/modules/backend/formwidgets/colorpicker/assets/less/colorpicker.less
@@ -71,9 +71,118 @@
}
-.colpick {
+//
+// Spectrum
+//
+
+.sp-hue, .sp-slider { cursor: row-resize }
+.sp-color, .sp-dragger { cursor: crosshair }
+.sp-alpha-inner, .sp-alpha-handle { cursor: col-resize }
+
+.sp-hue { left: 90%; }
+.sp-color { right: 15%; }
+
+.sp-container {
border: none;
border-radius: @border-radius-base;
z-index: @zindex-datepicker;
.box-shadow(@overlay-box-shadow);
+ font-family: @font-family-base;
+}
+
+.sp-picker-container {
+ border: none;
+}
+
+.sp-alpha-handle {
+ background-color: #ccc;
+ border: 1px solid #666;
+ width: 4px;
+}
+
+.sp-color, .sp-hue {
+ border: 1px solid #ccc;
+}
+
+.sp-slider {
+ background-color: #ccc;
+ border: 1px solid #666;
+ height: 3px;
+ left: -4px;
+ width: 22px;
+}
+.sp-dragger {
+ background:transparent;
+ box-shadow: 0 0 0 1px #111;
+}
+
+.sp-input {
+ outline: none !important;
+ -webkit-appearance: none;
+ border: 1px solid @input-border;
+ .box-shadow(@input-box-shadow);
+ .border-radius(@input-border-radius);
+
+ &:focus {
+ border: 1px solid @color-form-field-border-focus;
+ }
+}
+
+.sp-button-container {
+ width: 100%;
+ position: relative;
+ text-align: right;
+ padding-top: 4px;
+}
+
+.sp-container button,
+.sp-container button:hover,
+.sp-container button:active {
+ text-shadow: none;
+ font-size: @font-size-base - 1;
+ text-align: left;
+ outline: none !important;
+ font-weight: @btn-font-weight;
+ .box-shadow(~"inset 0 -2px 0 rgba(0,0,0,.15)");
+ border: 1px solid transparent;
+ .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border; @btn-primary-bg; @btn-primary-bg);
+ .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
+}
+
+.sp-cancel {
+ bottom: -3px;
+ left: 0;
+ position: absolute;
+ text-decoration: none;
+
+ font-family: serif;
+ font-size: (@font-size-base * 1.5);
+ font-weight: @close-font-weight;
+ line-height: 1;
+ color: @close-color !important;
+ text-shadow: @close-text-shadow;
+ .opacity(.2);
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ cursor: pointer;
+ .opacity(.5);
+ }
+}
+
+.sp-palette-container {
+ border: none;
+ float: none;
+ margin: 0;
+ padding: 5px 10px 0;
+}
+.sp-palette .sp-thumb-el,
+.sp-palette .sp-thumb-el:hover {
+ border: 1px solid rgba(0, 0, 0, 0.9);
+}
+
+.sp-palette .sp-thumb-el:hover,
+.sp-palette .sp-thumb-el.sp-thumb-active {
+ border-color: rgba(0, 0, 0, 0.9);
}
diff --git a/modules/backend/formwidgets/colorpicker/assets/vendor/colpick/LICENSE b/modules/backend/formwidgets/colorpicker/assets/vendor/colpick/LICENSE
deleted file mode 100644
index 70d53ac30..000000000
--- a/modules/backend/formwidgets/colorpicker/assets/vendor/colpick/LICENSE
+++ /dev/null
@@ -1,339 +0,0 @@
-GNU GENERAL PUBLIC LICENSE
- Version 2, June 1991
-
- Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
- 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
- Everyone is permitted to copy and distribute verbatim copies
- of this license document, but changing it is not allowed.
-
- Preamble
-
- The licenses for most software are designed to take away your
-freedom to share and change it. By contrast, the GNU General Public
-License is intended to guarantee your freedom to share and change free
-software--to make sure the software is free for all its users. This
-General Public License applies to most of the Free Software
-Foundation's software and to any other program whose authors commit to
-using it. (Some other Free Software Foundation software is covered by
-the GNU Lesser General Public License instead.) You can apply it to
-your programs, too.
-
- When we speak of free software, we are referring to freedom, not
-price. Our General Public Licenses are designed to make sure that you
-have the freedom to distribute copies of free software (and charge for
-this service if you wish), that you receive source code or can get it
-if you want it, that you can change the software or use pieces of it
-in new free programs; and that you know you can do these things.
-
- To protect your rights, we need to make restrictions that forbid
-anyone to deny you these rights or to ask you to surrender the rights.
-These restrictions translate to certain responsibilities for you if you
-distribute copies of the software, or if you modify it.
-
- For example, if you distribute copies of such a program, whether
-gratis or for a fee, you must give the recipients all the rights that
-you have. You must make sure that they, too, receive or can get the
-source code. And you must show them these terms so they know their
-rights.
-
- We protect your rights with two steps: (1) copyright the software, and
-(2) offer you this license which gives you legal permission to copy,
-distribute and/or modify the software.
-
- Also, for each author's protection and ours, we want to make certain
-that everyone understands that there is no warranty for this free
-software. If the software is modified by someone else and passed on, we
-want its recipients to know that what they have is not the original, so
-that any problems introduced by others will not reflect on the original
-authors' reputations.
-
- Finally, any free program is threatened constantly by software
-patents. We wish to avoid the danger that redistributors of a free
-program will individually obtain patent licenses, in effect making the
-program proprietary. To prevent this, we have made it clear that any
-patent must be licensed for everyone's free use or not licensed at all.
-
- The precise terms and conditions for copying, distribution and
-modification follow.
-
- GNU GENERAL PUBLIC LICENSE
- TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
-
- 0. This License applies to any program or other work which contains
-a notice placed by the copyright holder saying it may be distributed
-under the terms of this General Public License. The "Program", below,
-refers to any such program or work, and a "work based on the Program"
-means either the Program or any derivative work under copyright law:
-that is to say, a work containing the Program or a portion of it,
-either verbatim or with modifications and/or translated into another
-language. (Hereinafter, translation is included without limitation in
-the term "modification".) Each licensee is addressed as "you".
-
-Activities other than copying, distribution and modification are not
-covered by this License; they are outside its scope. The act of
-running the Program is not restricted, and the output from the Program
-is covered only if its contents constitute a work based on the
-Program (independent of having been made by running the Program).
-Whether that is true depends on what the Program does.
-
- 1. You may copy and distribute verbatim copies of the Program's
-source code as you receive it, in any medium, provided that you
-conspicuously and appropriately publish on each copy an appropriate
-copyright notice and disclaimer of warranty; keep intact all the
-notices that refer to this License and to the absence of any warranty;
-and give any other recipients of the Program a copy of this License
-along with the Program.
-
-You may charge a fee for the physical act of transferring a copy, and
-you may at your option offer warranty protection in exchange for a fee.
-
- 2. You may modify your copy or copies of the Program or any portion
-of it, thus forming a work based on the Program, and copy and
-distribute such modifications or work under the terms of Section 1
-above, provided that you also meet all of these conditions:
-
- a) You must cause the modified files to carry prominent notices
- stating that you changed the files and the date of any change.
-
- b) You must cause any work that you distribute or publish, that in
- whole or in part contains or is derived from the Program or any
- part thereof, to be licensed as a whole at no charge to all third
- parties under the terms of this License.
-
- c) If the modified program normally reads commands interactively
- when run, you must cause it, when started running for such
- interactive use in the most ordinary way, to print or display an
- announcement including an appropriate copyright notice and a
- notice that there is no warranty (or else, saying that you provide
- a warranty) and that users may redistribute the program under
- these conditions, and telling the user how to view a copy of this
- License. (Exception: if the Program itself is interactive but
- does not normally print such an announcement, your work based on
- the Program is not required to print an announcement.)
-
-These requirements apply to the modified work as a whole. If
-identifiable sections of that work are not derived from the Program,
-and can be reasonably considered independent and separate works in
-themselves, then this License, and its terms, do not apply to those
-sections when you distribute them as separate works. But when you
-distribute the same sections as part of a whole which is a work based
-on the Program, the distribution of the whole must be on the terms of
-this License, whose permissions for other licensees extend to the
-entire whole, and thus to each and every part regardless of who wrote it.
-
-Thus, it is not the intent of this section to claim rights or contest
-your rights to work written entirely by you; rather, the intent is to
-exercise the right to control the distribution of derivative or
-collective works based on the Program.
-
-In addition, mere aggregation of another work not based on the Program
-with the Program (or with a work based on the Program) on a volume of
-a storage or distribution medium does not bring the other work under
-the scope of this License.
-
- 3. You may copy and distribute the Program (or a work based on it,
-under Section 2) in object code or executable form under the terms of
-Sections 1 and 2 above provided that you also do one of the following:
-
- a) Accompany it with the complete corresponding machine-readable
- source code, which must be distributed under the terms of Sections
- 1 and 2 above on a medium customarily used for software interchange; or,
-
- b) Accompany it with a written offer, valid for at least three
- years, to give any third party, for a charge no more than your
- cost of physically performing source distribution, a complete
- machine-readable copy of the corresponding source code, to be
- distributed under the terms of Sections 1 and 2 above on a medium
- customarily used for software interchange; or,
-
- c) Accompany it with the information you received as to the offer
- to distribute corresponding source code. (This alternative is
- allowed only for noncommercial distribution and only if you
- received the program in object code or executable form with such
- an offer, in accord with Subsection b above.)
-
-The source code for a work means the preferred form of the work for
-making modifications to it. For an executable work, complete source
-code means all the source code for all modules it contains, plus any
-associated interface definition files, plus the scripts used to
-control compilation and installation of the executable. However, as a
-special exception, the source code distributed need not include
-anything that is normally distributed (in either source or binary
-form) with the major components (compiler, kernel, and so on) of the
-operating system on which the executable runs, unless that component
-itself accompanies the executable.
-
-If distribution of executable or object code is made by offering
-access to copy from a designated place, then offering equivalent
-access to copy the source code from the same place counts as
-distribution of the source code, even though third parties are not
-compelled to copy the source along with the object code.
-
- 4. You may not copy, modify, sublicense, or distribute the Program
-except as expressly provided under this License. Any attempt
-otherwise to copy, modify, sublicense or distribute the Program is
-void, and will automatically terminate your rights under this License.
-However, parties who have received copies, or rights, from you under
-this License will not have their licenses terminated so long as such
-parties remain in full compliance.
-
- 5. You are not required to accept this License, since you have not
-signed it. However, nothing else grants you permission to modify or
-distribute the Program or its derivative works. These actions are
-prohibited by law if you do not accept this License. Therefore, by
-modifying or distributing the Program (or any work based on the
-Program), you indicate your acceptance of this License to do so, and
-all its terms and conditions for copying, distributing or modifying
-the Program or works based on it.
-
- 6. Each time you redistribute the Program (or any work based on the
-Program), the recipient automatically receives a license from the
-original licensor to copy, distribute or modify the Program subject to
-these terms and conditions. You may not impose any further
-restrictions on the recipients' exercise of the rights granted herein.
-You are not responsible for enforcing compliance by third parties to
-this License.
-
- 7. If, as a consequence of a court judgment or allegation of patent
-infringement or for any other reason (not limited to patent issues),
-conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License. If you cannot
-distribute so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you
-may not distribute the Program at all. For example, if a patent
-license would not permit royalty-free redistribution of the Program by
-all those who receive copies directly or indirectly through you, then
-the only way you could satisfy both it and this License would be to
-refrain entirely from distribution of the Program.
-
-If any portion of this section is held invalid or unenforceable under
-any particular circumstance, the balance of the section is intended to
-apply and the section as a whole is intended to apply in other
-circumstances.
-
-It is not the purpose of this section to induce you to infringe any
-patents or other property right claims or to contest validity of any
-such claims; this section has the sole purpose of protecting the
-integrity of the free software distribution system, which is
-implemented by public license practices. Many people have made
-generous contributions to the wide range of software distributed
-through that system in reliance on consistent application of that
-system; it is up to the author/donor to decide if he or she is willing
-to distribute software through any other system and a licensee cannot
-impose that choice.
-
-This section is intended to make thoroughly clear what is believed to
-be a consequence of the rest of this License.
-
- 8. If the distribution and/or use of the Program is restricted in
-certain countries either by patents or by copyrighted interfaces, the
-original copyright holder who places the Program under this License
-may add an explicit geographical distribution limitation excluding
-those countries, so that distribution is permitted only in or among
-countries not thus excluded. In such case, this License incorporates
-the limitation as if written in the body of this License.
-
- 9. The Free Software Foundation may publish revised and/or new versions
-of the General Public License from time to time. Such new versions will
-be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-Each version is given a distinguishing version number. If the Program
-specifies a version number of this License which applies to it and "any
-later version", you have the option of following the terms and conditions
-either of that version or of any later version published by the Free
-Software Foundation. If the Program does not specify a version number of
-this License, you may choose any version ever published by the Free Software
-Foundation.
-
- 10. If you wish to incorporate parts of the Program into other free
-programs whose distribution conditions are different, write to the author
-to ask for permission. For software which is copyrighted by the Free
-Software Foundation, write to the Free Software Foundation; we sometimes
-make exceptions for this. Our decision will be guided by the two goals
-of preserving the free status of all derivatives of our free software and
-of promoting the sharing and reuse of software generally.
-
- NO WARRANTY
-
- 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
-FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
-OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
-PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
-OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
-TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
-PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
-REPAIR OR CORRECTION.
-
- 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
-REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
-INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
-OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
-TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
-YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
-PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
-POSSIBILITY OF SUCH DAMAGES.
-
- END OF TERMS AND CONDITIONS
-
- How to Apply These Terms to Your New Programs
-
- If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
- To do so, attach the following notices to the program. It is safest
-to attach them to the start of each source file to most effectively
-convey the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
- jQuery Color Picker with RGB, HSB and HEX fields, several skins and layouts
- Copyright (C) 2013 Jose Vargas
-
- 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.
-
-Also add information on how to contact you by electronic and paper mail.
-
-If the program is interactive, make it output a short notice like this
-when it starts in an interactive mode:
-
- Gnomovision version 69, Copyright (C) year name of author
- Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
- This is free software, and you are welcome to redistribute it
- under certain conditions; type `show c' for details.
-
-The hypothetical commands `show w' and `show c' should show the appropriate
-parts of the General Public License. Of course, the commands you use may
-be called something other than `show w' and `show c'; they could even be
-mouse-clicks or menu items--whatever suits your program.
-
-You should also get your employer (if you work as a programmer) or your
-school, if any, to sign a "copyright disclaimer" for the program, if
-necessary. Here is a sample; alter the names:
-
- Yoyodyne, Inc., hereby disclaims all copyright interest in the program
- `Gnomovision' (which makes passes at compilers) written by James Hacker.
-
- {signature of Ty Coon}, 1 April 1989
- Ty Coon, President of Vice
-
-This General Public License does not permit incorporating your program into
-proprietary programs. If your program is a subroutine library, you may
-consider it more useful to permit linking proprietary applications with the
-library. If this is what you want to do, use the GNU Lesser General
-Public License instead of this License.
diff --git a/modules/backend/formwidgets/colorpicker/assets/vendor/colpick/README.md b/modules/backend/formwidgets/colorpicker/assets/vendor/colpick/README.md
deleted file mode 100644
index 594e7c01d..000000000
--- a/modules/backend/formwidgets/colorpicker/assets/vendor/colpick/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-colpick Color Picker
-====================
-
-colpick is a simple Photoshop-style color picker jQuery plugin. Its interface is familiar for most users and it's also very lightweight loading less than 30 KB to the browser.
-
-For instructions and examples see: http://colpick.com/plugin
-
-
-
-
- No images! Just a JS and a CSS file -
- Very intuitive Photoshop-like interface -
- Light and dark easy-to-customize CSS3 skins -
- 28 KB total loaded by the browser -
- Works and looks nice even on IE7 -
- Extremely easy to implement -
Layouts
--
- - -Dual licensed under the MIT and GPL licenses. - -Based on Stefan Petre's color picker diff --git a/modules/backend/formwidgets/colorpicker/assets/vendor/colpick/css/colpick.css b/modules/backend/formwidgets/colorpicker/assets/vendor/colpick/css/colpick.css deleted file mode 100644 index 564f60cb3..000000000 --- a/modules/backend/formwidgets/colorpicker/assets/vendor/colpick/css/colpick.css +++ /dev/null @@ -1,420 +0,0 @@ -/* -colpick Color Picker / colpick.com -*/ - -/*Main container*/ -.colpick { - position: absolute; - width: 346px; - height: 170px; - overflow: hidden; - display: none; - font-family: Arial, Helvetica, sans-serif; - background:#ebebeb; - border: 1px solid #bbb; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - - /*Prevents selecting text when dragging the selectors*/ - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -o-user-select: none; - user-select: none; -} -/*Color selection box with gradients*/ -.colpick_color { - position: absolute; - left: 7px; - top: 7px; - width: 156px; - height: 156px; - overflow: hidden; - outline: 1px solid #aaa; - cursor: crosshair; -} -.colpick_color_overlay1 { - position: absolute; - left:0; - top:0; - width: 156px; - height: 156px; - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')"; /* IE8 */ - background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */ - background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff'); /* IE6 & IE7 */ -} -.colpick_color_overlay2 { - position: absolute; - left:0; - top:0; - width: 156px; - height: 156px; - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')"; /* IE8 */ - background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */ - background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */ - background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */ - background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ -} -/*Circular color selector*/ -.colpick_selector_outer { - background:none; - position: absolute; - width: 11px; - height: 11px; - margin: -6px 0 0 -6px; - border: 1px solid black; - border-radius: 50%; -} -.colpick_selector_inner{ - position: absolute; - width: 9px; - height: 9px; - border: 1px solid white; - border-radius: 50%; -} -/*Vertical hue bar*/ -.colpick_hue { - position: absolute; - top: 6px; - left: 175px; - width: 19px; - height: 156px; - border: 1px solid #aaa; - cursor: n-resize; -} -/*Hue bar sliding indicator*/ -.colpick_hue_arrs { - position: absolute; - left: -8px; - width: 35px; - height: 7px; - margin: -7px 0 0 0; -} -.colpick_hue_larr { - position:absolute; - width: 0; - height: 0; - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - border-left: 7px solid #858585; -} -.colpick_hue_rarr { - position:absolute; - right:0; - width: 0; - height: 0; - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - border-right: 7px solid #858585; -} -/*New color box*/ -.colpick_new_color { - position: absolute; - left: 207px; - top: 6px; - width: 60px; - height: 27px; - background: #f00; - border: 1px solid #8f8f8f; -} -/*Current color box*/ -.colpick_current_color { - position: absolute; - left: 277px; - top: 6px; - width: 60px; - height: 27px; - background: #f00; - border: 1px solid #8f8f8f; -} -/*Input field containers*/ -.colpick_field, .colpick_hex_field { - position: absolute; - height: 20px; - width: 60px; - overflow:hidden; - background:#f3f3f3; - color:#b8b8b8; - font-size:12px; - border:1px solid #bdbdbd; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.colpick_rgb_r { - top: 40px; - left: 207px; -} -.colpick_rgb_g { - top: 67px; - left: 207px; -} -.colpick_rgb_b { - top: 94px; - left: 207px; -} -.colpick_hsb_h { - top: 40px; - left: 277px; -} -.colpick_hsb_s { - top: 67px; - left: 277px; -} -.colpick_hsb_b { - top: 94px; - left: 277px; -} -.colpick_hex_field { - width: 68px; - left: 207px; - top: 121px; -} -/*Text field container on focus*/ -.colpick_focus { - border-color: #999; -} -/*Field label container*/ -.colpick_field_letter { - position: absolute; - width: 12px; - height: 20px; - line-height: 20px; - padding-left: 4px; - background: #efefef; - border-right: 1px solid #bdbdbd; - font-weight: bold; - color:#777; -} -/*Text inputs*/ -.colpick_field input, .colpick_hex_field input { - position: absolute; - right: 11px; - margin: 0; - padding: 0; - height: 20px; - line-height: 20px; - background: transparent; - border: none; - font-size: 12px; - font-family: Arial, Helvetica, sans-serif; - color: #555; - text-align: right; - outline: none; -} -.colpick_hex_field input { - right: 4px; -} -/*Field up/down arrows*/ -.colpick_field_arrs { - position: absolute; - top: 0; - right: 0; - width: 9px; - height: 21px; - cursor: n-resize; -} -.colpick_field_uarr { - position: absolute; - top: 5px; - width: 0; - height: 0; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-bottom: 4px solid #959595; -} -.colpick_field_darr { - position: absolute; - bottom:5px; - width: 0; - height: 0; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid #959595; -} -/*Submit/Select button*/ -.colpick_submit { - position: absolute; - left: 207px; - top: 149px; - width: 130px; - height: 22px; - line-height:22px; - background: #efefef; - text-align: center; - color: #555; - font-size: 12px; - font-weight:bold; - border: 1px solid #bdbdbd; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} -.colpick_submit:hover { - background:#f3f3f3; - border-color:#999; - cursor: pointer; -} - -/*full layout with no submit button*/ -.colpick_full_ns .colpick_submit, .colpick_full_ns .colpick_current_color{ - display:none; -} -.colpick_full_ns .colpick_new_color { - width: 130px; - height: 25px; -} -.colpick_full_ns .colpick_rgb_r, .colpick_full_ns .colpick_hsb_h { - top: 42px; -} -.colpick_full_ns .colpick_rgb_g, .colpick_full_ns .colpick_hsb_s { - top: 73px; -} -.colpick_full_ns .colpick_rgb_b, .colpick_full_ns .colpick_hsb_b { - top: 104px; -} -.colpick_full_ns .colpick_hex_field { - top: 135px; -} - -/*rgbhex layout*/ -.colpick_rgbhex .colpick_hsb_h, .colpick_rgbhex .colpick_hsb_s, .colpick_rgbhex .colpick_hsb_b { - display:none; -} -.colpick_rgbhex { - width:282px; -} -.colpick_rgbhex .colpick_field, .colpick_rgbhex .colpick_submit { - width:68px; -} -.colpick_rgbhex .colpick_new_color { - width:34px; - border-right:none; -} -.colpick_rgbhex .colpick_current_color { - width:34px; - left:240px; - border-left:none; -} - -/*rgbhex layout, no submit button*/ -.colpick_rgbhex_ns .colpick_submit, .colpick_rgbhex_ns .colpick_current_color{ - display:none; -} -.colpick_rgbhex_ns .colpick_new_color{ - width:68px; - border: 1px solid #8f8f8f; -} -.colpick_rgbhex_ns .colpick_rgb_r { - top: 42px; -} -.colpick_rgbhex_ns .colpick_rgb_g { - top: 73px; -} -.colpick_rgbhex_ns .colpick_rgb_b { - top: 104px; -} -.colpick_rgbhex_ns .colpick_hex_field { - top: 135px; -} - -/*hex layout*/ -.colpick_hex .colpick_hsb_h, .colpick_hex .colpick_hsb_s, .colpick_hex .colpick_hsb_b, .colpick_hex .colpick_rgb_r, .colpick_hex .colpick_rgb_g, .colpick_hex .colpick_rgb_b { - display:none; -} -.colpick_hex { - width:206px; - height:201px; -} -.colpick_hex .colpick_hex_field { - width:72px; - height:25px; - top:168px; - left:80px; -} -.colpick_hex .colpick_hex_field div, .colpick_hex .colpick_hex_field input { - height: 25px; - line-height: 25px; -} -.colpick_hex .colpick_new_color { - left:9px; - top:168px; - width:30px; - border-right:none; -} -.colpick_hex .colpick_current_color { - left:39px; - top:168px; - width:30px; - border-left:none; -} -.colpick_hex .colpick_submit { - left:164px; - top: 168px; - width:30px; - height:25px; - line-height: 25px; -} - -/*hex layout, no submit button*/ -.colpick_hex_ns .colpick_submit, .colpick_hex_ns .colpick_current_color { - display:none; -} -.colpick_hex_ns .colpick_hex_field { - width:80px; -} -.colpick_hex_ns .colpick_new_color{ - width:60px; - border: 1px solid #8f8f8f; -} - -/*Dark color scheme*/ -.colpick_dark { - background: #161616; - border-color: #2a2a2a; -} -.colpick_dark .colpick_color { - outline-color: #333; -} -.colpick_dark .colpick_hue { - border-color: #555; -} -.colpick_dark .colpick_field, .colpick_dark .colpick_hex_field { - background: #101010; - border-color: #2d2d2d; -} -.colpick_dark .colpick_field_letter { - background: #131313; - border-color: #2d2d2d; - color: #696969; -} -.colpick_dark .colpick_field input, .colpick_dark .colpick_hex_field input { - color: #7a7a7a; -} -.colpick_dark .colpick_field_uarr { - border-bottom-color:#696969; -} -.colpick_dark .colpick_field_darr { - border-top-color:#696969; -} -.colpick_dark .colpick_focus { - border-color:#444; -} -.colpick_dark .colpick_submit { - background: #131313; - border-color:#2d2d2d; - color:#7a7a7a; -} -.colpick_dark .colpick_submit:hover { - background-color:#101010; - border-color:#444; -} \ No newline at end of file diff --git a/modules/backend/formwidgets/colorpicker/assets/vendor/colpick/js/colpick.js b/modules/backend/formwidgets/colorpicker/assets/vendor/colpick/js/colpick.js deleted file mode 100644 index 3f2bd0812..000000000 --- a/modules/backend/formwidgets/colorpicker/assets/vendor/colpick/js/colpick.js +++ /dev/null @@ -1,594 +0,0 @@ -/* -colpick Color Picker -Copyright 2013 Jose Vargas. Licensed under GPL license. Based on Stefan Petre's Color Picker www.eyecon.ro, dual licensed under the MIT and GPL licenses - -For usage and examples: colpick.com/plugin - -This plugin appears to no longer be maintained, so you are free to modify it. - */ - -(function ($) { - var colpick = function () { - var - tpl = ' \ -- -full: -
- -rgbhex: -
- -hex: -
\ -', - defaults = { - showEvent: 'click', - onShow: function () {}, - onBeforeShow: function(){}, - onHide: function () {}, - onChange: function () {}, - onSubmit: function () {}, - colorScheme: 'light', - color: '3289c7', - livePreview: true, - flat: false, - layout: 'full', - submit: 1, - submitText: 'OK', - height: 156 - }, - //Fill the inputs of the plugin - fillRGBFields = function (hsb, cal) { - var rgb = hsbToRgb(hsb); - $(cal).data('colpick').fields - .eq(1).val(rgb.r).end() - .eq(2).val(rgb.g).end() - .eq(3).val(rgb.b).end(); - }, - fillHSBFields = function (hsb, cal) { - $(cal).data('colpick').fields - .eq(4).val(Math.round(hsb.h)).end() - .eq(5).val(Math.round(hsb.s)).end() - .eq(6).val(Math.round(hsb.b)).end(); - }, - fillHexFields = function (hsb, cal) { - $(cal).data('colpick').fields.eq(0).val(hsbToHex(hsb)); - }, - //Set the round selector position - setSelector = function (hsb, cal) { - $(cal).data('colpick').selector.css('backgroundColor', '#' + hsbToHex({h: hsb.h, s: 100, b: 100})); - $(cal).data('colpick').selectorIndic.css({ - left: parseInt($(cal).data('colpick').height * hsb.s/100, 10), - top: parseInt($(cal).data('colpick').height * (100-hsb.b)/100, 10) - }); - }, - //Set the hue selector position - setHue = function (hsb, cal) { - $(cal).data('colpick').hue.css('top', parseInt($(cal).data('colpick').height - $(cal).data('colpick').height * hsb.h/360, 10)); - }, - //Set current and new colors - setCurrentColor = function (hsb, cal) { - $(cal).data('colpick').currentColor.css('backgroundColor', '#' + hsbToHex(hsb)); - }, - setNewColor = function (hsb, cal) { - $(cal).data('colpick').newColor.css('backgroundColor', '#' + hsbToHex(hsb)); - }, - //Called when the new color is changed - change = function (ev) { - var cal = $(this).parent().parent(), col; - if (this.parentNode.className.indexOf('_hex') > 0) { - cal.data('colpick').color = col = hexToHsb(fixHex(this.value)); - fillRGBFields(col, cal.get(0)); - fillHSBFields(col, cal.get(0)); - } else if (this.parentNode.className.indexOf('_hsb') > 0) { - cal.data('colpick').color = col = fixHSB({ - h: parseInt(cal.data('colpick').fields.eq(4).val(), 10), - s: parseInt(cal.data('colpick').fields.eq(5).val(), 10), - b: parseInt(cal.data('colpick').fields.eq(6).val(), 10) - }); - fillRGBFields(col, cal.get(0)); - fillHexFields(col, cal.get(0)); - } else { - cal.data('colpick').color = col = rgbToHsb(fixRGB({ - r: parseInt(cal.data('colpick').fields.eq(1).val(), 10), - g: parseInt(cal.data('colpick').fields.eq(2).val(), 10), - b: parseInt(cal.data('colpick').fields.eq(3).val(), 10) - })); - fillHexFields(col, cal.get(0)); - fillHSBFields(col, cal.get(0)); - } - setSelector(col, cal.get(0)); - setHue(col, cal.get(0)); - setNewColor(col, cal.get(0)); - cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 0]); - }, - //Change style on blur and on focus of inputs - blur = function (ev) { - $(this).parent().removeClass('colpick_focus'); - }, - focus = function () { - $(this).parent().parent().data('colpick').fields.parent().removeClass('colpick_focus'); - $(this).parent().addClass('colpick_focus'); - }, - //Increment/decrement arrows functions - downIncrement = function (ev) { - ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; - var field = $(this).parent().find('input').focus(); - var current = { - el: $(this).parent().addClass('colpick_slider'), - max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255), - y: ev.pageY, - field: field, - val: parseInt(field.val(), 10), - preview: $(this).parent().parent().data('colpick').livePreview - }; - $(document).mouseup(current, upIncrement); - $(document).mousemove(current, moveIncrement); - }, - moveIncrement = function (ev) { - ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val - ev.pageY + ev.data.y, 10)))); - if (ev.data.preview) { - change.apply(ev.data.field.get(0), [true]); - } - return false; - }, - upIncrement = function (ev) { - change.apply(ev.data.field.get(0), [true]); - ev.data.el.removeClass('colpick_slider').find('input').focus(); - $(document).off('mouseup', upIncrement); - $(document).off('mousemove', moveIncrement); - return false; - }, - //Hue slider functions - downHue = function (ev) { - ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; - var current = { - cal: $(this).parent(), - y: $(this).offset().top - }; - $(document).on('mouseup touchend',current,upHue); - $(document).on('mousemove touchmove',current,moveHue); - - var pageY = ((ev.type == 'touchstart') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY ); - change.apply( - current.cal.data('colpick') - .fields.eq(4).val(parseInt(360*(current.cal.data('colpick').height - (pageY - current.y))/current.cal.data('colpick').height, 10)) - .get(0), - [current.cal.data('colpick').livePreview] - ); - return false; - }, - moveHue = function (ev) { - var pageY = ((ev.type == 'touchmove') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY ); - change.apply( - ev.data.cal.data('colpick') - .fields.eq(4).val(parseInt(360*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.y))))/ev.data.cal.data('colpick').height, 10)) - .get(0), - [ev.data.preview] - ); - return false; - }, - upHue = function (ev) { - fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0)); - fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0)); - $(document).off('mouseup touchend',upHue); - $(document).off('mousemove touchmove',moveHue); - return false; - }, - //Color selector functions - downSelector = function (ev) { - ev.preventDefault ? ev.preventDefault() : ev.returnValue = false; - var current = { - cal: $(this).parent(), - pos: $(this).offset() - }; - current.preview = current.cal.data('colpick').livePreview; - - $(document).on('mouseup touchend',current,upSelector); - $(document).on('mousemove touchmove',current,moveSelector); - - var payeX,pageY; - if(ev.type == 'touchstart') { - pageX = ev.originalEvent.changedTouches[0].pageX, - pageY = ev.originalEvent.changedTouches[0].pageY; - } else { - pageX = ev.pageX; - pageY = ev.pageY; - } - - change.apply( - current.cal.data('colpick').fields - .eq(6).val(parseInt(100*(current.cal.data('colpick').height - (pageY - current.pos.top))/current.cal.data('colpick').height, 10)).end() - .eq(5).val(parseInt(100*(pageX - current.pos.left)/current.cal.data('colpick').height, 10)) - .get(0), - [current.preview] - ); - return false; - }, - moveSelector = function (ev) { - var payeX,pageY; - if(ev.type == 'touchmove') { - pageX = ev.originalEvent.changedTouches[0].pageX, - pageY = ev.originalEvent.changedTouches[0].pageY; - } else { - pageX = ev.pageX; - pageY = ev.pageY; - } - - change.apply( - ev.data.cal.data('colpick').fields - .eq(6).val(parseInt(100*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.pos.top))))/ev.data.cal.data('colpick').height, 10)).end() - .eq(5).val(parseInt(100*(Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageX - ev.data.pos.left))))/ev.data.cal.data('colpick').height, 10)) - .get(0), - [ev.data.preview] - ); - return false; - }, - upSelector = function (ev) { - fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0)); - fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0)); - $(document).off('mouseup touchend',upSelector); - $(document).off('mousemove touchmove',moveSelector); - return false; - }, - //Submit button - clickSubmit = function (ev) { - var cal = $(this).parent(); - var col = cal.data('colpick').color; - cal.data('colpick').origColor = col; - setCurrentColor(col, cal.get(0)); - cal.data('colpick').onSubmit(col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el); - }, - //Show/hide the color picker - show = function (ev) { - // Prevent the trigger of any direct parent - ev.stopPropagation(); - var cal = $('#' + $(this).data('colpickId')); - cal.data('colpick').onBeforeShow.apply(this, [cal.get(0)]); - var pos = $(this).offset(); - var top = pos.top + this.offsetHeight; - var left = pos.left; - var viewPort = getViewport(); - var calW = cal.width(); - if (left + calW > viewPort.l + viewPort.w) { - left -= calW; - } - cal.css({left: left + 'px', top: top + 'px'}); - if (cal.data('colpick').onShow.apply(this, [cal.get(0)]) != false) { - cal.show(); - } - //Hide when user clicks outside - $('html').mousedown({cal:cal}, hide); - cal.mousedown(function(ev){ev.stopPropagation();}) - }, - hide = function (ev) { - if (ev.data.cal.data('colpick').onHide.apply(this, [ev.data.cal.get(0)]) != false) { - ev.data.cal.hide(); - } - $('html').off('mousedown', hide); - }, - getViewport = function () { - var m = document.compatMode == 'CSS1Compat'; - return { - l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft), - w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth) - }; - }, - //Fix the values if the user enters a negative or high value - fixHSB = function (hsb) { - return { - h: Math.min(360, Math.max(0, hsb.h)), - s: Math.min(100, Math.max(0, hsb.s)), - b: Math.min(100, Math.max(0, hsb.b)) - }; - }, - fixRGB = function (rgb) { - return { - r: Math.min(255, Math.max(0, rgb.r)), - g: Math.min(255, Math.max(0, rgb.g)), - b: Math.min(255, Math.max(0, rgb.b)) - }; - }, - fixHex = function (hex) { - var len = 6 - hex.length; - if (len > 0) { - var o = []; - for (var i=0; i\ - \ -\ -\ -\ - \ - \ -\ - \ - \ -\ -\ -\ -#\ - \ -\ -\ -R\ - \ -\ - \ - \ -\ -\ -\ -G\ - \ -\ - \ - \ -\ -\ -\ -B\ - \ -\ - \ - \ -\ -\ -\ -H\ - \ -\ - \ - \ -\ -\ -\ -S\ - \ -\ - \ - \ -\ -\ -\ - \ -B\ - \ -\ - \ - \ -\ -
",
+ "
"
+ ].join(''),
+ markup = (function () {
+
+ // IE does not support gradients with multiple stops, so we need to simulate
+ // that for the rainbow slider with 8 divs that each have a single gradient
+ var gradientFix = "";
+ if (IE) {
+ for (var i = 1; i <= 6; i++) {
+ gradientFix += "";
+ }
+ }
+
+ return [
+ "",
+ "
▼
",
+ "",
+ "
"
+ ].join("");
+ })();
+
+ function paletteTemplate (p, color, className, opts) {
+ var html = [];
+ for (var i = 0; i < p.length; i++) {
+ var current = p[i];
+ if(current) {
+ var tiny = tinycolor(current);
+ var c = tiny.toHsl().l < 0.5 ? "sp-thumb-el sp-thumb-dark" : "sp-thumb-el sp-thumb-light";
+ c += (tinycolor.equals(color, current)) ? " sp-thumb-active" : "";
+ var formattedString = tiny.toString(opts.preferredFormat || "rgb");
+ var swatchStyle = rgbaSupport ? ("background-color:" + tiny.toRgbString()) : "filter:" + tiny.toFilter();
+ html.push('');
+ } else {
+ var cls = 'sp-clear-display';
+ html.push($('')
+ .append($('')
+ .attr('title', opts.noColorSelectedText)
+ )
+ .html()
+ );
+ }
+ }
+ return "",
+ "",
+ "",
+ "
",
+ "",
+ "
",
+ "",
+ "",
+ "",
+ "
",
+ "",
+ "
",
+ "",
+ "
",
+ "",
+ "
",
+ "",
+ "",
+ "
",
+ "",
+ "
",
+ "",
+ "",
+ gradientFix,
+ "
",
+ "",
+ "",
+ "
",
+ "",
+ "",
+ "" + html.join('') + "
";
+ }
+
+ function hideAll() {
+ for (var i = 0; i < spectrums.length; i++) {
+ if (spectrums[i]) {
+ spectrums[i].hide();
+ }
+ }
+ }
+
+ function instanceOptions(o, callbackContext) {
+ var opts = $.extend({}, defaultOpts, o);
+ opts.callbacks = {
+ 'move': bind(opts.move, callbackContext),
+ 'change': bind(opts.change, callbackContext),
+ 'show': bind(opts.show, callbackContext),
+ 'hide': bind(opts.hide, callbackContext),
+ 'beforeShow': bind(opts.beforeShow, callbackContext)
+ };
+
+ return opts;
+ }
+
+ function spectrum(element, o) {
+
+ var opts = instanceOptions(o, element),
+ flat = opts.flat,
+ showSelectionPalette = opts.showSelectionPalette,
+ localStorageKey = opts.localStorageKey,
+ theme = opts.theme,
+ callbacks = opts.callbacks,
+ resize = throttle(reflow, 10),
+ visible = false,
+ isDragging = false,
+ dragWidth = 0,
+ dragHeight = 0,
+ dragHelperHeight = 0,
+ slideHeight = 0,
+ slideWidth = 0,
+ alphaWidth = 0,
+ alphaSlideHelperWidth = 0,
+ slideHelperHeight = 0,
+ currentHue = 0,
+ currentSaturation = 0,
+ currentValue = 0,
+ currentAlpha = 1,
+ palette = [],
+ paletteArray = [],
+ paletteLookup = {},
+ selectionPalette = opts.selectionPalette.slice(0),
+ maxSelectionSize = opts.maxSelectionSize,
+ draggingClass = "sp-dragging",
+ shiftMovementDirection = null;
+
+ var doc = element.ownerDocument,
+ body = doc.body,
+ boundElement = $(element),
+ disabled = false,
+ container = $(markup, doc).addClass(theme),
+ pickerContainer = container.find(".sp-picker-container"),
+ dragger = container.find(".sp-color"),
+ dragHelper = container.find(".sp-dragger"),
+ slider = container.find(".sp-hue"),
+ slideHelper = container.find(".sp-slider"),
+ alphaSliderInner = container.find(".sp-alpha-inner"),
+ alphaSlider = container.find(".sp-alpha"),
+ alphaSlideHelper = container.find(".sp-alpha-handle"),
+ textInput = container.find(".sp-input"),
+ paletteContainer = container.find(".sp-palette"),
+ initialColorContainer = container.find(".sp-initial"),
+ cancelButton = container.find(".sp-cancel"),
+ clearButton = container.find(".sp-clear"),
+ chooseButton = container.find(".sp-choose"),
+ toggleButton = container.find(".sp-palette-toggle"),
+ isInput = boundElement.is("input"),
+ isInputTypeColor = isInput && boundElement.attr("type") === "color" && inputTypeColorSupport(),
+ shouldReplace = isInput && !flat,
+ replacer = (shouldReplace) ? $(replaceInput).addClass(theme).addClass(opts.className).addClass(opts.replacerClassName) : $([]),
+ offsetElement = (shouldReplace) ? replacer : boundElement,
+ previewElement = replacer.find(".sp-preview-inner"),
+ initialColor = opts.color || (isInput && boundElement.val()),
+ colorOnShow = false,
+ currentPreferredFormat = opts.preferredFormat,
+ clickoutFiresChange = !opts.showButtons || opts.clickoutFiresChange,
+ isEmpty = !initialColor,
+ allowEmpty = opts.allowEmpty && !isInputTypeColor;
+
+ function applyOptions() {
+
+ if (opts.showPaletteOnly) {
+ opts.showPalette = true;
+ }
+
+ toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
+
+ if (opts.palette) {
+ palette = opts.palette.slice(0);
+ paletteArray = $.isArray(palette[0]) ? palette : [palette];
+ paletteLookup = {};
+ for (var i = 0; i < paletteArray.length; i++) {
+ for (var j = 0; j < paletteArray[i].length; j++) {
+ var rgb = tinycolor(paletteArray[i][j]).toRgbString();
+ paletteLookup[rgb] = true;
+ }
+ }
+ }
+
+ container.toggleClass("sp-flat", flat);
+ container.toggleClass("sp-input-disabled", !opts.showInput);
+ container.toggleClass("sp-alpha-enabled", opts.showAlpha);
+ container.toggleClass("sp-clear-enabled", allowEmpty);
+ container.toggleClass("sp-buttons-disabled", !opts.showButtons);
+ container.toggleClass("sp-palette-buttons-disabled", !opts.togglePaletteOnly);
+ container.toggleClass("sp-palette-disabled", !opts.showPalette);
+ container.toggleClass("sp-palette-only", opts.showPaletteOnly);
+ container.toggleClass("sp-initial-disabled", !opts.showInitial);
+ container.addClass(opts.className).addClass(opts.containerClassName);
+
+ reflow();
+ }
+
+ function initialize() {
+
+ if (IE) {
+ container.find("*:not(input)").attr("unselectable", "on");
+ }
+
+ applyOptions();
+
+ if (shouldReplace) {
+ boundElement.after(replacer).hide();
+ }
+
+ if (!allowEmpty) {
+ clearButton.hide();
+ }
+
+ if (flat) {
+ boundElement.after(container).hide();
+ }
+ else {
+
+ var appendTo = opts.appendTo === "parent" ? boundElement.parent() : $(opts.appendTo);
+ if (appendTo.length !== 1) {
+ appendTo = $("body");
+ }
+
+ appendTo.append(container);
+ }
+
+ updateSelectionPaletteFromStorage();
+
+ offsetElement.bind("click.spectrum touchstart.spectrum", function (e) {
+ if (!disabled) {
+ toggle();
+ }
+
+ e.stopPropagation();
+
+ if (!$(e.target).is("input")) {
+ e.preventDefault();
+ }
+ });
+
+ if(boundElement.is(":disabled") || (opts.disabled === true)) {
+ disable();
+ }
+
+ // Prevent clicks from bubbling up to document. This would cause it to be hidden.
+ container.click(stopPropagation);
+
+ // Handle user typed input
+ textInput.change(setFromTextInput);
+ textInput.bind("paste", function () {
+ setTimeout(setFromTextInput, 1);
+ });
+ textInput.keydown(function (e) { if (e.keyCode == 13) { setFromTextInput(); } });
+
+ cancelButton.text(opts.cancelText);
+ cancelButton.bind("click.spectrum", function (e) {
+ e.stopPropagation();
+ e.preventDefault();
+ revert();
+ hide();
+ });
+
+ clearButton.attr("title", opts.clearText);
+ clearButton.bind("click.spectrum", function (e) {
+ e.stopPropagation();
+ e.preventDefault();
+ isEmpty = true;
+ move();
+
+ if(flat) {
+ //for the flat style, this is a change event
+ updateOriginalInput(true);
+ }
+ });
+
+ chooseButton.text(opts.chooseText);
+ chooseButton.bind("click.spectrum", function (e) {
+ e.stopPropagation();
+ e.preventDefault();
+
+ if (IE && textInput.is(":focus")) {
+ textInput.trigger('change');
+ }
+
+ if (isValid()) {
+ updateOriginalInput(true);
+ hide();
+ }
+ });
+
+ toggleButton.text(opts.showPaletteOnly ? opts.togglePaletteMoreText : opts.togglePaletteLessText);
+ toggleButton.bind("click.spectrum", function (e) {
+ e.stopPropagation();
+ e.preventDefault();
+
+ opts.showPaletteOnly = !opts.showPaletteOnly;
+
+ // To make sure the Picker area is drawn on the right, next to the
+ // Palette area (and not below the palette), first move the Palette
+ // to the left to make space for the picker, plus 5px extra.
+ // The 'applyOptions' function puts the whole container back into place
+ // and takes care of the button-text and the sp-palette-only CSS class.
+ if (!opts.showPaletteOnly && !flat) {
+ container.css('left', '-=' + (pickerContainer.outerWidth(true) + 5));
+ }
+ applyOptions();
+ });
+
+ draggable(alphaSlider, function (dragX, dragY, e) {
+ currentAlpha = (dragX / alphaWidth);
+ isEmpty = false;
+ if (e.shiftKey) {
+ currentAlpha = Math.round(currentAlpha * 10) / 10;
+ }
+
+ move();
+ }, dragStart, dragStop);
+
+ draggable(slider, function (dragX, dragY) {
+ currentHue = parseFloat(dragY / slideHeight);
+ isEmpty = false;
+ if (!opts.showAlpha) {
+ currentAlpha = 1;
+ }
+ move();
+ }, dragStart, dragStop);
+
+ draggable(dragger, function (dragX, dragY, e) {
+
+ // shift+drag should snap the movement to either the x or y axis.
+ if (!e.shiftKey) {
+ shiftMovementDirection = null;
+ }
+ else if (!shiftMovementDirection) {
+ var oldDragX = currentSaturation * dragWidth;
+ var oldDragY = dragHeight - (currentValue * dragHeight);
+ var furtherFromX = Math.abs(dragX - oldDragX) > Math.abs(dragY - oldDragY);
+
+ shiftMovementDirection = furtherFromX ? "x" : "y";
+ }
+
+ var setSaturation = !shiftMovementDirection || shiftMovementDirection === "x";
+ var setValue = !shiftMovementDirection || shiftMovementDirection === "y";
+
+ if (setSaturation) {
+ currentSaturation = parseFloat(dragX / dragWidth);
+ }
+ if (setValue) {
+ currentValue = parseFloat((dragHeight - dragY) / dragHeight);
+ }
+
+ isEmpty = false;
+ if (!opts.showAlpha) {
+ currentAlpha = 1;
+ }
+
+ move();
+
+ }, dragStart, dragStop);
+
+ if (!!initialColor) {
+ set(initialColor);
+
+ // In case color was black - update the preview UI and set the format
+ // since the set function will not run (default color is black).
+ updateUI();
+ currentPreferredFormat = opts.preferredFormat || tinycolor(initialColor).format;
+
+ addColorToSelectionPalette(initialColor);
+ }
+ else {
+ updateUI();
+ }
+
+ if (flat) {
+ show();
+ }
+
+ function paletteElementClick(e) {
+ if (e.data && e.data.ignore) {
+ set($(e.target).closest(".sp-thumb-el").data("color"));
+ move();
+ }
+ else {
+ set($(e.target).closest(".sp-thumb-el").data("color"));
+ move();
+ updateOriginalInput(true);
+ if (opts.hideAfterPaletteSelect) {
+ hide();
+ }
+ }
+
+ return false;
+ }
+
+ var paletteEvent = IE ? "mousedown.spectrum" : "click.spectrum touchstart.spectrum";
+ paletteContainer.delegate(".sp-thumb-el", paletteEvent, paletteElementClick);
+ initialColorContainer.delegate(".sp-thumb-el:nth-child(1)", paletteEvent, { ignore: true }, paletteElementClick);
+ }
+
+ function updateSelectionPaletteFromStorage() {
+
+ if (localStorageKey && window.localStorage) {
+
+ // Migrate old palettes over to new format. May want to remove this eventually.
+ try {
+ var oldPalette = window.localStorage[localStorageKey].split(",#");
+ if (oldPalette.length > 1) {
+ delete window.localStorage[localStorageKey];
+ $.each(oldPalette, function(i, c) {
+ addColorToSelectionPalette(c);
+ });
+ }
+ }
+ catch(e) { }
+
+ try {
+ selectionPalette = window.localStorage[localStorageKey].split(";");
+ }
+ catch (e) { }
+ }
+ }
+
+ function addColorToSelectionPalette(color) {
+ if (showSelectionPalette) {
+ var rgb = tinycolor(color).toRgbString();
+ if (!paletteLookup[rgb] && $.inArray(rgb, selectionPalette) === -1) {
+ selectionPalette.push(rgb);
+ while(selectionPalette.length > maxSelectionSize) {
+ selectionPalette.shift();
+ }
+ }
+
+ if (localStorageKey && window.localStorage) {
+ try {
+ window.localStorage[localStorageKey] = selectionPalette.join(";");
+ }
+ catch(e) { }
+ }
+ }
+ }
+
+ function getUniqueSelectionPalette() {
+ var unique = [];
+ if (opts.showPalette) {
+ for (var i = 0; i < selectionPalette.length; i++) {
+ var rgb = tinycolor(selectionPalette[i]).toRgbString();
+
+ if (!paletteLookup[rgb]) {
+ unique.push(selectionPalette[i]);
+ }
+ }
+ }
+
+ return unique.reverse().slice(0, opts.maxSelectionSize);
+ }
+
+ function drawPalette() {
+
+ var currentColor = get();
+
+ var html = $.map(paletteArray, function (palette, i) {
+ return paletteTemplate(palette, currentColor, "sp-palette-row sp-palette-row-" + i, opts);
+ });
+
+ updateSelectionPaletteFromStorage();
+
+ if (selectionPalette) {
+ html.push(paletteTemplate(getUniqueSelectionPalette(), currentColor, "sp-palette-row sp-palette-row-selection", opts));
+ }
+
+ paletteContainer.html(html.join(""));
+ }
+
+ function drawInitial() {
+ if (opts.showInitial) {
+ var initial = colorOnShow;
+ var current = get();
+ initialColorContainer.html(paletteTemplate([initial, current], current, "sp-palette-row-initial", opts));
+ }
+ }
+
+ function dragStart() {
+ if (dragHeight <= 0 || dragWidth <= 0 || slideHeight <= 0) {
+ reflow();
+ }
+ isDragging = true;
+ container.addClass(draggingClass);
+ shiftMovementDirection = null;
+ boundElement.trigger('dragstart.spectrum', [ get() ]);
+ }
+
+ function dragStop() {
+ isDragging = false;
+ container.removeClass(draggingClass);
+ boundElement.trigger('dragstop.spectrum', [ get() ]);
+ }
+
+ function setFromTextInput() {
+
+ var value = textInput.val();
+
+ if ((value === null || value === "") && allowEmpty) {
+ set(null);
+ updateOriginalInput(true);
+ }
+ else {
+ var tiny = tinycolor(value);
+ if (tiny.isValid()) {
+ set(tiny);
+ updateOriginalInput(true);
+ }
+ else {
+ textInput.addClass("sp-validation-error");
+ }
+ }
+ }
+
+ function toggle() {
+ if (visible) {
+ hide();
+ }
+ else {
+ show();
+ }
+ }
+
+ function show() {
+ var event = $.Event('beforeShow.spectrum');
+
+ if (visible) {
+ reflow();
+ return;
+ }
+
+ boundElement.trigger(event, [ get() ]);
+
+ if (callbacks.beforeShow(get()) === false || event.isDefaultPrevented()) {
+ return;
+ }
+
+ hideAll();
+ visible = true;
+
+ $(doc).bind("keydown.spectrum", onkeydown);
+ $(doc).bind("click.spectrum", clickout);
+ $(window).bind("resize.spectrum", resize);
+ replacer.addClass("sp-active");
+ container.removeClass("sp-hidden");
+
+ reflow();
+ updateUI();
+
+ colorOnShow = get();
+
+ drawInitial();
+ callbacks.show(colorOnShow);
+ boundElement.trigger('show.spectrum', [ colorOnShow ]);
+ }
+
+ function onkeydown(e) {
+ // Close on ESC
+ if (e.keyCode === 27) {
+ hide();
+ }
+ }
+
+ function clickout(e) {
+ // Return on right click.
+ if (e.button == 2) { return; }
+
+ // If a drag event was happening during the mouseup, don't hide
+ // on click.
+ if (isDragging) { return; }
+
+ if (clickoutFiresChange) {
+ updateOriginalInput(true);
+ }
+ else {
+ revert();
+ }
+ hide();
+ }
+
+ function hide() {
+ // Return if hiding is unnecessary
+ if (!visible || flat) { return; }
+ visible = false;
+
+ $(doc).unbind("keydown.spectrum", onkeydown);
+ $(doc).unbind("click.spectrum", clickout);
+ $(window).unbind("resize.spectrum", resize);
+
+ replacer.removeClass("sp-active");
+ container.addClass("sp-hidden");
+
+ callbacks.hide(get());
+ boundElement.trigger('hide.spectrum', [ get() ]);
+ }
+
+ function revert() {
+ set(colorOnShow, true);
+ }
+
+ function set(color, ignoreFormatChange) {
+ if (tinycolor.equals(color, get())) {
+ // Update UI just in case a validation error needs
+ // to be cleared.
+ updateUI();
+ return;
+ }
+
+ var newColor, newHsv;
+ if (!color && allowEmpty) {
+ isEmpty = true;
+ } else {
+ isEmpty = false;
+ newColor = tinycolor(color);
+ newHsv = newColor.toHsv();
+
+ currentHue = (newHsv.h % 360) / 360;
+ currentSaturation = newHsv.s;
+ currentValue = newHsv.v;
+ currentAlpha = newHsv.a;
+ }
+ updateUI();
+
+ if (newColor && newColor.isValid() && !ignoreFormatChange) {
+ currentPreferredFormat = opts.preferredFormat || newColor.getFormat();
+ }
+ }
+
+ function get(opts) {
+ opts = opts || { };
+
+ if (allowEmpty && isEmpty) {
+ return null;
+ }
+
+ return tinycolor.fromRatio({
+ h: currentHue,
+ s: currentSaturation,
+ v: currentValue,
+ a: Math.round(currentAlpha * 100) / 100
+ }, { format: opts.format || currentPreferredFormat });
+ }
+
+ function isValid() {
+ return !textInput.hasClass("sp-validation-error");
+ }
+
+ function move() {
+ updateUI();
+
+ callbacks.move(get());
+ boundElement.trigger('move.spectrum', [ get() ]);
+ }
+
+ function updateUI() {
+
+ textInput.removeClass("sp-validation-error");
+
+ updateHelperLocations();
+
+ // Update dragger background color (gradients take care of saturation and value).
+ var flatColor = tinycolor.fromRatio({ h: currentHue, s: 1, v: 1 });
+ dragger.css("background-color", flatColor.toHexString());
+
+ // Get a format that alpha will be included in (hex and names ignore alpha)
+ var format = currentPreferredFormat;
+ if (currentAlpha < 1 && !(currentAlpha === 0 && format === "name")) {
+ if (format === "hex" || format === "hex3" || format === "hex6" || format === "name") {
+ format = "rgb";
+ }
+ }
+
+ var realColor = get({ format: format }),
+ displayColor = '';
+
+ //reset background info for preview element
+ previewElement.removeClass("sp-clear-display");
+ previewElement.css('background-color', 'transparent');
+
+ if (!realColor && allowEmpty) {
+ // Update the replaced elements background with icon indicating no color selection
+ previewElement.addClass("sp-clear-display");
+ }
+ else {
+ var realHex = realColor.toHexString(),
+ realRgb = realColor.toRgbString();
+
+ // Update the replaced elements background color (with actual selected color)
+ if (rgbaSupport || realColor.alpha === 1) {
+ previewElement.css("background-color", realRgb);
+ }
+ else {
+ previewElement.css("background-color", "transparent");
+ previewElement.css("filter", realColor.toFilter());
+ }
+
+ if (opts.showAlpha) {
+ var rgb = realColor.toRgb();
+ rgb.a = 0;
+ var realAlpha = tinycolor(rgb).toRgbString();
+ var gradient = "linear-gradient(left, " + realAlpha + ", " + realHex + ")";
+
+ if (IE) {
+ alphaSliderInner.css("filter", tinycolor(realAlpha).toFilter({ gradientType: 1 }, realHex));
+ }
+ else {
+ alphaSliderInner.css("background", "-webkit-" + gradient);
+ alphaSliderInner.css("background", "-moz-" + gradient);
+ alphaSliderInner.css("background", "-ms-" + gradient);
+ // Use current syntax gradient on unprefixed property.
+ alphaSliderInner.css("background",
+ "linear-gradient(to right, " + realAlpha + ", " + realHex + ")");
+ }
+ }
+
+ displayColor = realColor.toString(format);
+ }
+
+ // Update the text entry input as it changes happen
+ if (opts.showInput) {
+ textInput.val(displayColor);
+ }
+
+ if (opts.showPalette) {
+ drawPalette();
+ }
+
+ drawInitial();
+ }
+
+ function updateHelperLocations() {
+ var s = currentSaturation;
+ var v = currentValue;
+
+ if(allowEmpty && isEmpty) {
+ //if selected color is empty, hide the helpers
+ alphaSlideHelper.hide();
+ slideHelper.hide();
+ dragHelper.hide();
+ }
+ else {
+ //make sure helpers are visible
+ alphaSlideHelper.show();
+ slideHelper.show();
+ dragHelper.show();
+
+ // Where to show the little circle in that displays your current selected color
+ var dragX = s * dragWidth;
+ var dragY = dragHeight - (v * dragHeight);
+ dragX = Math.max(
+ -dragHelperHeight,
+ Math.min(dragWidth - dragHelperHeight, dragX - dragHelperHeight)
+ );
+ dragY = Math.max(
+ -dragHelperHeight,
+ Math.min(dragHeight - dragHelperHeight, dragY - dragHelperHeight)
+ );
+ dragHelper.css({
+ "top": dragY + "px",
+ "left": dragX + "px"
+ });
+
+ var alphaX = currentAlpha * alphaWidth;
+ alphaSlideHelper.css({
+ "left": (alphaX - (alphaSlideHelperWidth / 2)) + "px"
+ });
+
+ // Where to show the bar that displays your current selected hue
+ var slideY = (currentHue) * slideHeight;
+ slideHelper.css({
+ "top": (slideY - slideHelperHeight) + "px"
+ });
+ }
+ }
+
+ function updateOriginalInput(fireCallback) {
+ var color = get(),
+ displayColor = '',
+ hasChanged = !tinycolor.equals(color, colorOnShow);
+
+ if (color) {
+ displayColor = color.toString(currentPreferredFormat);
+ // Update the selection palette with the current color
+ addColorToSelectionPalette(color);
+ }
+
+ if (isInput) {
+ boundElement.val(displayColor);
+ }
+
+ if (fireCallback && hasChanged) {
+ callbacks.change(color);
+ boundElement.trigger('change', [ color ]);
+ }
+ }
+
+ function reflow() {
+ if (!visible) {
+ return; // Calculations would be useless and wouldn't be reliable anyways
+ }
+ dragWidth = dragger.width();
+ dragHeight = dragger.height();
+ dragHelperHeight = dragHelper.height();
+ slideWidth = slider.width();
+ slideHeight = slider.height();
+ slideHelperHeight = slideHelper.height();
+ alphaWidth = alphaSlider.width();
+ alphaSlideHelperWidth = alphaSlideHelper.width();
+
+ if (!flat) {
+ container.css("position", "absolute");
+ if (opts.offset) {
+ container.offset(opts.offset);
+ } else {
+ container.offset(getOffset(container, offsetElement));
+ }
+ }
+
+ updateHelperLocations();
+
+ if (opts.showPalette) {
+ drawPalette();
+ }
+
+ boundElement.trigger('reflow.spectrum');
+ }
+
+ function destroy() {
+ boundElement.show();
+ offsetElement.unbind("click.spectrum touchstart.spectrum");
+ container.remove();
+ replacer.remove();
+ spectrums[spect.id] = null;
+ }
+
+ function option(optionName, optionValue) {
+ if (optionName === undefined) {
+ return $.extend({}, opts);
+ }
+ if (optionValue === undefined) {
+ return opts[optionName];
+ }
+
+ opts[optionName] = optionValue;
+
+ if (optionName === "preferredFormat") {
+ currentPreferredFormat = opts.preferredFormat;
+ }
+ applyOptions();
+ }
+
+ function enable() {
+ disabled = false;
+ boundElement.attr("disabled", false);
+ offsetElement.removeClass("sp-disabled");
+ }
+
+ function disable() {
+ hide();
+ disabled = true;
+ boundElement.attr("disabled", true);
+ offsetElement.addClass("sp-disabled");
+ }
+
+ function setOffset(coord) {
+ opts.offset = coord;
+ reflow();
+ }
+
+ initialize();
+
+ var spect = {
+ show: show,
+ hide: hide,
+ toggle: toggle,
+ reflow: reflow,
+ option: option,
+ enable: enable,
+ disable: disable,
+ offset: setOffset,
+ set: function (c) {
+ set(c);
+ updateOriginalInput();
+ },
+ get: get,
+ destroy: destroy,
+ container: container
+ };
+
+ spect.id = spectrums.push(spect) - 1;
+
+ return spect;
+ }
+
+ /**
+ * checkOffset - get the offset below/above and left/right element depending on screen position
+ * Thanks https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.datepicker.js
+ */
+ function getOffset(picker, input) {
+ var extraY = 0;
+ var dpWidth = picker.outerWidth();
+ var dpHeight = picker.outerHeight();
+ var inputHeight = input.outerHeight();
+ var doc = picker[0].ownerDocument;
+ var docElem = doc.documentElement;
+ var viewWidth = docElem.clientWidth + $(doc).scrollLeft();
+ var viewHeight = docElem.clientHeight + $(doc).scrollTop();
+ var offset = input.offset();
+ offset.top += inputHeight;
+
+ offset.left -=
+ Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
+ Math.abs(offset.left + dpWidth - viewWidth) : 0);
+
+ offset.top -=
+ Math.min(offset.top, ((offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
+ Math.abs(dpHeight + inputHeight - extraY) : extraY));
+
+ return offset;
+ }
+
+ /**
+ * noop - do nothing
+ */
+ function noop() {
+
+ }
+
+ /**
+ * stopPropagation - makes the code only doing this a little easier to read in line
+ */
+ function stopPropagation(e) {
+ e.stopPropagation();
+ }
+
+ /**
+ * Create a function bound to a given object
+ * Thanks to underscore.js
+ */
+ function bind(func, obj) {
+ var slice = Array.prototype.slice;
+ var args = slice.call(arguments, 2);
+ return function () {
+ return func.apply(obj, args.concat(slice.call(arguments)));
+ };
+ }
+
+ /**
+ * Lightweight drag helper. Handles containment within the element, so that
+ * when dragging, the x is within [0,element.width] and y is within [0,element.height]
+ */
+ function draggable(element, onmove, onstart, onstop) {
+ onmove = onmove || function () { };
+ onstart = onstart || function () { };
+ onstop = onstop || function () { };
+ var doc = document;
+ var dragging = false;
+ var offset = {};
+ var maxHeight = 0;
+ var maxWidth = 0;
+ var hasTouch = ('ontouchstart' in window);
+
+ var duringDragEvents = {};
+ duringDragEvents["selectstart"] = prevent;
+ duringDragEvents["dragstart"] = prevent;
+ duringDragEvents["touchmove mousemove"] = move;
+ duringDragEvents["touchend mouseup"] = stop;
+
+ function prevent(e) {
+ if (e.stopPropagation) {
+ e.stopPropagation();
+ }
+ if (e.preventDefault) {
+ e.preventDefault();
+ }
+ e.returnValue = false;
+ }
+
+ function move(e) {
+ if (dragging) {
+ // Mouseup happened outside of window
+ if (IE && doc.documentMode < 9 && !e.button) {
+ return stop();
+ }
+
+ var t0 = e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0];
+ var pageX = t0 && t0.pageX || e.pageX;
+ var pageY = t0 && t0.pageY || e.pageY;
+
+ var dragX = Math.max(0, Math.min(pageX - offset.left, maxWidth));
+ var dragY = Math.max(0, Math.min(pageY - offset.top, maxHeight));
+
+ if (hasTouch) {
+ // Stop scrolling in iOS
+ prevent(e);
+ }
+
+ onmove.apply(element, [dragX, dragY, e]);
+ }
+ }
+
+ function start(e) {
+ var rightclick = (e.which) ? (e.which == 3) : (e.button == 2);
+
+ if (!rightclick && !dragging) {
+ if (onstart.apply(element, arguments) !== false) {
+ dragging = true;
+ maxHeight = $(element).height();
+ maxWidth = $(element).width();
+ offset = $(element).offset();
+
+ $(doc).bind(duringDragEvents);
+ $(doc.body).addClass("sp-dragging");
+
+ move(e);
+
+ prevent(e);
+ }
+ }
+ }
+
+ function stop() {
+ if (dragging) {
+ $(doc).unbind(duringDragEvents);
+ $(doc.body).removeClass("sp-dragging");
+
+ // Wait a tick before notifying observers to allow the click event
+ // to fire in Chrome.
+ setTimeout(function() {
+ onstop.apply(element, arguments);
+ }, 0);
+ }
+ dragging = false;
+ }
+
+ $(element).bind("touchstart mousedown", start);
+ }
+
+ function throttle(func, wait, debounce) {
+ var timeout;
+ return function () {
+ var context = this, args = arguments;
+ var throttler = function () {
+ timeout = null;
+ func.apply(context, args);
+ };
+ if (debounce) clearTimeout(timeout);
+ if (debounce || !timeout) timeout = setTimeout(throttler, wait);
+ };
+ }
+
+ function inputTypeColorSupport() {
+ return $.fn.spectrum.inputTypeColorSupport();
+ }
+
+ /**
+ * Define a jQuery plugin
+ */
+ var dataID = "spectrum.id";
+ $.fn.spectrum = function (opts, extra) {
+
+ if (typeof opts == "string") {
+
+ var returnValue = this;
+ var args = Array.prototype.slice.call( arguments, 1 );
+
+ this.each(function () {
+ var spect = spectrums[$(this).data(dataID)];
+ if (spect) {
+ var method = spect[opts];
+ if (!method) {
+ throw new Error( "Spectrum: no such method: '" + opts + "'" );
+ }
+
+ if (opts == "get") {
+ returnValue = spect.get();
+ }
+ else if (opts == "container") {
+ returnValue = spect.container;
+ }
+ else if (opts == "option") {
+ returnValue = spect.option.apply(spect, args);
+ }
+ else if (opts == "destroy") {
+ spect.destroy();
+ $(this).removeData(dataID);
+ }
+ else {
+ method.apply(spect, args);
+ }
+ }
+ });
+
+ return returnValue;
+ }
+
+ // Initializing a new instance of spectrum
+ return this.spectrum("destroy").each(function () {
+ var options = $.extend({}, opts, $(this).data());
+ var spect = spectrum(this, options);
+ $(this).data(dataID, spect.id);
+ });
+ };
+
+ $.fn.spectrum.load = true;
+ $.fn.spectrum.loadOpts = {};
+ $.fn.spectrum.draggable = draggable;
+ $.fn.spectrum.defaults = defaultOpts;
+ $.fn.spectrum.inputTypeColorSupport = function inputTypeColorSupport() {
+ if (typeof inputTypeColorSupport._cachedResult === "undefined") {
+ var colorInput = $("")[0]; // if color element is supported, value will default to not null
+ inputTypeColorSupport._cachedResult = colorInput.type === "color" && colorInput.value !== "";
+ }
+ return inputTypeColorSupport._cachedResult;
+ };
+
+ $.spectrum = { };
+ $.spectrum.localization = { };
+ $.spectrum.palettes = { };
+
+ $.fn.spectrum.processNativeColorInputs = function () {
+ var colorInputs = $("input[type=color]");
+ if (colorInputs.length && !inputTypeColorSupport()) {
+ colorInputs.spectrum({
+ preferredFormat: "hex6"
+ });
+ }
+ };
+
+ // TinyColor v1.1.2
+ // https://github.com/bgrins/TinyColor
+ // Brian Grinstead, MIT License
+
+ (function() {
+
+ var trimLeft = /^[\s,#]+/,
+ trimRight = /\s+$/,
+ tinyCounter = 0,
+ math = Math,
+ mathRound = math.round,
+ mathMin = math.min,
+ mathMax = math.max,
+ mathRandom = math.random;
+
+ var tinycolor = function(color, opts) {
+
+ color = (color) ? color : '';
+ opts = opts || { };
+
+ // If input is already a tinycolor, return itself
+ if (color instanceof tinycolor) {
+ return color;
+ }
+ // If we are called as a function, call using new instead
+ if (!(this instanceof tinycolor)) {
+ return new tinycolor(color, opts);
+ }
+
+ var rgb = inputToRGB(color);
+ this._originalInput = color,
+ this._r = rgb.r,
+ this._g = rgb.g,
+ this._b = rgb.b,
+ this._a = rgb.a,
+ this._roundA = mathRound(100*this._a) / 100,
+ this._format = opts.format || rgb.format;
+ this._gradientType = opts.gradientType;
+
+ // Don't let the range of [0,255] come back in [0,1].
+ // Potentially lose a little bit of precision here, but will fix issues where
+ // .5 gets interpreted as half of the total, instead of half of 1
+ // If it was supposed to be 128, this was already taken care of by `inputToRgb`
+ if (this._r < 1) { this._r = mathRound(this._r); }
+ if (this._g < 1) { this._g = mathRound(this._g); }
+ if (this._b < 1) { this._b = mathRound(this._b); }
+
+ this._ok = rgb.ok;
+ this._tc_id = tinyCounter++;
+ };
+
+ tinycolor.prototype = {
+ isDark: function() {
+ return this.getBrightness() < 128;
+ },
+ isLight: function() {
+ return !this.isDark();
+ },
+ isValid: function() {
+ return this._ok;
+ },
+ getOriginalInput: function() {
+ return this._originalInput;
+ },
+ getFormat: function() {
+ return this._format;
+ },
+ getAlpha: function() {
+ return this._a;
+ },
+ getBrightness: function() {
+ var rgb = this.toRgb();
+ return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+ },
+ setAlpha: function(value) {
+ this._a = boundAlpha(value);
+ this._roundA = mathRound(100*this._a) / 100;
+ return this;
+ },
+ toHsv: function() {
+ var hsv = rgbToHsv(this._r, this._g, this._b);
+ return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };
+ },
+ toHsvString: function() {
+ var hsv = rgbToHsv(this._r, this._g, this._b);
+ var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
+ return (this._a == 1) ?
+ "hsv(" + h + ", " + s + "%, " + v + "%)" :
+ "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")";
+ },
+ toHsl: function() {
+ var hsl = rgbToHsl(this._r, this._g, this._b);
+ return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };
+ },
+ toHslString: function() {
+ var hsl = rgbToHsl(this._r, this._g, this._b);
+ var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
+ return (this._a == 1) ?
+ "hsl(" + h + ", " + s + "%, " + l + "%)" :
+ "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")";
+ },
+ toHex: function(allow3Char) {
+ return rgbToHex(this._r, this._g, this._b, allow3Char);
+ },
+ toHexString: function(allow3Char) {
+ return '#' + this.toHex(allow3Char);
+ },
+ toHex8: function() {
+ return rgbaToHex(this._r, this._g, this._b, this._a);
+ },
+ toHex8String: function() {
+ return '#' + this.toHex8();
+ },
+ toRgb: function() {
+ return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
+ },
+ toRgbString: function() {
+ return (this._a == 1) ?
+ "rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" :
+ "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")";
+ },
+ toPercentageRgb: function() {
+ return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a };
+ },
+ toPercentageRgbString: function() {
+ return (this._a == 1) ?
+ "rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" :
+ "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
+ },
+ toName: function() {
+ if (this._a === 0) {
+ return "transparent";
+ }
+
+ if (this._a < 1) {
+ return false;
+ }
+
+ return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
+ },
+ toFilter: function(secondColor) {
+ var hex8String = '#' + rgbaToHex(this._r, this._g, this._b, this._a);
+ var secondHex8String = hex8String;
+ var gradientType = this._gradientType ? "GradientType = 1, " : "";
+
+ if (secondColor) {
+ var s = tinycolor(secondColor);
+ secondHex8String = s.toHex8String();
+ }
+
+ return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")";
+ },
+ toString: function(format) {
+ var formatSet = !!format;
+ format = format || this._format;
+
+ var formattedString = false;
+ var hasAlpha = this._a < 1 && this._a >= 0;
+ var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "name");
+
+ if (needsAlphaFormat) {
+ // Special case for "transparent", all other non-alpha formats
+ // will return rgba when there is transparency.
+ if (format === "name" && this._a === 0) {
+ return this.toName();
+ }
+ return this.toRgbString();
+ }
+ if (format === "rgb") {
+ formattedString = this.toRgbString();
+ }
+ if (format === "prgb") {
+ formattedString = this.toPercentageRgbString();
+ }
+ if (format === "hex" || format === "hex6") {
+ formattedString = this.toHexString();
+ }
+ if (format === "hex3") {
+ formattedString = this.toHexString(true);
+ }
+ if (format === "hex8") {
+ formattedString = this.toHex8String();
+ }
+ if (format === "name") {
+ formattedString = this.toName();
+ }
+ if (format === "hsl") {
+ formattedString = this.toHslString();
+ }
+ if (format === "hsv") {
+ formattedString = this.toHsvString();
+ }
+
+ return formattedString || this.toHexString();
+ },
+
+ _applyModification: function(fn, args) {
+ var color = fn.apply(null, [this].concat([].slice.call(args)));
+ this._r = color._r;
+ this._g = color._g;
+ this._b = color._b;
+ this.setAlpha(color._a);
+ return this;
+ },
+ lighten: function() {
+ return this._applyModification(lighten, arguments);
+ },
+ brighten: function() {
+ return this._applyModification(brighten, arguments);
+ },
+ darken: function() {
+ return this._applyModification(darken, arguments);
+ },
+ desaturate: function() {
+ return this._applyModification(desaturate, arguments);
+ },
+ saturate: function() {
+ return this._applyModification(saturate, arguments);
+ },
+ greyscale: function() {
+ return this._applyModification(greyscale, arguments);
+ },
+ spin: function() {
+ return this._applyModification(spin, arguments);
+ },
+
+ _applyCombination: function(fn, args) {
+ return fn.apply(null, [this].concat([].slice.call(args)));
+ },
+ analogous: function() {
+ return this._applyCombination(analogous, arguments);
+ },
+ complement: function() {
+ return this._applyCombination(complement, arguments);
+ },
+ monochromatic: function() {
+ return this._applyCombination(monochromatic, arguments);
+ },
+ splitcomplement: function() {
+ return this._applyCombination(splitcomplement, arguments);
+ },
+ triad: function() {
+ return this._applyCombination(triad, arguments);
+ },
+ tetrad: function() {
+ return this._applyCombination(tetrad, arguments);
+ }
+ };
+
+ // If input is an object, force 1 into "1.0" to handle ratios properly
+ // String input requires "1.0" as input, so 1 will be treated as 1
+ tinycolor.fromRatio = function(color, opts) {
+ if (typeof color == "object") {
+ var newColor = {};
+ for (var i in color) {
+ if (color.hasOwnProperty(i)) {
+ if (i === "a") {
+ newColor[i] = color[i];
+ }
+ else {
+ newColor[i] = convertToPercentage(color[i]);
+ }
+ }
+ }
+ color = newColor;
+ }
+
+ return tinycolor(color, opts);
+ };
+
+ // Given a string or object, convert that input to RGB
+ // Possible string inputs:
+ //
+ // "red"
+ // "#f00" or "f00"
+ // "#ff0000" or "ff0000"
+ // "#ff000000" or "ff000000"
+ // "rgb 255 0 0" or "rgb (255, 0, 0)"
+ // "rgb 1.0 0 0" or "rgb (1, 0, 0)"
+ // "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
+ // "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
+ // "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
+ // "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
+ // "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
+ //
+ function inputToRGB(color) {
+
+ var rgb = { r: 0, g: 0, b: 0 };
+ var a = 1;
+ var ok = false;
+ var format = false;
+
+ if (typeof color == "string") {
+ color = stringInputToObject(color);
+ }
+
+ if (typeof color == "object") {
+ if (color.hasOwnProperty("r") && color.hasOwnProperty("g") && color.hasOwnProperty("b")) {
+ rgb = rgbToRgb(color.r, color.g, color.b);
+ ok = true;
+ format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
+ }
+ else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("v")) {
+ color.s = convertToPercentage(color.s);
+ color.v = convertToPercentage(color.v);
+ rgb = hsvToRgb(color.h, color.s, color.v);
+ ok = true;
+ format = "hsv";
+ }
+ else if (color.hasOwnProperty("h") && color.hasOwnProperty("s") && color.hasOwnProperty("l")) {
+ color.s = convertToPercentage(color.s);
+ color.l = convertToPercentage(color.l);
+ rgb = hslToRgb(color.h, color.s, color.l);
+ ok = true;
+ format = "hsl";
+ }
+
+ if (color.hasOwnProperty("a")) {
+ a = color.a;
+ }
+ }
+
+ a = boundAlpha(a);
+
+ return {
+ ok: ok,
+ format: color.format || format,
+ r: mathMin(255, mathMax(rgb.r, 0)),
+ g: mathMin(255, mathMax(rgb.g, 0)),
+ b: mathMin(255, mathMax(rgb.b, 0)),
+ a: a
+ };
+ }
+
+
+ // Conversion Functions
+ // --------------------
+
+ // `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
+ // -
@@ -31,4 +33,4 @@
value="" />
-
\ No newline at end of file
+
diff --git a/modules/backend/formwidgets/markdowneditor/assets/css/markdowneditor.css b/modules/backend/formwidgets/markdowneditor/assets/css/markdowneditor.css
index 958c5a2ba..6207fb9cd 100644
--- a/modules/backend/formwidgets/markdowneditor/assets/css/markdowneditor.css
+++ b/modules/backend/formwidgets/markdowneditor/assets/css/markdowneditor.css
@@ -26,30 +26,45 @@
.field-markdowneditor.size-tiny .editor-preview {
height: 50px;
}
+.field-markdowneditor.size-tiny.stretch {
+ min-height: 90px;
+}
.field-markdowneditor.size-small .editor-write {
min-height: 100px;
}
.field-markdowneditor.size-small .editor-preview {
height: 100px;
}
+.field-markdowneditor.size-small.stretch {
+ min-height: 140px;
+}
.field-markdowneditor.size-large .editor-write {
min-height: 200px;
}
.field-markdowneditor.size-large .editor-preview {
height: 200px;
}
+.field-markdowneditor.size-large.stretch {
+ min-height: 240px;
+}
.field-markdowneditor.size-huge .editor-write {
min-height: 250px;
}
.field-markdowneditor.size-huge .editor-preview {
height: 250px;
}
+.field-markdowneditor.size-huge.stretch {
+ min-height: 290px;
+}
.field-markdowneditor.size-giant .editor-write {
min-height: 350px;
}
.field-markdowneditor.size-giant .editor-preview {
height: 350px;
}
+.field-markdowneditor.size-giant.stretch {
+ min-height: 390px;
+}
.field-markdowneditor .editor-write {
position: relative;
}
@@ -101,18 +116,26 @@
.field-markdowneditor.stretch .editor-toolbar {
height: auto;
}
-.field-markdowneditor.stretch .editor-write,
+.field-markdowneditor.stretch .editor-write {
+ float: none;
+ height: calc(100% - 40px);
+ position: relative;
+ min-height: 0;
+}
.field-markdowneditor.stretch .editor-preview {
float: none;
height: auto;
position: absolute;
+ left: 0;
right: 0;
top: 0;
bottom: 0;
margin-top: 40px;
}
-.field-markdowneditor.stretch .editor-write {
- left: 0;
+.field-markdowneditor.stretch.mode-split .editor-preview {
+ left: auto;
+}
+.field-markdowneditor.stretch.mode-split .editor-write {
right: auto;
}
.field-markdowneditor.is-fullscreen {
diff --git a/modules/backend/formwidgets/markdowneditor/assets/less/markdowneditor.less b/modules/backend/formwidgets/markdowneditor/assets/less/markdowneditor.less
index 8e7376d82..ebffcfa26 100644
--- a/modules/backend/formwidgets/markdowneditor/assets/less/markdowneditor.less
+++ b/modules/backend/formwidgets/markdowneditor/assets/less/markdowneditor.less
@@ -6,6 +6,8 @@
@color-markdowneditor-toolbar-btn-bg-active: #404040;
@color-markdowneditor-toolbar-btn-color-hover: #ffffff;
+@markdowneditor-toolbar-height: 40px;
+
.field-markdowneditor {
width: 100%;
position: relative;
@@ -25,22 +27,27 @@
&.size-tiny {
.editor-write { min-height: @size-tiny; }
.editor-preview { height: @size-tiny; }
+ &.stretch { min-height: @size-tiny + @markdowneditor-toolbar-height; }
}
&.size-small {
.editor-write { min-height: @size-small; }
.editor-preview { height: @size-small; }
+ &.stretch { min-height: @size-small + @markdowneditor-toolbar-height; }
}
&.size-large {
.editor-write { min-height: @size-large; }
.editor-preview { height: @size-large; }
+ &.stretch { min-height: @size-large + @markdowneditor-toolbar-height; }
}
&.size-huge {
.editor-write { min-height: @size-huge; }
.editor-preview { height: @size-huge; }
+ &.stretch { min-height: @size-huge + @markdowneditor-toolbar-height; }
}
&.size-giant {
.editor-write { min-height: @size-giant; }
.editor-preview { height: @size-giant; }
+ &.stretch { min-height: @size-giant + @markdowneditor-toolbar-height; }
}
//
@@ -67,7 +74,7 @@
position: absolute;
right: 10px;
top: 10px;
- margin-top: 40px; // Toolbar height
+ margin-top: @markdowneditor-toolbar-height;
background-image:url('../../../../../system/assets/ui/images/loader-transparent.svg');
background-size: 20px 20px;
background-position: 50% 50%;
@@ -123,20 +130,31 @@
height: auto;
}
- .editor-write,
+ .editor-write {
+ float: none;
+ height: ~"calc(100% - @{markdowneditor-toolbar-height})";
+ position: relative;
+ min-height: 0;
+ }
+
.editor-preview {
float: none;
height: auto;
position: absolute;
+ left: 0;
right: 0;
top: 0;
bottom: 0;
- margin-top: 40px;
+ margin-top: @markdowneditor-toolbar-height;
}
- .editor-write {
- left: 0;
- right: auto;
+ &.mode-split {
+ .editor-preview {
+ left: auto;
+ }
+ .editor-write {
+ right: auto;
+ }
}
}
diff --git a/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm b/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm
index 685284f35..715b9320f 100644
--- a/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm
+++ b/modules/backend/formwidgets/markdowneditor/partials/_markdowneditor.htm
@@ -7,7 +7,7 @@
data-control="markdowneditor"
data-refresh-handler="getEventHandler('onRefresh') ?>"
data-view-mode=""
- data-vendor-path="">
+ data-vendor-path="">
diff --git a/modules/backend/formwidgets/permissioneditor/partials/_permissioneditor.htm b/modules/backend/formwidgets/permissioneditor/partials/_permissioneditor.htm
index cd28edaf7..4a6377650 100644
--- a/modules/backend/formwidgets/permissioneditor/partials/_permissioneditor.htm
+++ b/modules/backend/formwidgets/permissioneditor/partials/_permissioneditor.htm
@@ -1,34 +1,38 @@
-