Factorized modal dialogs javascript

core/lib/Thelia/Core/Template/Assets/AsseticHelper.php

@@ -126,7 +126,7 @@ class AsseticHelper
         //
         //     before generating 3bc974a-ad3ef47.css, delete 3bc974a-* files.
         //
-        if ($dev_mode == true || ! file_exists($target_file)) {
+        if (/*$dev_mode == true || */! file_exists($target_file)) {
 
             // Delete previous version of the file
             list($commonPart, $dummy) = explode('-', $asset_target_path);

templates/admin/default/categories.html

@@ -327,18 +327,12 @@
 
     {* Adding a new Category *}
 
+
+    {form name="thelia.admin.category.creation"}
+
         {* Capture the dialog body, to pass it to the generic dialog *}
 
         {capture "category_creation_dialog"}
-        {form name="thelia.admin.category.creation"}
-
-            {* Assign form enctype *}
-            {$creation_form_enctype={form_enctype form=$form}}
-
-            {* Assign form error message, if any *}
-            {if $form_error}
-                {$creation_form_error=$form_error_message}
-            {/if}
 
             {form_hidden_fields form=$form}
 
@@ -373,7 +367,6 @@
 			         {/loop}
 			     </div>
 			{/form_field}
-        {/form}
 	    {/capture}
 
 		{include
@@ -387,9 +380,10 @@
 		    dialog_cancel_label = {intl l="Cancel"}
 
 		    form_action        = {url path='/admin/categories/create'}
-	    form_enctype       = $creation_form_enctype
+		    form_enctype       = {form_enctype form=$form}
-	    form_error_message = {$creation_form_error|default:''}
+		    form_error_message = $form_error_message
 		}
+    {/form}
 
     {* Delete category confirmation dialog *}
 
@@ -423,43 +417,22 @@
 <script>
 $(function() {
 
-	{* display the form creation dialog if it contains errors *}
+	// JS stuff for category creation form
+    {include
+        file      = "includes/generic-js-dialog.html"
 
-    {form name="thelia.admin.category.creation"}
+        dialog_id = "add_category_dialog"
-        {if #form_error}
+        form_name = "thelia.admin.category.creation"
-			$('#add_category_dialog').modal();
+    }
-        {/if}
-	{/form}
 
-    {form name="thelia.admin.product.creation"}
+    // JS stuff for product creation form
-        {if #form_error}
+    {include
-            $('#add_category_dialog').modal();
+        file      = "includes/generic-js-dialog.html"
-        {/if}
-    {/form}
 
-	{* Always reset create dialog on close *}
+        dialog_id = "add_product_dialog"
+        form_name = "thelia.admin.product.creation"
+    }
 
-    $('#add_category_dialog').on('hidden',function() {
-        // Hide error message
-        $('#add_category_dialog_error').remove();
-
-        // Clear error status
-        $("#add_category_dialog .error").removeClass('error');
-
-        // Empty field values
-        $("#add_category_dialog input[type=text]").val('');
-    });
-
-    $('#add_product_dialog').on('hidden',function() {
-        // Hide error message
-        $('#add_product_dialog_error').remove();
-
-        // Clear error status
-        $("#add_product_dialog .error").removeClass('error');
-
-        // Empty field values
-        $("#add_product_dialog input[type=text]").val('');
-    });
 
     {* Set the proper ID in the delete confirmation dialog *}
 

templates/admin/default/includes/generic-js-dialog.html

@@ -0,0 +1,35 @@
+{*
+Javascript code to manage create dialog. Insert it in your template, in the javascript
+initialisation:
+
+	$(function() {
+	   <insert me here>
+	}
+
+Parameters:
+    $dialog_id = the dialog ID
+    $form_name = the form name
+
+*}
+
+{* re-display the form creation dialog if it contains errors *}
+
+{form name="{$form_name}"}
+    {if #form_error}
+        $('#{$dialog_id}').modal();
+    {/if}
+{/form}
+
+{* Always reset create dialog on close *}
+
+$('#{$dialog_id}').on('hidden', function() {
+
+    // Hide error message
+    $('#{$dialog_id}_error').remove();
+
+    // Clear error status
+    $("#{$dialog_id} .error").removeClass('error');
+
+    // Empty field values
+    $("#{$dialog_id} input[type=text]").val('');
+});

templates/admin/default/variables.html

@@ -135,17 +135,11 @@
 
 {* Adding a new variable *}
 
-<div class="modal fade" id="add_variable_dialog" tabindex="-1" role="dialog" aria-hidden="true">
+    {* Capture the dialog body, to pass it to the generic dialog *}
-  <div class="modal-dialog">
-    <div class="modal-content">
-
-      <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <h3>{intl l="Create a new variable"}</h3>
-      </div>
 
     {form name="thelia.admin.config.creation"}
-      <form method="POST" action="{url path='/admin/configuration/variables/create'}" {form_enctype form=$form}>
+
+        {capture "creation_dialog"}
 
 			{form_hidden_fields form=$form}
 
@@ -164,10 +158,6 @@
 			<input type="hidden" name="{$name}" value="0" />
 			{/form_field}
 
-          <div class="modal-body">
-
-              {if #form_error}<div class="alert alert-error" id="add_variable_dialog_error">#form_error_message</div>{/if}
-                
 		    {form_field form=$form field='name'}
 		    <div class="form-group {if $error}has-error{/if}">
 		        <label for="{$label_attr.for}" class="control-label">{intl l="{$label}"} : </label>
@@ -196,7 +186,7 @@
 		              <span class="input-group-addon"><img src="{image file="assets/img/flags/{$CODE}.gif"}" alt="{intl l=$TITLE}" /></span>
 		            </div>
 
-                      <div class="help-block">{intl l="Enter here the variable purpose in the default language ($TITLE)"}</div>
+		            <div class="help-block">{intl l='Enter here the category name in the default language (%title)' title="$TITLE"}</div>
 
 		            {form_field form=$form field='locale'}
 		              <input type="hidden" name="{$name}" value="{$LOCALE}" />
@@ -204,79 +194,57 @@
 		        {/loop}
 		    </div>
 		    {/form_field}
+        {/capture}
 
-          </div>
+	    {include
+	        file = "includes/generic-create-dialog.html"
 
-          <div class="modal-footer">
+	        dialog_id    = "add_variable_dialog"
-              <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span> {intl l="Cancel"}</button>
+	        dialog_title = {intl l="Create a new variable"}
-              <button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-check"></span> {intl l="Create this variable"}</button>
+	        dialog_body  = {$smarty.capture.creation_dialog nofilter}
-          </div>
 
-      </form>
+	        dialog_ok_label     = {intl l="Create this variable"}
+
+	        form_action        = {url path='/admin/configuration/variables/create'}
+	        form_enctype       = {form_enctype form=$form}
+	        form_error_message = $form_error_message
+	    }
     {/form}
-    </div>
-  </div>
-</div>
 
+    {* Delete category confirmation dialog *}
 
-{* Delete confirmation dialog *}
+    {capture "delete_dialog"}
-
-<div class="modal fade" id="delete_variable_dialog" tabindex="-1" role="dialog" aria-hidden="true">
-  <div class="modal-dialog">
-    <div class="modal-content">
-
-      <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <h3>{intl l="Delete a variable"}</h3>
-      </div>
-
-      <div class="modal-body">
-          <p>{intl l="Do you really want to delete this variable ?"}</p>
-      </div>
-
-      <form method="post" action="{url path='/admin/configuration/variables/delete'}">
         <input type="hidden" name="variable_id" id="variable_delete_id" value="" />
+    {/capture}
 
-  	    <div class="modal-footer">
+    {include
-            <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span> {intl l="No"}</button>
+        file = "includes/generic-confirm-dialog.html"
-            <button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-check"></span> {intl l="Yes"}</button>
+
-  	    </div>
+        dialog_id       = "delete_variable_dialog"
-      </form>
+        dialog_title    = {intl l="Delete a variable"}
-    </div>
+        dialog_message  = {intl l="Do you really want to delete this variable ?"}
-  </div>
+
-</div>
+        form_action         = {url path='/admin/configuration/variables/delete'}
+        form_content        = {$smarty.capture.delete_dialog nofilter}
+    }
 {/block}
 
 {block name="javascript-initialization"}
 <script>
     $(function() {
 
+        // JS stuff for creation form
+        {include
+            file      = "includes/generic-js-dialog.html"
+            dialog_id = "add_variable_dialog"
+            form_name = "thelia.admin.config.creation"
+        }
+
     	// Set proper variable ID in delete from
     	$('a.config-delete').click(function(ev) {
     		$('#variable_delete_id').val($(this).data('id'));
      	});
 
-        {* display the form creation dialog if it contains errors *}
-
-        {form name="thelia.admin.config.creation"}
-            {if #form_error}
-                $('#add_variable_dialog').modal();
-            {/if}
-        {/form}
-
-        {* Always reset create dialog on close *}
-
-        $('#add_variable_dialog').on('hidden',function() {
-            // Hide error message
-            $('#add_variable_dialog_error').remove();
-
-            // Clear error status
-            $("#add_variable_dialog .error").removeClass('error');
-
-            // Empty field values
-            $("#add_variable_dialog input[type=text]").val('');
-        });
-
     	// Edition canceling management
         $('.cancel-edit').each(function() {
             var zis   = $(this);