forked from carloscabo/jquery-palette-color-picker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
113 lines (98 loc) · 5.79 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colorpicker from palette demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<link href='https://fonts.googleapis.com/css?family=Inconsolata:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="src/palette-color-picker.css">
<style>
html {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body {
padding: 0 20px 20px 20px;
background-color: #eee;
}
.row {
padding: 0 0 24px 0;
vertical-align: top;
border-bottom: 1px solid #ccc;
}
p {
max-width: 750px;
}
input[type="text"] {
vertical-align: top;
font-family: 'Inconsolata', Courier, monospace;
font-weight: 700;
padding: 4px;
height: 30px;
margin-right: 8px;
}
</style>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="src/palette-color-picker.js"></script>
<script src="ready.js"></script>
</head>
<body>
<div class="row" id="sample-id-1">
<h3>Sample 1</h3>
<input type="text" name="unique-name-1" data-palette='[{"primary": "#E91E63"},{"primary_dark": "#C2185B"},{"primary_light": "#F8BBD0"},{"accent": "#CDDC39"},{"primary_text": "#212121"},{"secondary_text": "#727272"},{"divider": "#B6B6B6"}]' value="primary_light">
<p>If there is not enough free space from the control to the upper side of the screen the selector <b>opens downwards automatically</b>.</p>
<p>This sample has also a callback function that <b>logs to the web broser console the color swatch clicked ( onchange_callback )</b> and also <b>just before the colors bubble is shown ( onbeforeshow_callback )</b></p>
</div>
<div class="row" id="sample-id-2">
<h3>Sample 2</h3>
<input type="text" name="duplicated-name-2" data-palette='["#D50000","#304FFE","#00B8D4","#00C853","#FFD600","#FF6D00","#FF1744","#3D5AFE","#00E5FF","#00E676","#FFEA00","#FF9100","#FF5252","#536DFE","#18FFFF","#69F0AE","#FFFF00","#FFAB40"]' value="" style="margin-right:48px;">
<input type="text" name="duplicated-name-2" data-palette='["#D50000","#304FFE","#00B8D4","#00C853","#FFD600","#FF6D00","#FF1744","#3D5AFE","#00E5FF","#00E676","#FFEA00","#FF9100","#FF5252","#536DFE","#18FFFF","#69F0AE","#FFFF00","#FFAB40"]' value="">
<p>If there are several inputs with the same name all all them are updated on color selection. In this sample the <b>clear button is set to be last one</b>.</p>
</div>
<div class="row" id="sample-id-3">
<h3>Sample 3</h3>
<input type="text" id="unique-id-3" name="unique-name-3" data-palette='["#D50000","#304FFE","#00B8D4","#69F0AE","#FFFF00"]' value="#304FFE">
<p>The control can be inserted <b>before or after</b> the input. You can also customize the style of the color swatches,<b> with the custom_class .double the swatches are wider</b>.
</div>
<div class="row" id="sample-id-3b">
<h3>Sample 3B</h3>
<input type="text" id="unique-id-3b" name="unique-name-3b" data-palette='["#D50000","#304FFE","#00B8D4","#69F0AE","#FFFF00"]'
value="#00B8D4">
<p>The bubble is forced to the left side of the button adding the f<b>.force-left</b> class.</p>
</div>
<div class="row" id="sample-id-4">
<h3>Sample 4</h3>
<input type="text" id="unique-id-4" name="unique-name-4" value="accent">
<p>In this sample the color palette is <b>forced to open downwards</b>.</p>
</div>
<div class="row" id="sample-id-5">
<h3>Sample 5</h3>
<input type="text" id="unique-id-5" name="unique-name-5" data-palette='["#D50000","#304FFE","#00B8D4"]' value="">
<p>With tha custom_class <b>.wide</b> swatches expand to be fullwidth.</p>
</div>
<div class="row" id="sample-id-6">
<h3>Sample 6 A/B</h3>
<input type="text" id="unique-id-6A" name="unique-name-6A">
<input type="text" id="unique-id-6B" name="unique-name-6B" value="#FFFF00">
<p>Without <b>clear button</b>, you can clear the selection programatically calling:<br><br><b>$( input_element ).data('paletteColorPickerPlugin').reset();</b><br><br>
<a href="#" class="clear-sample-6A">Reset sample 6A</a> | <a href="#" class="clear-sample-6B">Reset sample 6B</a></p>
</div>
<div class="row" id="sample-id-7">
<h3>Sample 7</h3>
<input type="text" id="unique-id-7" name="unique-name-7" value="#FFFF00">
<p>Reload the value after it has been changed programatically. The new color should exists in the initial options otherwise the selection will be reset to initial value.You can reload the value after programatically changing the value of input calling:<br><br><b>$( input_element ).data('paletteColorPickerPlugin').reload();</b><br><br>
<a href="#" class="change-sample-7">Change to existing value of #69F0AE</a> | <a href="#" class="change-sample-7B">Change to non-existing value of #808080 (will reset to initial value)</a></p>
</div>
<div class="row" id="sample-id-8">
<h3>Sample 8</h3>
<input type="text" id="unique-id-8" name="unique-name-8" data-palette='["#D50000","#304FFE","#00B8D4","#69F0AE","#FFFF00"]'
value="Changes bg color">
<p>This sample has the <b>set_background:true;</b> that sets the input's background color to the selected one. Seems that
some users find this useful ;)</p>
</div>
</body>
</html>