Moving ColorPicker to core. Some improvements with ColorPicker.

IDT-media · May 12, 2014 · 09c8f47 · 09c8f47
1 parent 83d5850
commit 09c8f47
Show file tree

Hide file tree

Showing 33 changed files with 769 additions and 0 deletions.
diff --git a/lang/en_US.php b/lang/en_US.php
@@ -122,6 +122,8 @@
 $lang['fielddef_CheckboxGroup'] = 'Checkbox Group';
 // File Upload
 $lang['fielddef_FileUpload'] = 'File Upload';
+// ColorPicker
+$lang['fielddef_ColorPicker'] = 'Color Picker';
 
 /* Instructions */
 $lang['fielddef_allow_help'] = 'Specify a comma seprated list of file extensions that are allowed. For example: pdf,gif,jpeg,jpg (keep lowercase)';

diff --git a/lib/fielddefs/ColorPicker/admin.ColorPicker.tpl b/lib/fielddefs/ColorPicker/admin.ColorPicker.tpl
@@ -0,0 +1,7 @@
+<div class="pageoverflow">
+    <p class="pagetext">{$fielddef->ModLang('size')}:</p>
+    <p class="pageinput">
+    	{$themeObject->DisplayImage('icons/system/info.gif')}<em> {$fielddef->ModLang('fielddef_size_help')}</em><br />
+    	<input type="text" name="{$actionid}custom_input[size]" value="{$fielddef->GetOptionValue('size', 20)}" />
+    </p>
+</div>
diff --git a/lib/fielddefs/ColorPicker/images/Thumbs.db b/lib/fielddefs/ColorPicker/images/Thumbs.db
diff --git a/lib/fielddefs/ColorPicker/images/blank.gif b/lib/fielddefs/ColorPicker/images/blank.gif
diff --git a/lib/fielddefs/ColorPicker/images/colorpicker_background.png b/lib/fielddefs/ColorPicker/images/colorpicker_background.png
diff --git a/lib/fielddefs/ColorPicker/images/colorpicker_hex.png b/lib/fielddefs/ColorPicker/images/colorpicker_hex.png
diff --git a/lib/fielddefs/ColorPicker/images/colorpicker_hsb_b.png b/lib/fielddefs/ColorPicker/images/colorpicker_hsb_b.png
diff --git a/lib/fielddefs/ColorPicker/images/colorpicker_hsb_h.png b/lib/fielddefs/ColorPicker/images/colorpicker_hsb_h.png
diff --git a/lib/fielddefs/ColorPicker/images/colorpicker_hsb_s.png b/lib/fielddefs/ColorPicker/images/colorpicker_hsb_s.png
diff --git a/lib/fielddefs/ColorPicker/images/colorpicker_indic.gif b/lib/fielddefs/ColorPicker/images/colorpicker_indic.gif
diff --git a/lib/fielddefs/ColorPicker/images/colorpicker_overlay.png b/lib/fielddefs/ColorPicker/images/colorpicker_overlay.png
diff --git a/lib/fielddefs/ColorPicker/images/colorpicker_rgb_b.png b/lib/fielddefs/ColorPicker/images/colorpicker_rgb_b.png
diff --git a/lib/fielddefs/ColorPicker/images/colorpicker_rgb_g.png b/lib/fielddefs/ColorPicker/images/colorpicker_rgb_g.png
diff --git a/lib/fielddefs/ColorPicker/images/colorpicker_rgb_r.png b/lib/fielddefs/ColorPicker/images/colorpicker_rgb_r.png
diff --git a/lib/fielddefs/ColorPicker/images/colorpicker_select.gif b/lib/fielddefs/ColorPicker/images/colorpicker_select.gif
diff --git a/lib/fielddefs/ColorPicker/images/colorpicker_submit.png b/lib/fielddefs/ColorPicker/images/colorpicker_submit.png
diff --git a/lib/fielddefs/ColorPicker/images/custom_background.png b/lib/fielddefs/ColorPicker/images/custom_background.png
diff --git a/lib/fielddefs/ColorPicker/images/custom_hex.png b/lib/fielddefs/ColorPicker/images/custom_hex.png
diff --git a/lib/fielddefs/ColorPicker/images/custom_hsb_b.png b/lib/fielddefs/ColorPicker/images/custom_hsb_b.png
diff --git a/lib/fielddefs/ColorPicker/images/custom_hsb_h.png b/lib/fielddefs/ColorPicker/images/custom_hsb_h.png
diff --git a/lib/fielddefs/ColorPicker/images/custom_hsb_s.png b/lib/fielddefs/ColorPicker/images/custom_hsb_s.png
diff --git a/lib/fielddefs/ColorPicker/images/custom_indic.gif b/lib/fielddefs/ColorPicker/images/custom_indic.gif
diff --git a/lib/fielddefs/ColorPicker/images/custom_rgb_b.png b/lib/fielddefs/ColorPicker/images/custom_rgb_b.png
diff --git a/lib/fielddefs/ColorPicker/images/custom_rgb_g.png b/lib/fielddefs/ColorPicker/images/custom_rgb_g.png
diff --git a/lib/fielddefs/ColorPicker/images/custom_rgb_r.png b/lib/fielddefs/ColorPicker/images/custom_rgb_r.png
diff --git a/lib/fielddefs/ColorPicker/images/custom_submit.png b/lib/fielddefs/ColorPicker/images/custom_submit.png
diff --git a/lib/fielddefs/ColorPicker/images/select.png b/lib/fielddefs/ColorPicker/images/select.png
diff --git a/lib/fielddefs/ColorPicker/images/select2.png b/lib/fielddefs/ColorPicker/images/select2.png
diff --git a/lib/fielddefs/ColorPicker/images/slider.png b/lib/fielddefs/ColorPicker/images/slider.png
diff --git a/lib/fielddefs/ColorPicker/input.ColorPicker.tpl b/lib/fielddefs/ColorPicker/input.ColorPicker.tpl
@@ -0,0 +1,34 @@
+<div class="pageoverflow">
+	<p class="pagetext">{$fielddef->GetName()}{if $fielddef->IsRequired()}*{/if}:</p>
+	<div class="pageinput">
+		{if $fielddef->GetDesc()}({$fielddef->GetDesc()})<br />{/if}
+		<input type="text" name="{$actionid}customfield[{$fielddef->GetId()}]" id="{$actionid}customfield[{$fielddef->GetId()}]" value="{$fielddef->GetValue()}" size="{$fielddef->GetOptionValue('size')}" />
+		<div class="listit2-colorpicker-value" style="background-color: #{$fielddef->GetValue()}"></div>
+	</div>
+
+	<script type="text/javascript">
+	jQuery(document).ready(function($) {
+		$("#{$actionid}customfield\\\[{$fielddef->GetId()}\\\]")
+		.ColorPicker({
+			onShow: function (colpkr) {
+				$(colpkr).fadeIn(300);
+				return false;
+			},
+			onHide: function (colpkr) {
+				$(colpkr).fadeOut(300);
+				return false;
+			},
+			onBeforeShow: function () {
+				$(this).ColorPickerSetColor(this.value);
+			},
+			onChange: function (hsb, hex, rgb) {
+				$("#{$actionid}customfield\\\[{$fielddef->GetId()}\\\]").val(hex).next("div").css({
+					"backgroundColor" : "#" + hex
+				});
+			}
+		})
+
+	});
+	</script>
+
+</div>
diff --git a/lib/fielddefs/ColorPicker/listit2fd-colorpicker.css b/lib/fielddefs/ColorPicker/listit2fd-colorpicker.css
@@ -0,0 +1,182 @@
+.listit2-colorpicker-value {
+	display: inline-block;
+	vertical-align: middle;
+	width: 16px;
+	height: 16px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #999;
+	border-radius: 2px;
+}
+
+.listit2-colorpicker-adminlisting-value {
+	display: block;
+	width: 14px;
+	height: 14px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #999;
+	border-radius: 2px;
+}
+.colorpicker {
+	z-index: 999999;
+	width: 356px;
+	height: 176px;
+	overflow: hidden;
+	position: absolute;
+	background: url(images/colorpicker_background.png);
+	font-family: Arial, Helvetica, sans-serif;
+	display: none;
+}
+.colorpicker_color {
+	width: 150px;
+	height: 150px;
+	left: 14px;
+	top: 13px;
+	position: absolute;
+	background: #f00;
+	overflow: hidden;
+	cursor: crosshair;
+}
+.colorpicker_color div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 150px;
+	height: 150px;
+	background: url(images/colorpicker_overlay.png);
+}
+.colorpicker_color div div {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 11px;
+	height: 11px;
+	overflow: hidden;
+	background: url(images/colorpicker_select.gif);
+	margin: -5px 0 0 -5px;
+}
+.colorpicker_hue {
+	position: absolute;
+	top: 13px;
+	left: 171px;
+	width: 35px;
+	height: 150px;
+	cursor: n-resize;
+}
+.colorpicker_hue div {
+	position: absolute;
+	width: 35px;
+	height: 9px;
+	overflow: hidden;
+	background: url(images/colorpicker_indic.gif) left top;
+	margin: -4px 0 0 0;
+	left: 0px;
+}
+.colorpicker_new_color {
+	position: absolute;
+	width: 60px;
+	height: 30px;
+	left: 213px;
+	top: 13px;
+	background: #f00;
+}
+.colorpicker_current_color {
+	position: absolute;
+	width: 60px;
+	height: 30px;
+	left: 283px;
+	top: 13px;
+	background: #f00;
+}
+.colorpicker input {
+	background-color: transparent;
+	border: 1px solid transparent;
+	position: absolute;
+	font-size: 10px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #898989;
+	top: 4px;
+	right: 11px;
+	text-align: right;
+	margin: 0;
+	padding: 0;
+	height: 11px;
+}
+.colorpicker_hex {
+	position: absolute;
+	width: 72px;
+	height: 22px;
+	background: url(images/colorpicker_hex.png) top;
+	left: 212px;
+	top: 142px;
+}
+.colorpicker_hex input {
+	right: 6px;
+}
+.colorpicker_field {
+	height: 22px;
+	width: 62px;
+	background-position: top;
+	position: absolute;
+}
+.colorpicker_field span {
+	position: absolute;
+	width: 12px;
+	height: 22px;
+	overflow: hidden;
+	top: 0;
+	right: 0;
+	cursor: n-resize;
+}
+.colorpicker_rgb_r {
+	background-image: url(images/colorpicker_rgb_r.png);
+	top: 52px;
+	left: 212px;
+}
+.colorpicker_rgb_g {
+	background-image: url(images/colorpicker_rgb_g.png);
+	top: 82px;
+	left: 212px;
+}
+.colorpicker_rgb_b {
+	background-image: url(images/colorpicker_rgb_b.png);
+	top: 112px;
+	left: 212px;
+}
+.colorpicker_hsb_h {
+	background-image: url(images/colorpicker_hsb_h.png);
+	top: 52px;
+	left: 282px;
+}
+.colorpicker_hsb_s {
+	background-image: url(images/colorpicker_hsb_s.png);
+	top: 82px;
+	left: 282px;
+}
+.colorpicker_hsb_b {
+	background-image: url(images/colorpicker_hsb_b.png);
+	top: 112px;
+	left: 282px;
+}
+.colorpicker_submit {
+	position: absolute;
+	width: 22px;
+	height: 22px;
+	background: url(images/colorpicker_submit.png) top;
+	left: 322px;
+	top: 142px;
+	overflow: hidden;
+}
+.colorpicker_focus {
+	background-position: center;
+}
+.colorpicker_hex.colorpicker_focus {
+	background-position: bottom;
+}
+.colorpicker_submit.colorpicker_focus {
+	background-position: bottom;
+}
+.colorpicker_slider {
+	background-position: bottom;
+}