WIP : upload documents : add action, ctrl, event
This commit is contained in:
gmorel
99
templates/admin/default/assets/js/document-upload.js
Normal file
99
templates/admin/default/assets/js/document-upload.js
Normal file
@@ -0,0 +1,99 @@
|
||||
$(function($){
|
||||
// Manage document upload
|
||||
$.documentUploadManager = {};
|
||||
|
||||
Dropzone.autoDiscover = false;
|
||||
|
||||
|
||||
|
||||
// Remove image on click
|
||||
$.documentUploadManager.initDocumentDropZone = function() {
|
||||
var documentDropzone = new Dropzone("#documents-dropzone", {
|
||||
dictDefaultMessage : $('.btn-browse').html(),
|
||||
uploadMultiple: false,
|
||||
maxFilesize: 8
|
||||
});
|
||||
|
||||
var totalFiles = 0,
|
||||
completedFiles = 0;
|
||||
|
||||
documentDropzone.on("addedfile", function(file){
|
||||
totalFiles += 1;
|
||||
|
||||
if(totalFiles == 1){
|
||||
$('.dz-message').hide();
|
||||
}
|
||||
});
|
||||
|
||||
documentDropzone.on("complete", function(file){
|
||||
completedFiles += 1;
|
||||
|
||||
if (completedFiles === totalFiles){
|
||||
$('.dz-message').slideDown();
|
||||
}
|
||||
});
|
||||
|
||||
documentDropzone.on("success", function(file) {
|
||||
documentDropzone.removeFile(file);
|
||||
$.documentUploadManager.updateDocumentListAjax();
|
||||
$.documentUploadManager.onClickDeleteDocument();
|
||||
});
|
||||
|
||||
|
||||
|
||||
};
|
||||
|
||||
// Update picture list via AJAX call
|
||||
$.documentUploadManager.updateDocumentListAjax = function() {
|
||||
var $documentListArea = $(".document-manager .existing-document");
|
||||
$documentListArea.html('<div class="loading" ></div>');
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: documentListUrl,
|
||||
statusCode: {
|
||||
404: function() {
|
||||
$documentListArea.html(
|
||||
documentListErrorMessage
|
||||
);
|
||||
}
|
||||
}
|
||||
}).done(function(data) {
|
||||
$documentListArea.html(
|
||||
data
|
||||
);
|
||||
$.documentUploadManager.onClickDeleteDocument();
|
||||
});
|
||||
};
|
||||
|
||||
// Remove image on click
|
||||
$.documentUploadManager.onClickDeleteDocument = function() {
|
||||
$('.document-manager .document-delete-btn').on('click', function (e) {
|
||||
e.preventDefault();
|
||||
var $this = $(this);
|
||||
var $parent = $this.parent();
|
||||
$parent.find('a').remove();
|
||||
$parent.append('<div class="loading" ></div>');
|
||||
var $url = $this.attr("href");
|
||||
var errorMessage = $this.attr("data-error-message");
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: $url,
|
||||
statusCode: {
|
||||
404: function() {
|
||||
$(".document-manager .message").html(
|
||||
errorMessage
|
||||
);
|
||||
}
|
||||
}
|
||||
}).done(function(data) {
|
||||
$parent.parents('tr').remove();
|
||||
|
||||
$(".document-manager .message").html(
|
||||
data
|
||||
);
|
||||
});
|
||||
return false;
|
||||
});
|
||||
};
|
||||
$.documentUploadManager.onClickDeleteDocument();
|
||||
});
|
||||
@@ -260,6 +260,7 @@
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade {if $current_tab == 'documents'}active in{/if}" id="documents">
|
||||
{include file='includes/document-upload-form.html' documentType='category' parentId=$category_id}
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade {if $current_tab == 'modules'}active in{/if}" id="modules">
|
||||
@@ -303,6 +304,9 @@
|
||||
{javascripts file='assets/js/image-upload.js'}
|
||||
<script src="{$asset_url}"></script>
|
||||
{/javascripts}
|
||||
{javascripts file='assets/js/document-upload.js'}
|
||||
<script src="{$asset_url}"></script>
|
||||
{/javascripts}
|
||||
|
||||
|
||||
|
||||
@@ -327,6 +331,7 @@
|
||||
|
||||
$(function() {
|
||||
$.imageUploadManager.initImageDropZone();
|
||||
$.documentUploadManager.initDocumentDropZone();
|
||||
|
||||
$('.use_default_rewriten_url').click(function(ev) {
|
||||
alert("Not functionnal");
|
||||
|
||||
143
templates/admin/default/document-edit.html
Normal file
143
templates/admin/default/document-edit.html
Normal file
@@ -0,0 +1,143 @@
|
||||
{extends file="admin-layout.tpl"}
|
||||
|
||||
{block name="page-title"}{intl l='Edit a document'}{/block}
|
||||
|
||||
{block name="check-permissions"}admin.document.edit{/block}
|
||||
|
||||
{block name="main-content"}
|
||||
<div class="documents edit-image">
|
||||
|
||||
<div id="wrapper" class="container">
|
||||
|
||||
{loop type="document" name="document_edit" source="{$documentType}" id="{$documentId}" backend_context="1" lang="$edit_language_id"}
|
||||
<ul class="breadcrumb">
|
||||
<li><a href="{url path='/admin/home'}">{intl l="Home"}</a></li>
|
||||
<li><a href="{url path="{$redirectUrl}"}">{intl l="Document"}</a></li>
|
||||
<li>{intl l='Editing document "%name"' name="{$TITLE}"}</li>
|
||||
</ul>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 general-block-decorator">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-12 title title-without-tabs">
|
||||
{intl l="Edit document $TITLE"}
|
||||
</div>
|
||||
|
||||
<div class="form-container">
|
||||
<div class="col-md-12">
|
||||
|
||||
{form name="thelia.admin.category.document.modification"}
|
||||
<form method="POST" action="{url path="/admin/document/type/{$documentType}/{$ID}/update"}" enctype="multipart/form-data" class="clearfix">
|
||||
|
||||
<div class="row inner-toolbar clearfix">
|
||||
<div class="col-md-6 inner-actions pull-right">
|
||||
<button type="submit" name="save_mode" value="stay" class="btn btn-default btn-primary" title="{intl l='Save'}">{intl l='Save'} <span class="glyphicon glyphicon-ok"></span></button>
|
||||
<a href="{url path="{$redirectUrl}"}" class="btn btn-default btn-info">{intl l='Close'} <span class="glyphicon glyphicon-remove"></span></a>
|
||||
</div>
|
||||
</div>
|
||||
{form_hidden_fields form=$form}
|
||||
|
||||
{form_field form=$form field='success_url'}
|
||||
<input type="hidden" name="{$name}" value="{url path="/admin/document/type/{$documentType}/{$ID}/update"}" />
|
||||
{/form_field}
|
||||
|
||||
{if $form_error}<div class="alert alert-danger">{$form_error_message}</div>{/if}
|
||||
|
||||
<p class="title title-without-tabs">{intl l="Document informations"}</p>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-6">
|
||||
{form_field form=$form field='file'}
|
||||
<div class="form-group {if $error}has-error{/if}">
|
||||
<label for="{$label_attr.for}" class="control-label">{intl l="{$label}"} : </label>
|
||||
<input type="file" id="{$label_attr.for}" name="{$name}" class="form-control" value="" title="{intl l="{$label}"}" placeholder="{intl l='File'}">
|
||||
</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>
|
||||
<input type="text" id="{$label_attr.for}" name="{$name}" class="form-control" value="{$TITLE}" title="{intl l="{$label}"}" placeholder="{intl l='Title'}">
|
||||
</div>
|
||||
{/form_field}
|
||||
|
||||
{form_field form=$form field='chapo'}
|
||||
<div class="form-group {if $error}has-error{/if}">
|
||||
<label for="{$label_attr.for}" class="control-label">{intl l="{$label}"} : </label>
|
||||
<textarea id="{$label_attr.for}" name="{$name}" class="form-control" title="{intl l="{$label}"}" placeholder="{intl l='Chapo'}">{$CHAPO}</textarea>
|
||||
</div>
|
||||
{/form_field}
|
||||
|
||||
{form_field form=$form field='postscriptum'}
|
||||
<div class="form-group {if $error}has-error{/if}">
|
||||
<label for="{$label_attr.for}" class="control-label">{intl l="{$label}"} : </label>
|
||||
<textarea id="{$label_attr.for}" name="{$name}" class="form-control" title="{intl l="{$label}"}" placeholder="{intl l='Post Scriptum'}">{$POSTSCRIPTUM}</textarea>
|
||||
</div>
|
||||
{/form_field}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
{form_field form=$form field='description'}
|
||||
<div class="form-group {if $error}has-error{/if}">
|
||||
<label for="{$label_attr.for}" class="control-label">{intl l="{$label}"} : </label>
|
||||
<textarea id="{$label_attr.for}" name="{$name}" class="form-control wysiwyg" title="{intl l="{$label}"}" placeholder="{intl l='Description'}">{$DESCRIPTION}</textarea>
|
||||
</div>
|
||||
{/form_field}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{/form}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/loop}
|
||||
|
||||
{elseloop rel="document_edit"}
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="alert alert-error">
|
||||
{intl l="Sorry, document ID=$documentId was not found."}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/elseloop}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/block}
|
||||
|
||||
{block name="javascript-initialization"}
|
||||
{javascripts file='assets/js/main.js'}
|
||||
<script src="{$asset_url}"></script>
|
||||
{/javascripts}
|
||||
|
||||
<script src="{url file='/tinymce/tinymce.min.js'}"></script>
|
||||
<script>
|
||||
tinymce.init({
|
||||
selector: ".wysiwyg",
|
||||
theme: "modern",
|
||||
menubar : false,
|
||||
language: "",
|
||||
plugins: [
|
||||
"advlist autolink link image lists charmap print preview hr anchor pagebreak",
|
||||
"searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
|
||||
"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 ",
|
||||
image_advtab: true ,
|
||||
external_filemanager_path:"{url file='/tinymce/plugins/filemanager/'}'",
|
||||
filemanager_title:"{intl l='Files manager'}" ,
|
||||
external_plugins: { "filemanager" : "{url file='/tinymce/plugins/filemanager/plugin.min.js'}"}
|
||||
});
|
||||
</script>
|
||||
|
||||
{/block}
|
||||
@@ -250,6 +250,7 @@
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="documents">
|
||||
{include file='includes/document-upload-form.html' documentType='folder' parentId=$folder_id}
|
||||
</div>
|
||||
|
||||
<div class="tab-pane fade" id="modules">
|
||||
@@ -293,9 +294,14 @@
|
||||
{javascripts file='assets/js/image-upload.js'}
|
||||
<script src="{$asset_url}"></script>
|
||||
{/javascripts}
|
||||
{javascripts file='assets/js/document-upload.js'}
|
||||
<script src="{$asset_url}"></script>
|
||||
{/javascripts}
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
$.imageUploadManager.initImageDropZone();
|
||||
$.documentUploadManager.initDocumentDropZone();
|
||||
|
||||
$('.use_default_rewriten_url').click(function(ev) {
|
||||
alert("Not functionnal");
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
{block name="check-permissions"}admin.image.edit{/block}
|
||||
|
||||
{block name="main-content"}
|
||||
<div class="customers edit-image">
|
||||
<div class="documents edit-image">
|
||||
|
||||
<div id="wrapper" class="container">
|
||||
|
||||
|
||||
36
templates/admin/default/includes/document-upload-form.html
Normal file
36
templates/admin/default/includes/document-upload-form.html
Normal file
@@ -0,0 +1,36 @@
|
||||
{*
|
||||
A generic document upload form
|
||||
|
||||
Parameters:
|
||||
documentType = Document type (category, product, folder, content, module)
|
||||
parentId = Document parent id, ex: category id
|
||||
|
||||
*}
|
||||
|
||||
<div class="document-manager" >
|
||||
<form action="{url path="/admin/document/type/$documentType/$parentId/save-ajax"}" class="dropzone" id="documents-dropzone" enctype="multipart/form-data">
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" />
|
||||
<button type="submit" class="btn btn-info btn-upload"><span class="glyphicon glyphicon-send"></span> {intl l="Send files"}</button>
|
||||
</div>
|
||||
|
||||
<div class="btn-browse hide">
|
||||
{intl l="Drop files to upload"}
|
||||
<span>Or</span>
|
||||
<button type="button" class="btn btn-info btn-upload"><span class="glyphicon glyphicon-upload"></span> {intl l="Browse files"}</button>
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
<div class="existing-document">
|
||||
{include file='includes/document-upload-list-ajax.html'}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var documentDropZoneUrl = "{url path="/admin/document/type/$documentType/$parentId/save-ajax"}";
|
||||
var documentListUrl = "{url path="/admin/document/type/$documentType/$parentId/list-ajax"}";
|
||||
var documentListErrorMessage = "{intl l='Can\'t load documents, please refresh this page.'}";
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
{*
|
||||
|
||||
A generic document upload form
|
||||
|
||||
Parameters:
|
||||
documentType = Document type (category, product, folder, content, module)
|
||||
parentId = Document parent id, ex: category id
|
||||
|
||||
*}
|
||||
|
||||
{ifloop rel="document"}
|
||||
<table class="table table-striped table-condensed table-left-aligned">
|
||||
{loop type="document" name="document" source="{$documentType}" order="manual-reverse" source_id="{$parentId}"}
|
||||
<tr>
|
||||
<td>
|
||||
<a href="{$DOCUMENT_URL}" title="{$TITLE}" class="">{$TITLE}</a>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<a class="document-update-btn btn btn-default btn-xs" href="{url path="/admin/document/type/$documentType/$ID/update"}" data-error-message="{intl l='Please retry'}">
|
||||
<span class="glyphicon glyphicon-edit"></span>
|
||||
</a>
|
||||
<a class="document-delete-btn btn btn-default btn-xs" href="{url path="/admin/document/type/$documentType/delete/$ID"}" data-error-message="{intl l='Please retry'}">
|
||||
<span class="glyphicon glyphicon-trash"></span>
|
||||
</a>
|
||||
</div>
|
||||
<td>
|
||||
</tr>
|
||||
{/loop}
|
||||
</table>
|
||||
{/ifloop}
|
||||
Reference in New Issue
Block a user