Factorized modal dialogs javascript

This commit is contained in:
franck
2013-09-06 20:26:29 +02:00
parent e8d96937e7
commit f304caa88f
4 changed files with 140 additions and 164 deletions

View File

@@ -126,7 +126,7 @@ class AsseticHelper
// //
// before generating 3bc974a-ad3ef47.css, delete 3bc974a-* files. // 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 // Delete previous version of the file
list($commonPart, $dummy) = explode('-', $asset_target_path); list($commonPart, $dummy) = explode('-', $asset_target_path);

View File

@@ -327,18 +327,12 @@
{* Adding a new Category *} {* Adding a new Category *}
{* Capture the dialog body, to pass it to the generic dialog *}
{capture "category_creation_dialog"} {form name="thelia.admin.category.creation"}
{form name="thelia.admin.category.creation"}
{* Assign form enctype *} {* Capture the dialog body, to pass it to the generic dialog *}
{$creation_form_enctype={form_enctype form=$form}}
{* Assign form error message, if any *} {capture "category_creation_dialog"}
{if $form_error}
{$creation_form_error=$form_error_message}
{/if}
{form_hidden_fields form=$form} {form_hidden_fields form=$form}
@@ -373,23 +367,23 @@
{/loop} {/loop}
</div> </div>
{/form_field} {/form_field}
{/form} {/capture}
{/capture}
{include {include
file = "includes/generic-create-dialog.html" file = "includes/generic-create-dialog.html"
dialog_id = "add_category_dialog" dialog_id = "add_category_dialog"
dialog_title = {intl l="Create a new category"} dialog_title = {intl l="Create a new category"}
dialog_body = {$smarty.capture.category_creation_dialog nofilter} dialog_body = {$smarty.capture.category_creation_dialog nofilter}
dialog_ok_label = {intl l="Create this category"} dialog_ok_label = {intl l="Create this category"}
dialog_cancel_label = {intl l="Cancel"} dialog_cancel_label = {intl l="Cancel"}
form_action = {url path='/admin/categories/create'} 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 *} {* Delete category confirmation dialog *}
@@ -423,43 +417,22 @@
<script> <script>
$(function() { $(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 *} {* Set the proper ID in the delete confirmation dialog *}

View File

@@ -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('');
});

View File

@@ -135,148 +135,116 @@
{* Adding a new variable *} {* 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"> {form name="thelia.admin.config.creation"}
<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"} {capture "creation_dialog"}
<form method="POST" action="{url path='/admin/configuration/variables/create'}" {form_enctype form=$form}>
{form_hidden_fields form=$form} {form_hidden_fields form=$form}
{form_field form=$form field='success_url'} {form_field form=$form field='success_url'}
{* on success, redirect to the edition page, _ID_ is replaced with the created variable ID, see controller *} {* on success, redirect to the edition page, _ID_ is replaced with the created variable ID, see controller *}
<input type="hidden" name="{$name}" value="{url path='/admin/configuration/variables/update' variable_id='_ID_'}" /> <input type="hidden" name="{$name}" value="{url path='/admin/configuration/variables/update' variable_id='_ID_'}" />
{/form_field} {/form_field}
{* We do not allow users to create hidden or secured variables from here *} {* We do not allow users to create hidden or secured variables from here *}
{form_field form=$form field='hidden'} {form_field form=$form field='hidden'}
<input type="hidden" name="{$name}" value="0" /> <input type="hidden" name="{$name}" value="0" />
{/form_field} {/form_field}
{form_field form=$form field='secured'} {form_field form=$form field='secured'}
<input type="hidden" name="{$name}" value="0" /> <input type="hidden" name="{$name}" value="0" />
{/form_field} {/form_field}
<div class="modal-body"> {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>
<input type="text" id="{$label_attr.for}" required="required" name="{$name}" value="{$value}" title="{intl l='Variable name'}" placeholder="{intl l='Variable name'}" class="form-control">
</div>
{/form_field}
{if #form_error}<div class="alert alert-error" id="add_variable_dialog_error">#form_error_message</div>{/if} {form_field form=$form field='value'}
<div class="form-group {if $error}has-error{/if}">
{form_field form=$form field='name'} <label for="{$label_attr.for}" class="control-label">{intl l="{$label}"} : </label>
<div class="form-group {if $error}has-error{/if}"> <input type="text" id="{$label_attr.for}" name="{$name}" value="{$value}" title="{intl l='Variable value'}" placeholder="{intl l='Variable value'}" class="form-control">
<label for="{$label_attr.for}" class="control-label">{intl l="{$label}"} : </label> </div>
<input type="text" id="{$label_attr.for}" required="required" name="{$name}" value="{$value}" title="{intl l='Variable name'}" placeholder="{intl l='Variable name'}" class="form-control"> {/form_field}
</div>
{/form_field}
{form_field form=$form field='value'}
<div class="form-group {if $error}has-error{/if}">
<label for="{$label_attr.for}" class="control-label">{intl l="{$label}"} : </label>
<input type="text" id="{$label_attr.for}" name="{$name}" value="{$value}" title="{intl l='Variable value'}" placeholder="{intl l='Variable value'}" class="form-control">
</div>
{/form_field}
{form_field form=$form field='title'}
<div class="form-group {if $error}has-error{/if}">
<label for="{$label_attr.for}" class="control-label">{intl l="{$label}"} : </label>
{loop type="lang" name="default-lang" default_only="1"} {form_field form=$form field='title'}
<div class="form-group {if $error}has-error{/if}">
<label for="{$label_attr.for}" class="control-label">{intl l="{$label}"} : </label>
{* Switch edition to the current locale *} {loop type="lang" name="default-lang" default_only="1"}
<input type="hidden" name="edit_language_id" value="{$ID}" />
<div class="input-group"> {* Switch edition to the current locale *}
<input type="text" id="{$label_attr.for}" required="required" name="{$name}" value="{$value}" title="{intl l='Variable purpose'}" placeholder="{intl l='Variable purpose'}" class="form-control"> <input type="hidden" name="edit_language_id" value="{$ID}" />
<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="input-group">
<input type="text" id="{$label_attr.for}" required="required" name="{$name}" value="{$value}" title="{intl l='Variable purpose'}" placeholder="{intl l='Variable purpose'}" class="form-control">
<span class="input-group-addon"><img src="{image file="assets/img/flags/{$CODE}.gif"}" alt="{intl l=$TITLE}" /></span>
</div>
{form_field form=$form field='locale'} <div class="help-block">{intl l='Enter here the category name in the default language (%title)' title="$TITLE"}</div>
<input type="hidden" name="{$name}" value="{$LOCALE}" />
{/form_field}
{/loop}
</div>
{/form_field}
</div> {form_field form=$form field='locale'}
<input type="hidden" name="{$name}" value="{$LOCALE}" />
<div class="modal-footer"> {/form_field}
<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span> {intl l="Cancel"}</button> {/loop}
<button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-check"></span> {intl l="Create this variable"}</button> </div>
</div> {/form_field}
{/capture}
</form> {include
{/form} file = "includes/generic-create-dialog.html"
</div>
</div>
</div>
dialog_id = "add_variable_dialog"
dialog_title = {intl l="Create a new variable"}
dialog_body = {$smarty.capture.creation_dialog nofilter}
{* Delete confirmation dialog *} dialog_ok_label = {intl l="Create this variable"}
<div class="modal fade" id="delete_variable_dialog" tabindex="-1" role="dialog" aria-hidden="true"> form_action = {url path='/admin/configuration/variables/create'}
<div class="modal-dialog"> form_enctype = {form_enctype form=$form}
<div class="modal-content"> form_error_message = $form_error_message
}
{/form}
<div class="modal-header"> {* Delete category confirmation dialog *}
<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"> {capture "delete_dialog"}
<p>{intl l="Do you really want to delete this variable ?"}</p> <input type="hidden" name="variable_id" id="variable_delete_id" value="" />
</div> {/capture}
<form method="post" action="{url path='/admin/configuration/variables/delete'}"> {include
<input type="hidden" name="variable_id" id="variable_delete_id" value="" /> file = "includes/generic-confirm-dialog.html"
<div class="modal-footer"> dialog_id = "delete_variable_dialog"
<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span> {intl l="No"}</button> dialog_title = {intl l="Delete a variable"}
<button type="submit" class="btn btn-default btn-primary"><span class="glyphicon glyphicon-check"></span> {intl l="Yes"}</button> dialog_message = {intl l="Do you really want to delete this variable ?"}
</div>
</form> form_action = {url path='/admin/configuration/variables/delete'}
</div> form_content = {$smarty.capture.delete_dialog nofilter}
</div> }
</div>
{/block} {/block}
{block name="javascript-initialization"} {block name="javascript-initialization"}
<script> <script>
$(function() { $(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 // Set proper variable ID in delete from
$('a.config-delete').click(function(ev) { $('a.config-delete').click(function(ev) {
$('#variable_delete_id').val($(this).data('id')); $('#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 // Edition canceling management
$('.cancel-edit').each(function() { $('.cancel-edit').each(function() {
var zis = $(this); var zis = $(this);