diff --git a/Form/Type/DropzoneType.php b/Form/Type/DropzoneType.php index 03ddfc0..d0939f3 100644 --- a/Form/Type/DropzoneType.php +++ b/Form/Type/DropzoneType.php @@ -11,6 +11,7 @@ use Symfony\Component\Form\FormView; use Symfony\Component\OptionsResolver\OptionsResolver; use Glavweb\UploaderBundle\Helper\MediaHelper; +use Symfony\Component\Translation\DataCollectorTranslator; /** * Class DropzoneType @@ -38,18 +39,25 @@ class DropzoneType extends AbstractType */ protected $driverAnnotation; + /** + * @var DataCollectorTranslator + */ + protected $translator; + + /** * @param Router $router * @param MediaHelper $mediaHelper * @param array $config * @param AnnotationDriver $driverAnnotation */ - public function __construct(Router $router, MediaHelper $mediaHelper, array $config, AnnotationDriver $driverAnnotation) + public function __construct(Router $router, MediaHelper $mediaHelper, array $config, AnnotationDriver $driverAnnotation, DataCollectorTranslator $translator) { $this->router = $router; $this->mediaHelper = $mediaHelper; $this->config = $config; $this->driverAnnotation = $driverAnnotation; + $this->translator = $translator; } /** @@ -84,31 +92,46 @@ public function buildView(FormView $view, FormInterface $form, array $options) } $config = $this->getConfigByContext($context); - $maxFiles = $config['max_files']; - $view->vars['uploadedFilesTpl'] = $options['uploadedFilesTpl']; - $view->vars['uploadItemTpl'] = $options['uploadItemTpl']; - $view->vars['viewFormTpl'] = $options['viewFormTpl']; - $view->vars['viewLinkTpl'] = $options['viewLinkTpl']; - $view->vars['type'] = $context; - $view->vars['previewImg'] = $options['previewImg']; - $view->vars['useLink'] = $options['useLink']; - $view->vars['useForm'] = $options['useForm']; - $view->vars['showMark'] = $options['showMark']; - $view->vars['thumbnailWidth'] = $options['thumbnailWidth' ]; - $view->vars['thumbnailHeight'] = $options['thumbnailHeight']; - $view->vars['showUploadButton'] = $options['showUploadButton']; - $view->vars['uploaderClass'] = $options['uploaderClass']; - $view->vars['isShowErrorPopup'] = $options['isShowErrorPopup']; - $view->vars['files'] = $files ? $files : []; - $view->vars['countFiles'] = $files ? $files->count() : 0; - $view->vars['showLabel'] = $options['showLabel']; + $router = $this->router; + $uploadDir = $this->mediaHelper->getUploadDirectoryUrl($context); + $urls = array( + 'upload' => $router->generate('glavweb_uploader_upload', array('context' => $context)), + 'rename' => $router->generate('glavweb_uploader_rename', array('context' => $context)), + 'delete' => $router->generate('glavweb_uploader_delete', array('context' => $context)), + ); + $view->vars['requestId'] = $options['requestId']; - $view->vars['uploadDir'] = $this->mediaHelper->getUploadDirectoryUrl($context); - $view->vars['deleteUrl'] = $this->router->generate('glavweb_uploader_delete', array('context' => $context)); - $view->vars['renameUrl'] = $this->router->generate('glavweb_uploader_rename', array('context' => $context)); - $view->vars['maxFiles'] = $maxFiles; - $view->vars['maxSize'] = $config['max_size']; + $view->vars['views'] = $options['views' ]; + $view->vars['type'] = $context; + $view->vars['files'] = $files; + // $view->vars['previewImg'] = $options['previewImg']; + $view->vars['previewShow'] = array_merge($options['previewShowDefault'],$options['previewShow']); + + // Dropzone + $view->vars['dropzoneOptions'] = array_merge($options['dropzoneOptionsDefault'], array( + 'url' => $urls['upload'], + 'uploadDir' => $uploadDir, + 'previewTemplate' => '#js-gwu-template_' . $options['requestId'], + 'previewsContainer' => '#js-gwu-previews_' . $options['requestId'], + 'form' => '.js-gwu-from_' . $options['requestId'], + 'link' => '.js-gwu-link_' . $options['requestId'], + 'maxFilesize' => $config['max_size'], + 'clickable' => '.js-gwu-clickable_' . $options['requestId'], + ),$options['dropzoneOptions']); + + // Uploader + $view->vars['uploaderOptions'] = array_merge($options['uploaderOptionsDefault'], array( + 'urls' => $urls, + 'requestId' => $options['requestId'], + 'dropzoneContainer' => '#js-gwu-dropzone_' . $options['requestId'], + 'previewShow' => $view->vars['previewShow'], + 'uploadDir' => $uploadDir, + 'countFiles' => $files->count(), + 'maxFiles' => $view->vars['dropzoneOptions']['maxFiles'], + 'type' => $context, + 'clickable' => '.js-gwu-clickable_' . $options['requestId'], + ), $options['uploaderOptions']); } /** @@ -116,6 +139,8 @@ public function buildView(FormView $view, FormInterface $form, array $options) */ public function configureOptions(OptionsResolver $resolver) { + $translator = $this->translator; + $resolver->setDefaults(array( 'previewImg' => null, 'requestId' => null, @@ -123,15 +148,75 @@ public function configureOptions(OptionsResolver $resolver) 'useForm' => true, 'showMark' => true, 'showUploadButton' => true, - 'uploadedFilesTpl' => 'GlavwebUploaderBundle:Form:base_upload_item_tpl.html.twig', - 'uploadItemTpl' => 'GlavwebUploaderBundle:Form:base_uploaded_files.html.twig', - 'viewFormTpl' => 'GlavwebUploaderBundle:Form:view-form.html.twig', - 'viewLinkTpl' => 'GlavwebUploaderBundle:Form:view-link.html.twig', 'showLabel' => true, - 'thumbnailWidth' => 200, - 'thumbnailHeight' => 150, - 'uploaderClass' => '', - 'isShowErrorPopup' => true, + 'thumbnailOptions' => array( + 'width' => 200, + 'height' => 200, + ), + 'views' => array( +// 'form' => 'path/to/view', +// 'link' => 'path/to/view', +// 'preview' => 'path/to/view', + ), + 'previewShow' => array(), + 'previewShowDefault' => array( + 'isDetails' => true, + 'isSize' => true, + 'isFilename' => true, + 'isProgress' => true, + 'isError' => true, + 'isShowMark' => true + ), + 'uploaderOptions' => array(), + 'uploaderOptionsDefault' => array( + 'type' => null, + 'uploaderClass' => '', + 'formViewType' => 'form', + 'previewViewType' => 'image', + 'preloader' => '.js-gwu-preloader', + 'upoloaderError' => '.js-gwu-error', + 'previewContainer' => '.js-gwu-preview', + 'rename' => '.js-gwu-rename', + 'filename' => '.js-gwu-filename', + 'description' => '.js-gwu-description', + 'form' => '.js-gwu-form', + 'link' => '.js-gwu-link', + 'popup' => '.js-gwu-popup', + 'isPopup' => true, + 'isName' => true, + 'isDescription' => false, + 'isSort' => false, + 'isShowErrorPopup' => false, + 'isThumbnail' => true, + 'isUploadButton' => true, + 'thumbnailOptions' => array(), + 'countFiles' => 0 + ), + 'dropzoneOptions' => array(), + 'dropzoneOptionsDefault' => array( + 'url' => null, + 'previewTemplate' => null, + 'previewsContainer' => null, + 'clickable' => null, + 'maxFilesize' => 2, + 'maxFiles' => 20, + 'thumbnailWidth' => 350, + 'thumbnailHeight' => 350, + 'parallelUploads' => 20, + 'autoQueue' => true, + 'autoProcessQueue' => true, + 'acceptedFiles' => '.png, .jpg', + 'dictDefaultMessage' => $translator->trans('dropzone.files_uploaded'), + 'dictFallbackMessage' => $translator->trans('dropzone.browser_not_support_drag_n_drop'), + 'dictFileTooBig' => $translator->trans('dropzone.file_size_too_large'), + 'dictInvalidFileType' => $translator->trans('dropzone.wrong_format'), + 'dictResponseError' => $translator->trans('dropzone.disable_adblocker'), + 'dictCancelUpload' => $translator->trans( 'dropzone.cancel_upload'), + 'dictCancelUploadConfirmation' => $translator->trans('dropzone.cancel_upload_confirmation'), + 'dictRemoveFile' => $translator->trans('dropzone.remove_file'), + 'dictRemoveFileConfirmation' => null, + 'dictMaxFilesExceeded' => $translator->trans('dropzone.max_files_exceeded') + ), )); } diff --git a/Resources/config/services.xml b/Resources/config/services.xml index 4aa3065..5b3cdec 100644 --- a/Resources/config/services.xml +++ b/Resources/config/services.xml @@ -44,6 +44,7 @@ %glavweb_uploader.config% + diff --git a/Resources/public/css/gwu.css b/Resources/public/css/gwu.css new file mode 100644 index 0000000..bce254d --- /dev/null +++ b/Resources/public/css/gwu.css @@ -0,0 +1,64 @@ +.gwu.gwu-dropzone .gwu-previews { + min-height: inherit; + overflow: hidden; + border: none; + -webkit-border-radius: 0; + -webkit-background-clip: padding-box; + -moz-border-radius: 0; + -moz-background-clip: padding; + border-radius: 0; + background-clip: padding-box; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + margin: 30px -15px 0 -15px; + padding: 0; +} +.gwu.gwu-dropzone .gwu-preview { + display: block; + float: left; + margin: 0 0 30px 0; + width: 100%; + padding: 0 15px; +} +.gwu.gwu-dropzone .gwu-preview__image { + width: 100%; + height: 100%; + -webkit-border-radius: 8px; + -webkit-background-clip: padding-box; + -moz-border-radius: 8px; + -moz-background-clip: padding; + border-radius: 8px; + background-clip: padding-box; +} +.gwu.gwu-dropzone .gwu-preview__details { + padding: 30px; +} +.gwu.gwu-dropzone .gwu-preview-img { + max-width: 100%; +} +@media (min-width: 480px) { + .gwu.gwu-dropzone .gwu-preview { + width: 50%; + } +} +@media (min-width: 768px) { + .gwu.gwu-dropzone .gwu-preview { + width: 33.3%; + } +} +@media (min-width: 992px) { + .gwu.gwu-dropzone .gwu-preview { + width: 25%; + } +} +@media (min-width: 1200px) { + .gwu.gwu-dropzone .gwu-preview { + width: 20%; + } +} +@media (min-width: 1600px) { + .gwu.gwu-dropzone .gwu-preview { + width: 16.6%; + } +} \ No newline at end of file diff --git a/Resources/public/js/glavwebUploaderDropzone.js b/Resources/public/js/glavwebUploaderDropzone.js new file mode 100644 index 0000000..a60b5c8 --- /dev/null +++ b/Resources/public/js/glavwebUploaderDropzone.js @@ -0,0 +1,218 @@ +(function ($) { + + Dropzone.autoDiscover = false; + + var isDebug = true, + _log = function (message) { + if (window.console && isDebug) { + console.log(message); + } + }; + + var uploader = {}; + var defaults = {}; + var dropzone = {}; + + // Methods + var methods = { + init: function (options) { + uploader = $.extend({}, defaults, options); + var $template = $(uploader.dropzoneOptions.previewTemplate); + uploader.dropzoneOptions.previewTemplate = $template.html(); + $template.remove(); + dropzone = new Dropzone(uploader.uploaderOptions.dropzoneContainer, uploader.dropzoneOptions); + + //Init popups + if(uploader.uploaderOptions.popup) { + $(uploader.uploaderOptions.popupContainer).plainModal(); + } + methods.bindEvents(); + _log('init'); + _log(dropzone); + return this; + }, + show: function () { + _log(dropzone); + return this; + }, + hide: function () { + }, + update: function (content) { + }, + + /** + * Проверяем, валидный ли URL + */ + isValidURL: function (url) { + var regex = /^(https?:\/\/)?((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|((\d{1,3}\.){3}\d{1,3}))(\:\d+)?(\/[-a-z\d%_.~+]*)*(\?[;&a-z\d%_.~+=-]*)?(\#[-a-z\d_]*)?$/i; + return regex.test(url); + }, + + /** + * Добавляем mock файлы в dropzone + */ + addFile: function ( name, id, src, size) { + var mockFile = { + name: name, + size: size, + accepted: true + }; + dropzone.emit('addedfile', mockFile); + + if (uploader.uploaderOptions.isThumbnail) { + dropzone.createThumbnailFromUrl(mockFile, src); + } else { + dropzone.emit('thumbnail', mockFile, src); + } + + var $mockFileTpl = $(mockFile.previewTemplate); + + $mockFileTpl.data('id', id); + $mockFileTpl.data('src', src); + $mockFileTpl.addClass('dz-complete'); + $mockFileTpl.attr('id', 'dz-preview-' + id); + + mockFile.response = { + id: id, + contentPath: src + }; + + dropzone.files.push(mockFile); + }, + + /** + * Добавляем mock файлы в dropzone + */ + addMockFile: function (url) { + + }, + + /** + * Показываем все ошибки + */ + showErrors: function () { + $(uploader.uploaderOptions.upoloaderError).removeClass('hidden'); + }, + + /** + * Скрываем все ошибки + */ + hideErrors: function () { + $(uploader.uploaderOptions.upoloaderError).addClass('hidden'); + }, + + /** + * Изменение имени или описания + * + * @param fileId + * @param name + * @param description + */ + renameFile: function(fileId, name, description) { + if(uploader.uploaderOptions.popup) { + var $popup = $(uploader.uploaderOptions.popupContainer); + $popup.find(uploader.uploaderOptions.name).val(name); + $popup.find(uploader.uploaderOptions.description).val(description); + $popup.data('file-id', fileId); + $popup.plainModal('open') + } else { + var newName = prompt('Новое название', ''); + var newDescription = prompt('Новое описание', ''); + methods.saveRenamedFile(newName,newDescription); + } + }, + + saveRenamedFile: function (name, description) { + var newName, + newDescription, + fileId = $(this).closest(uploader.uploaderOptions.popupContainer).data('file-id'); + + if(uploader.uploaderOptions.popup) { + var $popup = $(uploader.uploaderOptions.popupContainer); + newName = $popup.find(uploader.uploaderOptions.name).val(); + newDescription = $popup.find(uploader.uploaderOptions.description).val() + } else { + newName = name; + newDescription = description + } + + if (fileId) { + $.post(uploader.uploaderOptions.urls.rename, { + id: fileId, + request_id: uploader.uploaderOptions.requestId, + name: newName, + description: newDescription + }, function (response) { + if (response.success) { + var $preview = $(uploader.uploaderOptions.previewContainer + '-' + fileId); + $preview.find(uploader.uploaderOptions.name).text(name); + $preview.find(uploader.uploaderOptions.description).text(description); + } + }); + } + + $('#modalRenameFile').modal('hide'); + }, + + /** + * Добавление обработчиков событий + */ + bindEvents: function () { + + dropzone.on("sending", function (file, xhr, formData) { + $(uploader.uploaderOptions.preloader).removeClass('hidden'); + formData.append('_glavweb_uploader_request_id', uploader.uploaderOptions.requestId); + }); + + dropzone.on("success", function (file, response) { + //console.log(response); + file.response = response; + var $template = $(file.previewTemplate); + $template.data('id', response.id); + $template.data('src', response.contentPath); + $template.attr('id', uploader.uploaderOptions.previewContainer.slice(1) + '-' + response.id); + //????$(file.previewTemplate).find('.dz-filename span').text(''); + //formSortedArray(); + methods.hideErrors(); + }); + + dropzone.on("removedfile", function (file) { + var id = file.response.id; + + if (id !== undefined) { + $.post(uploader.uploaderOptions.urls.delete, { + id: id, + request_id: uploader.uploaderOptions.requestId + }); + } + + // TODO: вернуть сортировку + //formSortedArray(); + + //TODO: поставить нормалный обработчик событий для скрытия ошибок + methods.hideErrors(); + }); + + $(document).on('click', uploader.uploaderOptions.rename , function () { + var $preview = $(this).closest(uploader.uploaderOptions.previewContainer); + var fileId = $preview.data('id'); + + var name = $preview.find(uploader.uploaderOptions.filename).text().trim(); + var description = $preview.find(uploader.uploaderOptions.description).text().trim(); + + methods.renameFile(fileId, name, description); + }); + } + }; + + $.fn.glavwebUploaderDropzone = function (method) { + if (methods[method]) { + return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); + } else if (typeof method === 'object' || !method) { + return methods.init.apply(this, arguments); + } else { + $.error('Method ' + method + ' not found in jQuery.glavwebUploaderDropzone'); + } + }; + +})(jQuery); diff --git a/Resources/public/js/jquery.plainmodal.min.js b/Resources/public/js/jquery.plainmodal.min.js new file mode 100644 index 0000000..b208499 --- /dev/null +++ b/Resources/public/js/jquery.plainmodal.min.js @@ -0,0 +1 @@ +!function(e,t){"use strict";function o(o,n){var c=e.extend(!0,{},O,n);return c.overlay.fillColor=c.overlay.fillColor||c.overlay.color||"#888",c.zIndex=c.zIndex||c.overlay.zIndex+1,f(c.offset,t,c),y||(y=e(window).resize(function(){v&&v.stop(!0,!0),x.stop(!0,!0),b&&b.stop(!0,!0),D&&r(D),w&&r(w.parent)}),x=e('
').css({position:"fixed",left:0,top:0,width:"100%",height:"150%",display:"none"}).appendTo(m=e("body")).click(i).on("touchmove",function(){return!1}),e(document).focusin(function(t){D&&!D.has(t.target).length&&(z?z.focus():e(document.activeElement).blur())}).keydown(function(e){return D&&27===e.keyCode?i(e):void 0})),o.each(function(){var t=e(this),o={position:"fixed",display:"none",zIndex:c.zIndex};f(c.offset,o),d(c.closeClass,t),e.each([["open",E],["close",j],["beforeopen",L],["beforeclose",A]],function(e,o){var n=o[0],i=o[1];"function"==typeof c[n]&&t.off(i,c[n]).on(i,c[n])}),t.css(o).data(T,e.extend(!0,{},c)).appendTo(m).on("touchmove",function(){return!1})})}function n(n,l,s){function f(){var o;W.find("a,input,select,textarea,button,object,area,img,map").each(function(){var t=e(this);return t.focus().get(0)===document.activeElement?(z=t,!1):void 0}),j&&w.jqActive&&w.jqActive.length&&w.jqActive.focus(),v=t,D=W,p=!1,o=e.Event(E),j?(o.from=w.child,w=t):A&&(o.isChild=!0),W.trigger(o)}function u(e){var t=e.data(T);return t.child&&t.child.index(W)>-1}var d,b,q,j,A,O,B,H,P,R,W=n.length?n.eq(0):t;if(W){if((l||!(d=W.data(T)))&&(d=o(W,l).data(T)),g||w||!v||h&&v.get(0)===W.get(0)||!d.force||(v.stop(!0,!0),x.stop(!0,!0)),p&&!s)return n;if(!g&&!w&&D&&D.get(0)!==W.get(0)&&(d.force?B=!0:u(D)&&(w={parent:D,child:W.insertAfter(D),jqActive:e(document.activeElement).blur()},B=!0),B))return g=W,i(D),n;null===D&&(p=!0,w&&(j=W.get(0)===w.parent.get(0),A=W.get(0)===w.child.get(0)),q=!g&&!w,b=e.Event(L,{cancelable:q}),j?b.from=w.child:A&&(b.isChild=!0),W.trigger(b),q&&b.isDefaultPrevented()?p=!1:(O=!g&&!w&&!d.fixOverlay,O&&(I||(H=m.get(0).style,I={overflow:H.overflow},P=m.prop("clientWidth"),R=m.prop("clientHeight"),m.css("overflow","hidden"),P-=m.prop("clientWidth"),R-=m.prop("clientHeight"),I.marginRight=H.marginRight,I.marginBottom=H.marginBottom,0>P&&m.css("marginRight","+="+-P),0>R&&m.css("marginBottom","+="+-R)),C=e(document.activeElement).blur(),k===t&&(k={left:y.scrollLeft(),top:y.scrollTop()},y.scroll(a))),z=null,r(W,d),window.setTimeout(function(){j?f():(h=!0,d.effect.open.call(v=W,d.duration,f),A&&c(w.parent,!0,d.duration))},0),O&&x.css({backgroundColor:d.overlay.fillColor,zIndex:d.overlay.zIndex}).fadeTo(d.duration,d.overlay.opacity),D=0))}return n}function i(o){function i(){var i;b&&(I&&(m.css(I),I=t),C&&C.length&&C.focus(),k!==t&&(y.off("scroll",a).scrollLeft(k.left).scrollTop(k.top),k=t)),v=t,D=null,g||d||(p=!1),i=e.Event(j),q?i.from=o:g&&(i.from=g),d&&(i.isChild=!0),r.trigger(i),g?(n(g,t,!0),g=t):d&&n(w.parent,t,!0)}var r,l,s,f,u,d,b,z,q=o instanceof e.Event;return!p&&D&&(r=q||o.index(D)>-1?D:t,r&&(p=!0,w&&(u=r.get(0)===w.parent.get(0),d=r.get(0)===w.child.get(0)),f=!0,s=e.Event(A,{cancelable:f}),q?s.from=o:g&&(s.from=g),d&&(s.isChild=!0),r.trigger(s),f&&s.isDefaultPrevented()?(p=!1,g=t,u&&(w=t)):(l=r.data(T),b=!g&&!w&&!l.fixOverlay,z=g?0:l.duration,window.setTimeout(function(){u?i():(h=!1,l.effect.close.call(v=r,z,i),d&&c(w.parent,!1,l.duration))},0),b&&x.fadeOut(z),D=0))),q?(o.preventDefault(),!1):o}function c(e,o,n,i){function c(e){x.css("opacity",(1-r.overlay.opacity)/(1-e)*-1+1)}var r,l=e.length?e.eq(0):t;if(l&&(r=l.data(T)))return o===t&&(o=!0),n=n||r.duration,b=b||x.clone(!0).appendTo(m),x.stop(!0).css({backgroundColor:r.overlay.fillColor,zIndex:r.overlay.zIndex}),b.stop(!0).css({backgroundColor:r.overlay.fillColor,zIndex:r.zIndex}).insertAfter(l),o?(x.css({opacity:r.overlay.opacity,display:"block"}),b.css({opacity:0,display:"block"}).animate({opacity:r.overlay.opacity},{duration:n,step:c,complete:function(){x.css("display","none"),i&&i()}})):(x.css({opacity:0,display:"block"}),b.css({opacity:r.overlay.opacity,display:"block"}).animate({opacity:0},{duration:n,step:c,complete:function(){b.css("display","none"),i&&i()}})),e}function r(e,t){var o;t=t||e.data(T),"function"==typeof t.offset&&(o=t.offset.call(e))&&e.css({left:o.left,top:o.top,marginLeft:"",marginTop:""})}function l(){this.css({left:"50%",top:"50%",marginLeft:"-"+this.outerWidth()/2+"px",marginTop:"-"+this.outerHeight()/2+"px"})}function a(e){return k!==t&&y.scrollLeft(k.left).scrollTop(k.top),e.preventDefault(),!1}function s(n,i,c){function r(e,t,n){var i=e.data(T)||o(e).data(T);if(O.hasOwnProperty(t)){if(3===arguments.length)switch(t){case"offset":f(n,e,i);break;case"zIndex":u(n,e,i);break;case"closeClass":d(n,e,i);break;default:i[t]=n}return i[t]}}return 2===arguments.length&&"string"==typeof i?n.length?r(n.eq(0),i):t:n.each("string"==typeof i?function(){r(e(this),i,c)}:function(){var t=e(this);e.each(i,function(e,o){r(t,e,o)})})}function f(e,t,o){var n;e?"function"==typeof e&&(e=function(e){return function(){var t=this;return e.call(t,function(){l.call(t)})}}(e)):e=l,!t||"function"==typeof e||o&&"function"!=typeof o.offset&&o.offset.left===e.left&&o.offset.top===e.top||(n=t.jquery?{}:t,n.left=e.left,n.top=e.top,n.marginLeft=n.marginTop="",t.jquery&&t.css(n)),o&&(o.offset=e,t&&D&&t.get(0)===D.get(0)&&r(t,o))}function u(e,t,o){!t||o&&o.zIndex===e||t.css("zIndex",e),o&&(o.zIndex=e)}function d(e,t,o){t&&o&&o.closeClass&&o.closeClass!==e&&t.find("."+o.closeClass).off("click",i),!t||!e||o&&o.closeClass===e||t.find("."+e).off("click",i).click(i),o&&(o.closeClass=e)}var p,g,v,h,y,m,x,b,C,z,I,k,w,T="plainModal",q=T.toLowerCase(),E=q+"open",j=q+"close",L=q+"beforeopen",A=q+"beforeclose",O={duration:200,effect:{open:e.fn.fadeIn,close:e.fn.fadeOut},overlay:{opacity:.6,zIndex:9e3},fixOverlay:!1,offset:t,zIndex:0,closeClass:q+"-close",force:!1,child:t},D=null;e.fn[T]=function(e,t,r,l){return"open"===e?n(this,t):"close"===e?i(this):"blur"===e?c(this,t,r,l):"option"===e?arguments.length<=2?s(this,t):s(this,t,r):o(this,e)}}(jQuery); \ No newline at end of file diff --git a/Resources/public/less/gwu.less b/Resources/public/less/gwu.less new file mode 100644 index 0000000..f7142d6 --- /dev/null +++ b/Resources/public/less/gwu.less @@ -0,0 +1,62 @@ +.gwu.gwu-dropzone { + + .gwu-previews { + min-height: inherit; + overflow: hidden; + border: none; + .border-radius(0); + .box-shadow(none); + margin: 30px -15px 0 -15px; + padding: 0; + } + + .gwu-preview { + display: block; + float: left; + margin: 0 0 30px 0; + width: 100%; + padding: 0 15px; + + &__image { + width: 100%; + height: 100%; + + .border-radius(8px); + } + + &__details { + padding: 30px; + } + } + + .gwu-preview-img { + max-width: 100%; + } + + @media (min-width: @screen-xs-min) { + .gwu-preview { + width: 50%; + } + } + @media (min-width: @screen-sm-min) { + .gwu-preview { + width: 33.3%; + } + } + @media (min-width: @screen-md-min) { + .gwu-preview { + width: 25%; + } + } + @media (min-width: @screen-lg-min) { + .gwu-preview { + width: 20%; + } + } + @media (min-width: 1600px) { + .gwu-preview { + width: 16.6%; + } + } +} + diff --git a/Resources/views/Form/base_upload_item_tpl.html.twig b/Resources/views/Form/base_upload_item_tpl.html.twig deleted file mode 100644 index 6ca7967..0000000 --- a/Resources/views/Form/base_upload_item_tpl.html.twig +++ /dev/null @@ -1,117 +0,0 @@ -{% block glavweb_upload_item_tpl %} - - {# TEMPLATE #} -
- - {% block glavweb_upload_item_preview %} -
- - {% block glavweb_upload_item_preview_top %}{% endblock %} - - {# DZ-PREVIEW:WRAPPER #} -
- - {% block glavweb_upload_item_details %} - {# DZ-PREVIEW:DZ-DETAILS #} -
- - {% block glavweb_upload_item_details_img %} - {# DZ-PREVIEW:DZ-DETAILS:IMG #} -
- -
-
-
- {% block glavweb_upload_item_details_img_tag %} - - {% endblock %} -
-
-
- - - {% block glavweb_upload_item_details_remove %} - {# DZ-PREVIEW:DZ-DETAILS:REMOVE #} -
- -
- {# //DZ-PREVIEW:DZ-DETAILS:REMOVE #} - {% endblock %} - -
- {# //DZ-PREVIEW:DZ-DETAILS:IMG #} - {% endblock %} - - {% block glavweb_upload_item_filename %} - {# DZ-PREVIEW:DZ-FILENAME #} - - {% if showLabel %} - -
-
- -
- - - {% block glavweb_upload_item_button %} -
- -
- {% endblock %} -
- - {% endif %} - - {# //DZ-PREVIEW:DZ-FILENAME #} - {% endblock %} - -
- {# //DZ-PREVIEW:DZ-DETAILS #} - {% endblock %} - - {% block glavweb_upload_item_progress %} - {# DZ-PREVIEW:DZ-PROGRESS #} -
- -
- {# //DZ-PREVIEW:DZ-PROGRESS #} - {% endblock %} - - {% if showMark %} - {% block glavweb_upload_item_marks %} - {# DZ-PREVIEW:DZ-MARKS #} -
-
- ? -
-
- ? -
-
- {# //DZ-PREVIEW:DZ-MARKS #} - {% endblock %} - {% endif %} - - {% block glavweb_upload_item_error_message %} - {# DZ-PREVIEW:DZ-ERROR-MESSAGE #} -
- -
- {# //DZ-PREVIEW:DZ-ERROR-MESSAGE #} - {% endblock %} - - {% block glavweb_upload_item_preview_bottom %}{% endblock %} - -
- {# //DZ-PREVIEW:WRAPPER #} - -
- {% endblock %} - -
- -{% endblock %} diff --git a/Resources/views/Form/base_uploaded_files.html.twig b/Resources/views/Form/base_uploaded_files.html.twig deleted file mode 100644 index 555bb5b..0000000 --- a/Resources/views/Form/base_uploaded_files.html.twig +++ /dev/null @@ -1,206 +0,0 @@ -{% block glavweb_uploaded_files %} - - - {% block glavweb_uploaded_files_top %}{% endblock %} - - {% for media in files %} - - {# SET VARIABLES #} - {% set imgSrc = media|glavweb_uploader_thumbnail %} - {# //SET VARIABLES #} - - {% block glavweb_uploaded_files_preview %} - {# DZ-PREVIEW #} -
- - {% block glavweb_uploaded_files_preview_wrapper %} - {# DZ-PREVIEW:WRAPPER #} -
- - {% block glavweb_uploaded_files_preview_top %}{% endblock %} - - {% block glavweb_uploaded_files_details %} - {# DZ-PREVIEW:DZ-DETAILS #} -
- - {% block glavweb_uploaded_files_details_img %} - {# DZ-PREVIEW:DZ-DETAILS:IMG #} -
- - - {% if imgSrc is not empty %} -
-
-
- -
-
-
- {% endif %} - - {% block glavweb_uploaded_files_details_remove %} - -
- -
- - {% endblock %} - -
- {# //DZ-PREVIEW:DZ-DETAILS:IMG #} - {% endblock %} - - {% block glavweb_uploaded_files_filename %} - - {% if showLabel %} - -
-
- {{ media.name }} -
- - - {% block glavweb_uploaded_files_buttons %} -
- -
- {% endblock %} -
- - {% endif %} - - {% endblock %} - -
- {# //DZ-PREVIEW:DZ-DETAILS #} - {% endblock %} - - {% block glavweb_uploaded_files_progress %} - {# DZ-PREVIEW:DZ-PROGRESS #} -
- -
- {# //DZ-PREVIEW:DZ-PROGRESS #} - {% endblock %} - - {% if showMark %} - {% block glavweb_uploaded_files_marks %} - {# DZ-PREVIEW:DZ-MARKS #} -
-
- ? -
-
- ? -
-
- {# //DZ-PREVIEW:DZ-MARKS #} - {% endblock %} - {% endif %} - - {% block glavweb_uploaded_files_error_message %} - {# DZ-PREVIEW:DZ-ERROR-MESSAGE #} -
- -
- {# //DZ-PREVIEW:DZ-ERROR-MESSAGE #} - {% endblock %} - - {% block glavweb_uploaded_files_preview_bottom %}{% endblock %} - -
- {# //DZ-PREVIEW:WRAPPER #} - {% endblock %} - -
- {# //DZ-PREVIEW #} - {% endblock %} - - {% endfor %} - -{% endblock %} diff --git a/Resources/views/Form/fields.html.twig b/Resources/views/Form/fields.html.twig index f4e92e4..796da44 100644 --- a/Resources/views/Form/fields.html.twig +++ b/Resources/views/Form/fields.html.twig @@ -1,398 +1,408 @@ {% block glavweb_uploader_dropzone_widget %} - - -
+
- - -
- -
- {% if useForm %} - {% include viewFormTpl %} - {% endif %} -
- - {% if useLink %} - {% include viewLinkTpl %} - {% endif %} - - - -
- {% include uploadedFilesTpl with {'files': files} %} -
- - -
+ {#
#} + {#{{ 'dropzone.reached_maximum_uploaded_files'|trans }}#} + {#
#} + {##} + + +
- {% block glavweb_uploader_dropzone_widget__madal_windows %} - {% include 'GlavwebUploaderBundle:Form:view-modal-remove.html.twig' %} - {% include 'GlavwebUploaderBundle:Form:view-modal-rename.html.twig' %} - {% include 'GlavwebUploaderBundle:Form:view-modal-error.html.twig' %} - {% include 'GlavwebUploaderBundle:Form:view-modal-error-format.html.twig' %} - {% include 'GlavwebUploaderBundle:Form:view-modal-error-default.html.twig' %} + {% block glavweb_uploader_dropzone_widget__madal %} + {% include 'GlavwebUploaderBundle:Form/modal:popup.html.twig' %} {% endblock %} {% block glavweb_uploader_dropzone_widget__stylesheet %} - + {##} {% endblock %} {% block glavweb_uploader_dropzone_widget__script %} + {##} {% endblock %} -{% endblock %} +{% endblock %} \ No newline at end of file diff --git a/Resources/views/Form/form/form.html.twig b/Resources/views/Form/form/form.html.twig new file mode 100644 index 0000000..7b34d1a --- /dev/null +++ b/Resources/views/Form/form/form.html.twig @@ -0,0 +1,3 @@ +
+ {{ 'dropzone.drag_or_click_files'|trans }} +
\ No newline at end of file diff --git a/Resources/views/Form/view-link.html.twig b/Resources/views/Form/form/link.html.twig similarity index 100% rename from Resources/views/Form/view-link.html.twig rename to Resources/views/Form/form/link.html.twig diff --git a/Resources/views/Form/item/base.html.twig b/Resources/views/Form/item/base.html.twig new file mode 100644 index 0000000..97f84b4 --- /dev/null +++ b/Resources/views/Form/item/base.html.twig @@ -0,0 +1,96 @@ +{% block glavweb_uploader_tpl %} +
+ + {% block glavweb_uploader_preview %} +
+ {% block glavweb_uploader_preview_top %}{% endblock %} + + {% block glavweb_uploader_preview_content %} + + {% block glavweb_uploader_preview_image %} +
+
+
+ +
+
+
+ {% endblock %} + + {% block glavweb_uploader_preview_details %} + {% if previewShow.isDetails %} +
+ {% if previewShow.isSize %} +
+ +
+ {% endif %} + {% if previewShow.isFilename %} +
+ 3.jpg +
+ {% endif %} + {% block glavweb_upload_item_details_remove %} +
+ +
+ {% endblock %} +
+ {% endif %} + {% endblock %} + + {% block glavweb_uploader_preview_progress %} + {% if previewShow.isProgress %} +
+ +
+ {% endif %} + {% endblock %} + + {% block glavweb_upload_item_error_message %} + {% if previewShow.isError %} +
+ +
+ {% endif %} + {% endblock %} + + {% block glavweb_uploader_preview_marks %} + {% if previewShow.isShowMark %} +
+
+ + Check + Created with Sketch. + + + + + +
+
+ + + error + Created with Sketch. + + + + + + + + +
+
+ {% endif %} + {% endblock %} + {% endblock %} + + {% block glavweb_uploader_preview_bottom %}{% endblock %} +
+ {% endblock %} +
+{% endblock %} \ No newline at end of file diff --git a/Resources/views/Form/item/image.html.twig b/Resources/views/Form/item/image.html.twig new file mode 100644 index 0000000..8f7a4aa --- /dev/null +++ b/Resources/views/Form/item/image.html.twig @@ -0,0 +1 @@ +{% extends 'GlavwebUploaderBundle:Form/item:base.html.twig' %} \ No newline at end of file diff --git a/Resources/views/Form/view-modal-error-default.html.twig b/Resources/views/Form/modal/base.html.twig similarity index 100% rename from Resources/views/Form/view-modal-error-default.html.twig rename to Resources/views/Form/modal/base.html.twig diff --git a/Resources/views/Form/modal/popup.html.twig b/Resources/views/Form/modal/popup.html.twig new file mode 100644 index 0000000..9b32d07 --- /dev/null +++ b/Resources/views/Form/modal/popup.html.twig @@ -0,0 +1,5 @@ +
+
+ ss +
+
\ No newline at end of file diff --git a/Resources/views/Form/view-form.html.twig b/Resources/views/Form/view-form.html.twig deleted file mode 100644 index d98163a..0000000 --- a/Resources/views/Form/view-form.html.twig +++ /dev/null @@ -1,6 +0,0 @@ -
- {{ 'dropzone.drag_or_click_files'|trans }} -
-
- {{ 'dropzone.reached_maximum_uploaded_files'|trans }} -
\ No newline at end of file diff --git a/Resources/views/Form/view-modal-error-format.html.twig b/Resources/views/Form/view-modal-error-format.html.twig deleted file mode 100644 index 82d880b..0000000 --- a/Resources/views/Form/view-modal-error-format.html.twig +++ /dev/null @@ -1,20 +0,0 @@ - \ No newline at end of file diff --git a/Resources/views/Form/view-modal-error.html.twig b/Resources/views/Form/view-modal-error.html.twig deleted file mode 100644 index cd24f10..0000000 --- a/Resources/views/Form/view-modal-error.html.twig +++ /dev/null @@ -1,20 +0,0 @@ - \ No newline at end of file diff --git a/Resources/views/Form/view-modal-remove.html.twig b/Resources/views/Form/view-modal-remove.html.twig deleted file mode 100644 index 823ca71..0000000 --- a/Resources/views/Form/view-modal-remove.html.twig +++ /dev/null @@ -1,39 +0,0 @@ -{# MODAL:REMOVE-FILE #} - -{# //MODAL:REMOVE-FILE #} \ No newline at end of file diff --git a/Resources/views/Form/view-modal-rename.html.twig b/Resources/views/Form/view-modal-rename.html.twig deleted file mode 100644 index e3dd075..0000000 --- a/Resources/views/Form/view-modal-rename.html.twig +++ /dev/null @@ -1,46 +0,0 @@ -{# MODAL:RENAME-FILE #} - -{# //MODAL:RENAME-FILE #} \ No newline at end of file