TheCoreDev/sterivein
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Working : Upload image : set product image form loaded via ajax, fix category, folder, content

Browse Source
This commit is contained in:
gmorel
2013-09-23 14:42:23 +02:00
parent ac35f1f6fd
commit d0376d31f9
5 changed files with 141 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
templates/admin/default/assets/js/image-upload.js
View File

@@ -1,23 +1,26 @@
$(function($){ $(function($){
// Manage picture upload // Manage picture upload
var pictureUploadManager = {}; $.imageUploadManager = {};
Dropzone.autoDiscover = false; Dropzone.autoDiscover = false;
// Remove image on click
$.imageUploadManager.initImageDropZone = function() {
var imageDropzone = new Dropzone("#images-dropzone", {
dictDefaultMessage : $('.btn-browse').html(),
uploadMultiple: false,
maxFilesize: 8
});
var imageDropzone = new Dropzone("#images-dropzone", { imageDropzone.on("success", function(file) {
dictDefaultMessage : $('.btn-browse').html(), $(".image-manager .dz-file-preview").remove();
uploadMultiple: false, imageDropzone.removeFile(file);
maxFilesize: 8 $.imageUploadManager.updateImageListAjax();
}); $.imageUploadManager.onClickDeleteImage();
});
imageDropzone.on("success", function(file) { };
$(".image-manager .dz-file-preview").remove();
imageDropzone.removeFile(file);
pictureUploadManager.updateImageListAjax();
});
// Update picture list via AJAX call // Update picture list via AJAX call
pictureUploadManager.updateImageListAjax = function() { $.imageUploadManager.updateImageListAjax = function() {
var $imageListArea = $(".image-manager .existing-image"); var $imageListArea = $(".image-manager .existing-image");
$imageListArea.html('<div class="loading" ></div>'); $imageListArea.html('<div class="loading" ></div>');
$.ajax({ $.ajax({
@@ -38,7 +41,7 @@ $(function($){
}; };
// Remove image on click // Remove image on click
pictureUploadManager.onClickDeleteImage = function() { $.imageUploadManager.onClickDeleteImage = function() {
$('.image-manager .image-delete-btn').on('click', function (e) { $('.image-manager .image-delete-btn').on('click', function (e) {
e.preventDefault(); e.preventDefault();
var $this = $(this); var $this = $(this);
@@ -67,5 +70,5 @@ $(function($){
return false; return false;
}); });
}; };
pictureUploadManager.onClickDeleteImage(); $.imageUploadManager.onClickDeleteImage();
}); });

1
templates/admin/default/category-edit.html
View File

@@ -326,6 +326,7 @@
}); });
$(function() { $(function() {
$.imageUploadManager.initImageDropZone();
$('.use_default_rewriten_url').click(function(ev) { $('.use_default_rewriten_url').click(function(ev) {
alert("Not functionnal"); alert("Not functionnal");

2
templates/admin/default/content-edit.html
View File

@@ -295,8 +295,8 @@ form_content = {$smarty.capture.delete_content_dialog nofilter}
{/javascripts} {/javascripts}
<script> <script>
$(function() { $(function() {
$.imageUploadManager.initImageDropZone();
$('.use_default_rewriten_url').click(function(ev) { $('.use_default_rewriten_url').click(function(ev) {
alert("Not functionnal"); alert("Not functionnal");

1
templates/admin/default/folder-edit.html
View File

@@ -295,6 +295,7 @@
{/javascripts} {/javascripts}
<script> <script>
$(function() { $(function() {
$.imageUploadManager.initImageDropZone();
$('.use_default_rewriten_url').click(function(ev) { $('.use_default_rewriten_url').click(function(ev) {
alert("Not functionnal"); alert("Not functionnal");

233
templates/admin/default/product-edit.html
View File

@@ -65,7 +65,8 @@
<li> <li>
<a href="#images" <a href="#images"
data-toggle="tab" data-toggle="tab"
data-href="{url path="/admin/image/type/product/{$product_id}/form-ajax"}"> data-href="{url path="/admin/image/type/product/{$product_id}/form-ajax"}"
data-callback="$.imageUploadManager.initImageDropZone">
{intl l="Images"} {intl l="Images"}
</a> </a>
</li> </li>
@@ -115,128 +116,134 @@
{block name="javascript-initialization"} {block name="javascript-initialization"}
{javascripts file='assets/js/bootstrap-editable/bootstrap-editable.js'} {javascripts file='assets/js/dropzone.js'}
<script src="{$asset_url}"></script> <script src="{$asset_url}"></script>
{/javascripts} {/javascripts}
{javascripts file='assets/js/image-upload.js'}
<script src="{$asset_url}"></script>
{/javascripts}
{javascripts file='assets/js/bootstrap-editable/bootstrap-editable.js'}
<script src="{$asset_url}"></script>
{/javascripts}
<script src="{url file='/tinymce/tinymce.min.js'}"></script> <script src="{url file='/tinymce/tinymce.min.js'}"></script>
<script> <script>
tinymce.init({ tinymce.init({
selector: ".wysiwyg", selector: ".wysiwyg",
theme: "modern", theme: "modern",
menubar : false, menubar : false,
language: "", language: "",
plugins: [ plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak", "advlist autolink link image lists charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking", "searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
"table contextmenu directionality emoticons paste textcolor filemanager" "table contextmenu directionality emoticons paste textcolor filemanager"
], ],
toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect | filemanager | link unlink anchor | image media | forecolor backcolor | print preview code ", toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | styleselect | filemanager | link unlink anchor | image media | forecolor backcolor | print preview code ",
image_advtab: true , image_advtab: true ,
external_filemanager_path:"{url file='/tinymce/plugins/filemanager/'}'", external_filemanager_path:"{url file='/tinymce/plugins/filemanager/'}'",
filemanager_title:"{intl l='Files manager'}" , filemanager_title:"{intl l='Files manager'}" ,
external_plugins: { "filemanager" : "{url file='/tinymce/plugins/filemanager/plugin.min.js'}"} external_plugins: { "filemanager" : "{url file='/tinymce/plugins/filemanager/plugin.min.js'}"}
}); });
</script> </script>
<script> <script>
$(function() { $(function() {
// Atomatic ajax tab load, if data-href is defined. // Atomatic ajax tab load, if data-href is defined.
$('.nav-tabs a[data-href]').on('shown.bs.tab', function(ev) { $('.nav-tabs a[data-href]').on('shown.bs.tab', function(ev) {
var zis = $(this); var $this = $(this);
$(zis.attr('href')).load(zis.data('href')); $($this.attr('href')).load($this.data('href'), function(ev) {
}); eval($this.data('callback') + '();');
// Load active tab
$('.nav-tabs a[href="#{$current_tab}"]').trigger("click");
// -- Product details management tab ---------------------------------------
// Load value on attribute selection
$('#attribute_id').change(function(event) {
var val = $(this).val();
if (val != "") {
$.ajax({
url : '{url path="/admin/product/$product_id/attribute-values/"}' + $(this).val() + '.xml',
type : 'get',
dataType : 'json',
success : function(json) {
$('#attribute_value_id :not(:first-child)').remove();
var have_content = false;
$.each(json, function(idx, value) {
$('#attribute_value_id').append($('<option>').text(value.title).attr('value', value.id));
have_content = true; // Lame...
});
if (have_content) {
$('#attribute_value_selector_empty').addClass('hide');
$('#attribute_value_selector').removeClass('hide');
}
else {
$('#attribute_value_selector_empty').removeClass('hide');
$('#attribute_value_selector').addClass('hide');
}
}
});
}
else {
$('#attribute_value_selector_empty').addClass('hide');
$('#attribute_value_selector').addClass('hide');
}
});
// Add selected value to the combination
$('.add-value-to-combination').click(function(event) {
// Hide error message
$('#combination_attributes_error').text('').addClass('hide');
// Select all elements
$('#combination_attributes option').prop('selected', 'selected');
$.ajax({
url : '{url path="/admin/product/$product_id/add-attribute-value-to-combination/"}'
+ $('#attribute_value_id').val()
+ '/'
+ $('#combination_attributes').val()
+ '.xml',
type : 'get',
dataType : 'json',
success : function(json) {
$('#combination_attributes option').remove();
var have_content = false;
$.each(json, function(idx, value) {
if (idx != 'error')
$('#combination_attributes').append($('<option>').text(value.title).attr('value', value.id));
}); });
});
if (json.error) // Load active tab
$('#combination_attributes_error').text(json.error).removeClass('hide'); $('.nav-tabs a[href="#{$current_tab}"]').trigger("click");
$('#attribute_id').val('').change(); // -- Product details management tab ---------------------------------------
}
});
event.preventDefault(); // Load value on attribute selection
}); $('#attribute_id').change(function(event) {
var val = $(this).val();
// Remove selected value from combination if (val != "") {
$('.remove-value-from-combination').click(function() { $.ajax({
url : '{url path="/admin/product/$product_id/attribute-values/"}' + $(this).val() + '.xml',
type : 'get',
dataType : 'json',
success : function(json) {
$('#attribute_value_id :not(:first-child)').remove();
$('#combination_attributes option:selected').remove(); var have_content = false;
event.preventDefault(); $.each(json, function(idx, value) {
}); $('#attribute_value_id').append($('<option>').text(value.title).attr('value', value.id));
});
</script>
have_content = true; // Lame...
});
if (have_content) {
$('#attribute_value_selector_empty').addClass('hide');
$('#attribute_value_selector').removeClass('hide');
}
else {
$('#attribute_value_selector_empty').removeClass('hide');
$('#attribute_value_selector').addClass('hide');
}
}
});
}
else {
$('#attribute_value_selector_empty').addClass('hide');
$('#attribute_value_selector').addClass('hide');
}
});
// Add selected value to the combination
$('.add-value-to-combination').click(function(event) {
// Hide error message
$('#combination_attributes_error').text('').addClass('hide');
// Select all elements
$('#combination_attributes option').prop('selected', 'selected');
$.ajax({
url : '{url path="/admin/product/$product_id/add-attribute-value-to-combination/"}'
+ $('#attribute_value_id').val()
+ '/'
+ $('#combination_attributes').val()
+ '.xml',
type : 'get',
dataType : 'json',
success : function(json) {
$('#combination_attributes option').remove();
var have_content = false;
$.each(json, function(idx, value) {
if (idx != 'error')
$('#combination_attributes').append($('<option>').text(value.title).attr('value', value.id));
});
if (json.error)
$('#combination_attributes_error').text(json.error).removeClass('hide');
$('#attribute_id').val('').change();
}
});
event.preventDefault();
});
// Remove selected value from combination
$('.remove-value-from-combination').click(function() {
$('#combination_attributes option:selected').remove();
event.preventDefault();
});
});
</script>
{/block} {/block}