draw-tools: use colour picker rather than input box
This commit is contained in:
Jon Atkins
20
external/spectrum/LICENSE
vendored
Normal file
20
external/spectrum/LICENSE
vendored
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
Copyright (c) 2013, Brian Grinstead, http://briangrinstead.com
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining
|
||||||
|
a copy of this software and associated documentation files (the
|
||||||
|
"Software"), to deal in the Software without restriction, including
|
||||||
|
without limitation the rights to use, copy, modify, merge, publish,
|
||||||
|
distribute, sublicense, and/or sell copies of the Software, and to
|
||||||
|
permit persons to whom the Software is furnished to do so, subject to
|
||||||
|
the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be
|
||||||
|
included in all copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||||
|
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||||
|
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||||
|
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||||
|
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||||
|
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||||
|
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||||
511
external/spectrum/spectrum.css
vendored
Normal file
511
external/spectrum/spectrum.css
vendored
Normal file
@ -0,0 +1,511 @@
|
|||||||
|
/***
|
||||||
|
Spectrum Colorpicker v1.2.0
|
||||||
|
https://github.com/bgrins/spectrum
|
||||||
|
Author: Brian Grinstead
|
||||||
|
License: MIT
|
||||||
|
***/
|
||||||
|
|
||||||
|
.sp-container {
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
display:inline-block;
|
||||||
|
*display: inline;
|
||||||
|
*zoom: 1;
|
||||||
|
/* https://github.com/bgrins/spectrum/issues/40 */
|
||||||
|
z-index: 9999994;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.sp-container.sp-flat {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
|
||||||
|
.sp-top {
|
||||||
|
position:relative;
|
||||||
|
width: 100%;
|
||||||
|
display:inline-block;
|
||||||
|
}
|
||||||
|
.sp-top-inner {
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
bottom:0;
|
||||||
|
right:0;
|
||||||
|
}
|
||||||
|
.sp-color {
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
bottom:0;
|
||||||
|
right:20%;
|
||||||
|
}
|
||||||
|
.sp-hue {
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
right:0;
|
||||||
|
bottom:0;
|
||||||
|
left:84%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-clear-enabled .sp-hue {
|
||||||
|
top:33px;
|
||||||
|
height: 77.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-fill {
|
||||||
|
padding-top: 80%;
|
||||||
|
}
|
||||||
|
.sp-sat, .sp-val {
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
left:0;
|
||||||
|
right:0;
|
||||||
|
bottom:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-alpha-enabled .sp-top {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
.sp-alpha-enabled .sp-alpha {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.sp-alpha-handle {
|
||||||
|
position:absolute;
|
||||||
|
top:-4px;
|
||||||
|
bottom: -4px;
|
||||||
|
width: 6px;
|
||||||
|
left: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 1px solid black;
|
||||||
|
background: white;
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
.sp-alpha {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -14px;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
.sp-alpha-inner {
|
||||||
|
border: solid 1px #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-clear {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-clear.sp-clear-display {
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-clear-enabled .sp-clear {
|
||||||
|
display: block;
|
||||||
|
position:absolute;
|
||||||
|
top:0px;
|
||||||
|
right:0;
|
||||||
|
bottom:0;
|
||||||
|
left:84%;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Don't allow text selection */
|
||||||
|
.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
|
||||||
|
-webkit-user-select:none;
|
||||||
|
-moz-user-select: -moz-none;
|
||||||
|
-o-user-select:none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-container.sp-input-disabled .sp-input-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.sp-container.sp-buttons-disabled .sp-button-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.sp-palette-only .sp-picker-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.sp-palette-disabled .sp-palette-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-initial-disabled .sp-initial {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
|
||||||
|
.sp-sat {
|
||||||
|
background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
|
||||||
|
background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
|
||||||
|
background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||||
|
background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||||
|
background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
|
||||||
|
background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
|
||||||
|
filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
|
||||||
|
}
|
||||||
|
.sp-val {
|
||||||
|
background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
|
||||||
|
background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
|
||||||
|
background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||||
|
background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||||
|
background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
|
||||||
|
background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
|
||||||
|
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-hue {
|
||||||
|
background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||||
|
background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||||
|
background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
|
||||||
|
background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* IE filters do not support multiple color stops.
|
||||||
|
Generate 6 divs, line them up, and do two color gradients for each.
|
||||||
|
Yes, really.
|
||||||
|
*/
|
||||||
|
.sp-1 {
|
||||||
|
height:17%;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
|
||||||
|
}
|
||||||
|
.sp-2 {
|
||||||
|
height:16%;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
|
||||||
|
}
|
||||||
|
.sp-3 {
|
||||||
|
height:17%;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
|
||||||
|
}
|
||||||
|
.sp-4 {
|
||||||
|
height:17%;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
|
||||||
|
}
|
||||||
|
.sp-5 {
|
||||||
|
height:16%;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
|
||||||
|
}
|
||||||
|
.sp-6 {
|
||||||
|
height:17%;
|
||||||
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Clearfix hack */
|
||||||
|
.sp-cf:before, .sp-cf:after { content: ""; display: table; }
|
||||||
|
.sp-cf:after { clear: both; }
|
||||||
|
.sp-cf { *zoom: 1; }
|
||||||
|
|
||||||
|
/* Mobile devices, make hue slider bigger so it is easier to slide */
|
||||||
|
@media (max-device-width: 480px) {
|
||||||
|
.sp-color { right: 40%; }
|
||||||
|
.sp-hue { left: 63%; }
|
||||||
|
.sp-fill { padding-top: 60%; }
|
||||||
|
}
|
||||||
|
.sp-dragger {
|
||||||
|
border-radius: 5px;
|
||||||
|
height: 5px;
|
||||||
|
width: 5px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
background: #000;
|
||||||
|
cursor: pointer;
|
||||||
|
position:absolute;
|
||||||
|
top:0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.sp-slider {
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
cursor:pointer;
|
||||||
|
height: 3px;
|
||||||
|
left: -1px;
|
||||||
|
right: -1px;
|
||||||
|
border: 1px solid #000;
|
||||||
|
background: white;
|
||||||
|
opacity: .8;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
Theme authors:
|
||||||
|
Here are the basic themeable display options (colors, fonts, global widths).
|
||||||
|
See http://bgrins.github.io/spectrum/themes/ for instructions.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.sp-container {
|
||||||
|
border-radius: 0;
|
||||||
|
background-color: #ECECEC;
|
||||||
|
border: solid 1px #f0c49B;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear
|
||||||
|
{
|
||||||
|
font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
-ms-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.sp-top
|
||||||
|
{
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
.sp-color, .sp-hue, .sp-clear
|
||||||
|
{
|
||||||
|
border: solid 1px #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input */
|
||||||
|
.sp-input-container {
|
||||||
|
float:right;
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.sp-initial-disabled .sp-input-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.sp-input {
|
||||||
|
font-size: 12px !important;
|
||||||
|
border: 1px inset;
|
||||||
|
padding: 4px 5px;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
background:transparent;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
.sp-input:focus {
|
||||||
|
border: 1px solid orange;
|
||||||
|
}
|
||||||
|
.sp-input.sp-validation-error
|
||||||
|
{
|
||||||
|
border: 1px solid red;
|
||||||
|
background: #fdd;
|
||||||
|
}
|
||||||
|
.sp-picker-container , .sp-palette-container
|
||||||
|
{
|
||||||
|
float:left;
|
||||||
|
position: relative;
|
||||||
|
padding: 10px;
|
||||||
|
padding-bottom: 300px;
|
||||||
|
margin-bottom: -290px;
|
||||||
|
}
|
||||||
|
.sp-picker-container
|
||||||
|
{
|
||||||
|
width: 172px;
|
||||||
|
border-left: solid 1px #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Palettes */
|
||||||
|
.sp-palette-container
|
||||||
|
{
|
||||||
|
border-right: solid 1px #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-palette .sp-thumb-el {
|
||||||
|
display: block;
|
||||||
|
position:relative;
|
||||||
|
float:left;
|
||||||
|
width: 24px;
|
||||||
|
height: 15px;
|
||||||
|
margin: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
border:solid 2px transparent;
|
||||||
|
}
|
||||||
|
.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
|
||||||
|
border-color: orange;
|
||||||
|
}
|
||||||
|
.sp-thumb-el
|
||||||
|
{
|
||||||
|
position:relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Initial */
|
||||||
|
.sp-initial
|
||||||
|
{
|
||||||
|
float: left;
|
||||||
|
border: solid 1px #333;
|
||||||
|
}
|
||||||
|
.sp-initial span {
|
||||||
|
width: 30px;
|
||||||
|
height: 25px;
|
||||||
|
border:none;
|
||||||
|
display:block;
|
||||||
|
float:left;
|
||||||
|
margin:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-initial .sp-clear-display {
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.sp-button-container {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Replacer (the little preview div that shows up instead of the <input>) */
|
||||||
|
.sp-replacer {
|
||||||
|
margin:0;
|
||||||
|
overflow:hidden;
|
||||||
|
cursor:pointer;
|
||||||
|
padding: 4px;
|
||||||
|
display:inline-block;
|
||||||
|
*zoom: 1;
|
||||||
|
*display: inline;
|
||||||
|
border: solid 1px #91765d;
|
||||||
|
background: #eee;
|
||||||
|
color: #333;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.sp-replacer:hover, .sp-replacer.sp-active {
|
||||||
|
border-color: #F0C49B;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
.sp-replacer.sp-disabled {
|
||||||
|
cursor:default;
|
||||||
|
border-color: silver;
|
||||||
|
color: silver;
|
||||||
|
}
|
||||||
|
.sp-dd {
|
||||||
|
padding: 2px 0;
|
||||||
|
height: 16px;
|
||||||
|
line-height: 16px;
|
||||||
|
float:left;
|
||||||
|
font-size:10px;
|
||||||
|
}
|
||||||
|
.sp-preview
|
||||||
|
{
|
||||||
|
position:relative;
|
||||||
|
width:25px;
|
||||||
|
height: 20px;
|
||||||
|
border: solid 1px #222;
|
||||||
|
margin-right: 5px;
|
||||||
|
float:left;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-palette
|
||||||
|
{
|
||||||
|
*width: 220px;
|
||||||
|
max-width: 220px;
|
||||||
|
}
|
||||||
|
.sp-palette .sp-thumb-el
|
||||||
|
{
|
||||||
|
width:16px;
|
||||||
|
height: 16px;
|
||||||
|
margin:2px 1px;
|
||||||
|
border: solid 1px #d0d0d0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-container
|
||||||
|
{
|
||||||
|
padding-bottom:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Buttons: http://hellohappy.org/css3-buttons/ */
|
||||||
|
.sp-container button {
|
||||||
|
background-color: #eeeeee;
|
||||||
|
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
|
||||||
|
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
|
||||||
|
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
|
||||||
|
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
|
||||||
|
background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-bottom: 1px solid #bbb;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: #333;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 5px 4px;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow: 0 1px 0 #eee;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.sp-container button:hover {
|
||||||
|
background-color: #dddddd;
|
||||||
|
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
|
||||||
|
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
|
||||||
|
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
|
||||||
|
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
|
||||||
|
background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
|
||||||
|
border: 1px solid #bbb;
|
||||||
|
border-bottom: 1px solid #999;
|
||||||
|
cursor: pointer;
|
||||||
|
text-shadow: 0 1px 0 #ddd;
|
||||||
|
}
|
||||||
|
.sp-container button:active {
|
||||||
|
border: 1px solid #aaa;
|
||||||
|
border-bottom: 1px solid #888;
|
||||||
|
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||||
|
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||||
|
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||||
|
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||||
|
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
|
||||||
|
}
|
||||||
|
.sp-cancel
|
||||||
|
{
|
||||||
|
font-size: 11px;
|
||||||
|
color: #d93f3f !important;
|
||||||
|
margin:0;
|
||||||
|
padding:2px;
|
||||||
|
margin-right: 5px;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-decoration:none;
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-cancel:hover
|
||||||
|
{
|
||||||
|
color: #d93f3f !important;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.sp-palette span:hover, .sp-palette span.sp-thumb-active
|
||||||
|
{
|
||||||
|
border-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-preview, .sp-alpha, .sp-thumb-el
|
||||||
|
{
|
||||||
|
position:relative;
|
||||||
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
|
||||||
|
}
|
||||||
|
.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner
|
||||||
|
{
|
||||||
|
display:block;
|
||||||
|
position:absolute;
|
||||||
|
top:0;left:0;bottom:0;right:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-palette .sp-thumb-inner
|
||||||
|
{
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner
|
||||||
|
{
|
||||||
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner
|
||||||
|
{
|
||||||
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-clear-display {
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
|
||||||
|
}
|
||||||
2010
external/spectrum/spectrum.js
vendored
Normal file
2010
external/spectrum/spectrum.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
113
external/spectrum/themes/index.html
vendored
Normal file
113
external/spectrum/themes/index.html
vendored
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||||
|
<title>Spectrum - The No Hassle jQuery Colorpicker</title>
|
||||||
|
|
||||||
|
<meta name="description" content="Spectrum is a JavaScript colorpicker plugin using the jQuery framework. It is highly customizable, but can also be used as a simple input type=color polyfill">
|
||||||
|
<meta name="author" content="Brian Grinstead and Spectrum contributors">
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="../spectrum.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../docs/bootstrap.css">
|
||||||
|
<link rel="stylesheet" type="text/css" href="../docs/docs.css">
|
||||||
|
<script type="text/javascript" src="../docs/jquery-1.9.1.js"></script>
|
||||||
|
<script type="text/javascript" src="../spectrum.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="sp-dark.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id='header'>
|
||||||
|
<h1><a href='http://bgrins.github.com/spectrum'>Spectrum</a></h1> <h2><em>The No Hassle jQuery Colorpicker</em></h2>
|
||||||
|
<div id='links'>
|
||||||
|
View the <a href='http://github.com/bgrins/spectrum'>Source code</a>.
|
||||||
|
Spectrum is a project by <a href='http://twitter.com/bgrins'>@bgrins</a>.
|
||||||
|
</div>
|
||||||
|
<br style='clear:both;' />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<h2>Themes</h2>
|
||||||
|
|
||||||
|
<div class="alert">
|
||||||
|
This page is in development.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="theme-gallery">
|
||||||
|
<h3>Gallery of existing themes</h3>
|
||||||
|
|
||||||
|
<div class="theme" id="sp-light">
|
||||||
|
<h4>sp-light</h4>
|
||||||
|
<p>This is the default theme that you know and love.</p>
|
||||||
|
|
||||||
|
<div class='example'>
|
||||||
|
<input type='text' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="theme" id="sp-dark">
|
||||||
|
<h4>sp-dark</h4>
|
||||||
|
<p>Similar to sp-light, only ... darker</p>
|
||||||
|
|
||||||
|
<div class='example'>
|
||||||
|
<input type='text' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="theme-instructions">
|
||||||
|
<h3>Instructions for building themes</h3>
|
||||||
|
<p>
|
||||||
|
You can change most any property on spectrum using CSS. Anything from borders and colors, to the size of the draggable areas, to the layout of the colorpicker can be changed with plain CSS.
|
||||||
|
</p>
|
||||||
|
<h4>Playing friendly with other themes</h4>
|
||||||
|
<p>
|
||||||
|
Please prefix all of your rules with <code>.theme-name</code>. The exception is for changes to <code>.sp-container</code> and <code>.sp-replacer</code>, which will have your theme name applied.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
See a basic scaffold for a super simple theme. See <a href='sp-dark.css'>sp-dark.css</a> for a slightly more advanced example.
|
||||||
|
</p>
|
||||||
|
<pre>
|
||||||
|
.theme-name.sp-container {
|
||||||
|
|
||||||
|
}
|
||||||
|
.theme-name.sp-replacer {
|
||||||
|
|
||||||
|
}
|
||||||
|
.theme-name .sp-preview {
|
||||||
|
|
||||||
|
}
|
||||||
|
</pre>
|
||||||
|
<h3>Submitting a theme</h3>
|
||||||
|
<p>
|
||||||
|
If you have made some customizations that you would like to share, please open a <a href="http://bgrins.github.com/spectrum/pulls">pull request</a> with the theme file inside of this themes/ directory in the project. Or <a href="http://bgrins.github.com/spectrum/issues">open an issue</a> with a link to the theme.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
$("#sp-light input").spectrum({
|
||||||
|
theme: "sp-light"
|
||||||
|
});
|
||||||
|
$("#sp-dark input").spectrum({
|
||||||
|
theme: "sp-dark"
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" src="../docs/prettify.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
var _gaq = _gaq || [];
|
||||||
|
_gaq.push(['_setAccount', 'UA-8259845-4']);
|
||||||
|
_gaq.push(['_trackPageview']);
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||||
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
||||||
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||||
|
})();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
128
external/spectrum/themes/sp-dark.css
vendored
Normal file
128
external/spectrum/themes/sp-dark.css
vendored
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
/* Container */
|
||||||
|
.sp-dark.sp-container {
|
||||||
|
background-color: #333;
|
||||||
|
border: solid 1px #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Replacer (the little preview div that shows up instead of the <input>) */
|
||||||
|
.sp-dark.sp-replacer {
|
||||||
|
border: solid 1px #fff;
|
||||||
|
background: #333;
|
||||||
|
color: #eee;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.sp-replacer:hover, .sp-replacer.sp-active {
|
||||||
|
border-color: #F0C49B;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.sp-replacer.sp-disabled {
|
||||||
|
border-color: silver;
|
||||||
|
color: silver;
|
||||||
|
}
|
||||||
|
.sp-dark .sp-preview {
|
||||||
|
border: solid 1px #999;
|
||||||
|
}
|
||||||
|
.sp-dark .sp-cancel {
|
||||||
|
color: #f99f9f !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-dark, .sp-dark button, .sp-dark input, .sp-color, .sp-hue {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Input */
|
||||||
|
.sp-dark .sp-input-container {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-initial-disabled .sp-input-container {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-input {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-input:focus {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-input.sp-validation-error {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-dark .sp-picker-container , .sp-dark .sp-palette-container {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-picker-container {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Palettes */
|
||||||
|
.sp-dark .sp-palette-container {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-dark .sp-palette .sp-thumb-el {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-palette .sp-thumb-el:hover, .sp-dark .sp-palette .sp-thumb-el.sp-thumb-active {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-thumb-el {
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Initial */
|
||||||
|
.sp-dark .sp-initial {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-initial span {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.sp-dark .sp-button-container {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Replacer (the little preview div that shows up instead of the <input>) */
|
||||||
|
.sp-dark.sp-replacer {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark.sp-replacer:hover, .sp-dark.sp-replacer.sp-active {
|
||||||
|
border-color: #F0C49B;
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
.sp-dark.sp-replacer.sp-disabled {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-dd {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.sp-dark .sp-preview {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-palette {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-palette .sp-thumb-el {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.sp-dark button {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark button:hover {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark button:active {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-cancel {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-cancel:hover {
|
||||||
|
|
||||||
|
}
|
||||||
|
.sp-dark .sp-palette span:hover, .sp-dark .sp-palette span.sp-thumb-active {
|
||||||
|
|
||||||
|
}
|
||||||
@ -25,18 +25,23 @@ window.plugin.drawTools = function() {};
|
|||||||
window.plugin.drawTools.loadExternals = function() {
|
window.plugin.drawTools.loadExternals = function() {
|
||||||
try { console.log('Loading leaflet.draw JS now'); } catch(e) {}
|
try { console.log('Loading leaflet.draw JS now'); } catch(e) {}
|
||||||
@@INCLUDERAW:external/leaflet.draw.js@@
|
@@INCLUDERAW:external/leaflet.draw.js@@
|
||||||
|
@@INCLUDERAW:external/spectrum/spectrum.js@@
|
||||||
try { console.log('done loading leaflet.draw JS'); } catch(e) {}
|
try { console.log('done loading leaflet.draw JS'); } catch(e) {}
|
||||||
|
|
||||||
window.plugin.drawTools.boot();
|
window.plugin.drawTools.boot();
|
||||||
|
|
||||||
$('head').append('<style>@@INCLUDESTRING:external/leaflet.draw.css@@</style>');
|
$('head').append('<style>@@INCLUDESTRING:external/leaflet.draw.css@@</style>');
|
||||||
|
$('head').append('<style>@@INCLUDESTRING:external/spectrum/spectrum.css@@</style>');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
window.plugin.drawTools.currentColor = '#a24ac3';
|
||||||
|
|
||||||
|
|
||||||
window.plugin.drawTools.setOptions = function() {
|
window.plugin.drawTools.setOptions = function() {
|
||||||
|
|
||||||
window.plugin.drawTools.lineOptions = {
|
window.plugin.drawTools.lineOptions = {
|
||||||
stroke: true,
|
stroke: true,
|
||||||
color: '#a24ac3',
|
color: window.plugin.drawTools.currentColor,
|
||||||
weight: 4,
|
weight: 4,
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
fill: false,
|
fill: false,
|
||||||
@ -52,6 +57,7 @@ window.plugin.drawTools.setOptions = function() {
|
|||||||
window.plugin.drawTools.editOptions = L.extend({}, window.plugin.drawTools.polygonOptions, {
|
window.plugin.drawTools.editOptions = L.extend({}, window.plugin.drawTools.polygonOptions, {
|
||||||
dashArray: [10,10]
|
dashArray: [10,10]
|
||||||
});
|
});
|
||||||
|
delete window.plugin.drawTools.editOptions.color;
|
||||||
|
|
||||||
window.plugin.drawTools.markerOptions = {
|
window.plugin.drawTools.markerOptions = {
|
||||||
icon: new L.Icon.Default(),
|
icon: new L.Icon.Default(),
|
||||||
@ -61,6 +67,7 @@ window.plugin.drawTools.setOptions = function() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
window.plugin.drawTools.setDrawColor = function(color) {
|
window.plugin.drawTools.setDrawColor = function(color) {
|
||||||
|
window.plugin.drawTools.currentColor = color;
|
||||||
|
|
||||||
window.plugin.drawTools.drawControl.setDrawingOptions({
|
window.plugin.drawTools.drawControl.setDrawingOptions({
|
||||||
'polygon': { 'shapeOptions': { color: color } },
|
'polygon': { 'shapeOptions': { color: color } },
|
||||||
@ -235,11 +242,39 @@ window.plugin.drawTools.load = function() {
|
|||||||
|
|
||||||
// Manual import, export and reset data
|
// Manual import, export and reset data
|
||||||
window.plugin.drawTools.manualOpt = function() {
|
window.plugin.drawTools.manualOpt = function() {
|
||||||
|
|
||||||
|
var html = '<div class="drawtoolsStyles">'
|
||||||
|
+ '<input type="color" name="drawColor" id="drawtools_color"></input>'
|
||||||
|
//TODO: add line style choosers: thickness, maybe dash styles?
|
||||||
|
+ '</div>'
|
||||||
|
+ '<div class="drawtoolsSetbox">'
|
||||||
|
+ '<a onclick="window.plugin.drawTools.optCopy();">Copy/Export Drawn Items</a>'
|
||||||
|
+ '<a onclick="window.plugin.drawTools.optPaste();return false;">Paste/Import Drawn Items</a>'
|
||||||
|
+ '<a onclick="window.plugin.drawTools.optReset();return false;">Reset Drawn Items</a>'
|
||||||
|
+ '</div>';
|
||||||
|
|
||||||
dialog({
|
dialog({
|
||||||
html: plugin.drawTools.htmlSetbox,
|
html: html,
|
||||||
|
width: 500,
|
||||||
dialogClass: 'ui-dialog-drawtoolsSet',
|
dialogClass: 'ui-dialog-drawtoolsSet',
|
||||||
title: 'Draw Tools Options'
|
title: 'Draw Tools Options'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// need to initialise the 'spectrum' colour picker
|
||||||
|
$('#drawtools_color').spectrum({
|
||||||
|
flat: false,
|
||||||
|
showInput: false,
|
||||||
|
showButtons: false,
|
||||||
|
showPalette: true,
|
||||||
|
showSelectionPalette: false,
|
||||||
|
palette: [ ['#a24ac3','#514ac3','#4aa8c3','#51c34a'],
|
||||||
|
['#c1c34a','#c38a4a','#c34a4a','#c34a6f'],
|
||||||
|
['#000000','#666666','#bbbbbb','#ffffff']
|
||||||
|
],
|
||||||
|
change: function(color) { window.plugin.drawTools.setDrawColor(color.toHexString()); },
|
||||||
|
// move: function(color) { window.plugin.drawTools.setDrawColor(color.toHexString()); },
|
||||||
|
color: window.plugin.drawTools.currentColor,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
window.plugin.drawTools.optAlert = function(message) {
|
window.plugin.drawTools.optAlert = function(message) {
|
||||||
@ -278,15 +313,6 @@ window.plugin.drawTools.optReset = function() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.plugin.drawTools.optColor = function() {
|
|
||||||
var promptAction = prompt('Current Color is '+window.plugin.drawTools.lineOptions.color, '');
|
|
||||||
if(promptAction !== null && promptAction !== '') {
|
|
||||||
window.plugin.drawTools.setDrawColor(promptAction);
|
|
||||||
console.log('DRAWTOOLS: color changed');
|
|
||||||
window.plugin.drawTools.optAlert('Color Changed. ');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
window.plugin.drawTools.boot = function() {
|
window.plugin.drawTools.boot = function() {
|
||||||
window.plugin.drawTools.setOptions();
|
window.plugin.drawTools.setOptions();
|
||||||
|
|
||||||
@ -336,15 +362,9 @@ window.plugin.drawTools.boot = function() {
|
|||||||
});
|
});
|
||||||
//add options menu
|
//add options menu
|
||||||
$('#toolbox').append('<a onclick="window.plugin.drawTools.manualOpt();return false;">DrawTools Opt</a>');
|
$('#toolbox').append('<a onclick="window.plugin.drawTools.manualOpt();return false;">DrawTools Opt</a>');
|
||||||
plugin.drawTools.htmlSetbox = '<div id="drawtoolsSetbox">'
|
|
||||||
+'<a onclick="window.plugin.drawTools.optColor();">Set Color</a>'
|
|
||||||
+'<a onclick="window.plugin.drawTools.optCopy();">Copy/Export Drawn Items</a>'
|
|
||||||
+'<a onclick="window.plugin.drawTools.optPaste();return false;">Paste/Import Drawn Items</a>'
|
|
||||||
+'<a onclick="window.plugin.drawTools.optReset();return false;">Reset Drawn Items</a>'
|
|
||||||
+'</div>';
|
|
||||||
|
|
||||||
$('head').append('<style>' +
|
$('head').append('<style>' +
|
||||||
'#drawtoolsSetbox a { display:block; color:#ffce00; border:1px solid #ffce00; padding:3px 0; margin:10px auto; width:80%; text-align:center; background:rgba(8,48,78,.9); }'+
|
'.drawtoolsSetbox > a { display:block; color:#ffce00; border:1px solid #ffce00; padding:3px 0; margin:10px auto; width:80%; text-align:center; background:rgba(8,48,78,.9); }'+
|
||||||
'.ui-dialog-drawtoolsSet-copy textarea { width:96%; height:250px; resize:vertical; }'+
|
'.ui-dialog-drawtoolsSet-copy textarea { width:96%; height:250px; resize:vertical; }'+
|
||||||
'</style>');
|
'</style>');
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user