Added color visualizer for fields with the color input (the thumbnail…

…s background field in the Thumbnails section)
DSPEED · May 17, 2013 · b31869b · b31869b
1 parent 039e591
commit b31869b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/mod_news_pro_gk5/admin/main.js b/mod_news_pro_gk5/admin/main.js
@@ -59,7 +59,7 @@ window.addEvent("domready",function(){
 	}
 
 	// fix the Joomla! behaviour
-	$$('.panel h3.title').each(function(panel) {
+	$$('.panel h3.title').each(function(panel, i) {
 		panel.addEvent('click', function(){
 			if(panel.hasClass('pane-toggler')) {
 				(function(){ 
@@ -92,6 +92,25 @@ window.addEvent("domready",function(){
 	$$('.input-ms').each(function(el){el.getParent().innerHTML = el.getParent().innerHTML + "<span class=\"unit\">ms</span>"});
 	$$('.input-times').each(function(el){ el.getParent().innerHTML = el.getParent().innerHTML + "<span class=\"unit times\">&times;</span>"});
 
+	$$('.gk-color').each(function(el, i) {
+		var prnt = el.getParent(); 
+		prnt.innerHTML = prnt.innerHTML + "<span class=\"gk-color-vis\"></span>";
+
+		prnt.getElement('.gk-color').addEvent('focus', function() { 
+			prnt.getElement('.gk-color-vis').setStyle('background-color', prnt.getElement('.gk-color').get('value')); 
+		});
+
+		prnt.getElement('.gk-color').addEvent('blur', function() { 
+			prnt.getElement('.gk-color-vis').setStyle('background-color', prnt.getElement('.gk-color').get('value')); 
+		});
+
+		prnt.getElement('.gk-color').addEvent('keyup', function() { 
+			prnt.getElement('.gk-color-vis').setStyle('background-color', prnt.getElement('.gk-color').get('value')); 
+		});
+
+		prnt.getElement('.gk-color').fireEvent('blur');
+	});
+
 	$$('.text-limit').each(function(el){
 		var name = el.get('id') + '_type';
 		var parent = el.getParent();

diff --git a/mod_news_pro_gk5/admin/style.css b/mod_news_pro_gk5/admin/style.css
@@ -846,4 +846,17 @@ label[id^=jform_params_gk_line_],
 
 .nspgk5-panel select.gk_switch {
 	display: none!important;
+}
+
+/* Color visualisation */
+.gk-color-vis {
+	background: transparent;
+	border: 2px solid #ddd;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	border-radius: 4px;
+	float: left;
+	height: 24px;
+	margin: 4px 0 0 0;
+	width: 24px;
 }
diff --git a/mod_news_pro_gk5/mod_news_pro_gk5.xml b/mod_news_pro_gk5/mod_news_pro_gk5.xml
@@ -565,7 +565,7 @@
                 <field name="img_width" type="text" default="160" size="5" class="input-times text_area" label="MOD_NEWS_PRO_GK5_IMAGE_W" description="MOD_NEWS_PRO_GK5_IMAGE_W_DESC"/>
 				<field name="img_height" type="text" default="120" size="5" class="input-pixels text_area" label="MOD_NEWS_PRO_GK5_IMAGE_H" description="MOD_NEWS_PRO_GK5_IMAGE_H_DESC"/>
 				<field name="img_margin" type="text" default="6px 14px 0 0" label="MOD_NEWS_PRO_GK5_IMAGE_MARGIN" description="MOD_NEWS_PRO_GK5_IMAGE_MARGIN_DESC"/>
-                <field name="img_bg" type="text" default="#000" size="5" label="MOD_NEWS_PRO_GK5_IMAGE_BG" description="MOD_NEWS_PRO_GK5_IMAGE_BG_DESC"/>   
+                <field name="img_bg" type="text" default="#000" size="5" label="MOD_NEWS_PRO_GK5_IMAGE_BG" description="MOD_NEWS_PRO_GK5_IMAGE_BG_DESC" class="gk-color" />   
 				<field name="img_stretch" type="list" class="gk_switch" default="0" label="MOD_NEWS_PRO_GK5_IMAGE_STRETCH" description="MOD_NEWS_PRO_GK5_IMAGE_STRETCH_DESC">
                         <option value="0">MOD_NEWS_PRO_GK5_DISABLED</option>
                         <option value="1">MOD_NEWS_PRO_GK5_ENABLED</option>