[v.1.2] Ready to release

* Added message that module settings should be saved due changes in the grid structure * Added improvements in the fix for spaces between the blocks * Added 6 new animations for the slides: scale-x, scale-y, top+scale, right+scale, bottom+scale and left+scale
GavickPro · Apr 10, 2014 · 7605c2b · 7605c2b
1 parent 7c36f07
commit 7605c2b
Show file tree

Hide file tree

Showing 7 changed files with 183 additions and 22 deletions.
diff --git a/mod_grid_gk5/admin/elements/gridmanager.php b/mod_grid_gk5/admin/elements/gridmanager.php
@@ -18,7 +18,9 @@ class JFormFieldGridmanager extends JFormField {
 	protected $type = 'Gridmanager';
 
 	protected function getInput() {
-		$grid_form = '<div id="gk_grid_manager">
+		$grid_form = '
+		<div id="gk_grid_manager_state_info">'.JText::_('MOD_GRID_CHANGED').'</div>
+		<div id="gk_grid_manager">
 			<div class="gk_grid_blocks">
 				<div class="gk_grid_header">
 					<h3>'.JText::_('MOD_GRID_GRID_BLOCKS').'</h3>

diff --git a/mod_grid_gk5/admin/script.js b/mod_grid_gk5/admin/script.js
@@ -11,6 +11,7 @@ jQuery(document).ready(function() {
 		var addForm = jQuery('#gk_grid_form_add');
 		var blockListUL = jQuery('#gk_grid_blocks_list');
 		var dataJSON = jQuery('#jform_params_grid_data');
+		var changeState = false;
 		// templates
 		var listItem = '<li data-id="{{ID}}"><div class="gk_handler"><i class="icon-sign-blank gkColor{{COLOR_ID}}" data-colorid="{{COLOR_ID}}"></i><strong>{{POSITION}}</strong> <span data-size="{{SIZE_DATA}}" class="data-size-info">'+GKGridManagerLang["LIST_SIZE"]+' {{SIZE_D_W}} &times; {{SIZE_D_H}}</span> <i class="icon-remove" data-id="{{ID}}"></i> <i class="icon-pencil" data-id="{{ID}}"></i></div><div class="gk_grid_form_edit"><div><p><label>'+GKGridManagerLang["LIST_POSITION"]+'</label> <span><input type="text" size="15" class="gk_grid_form_add_position" value="{{POSITION}}" /></span></p><p><label>'+GKGridManagerLang["LIST_DESKTOP_SIZE"]+'</label> <span><input type="number" size="1" min="1" max="6" value="{{SIZE_D_W}}" class="gk_grid_form_add_desktop_w" /> &times; <input type="number" size="1" min="1" max="9" value="{{SIZE_D_H}}" class="gk_grid_form_add_desktop_h" /></span></p><p><label>'+GKGridManagerLang["LIST_TABLET_SIZE"]+'</label> <span><input type="number" size="1" min="1" max="4" value="{{SIZE_T_W}}" class="gk_grid_form_add_tablet_w" /> &times; <input type="number" size="1" min="1" max="9" value="{{SIZE_T_H}}" class="gk_grid_form_add_tablet_h" /></span></p><p><label>'+GKGridManagerLang["LIST_MOBILE_SIZE"]+'</label> <span><input type="number" size="1" min="1" max="2" value="{{SIZE_M_W}}" class="gk_grid_form_add_mobile_w" /> &times; <input type="number" size="1" min="1" max="9" value="{{SIZE_M_H}}" class="gk_grid_form_add_mobile_h" /></span></p><p><button class="gk_grid_form_edit_cancel gk_grid_btn" data-id="{{ID}}">'+GKGridManagerLang["LIST_CANCEL"]+'</button><button class="gk_grid_form_edit_save gk_grid_btn" data-id="{{ID}}">'+GKGridManagerLang["LIST_SAVE_BLOCK"]+'</button></p></div></div></li>';
 		// data storage
@@ -54,8 +55,15 @@ jQuery(document).ready(function() {
 				blockListUL.append(jQuery(tpl));
 			}
 		};
+
+		var showStateInfo = function() {
+			if(!changeState) {
+				changeState = true;
+				jQuery('#gk_grid_manager_state_info').addClass('active');
+			}
+		}
 
-		var calculatePreview = function(type) {
+		var calculatePreview = function(type, initial) {
 			if(blockList.length > 0) {
 				// specify the size of render area
 				var size = type == 'desktop' ? 6 : type == 'tablet' ? 4 : 2;
@@ -220,6 +228,10 @@ jQuery(document).ready(function() {
 				jQuery('#gk_grid_tablet_preview').html('<p>' + GKGridManagerLang["GRID_NO_BLOCKS"] + '</p>').css('height', 'auto');	
 				jQuery('#gk_grid_mobile_preview').html('<p>' + GKGridManagerLang["GRID_NO_BLOCKS"] + '</p>').css('height', 'auto');	
 			}
+
+			if(!initial) {
+				showStateInfo();
+			}
 		}
 
 		var renderPreview = function(size, sizeName, results, preview, type) {
@@ -535,9 +547,9 @@ jQuery(document).ready(function() {
 	    		renderItems();
 	    		initBasicEvents();
 	    		initAddForm();
-	    		calculatePreview('desktop');
-	    		calculatePreview('tablet');
-	    		calculatePreview('mobile');
+	    		calculatePreview('desktop', true);
+	    		calculatePreview('tablet', true);
+	    		calculatePreview('mobile', true);
 	    	},
 	    	refresh: function(which) {
 	    		calculatePreview(which);

diff --git a/mod_grid_gk5/admin/style.css b/mod_grid_gk5/admin/style.css
@@ -602,4 +602,35 @@ body.dragging * {
 }
 .ui-spinner-down {
 	bottom: -3px;
+}
+
+/* State message */
+#gk_grid_manager_state_info {
+	background: #faa;
+	color: #fff;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 1.5;
+	margin: 5px -10px;
+	opacity: 0;
+	padding: 8px 12px;
+	text-align: center;
+	-webkit-transform: scaleY(0);
+	-moz-transform: scaleY(0);
+	-ms-transform: scaleY(0);
+	-o-transform: scaleY(0);
+	transform: scaleY(0);
+	-webkit-transition: all .3s ease-out;
+	-moz-transition: all .3s ease-out;
+	-ms-transition: all .3s ease-out;
+	-o-transition: all .3s ease-out;
+	transition: all .3s ease-out;
+}
+#gk_grid_manager_state_info.active {
+	opacity: 1;
+	-webkit-transform: scaleY(1);
+	-moz-transform: scaleY(1);
+	-ms-transform: scaleY(1);
+	-o-transform: scaleY(1);
+	transform: scaleY(1);
 }
diff --git a/mod_grid_gk5/helper.php b/mod_grid_gk5/helper.php
@@ -154,9 +154,9 @@ public function moduleCSS() {
 		// define the blocks size and position
 		for($i = 0; $i < count($block_data); $i++) {
 			$el = $block_data[$i];
-			$output_desktop .= $prefix . str_replace(array('[', ']'), array('_', ''), $el->ID) . ' { height: '.($el->SIZE_D_H * (100.0 / $mod_height_desktop)).'%; width: '.($el->SIZE_D_W * (100.0 / 6)).'%; left: '.($el->POS_D_X * (100.0 / 6)).'%; top: '.($el->POS_D_Y * (100.0 / $mod_height_desktop)).'%; }' . "\n";
-			$output_tablet .= $prefix . str_replace(array('[', ']'), array('_', ''), $el->ID) . ' { height: '.($el->SIZE_T_H * (100.0 / $mod_height_tablet)).'%; width: '.($el->SIZE_T_W * (100.0 / 4)).'%; left: '.($el->POS_T_X * (100.0 / 4)).'%; top: '.($el->POS_T_Y * (100.0 / $mod_height_tablet)).'%; }' . "\n";
-			$output_mobile .= $prefix . str_replace(array('[', ']'), array('_', ''), $el->ID) . ' { height: '.($el->SIZE_M_H * (100.0 / $mod_height_mobile)).'%; width: '.($el->SIZE_M_W * (100.0 / 2)).'%; left: '.($el->POS_M_X * (100.0 / 2)).'%; top: '.($el->POS_M_Y * (100.0 / $mod_height_mobile)).'%; }' . "\n";
+			$output_desktop .= $prefix . str_replace(array('[', ']'), array('_', ''), $el->ID) . ' { height: '.($el->SIZE_D_H * (100.0 / $mod_height_desktop)).'%; width: '.($el->SIZE_D_W * (100.0 / 6)).'%; left: '.($el->POS_D_X * (100.0 / 6)).'%; top: '.($el->POS_D_Y * (100.0 / $mod_height_desktop)).'%; z-index: '.($i+1).'; }' . "\n";
+			$output_tablet .= $prefix . str_replace(array('[', ']'), array('_', ''), $el->ID) . ' { height: '.($el->SIZE_T_H * (100.0 / $mod_height_tablet)).'%; width: '.($el->SIZE_T_W * (100.0 / 4)).'%; left: '.($el->POS_T_X * (100.0 / 4)).'%; top: '.($el->POS_T_Y * (100.0 / $mod_height_tablet)).'%; z-index: '.($i+1).'; }' . "\n";
+			$output_mobile .= $prefix . str_replace(array('[', ']'), array('_', ''), $el->ID) . ' { height: '.($el->SIZE_M_H * (100.0 / $mod_height_mobile)).'%; width: '.($el->SIZE_M_W * (100.0 / 2)).'%; left: '.($el->POS_M_X * (100.0 / 2)).'%; top: '.($el->POS_M_Y * (100.0 / $mod_height_mobile)).'%; z-index: '.($i+1).'; }' . "\n";
 		}
 		// output the final CSS code
 		return $output_desktop . '@media (max-width: '.$this->config['tablet_width'].'px) { ' . "\n" . '.gkGridGK5 .gkImgTablet { display: block; } .gkGridGK5 .gkImgDesktop, .gkGridGK5 .gkImgMobile { display: none; } ' . "\n" . $output_tablet . '} ' . "\n" . '@media (max-width: '.$this->config['mobile_width'].'px) { ' . "\n" . '.gkGridGK5 .gkImgMobile { display: block; } .gkGridGK5 .gkImgDesktop, .gkGridGK5 .gkImgTablet { display: none; } ' . "\n"  . $output_mobile . '} ';

diff --git a/mod_grid_gk5/language/en-GB.mod_grid_gk5.ini b/mod_grid_gk5/language/en-GB.mod_grid_gk5.ini
@@ -28,12 +28,18 @@ MOD_GRID_ANIMATION_TYPE="Animation type"
 MOD_GRID_ANIMATION_TYPE_DESC="Select the animation type."
 MOD_GRID_OPACITY="Opacity"
 MOD_GRID_SCALE="Scale"
+MOD_GRID_SCALE_X="Scale on X axis"
+MOD_GRID_SCALE_Y="Scale on Y axis"
 MOD_GRID_ROTATE="Rotate"
 MOD_GRID_ROTATE3D="Rotate 3D"
 MOD_GRID_TOP="Top slide"
 MOD_GRID_RIGHT="Right slide"
 MOD_GRID_BOTTOM="Bottom slide"
 MOD_GRID_LEFT="Left slide"
+MOD_GRID_TOP_SCALE="Top slide + scale"
+MOD_GRID_RIGHT_SCALE="Right slide + scale"
+MOD_GRID_BOTTOM_SCALE="Bottom slide + scale"
+MOD_GRID_LEFT_SCALE="Left slide + scale"
 COM_MODULES_GRID_ADVANCED_FIELDSET_LABEL="Advanced settings"
 MOD_GRID_TABLET_WIDTH="Tablet width"
 MOD_GRID_TABLET_WIDTH_DESC="Tablet width for the grid - used in the media-queries."
@@ -53,14 +59,13 @@ MOD_GRID_INCLUDE_JQUERY_DESC="Force loading of the jQuery framework by the modul
 COM_MODULES_GRID_ABOUT_US_FIELDSET_LABEL="About"
 MOD_GRID_ABOUT_US_CONTENT="<div style='color: #555; line-height: 18px; font-size: 12px; padding: 20px 0 0'><p><strong>Author:</strong></p>Grid GK5 is a product of <a href='http://www.gavick.com' target='_blank' style='color: #2f4c6d'>GavickPro</a>.  Our company objective since 2007 has been to produce and release professional, effective and leading-edge <a href='http://www.gavick.com/products/templates.html' target='_blank' style='color: #2f4c6d'>Joomla Templates</a> in response to the needs of website developers.  Additionally, we provide <a href='http://www.gavick.com/best-free-joomla-tab-module.html' target='_blank' style='color: #2f4c6d'>free extensions</a> and modules, and we constantly update <a href='http://www.gavick.com/magazine/' target='_blank' style='color: #2f4c6d'>Gavick Magazine</a>, our online journal which provides breaking industry news and tips you can use to be more effective and to avoid possible issues.<p style='font-size: 11px; text-align: center;margin: 60px -10px 0; border-top: 1px solid #eee; padding: 6px 0'>Grid GK5 is released under the <a href='http://www.gnu.org/licenses/gpl-2.0.html' target='_blank' style='color: #2f4c6d'>GNU/GPL v2 license.</a></p>"
 
-MOD_GRID_FORCE_DISABLED="Force disabled"
-MOD_GRID_FORCE_ENABLED="Force enabled"
 MOD_GRID_AUTOMATIC="Automatic"
 MOD_GRID_DISABLED="Disabled"
 MOD_GRID_ENABLED="Enabled"
 
 ; Grid manager phrases
 
+MOD_GRID_CHANGED="Please rememeber to save the module settings when you apply all grid changes."
 MOD_GRID_PROPORTIONS_D="Height/width for desktop"
 MOD_GRID_PROPORTIONS_D_DESC="You can specify the proportions between the height and width units - '1' means that one height unit is equal to one width unit. This value is rounded up to 2 decimal places."
 MOD_GRID_PROPORTIONS_T="Height/width for tablet"

diff --git a/mod_grid_gk5/mod_grid_gk5.xml b/mod_grid_gk5/mod_grid_gk5.xml
@@ -2,12 +2,12 @@
 <extension type="module" version="1.6.0" client="site" method="upgrade">
 	<name>Grid GK5</name>
 	<author>GavickPro</author>
-	<creationDate>06/02/2014</creationDate>
+	<creationDate>11/04/2014</creationDate>
 	<copyright>Copyright (C) 2013-2014 GavickPro. All rights reserved.</copyright>
 	<license>GNU General Public License version 2 or later</license>
 	<authorEmail>[email protected]</authorEmail>
 	<authorUrl>www.gavickpro.com</authorUrl>
-	<version>1.1</version>
+	<version>1.2</version>
 	<description><![CDATA[
 		<style type="text/css">
 			span.readonly { padding: 10px; font-family: Arial; font-size:13px !important; font-weight: normal !important; text-align: justify; color: #4d4d4d; line-height: 24px; }
@@ -21,7 +21,7 @@
 			span.readonly p.license { border-top: 1px solid #eee; font-size: 11px; margin: 30px 26px 0; padding: 6px 0; }
 		</style>
 		
-		<span class="readonly"><h1>Grid GK5<small>ver. 1.1</small></h1><p>GK5 is one product of the next generation of GavickPro extensions designed exclusively for Joomla 2.5+.</p><p>With the Grid GK5 module, you can implement space-saving grid area on websites and incorporate a variety of content types via modules. Thanks to the amazing grid management system we've integrated into the module, Grid GK5 remains easy, intuitive and quick to configure.  With built-in support for module embedding, the possibilities for implementing this new release are unlimited!</p> <p class='homepage'><a href='http://www.gavick.com/documentation/joomla-extensions/extensions-for-joomla-1-6/grid-gk5-module/' target='_blank'>Learn more at the Grid GK5 project website.</a></p><p class='license'>Grid GK5 is released under the <a target="_blank" href="http://www.gnu.org/licenses/gpl-2.0.html">GNU/GPL v2 license.</a></p></span>
+		<span class="readonly"><h1>Grid GK5<small>ver. 1.2</small></h1><p>GK5 is one product of the next generation of GavickPro extensions designed exclusively for Joomla 2.5+.</p><p>With the Grid GK5 module, you can implement space-saving grid area on websites and incorporate a variety of content types via modules. Thanks to the amazing grid management system we've integrated into the module, Grid GK5 remains easy, intuitive and quick to configure.  With built-in support for module embedding, the possibilities for implementing this new release are unlimited!</p> <p class='homepage'><a href='http://www.gavick.com/documentation/joomla-extensions/extensions-for-joomla-1-6/grid-gk5-module/' target='_blank'>Learn more at the Grid GK5 project website.</a></p><p class='license'>Grid GK5 is released under the <a target="_blank" href="http://www.gnu.org/licenses/gpl-2.0.html">GNU/GPL v2 license.</a></p></span>
 		<span class='tooltip-content'>Advanced grid module for Joomla! 2.5</span>
 	]]></description>
 	<files>
@@ -87,12 +87,18 @@
 				<field name="animation_type" type="list" default="opacity" label="MOD_GRID_ANIMATION_TYPE" description="MOD_GRID_ANIMATION_TYPE_DESC">
 				        <option value="opacity">MOD_GRID_OPACITY</option>
 				        <option value="scale">MOD_GRID_SCALE</option>
+				        <option value="scale-x">MOD_GRID_SCALE_X</option>
+				        <option value="scale-y">MOD_GRID_SCALE_Y</option>
 				        <option value="rotate">MOD_GRID_ROTATE</option>
 				        <option value="rotate3d">MOD_GRID_ROTATE3D</option>
 				        <option value="top">MOD_GRID_TOP</option>
 				        <option value="right">MOD_GRID_RIGHT</option>
 				        <option value="bottom">MOD_GRID_BOTTOM</option>
 				        <option value="left">MOD_GRID_LEFT</option>
+				        <option value="top-scale">MOD_GRID_TOP_SCALE</option>
+				        <option value="right-scale">MOD_GRID_RIGHT_SCALE</option>
+				        <option value="bottom-scale">MOD_GRID_BOTTOM_SCALE</option>
+				        <option value="left-scale">MOD_GRID_LEFT_SCALE</option>
 				</field>
 			</fieldset>
 			<!-- advanced -->
@@ -101,13 +107,13 @@
 				<field name="mobile_width" type="text" class="input-px" size="5" default="600" label="MOD_GRID_MOBILE_WIDTH" description="MOD_GRID_MOBILE_WIDTH_DESC" />
 
 				<field name="useCSS" type="list" default="1" label="MOD_GRID_USE_CSS" description="MOD_GRID_USE_CSS_DESC">
-				        <option value="0">MOD_GRID_FORCE_DISABLED</option>
-				        <option value="1">MOD_GRID_FORCE_ENABLED</option>
+				        <option value="0">MOD_GRID_DISABLED</option>
+				        <option value="1">MOD_GRID_ENABLED</option>
 				</field>
 
 				<field name="useScript" type="list" default="1" label="MOD_GRID_USE_SCRIPT" description="MOD_GRID_USE_SCRIPT_DESC">
-				        <option value="0">MOD_GRID_FORCE_DISABLED</option>
-				        <option value="1">MOD_GRID_FORCE_ENABLED</option>
+				        <option value="0">MOD_GRID_DISABLED</option>
+				        <option value="1">MOD_GRID_ENABLED</option>
 				        <option value="2">MOD_GRID_AUTOMATIC</option>
 				</field>
 

diff --git a/mod_grid_gk5/styles/style.css b/mod_grid_gk5/styles/style.css
@@ -51,11 +51,6 @@
 	opacity: 0; filter: alpha(opacity=0);
 	overflow: hidden;
 	position: absolute;
-	-webkit-transform: scale(1.01);
-	-moz-transform: scale(1.01);
-	-ms-transform: scale(1.01);
-	-o-transform: scale(1.01);
-	transform: scale(1.01);
 	-webkit-transition-property: all;
 	-moz-transition-property: all;
 	-ms-transition-property: all;
@@ -71,6 +66,11 @@
 
 .gkGridGK5Wrap > .gkGridElement.active {
 	opacity: 1; filter: alpha(opacity=100);
+	-webkit-transform: scale(1.003)!important;
+	-moz-transform: scale(1.003)!important;
+	-ms-transform: scale(1.003)!important;
+	-o-transform: scale(1.003)!important;
+	transform: scale(1.003)!important;
 }
 /* Animation types */
 .gkGridGK5[data-type="scale"] .gkGridElement {
@@ -88,6 +88,39 @@
 	transform: scale(1);
 }
 
+
+.gkGridGK5[data-type="scale-x"] .gkGridElement {
+	-webkit-transform: scaleX(0.75);
+	-moz-transform: scaleX(0.75);
+	-ms-transform: scaleX(0.75);
+	-o-transform: scaleX(0.75);
+	transform: scaleX(0.75);
+}
+.gkGridGK5[data-type="scale-x"] .gkGridElement.active {
+	-webkit-transform: scaleX(1);
+	-moz-transform: scaleX(1);
+	-ms-transform: scaleX(1);
+	-o-transform: scaleX(1);
+	transform: scaleX(1);
+}
+
+
+.gkGridGK5[data-type="scale-y"] .gkGridElement {
+	-webkit-transform: scaleY(0.75);
+	-moz-transform: scaleY(0.75);
+	-ms-transform: scaleY(0.75);
+	-o-transform: scaleY(0.75);
+	transform: scaleY(0.75);
+}
+.gkGridGK5[data-type="scale-y"] .gkGridElement.active {
+	-webkit-transform: scaleY(1);
+	-moz-transform: scaleY(1);
+	-ms-transform: scaleY(1);
+	-o-transform: scaleY(1);
+	transform: scaleY(1);
+}
+
+
 .gkGridGK5[data-type="rotate"] .gkGridElement {
 	margin-top: 10%;
 	-webkit-transform: rotateZ(25deg);
@@ -154,6 +187,78 @@
 }
 
 
+.gkGridGK5[data-type="bottom-scale"] .gkGridElement {
+	margin-top: 20%;
+	-webkit-transform: scale(0.75);
+	-moz-transform: scale(0.75);
+	-ms-transform: scale(0.75);
+	-o-transform: scale(0.75);
+	transform: scale(0.75);
+}
+.gkGridGK5[data-type="bottom-scale"] .gkGridElement.active {
+	margin-top: 0%;
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+	-ms-transform: scale(1);
+	-o-transform: scale(1);
+	transform: scale(1);
+}
+
+
+.gkGridGK5[data-type="top-scale"] .gkGridElement {
+	margin-top: -20%;
+	-webkit-transform: scale(0.75);
+	-moz-transform: scale(0.75);
+	-ms-transform: scale(0.75);
+	-o-transform: scale(0.75);
+	transform: scale(0.75);
+}
+.gkGridGK5[data-type="top-scale"] .gkGridElement.active {
+	margin-top: 0%;
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+	-ms-transform: scale(1);
+	-o-transform: scale(1);
+	transform: scale(1);
+}
+
+
+.gkGridGK5[data-type="left-scale"] .gkGridElement {
+	margin-left: -20%;
+	-webkit-transform: scale(0.75);
+	-moz-transform: scale(0.75);
+	-ms-transform: scale(0.75);
+	-o-transform: scale(0.75);
+	transform: scale(0.75);
+}
+.gkGridGK5[data-type="left-scale"] .gkGridElement.active {
+	margin-left: 0%;
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+	-ms-transform: scale(1);
+	-o-transform: scale(1);
+	transform: scale(1);
+}
+
+
+.gkGridGK5[data-type="right-scale"] .gkGridElement {
+	margin-left: 20%;
+	-webkit-transform: scale(0.75);
+	-moz-transform: scale(0.75);
+	-ms-transform: scale(0.75);
+	-o-transform: scale(0.75);
+	transform: scale(0.75);
+}
+.gkGridGK5[data-type="right-scale"] .gkGridElement.active {
+	margin-left: 0%;
+	-webkit-transform: scale(1);
+	-moz-transform: scale(1);
+	-ms-transform: scale(1);
+	-o-transform: scale(1);
+	transform: scale(1);
+}
+
+
 /* Animation speeds */
 .gkGridGK5[data-speed="normal"] .gkGridElement {
 	-webkit-transition-duration: .5s;