diff --git a/composer.json b/composer.json index dc3f683f760bd7ce1e2fe36e3bf9b9c161506a60..a72256410e23f23a285fbcb7cd0254ee50032178 100644 --- a/composer.json +++ b/composer.json @@ -149,7 +149,6 @@ ], "test:install-assets": [ "@test:clear", - "@test:install-theme-assets", "cd tests/Fixtures && npm install && npm run dev #" ], "test:install-theme-assets": [ diff --git a/package.json b/package.json index 175c943f19b3c4a8845e2c27b7b1e0b354addfca..1383bd827ead88307233f1e39bc0abc3e25cfbe7 100644 --- a/package.json +++ b/package.json @@ -7,17 +7,19 @@ "peerDependencies": { "@symfony/webpack-encore": ">=0.21 <1", "node-sass": "*", - "sass-loader": "^7.0", + "sass-loader": "^8.0", "core-js": "^3.0.0" }, "dependencies": { "blueimp-canvas-to-blob": "^3.27.0", "blueimp-file-upload": "^10.30.1", - "blueimp-load-image": "^5.12.0", + "blueimp-load-image": "^5.13.0", "bootstrap-sass": "^3.4.1", + "canvas-to-blob": "^1.0.0", "font-awesome": "^4.0", "jquery": "^1.10", "jquery-ui": "^1.12.1", - "popper.js": "1.14.3" + "popper.js": "1.14.3", + "translate-js": "^1.3.0" } } diff --git a/src/DependencyInjection/IrsteaFileUploadExtension.php b/src/DependencyInjection/IrsteaFileUploadExtension.php index cf671acb3d87921a56fc1d1a89f93b535bdd9277..fe45b6044c276bcfc7a8054ba172b94c48f1511a 100644 --- a/src/DependencyInjection/IrsteaFileUploadExtension.php +++ b/src/DependencyInjection/IrsteaFileUploadExtension.php @@ -55,11 +55,11 @@ class IrsteaFileUploadExtension extends Extension implements PrependExtensionInt */ public function prepend(ContainerBuilder $container) { - /* $pluginDir = __DIR__ . '/../../../../blueimp/jquery-file-upload'; - - $container->prependExtensionConfig( - 'assetic', - [ + $pluginDir = __DIR__ . '/../../node_modules/blueimp-file-upload/'; + echo $pluginDir; + $container->prependExtensionConfig( + 'assetic', + [ 'assets' => [ 'form_js' => [ 'inputs' => [ @@ -68,29 +68,29 @@ class IrsteaFileUploadExtension extends Extension implements PrependExtensionInt "$pluginDir/js/jquery.fileupload-validate.js", "$pluginDir/js/jquery.fileupload-ui.js", '@BazingaJsTranslationBundle/Resources/js/translator.js', - 'js/translations/file_upload/*.js', - 'js/translations/validators/*.js', - '@IrsteaFileUploadBundle/Resources/js/widget/file_upload.js', + //'js/translations/file_upload/*.js', + //'js/translations/validators/*.js', + '@IrsteaFileUploadBundle/Resources/js/widget/file_upload.js', ], ], 'form_css' => [ 'inputs' => [ "$pluginDir/css/jquery.fileupload.css", "$pluginDir/css/jquery.fileupload-ui.css", - '@IrsteaFileUploadBundle/Resources/less/file_upload.less', + '@IrsteaFileUploadBundle/Resources/assets/sass/file_upload.scss', ], ], ], ] - ); + ); - $container->prependExtensionConfig( - 'twig', - [ + $container->prependExtensionConfig( + 'twig', + [ 'form_themes' => [ 'IrsteaFileUploadBundle:Form:file_upload.html.twig', ], ] - );*/ + ); } } diff --git a/src/Resources/assets/js/file_upload.js b/src/Resources/assets/js/file_upload.js index 8c0a1b4568f977cd4bdc774f31167e2128b59d81..42c95ab1353c74ae4caa0618a8300b11be5f0b24 100644 --- a/src/Resources/assets/js/file_upload.js +++ b/src/Resources/assets/js/file_upload.js @@ -1,3 +1,5 @@ +const Translator = require('translator'); + /* * Copyright (C) 2015 IRSTEA * All rights reserved. diff --git a/src/Resources/assets/js/main.js b/src/Resources/assets/js/main.js index 1c169463c085ab3ddcd6aa866b8689e7d13521b2..e2c2f6ba18f521cb51004eccba36361ea801d54c 100644 --- a/src/Resources/assets/js/main.js +++ b/src/Resources/assets/js/main.js @@ -1,11 +1,21 @@ import * as jQuery from 'jquery'; global.$ = window.$ = jQuery; - -import 'jquery-ui'; +import 'bootstrap-sass'; import './widget/file_upload.js'; +import '../sass/file_upload.scss'; + +import 'blueimp-file-upload/js/vendor/jquery.ui.widget'; +import 'blueimp-file-upload/js/jquery.iframe-transport'; + +import 'blueimp-load-image'; + +import 'blueimp-file-upload/js/jquery.fileupload'; import 'blueimp-file-upload/js/jquery.fileupload'; -//import 'blueimp-file-upload/js/jquery.fileupload-ui'; //bloque ici à voir -import 'blueimp-canvas-to-blob'; import 'blueimp-file-upload/js/jquery.fileupload-process'; -import 'blueimp-file-upload/js/jquery.iframe-transport'; import 'blueimp-file-upload/js/jquery.fileupload-validate'; + + +//css to convert to less +import 'blueimp-file-upload/css/jquery.fileupload.css'; +import 'blueimp-file-upload/css/jquery.fileupload-ui.css'; + diff --git a/src/Resources/assets/js/widget/file_upload.js b/src/Resources/assets/js/widget/file_upload.js index 373b5cc14836d192a46b811763f294b498a10431..d1b994bae895e8a1c3f38eafade1cf5702e3facf 100644 --- a/src/Resources/assets/js/widget/file_upload.js +++ b/src/Resources/assets/js/widget/file_upload.js @@ -1,3 +1,6 @@ +const Translator = require("translate-js/dist/translate"); + + /* * Copyright (C) 2015 IRSTEA * All rights reserved. @@ -25,8 +28,8 @@ return formatFileSize(rate) + '/s'; }; - $.blueimp.fileupload.prototype._formatFileSize = formatFileSize; - $.blueimp.fileupload.prototype._formatBitrate = formatBitrate; + //blueimp.fileupload.prototype._formatFileSize = formatFileSize; + // blueimp.fileupload.prototype._formatBitrate= formatBitrate; /** Plugin irsteaFileUpload. */ diff --git a/src/Resources/assets/sass/file_upload.scss b/src/Resources/assets/sass/file_upload.scss new file mode 100644 index 0000000000000000000000000000000000000000..c4962c87a2a6825961114406e37ea0ee2c3da23e --- /dev/null +++ b/src/Resources/assets/sass/file_upload.scss @@ -0,0 +1,65 @@ +/* +Copyright (C) 2015 IRSTEA +All rights reserved. +*/ + +@import "~font-awesome/scss/font-awesome"; + +$padding-xs-vertical: false !default; +$padding-xs-horizontal: false !default; +$input-height-base: false !default; +$line-height-computed: false !default; + +.fileinput-entry { + .cancel, .delete { + margin-left: 0.2em; + } + .description { + display: inline; + width: auto; + height: auto; + padding: $padding-xs-vertical $padding-xs-horizontal; + margin: 0 0.2em; + } + .progress { + height: ($line-height-computed / 2); + margin: ($line-height-computed / 4) 0; + } + .progress-text { + float: right; + } + .error { + display: none; + } + &.alert { + padding: $padding-xs-vertical $padding-xs-horizontal; + margin-bottom: 0; + .name:after { + content: " :"; + } + .error { + display: inline; + &:after { + content: "."; + } + } + .size, .description { + display: none; + } + } +} + +.fileinput-multiple .fileinput-entry { + margin-bottom: ($line-height-computed / 2); +} + +.fileinput-multiple, .fileinput-single { + height: auto !important; + min-height: $input-height-base; +} + +.template-upload .size { + &:before { content: "("; } + &:after { content: ")"; } +} + diff --git a/src/Resources/views/Form/file_upload.html.twig b/src/Resources/views/Form/file_upload.html.twig index 6e618d3d23df19063d0b4d47dd9192313d2bf1a4..694c96b80f1692824a236e65904d59870daab914 100644 --- a/src/Resources/views/Form/file_upload.html.twig +++ b/src/Resources/views/Form/file_upload.html.twig @@ -1,12 +1,11 @@ - {% block file_upload_progress_prototype %} <div class="template-upload fileinput-entry"> - <div class="progress-text" style="display: none"></div> + <div class="progress-text" style="display: none"></div> <i class="fa fa-circle-o-notch fa-spin icon"></i> <span class="name"></span> <span class="size"></span> <span class="error"></span> <a href="#" class="danger cancel" title="{% trans %}button.cancel{% endtrans %}"> - {{- irstea_icon('remove') -}} + {{- irstea_icon('remove') -}} </a> <div class="progress" style="display: none"> <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0"></div> diff --git a/tests/Fixtures/App/Controller/DefaultController.php b/tests/Fixtures/App/Controller/DefaultController.php index a5dee38d369f2ba48a44a06e694d07c2c5819a5c..27323474cd1010ba97aa0d45139213ef1eb596b2 100644 --- a/tests/Fixtures/App/Controller/DefaultController.php +++ b/tests/Fixtures/App/Controller/DefaultController.php @@ -61,7 +61,7 @@ class DefaultController extends Controller 'fichierSource', FileUploadType::class, [ - 'label' => 'Enregistrement.fichiers.label', + 'label' => 'Label fileupload test', 'accept_file_types' => 'audio/.*', 'multiple' => false, 'required' => false, diff --git a/tests/Fixtures/assets/fileupload_demo.css b/tests/Fixtures/assets/fileupload_demo.css new file mode 100644 index 0000000000000000000000000000000000000000..38c567030498941ec6334468984e2f13ffb39756 --- /dev/null +++ b/tests/Fixtures/assets/fileupload_demo.css @@ -0,0 +1,16 @@ + .file { + position: relative; + background: linear-gradient(to right, lightblue 50%, transparent 50%); + background-size: 200% 100%; + background-position: right bottom; + transition:all 1s ease; +} + .file.done { + background: lightgreen; +} + .file a { + display: block; + position: relative; + padding: 5px; + color: black; +} diff --git a/tests/Fixtures/assets/fileupload_demo.js b/tests/Fixtures/assets/fileupload_demo.js new file mode 100644 index 0000000000000000000000000000000000000000..55e73a7e2982d61045b865fc014be02191ce2087 --- /dev/null +++ b/tests/Fixtures/assets/fileupload_demo.js @@ -0,0 +1,19 @@ + $("#fileupload").fileupload({ + dataType: "json", + add: function(e, data) { + data.context = $('<p class="file">') + .append($('<a target="_blank">').text(data.files[0].name)) + .appendTo(document.body); + data.submit(); + }, + progress: function(e, data) { + var progress = parseInt((data.loaded / data.total) * 100, 10); + data.context.css("background-position-x", 100 - progress + "%"); + }, + done: function(e, data) { + data.context + .addClass("done") + .find("a") + .prop("href", data.result.files[0].url); + } + }); diff --git a/tests/Fixtures/package.json b/tests/Fixtures/package.json index 8182dc5e84b73aa624b45c1f39886552d4936803..0781d4d3201de584315d37bbd4753d1072dcd6c8 100644 --- a/tests/Fixtures/package.json +++ b/tests/Fixtures/package.json @@ -16,6 +16,6 @@ "highlight.js": "^9.18.1", "jquery-mousewheel": "^3.1.13", "node-sass": "^4.13.1", - "sass-loader": "^7.0" + "sass-loader": "^8.0" } } diff --git a/tests/Fixtures/templates/base.html.twig b/tests/Fixtures/templates/base.html.twig index 0c074640af489c4b998cc79545b8f6440bb7e81d..9dcfde3702f4fc5f729144d7a5c9aecad2409e1b 100644 --- a/tests/Fixtures/templates/base.html.twig +++ b/tests/Fixtures/templates/base.html.twig @@ -7,52 +7,11 @@ {% endblock %} {% block stylesheets %} - - <style> - .file { - position: relative; - background: linear-gradient(to right, lightblue 50%, transparent 50%); - background-size: 200% 100%; - background-position: right bottom; - transition:all 1s ease; -} - .file.done { - background: lightgreen; -} - .file a { - display: block; - position: relative; - padding: 5px; - color: black; -}</style> {{ parent() }} {{ encore_entry_link_tags('main') }} {% endblock %} {%- block javascripts %} - - <script> - - $("#fileupload").fileupload({ - dataType: "json", - add: function(e, data) { - data.context = $('<p class="file">') - .append($('<a target="_blank">').text(data.files[0].name)) - .appendTo(document.body); - data.submit(); - }, - progress: function(e, data) { - var progress = parseInt((data.loaded / data.total) * 100, 10); - data.context.css("background-position-x", 100 - progress + "%"); - }, - done: function(e, data) { - data.context - .addClass("done") - .find("a") - .prop("href", data.result.files[0].url); - } - }); - </script> {{ parent() }} {{ encore_entry_script_tags('main') }} diff --git a/tests/Fixtures/templates/index.html.twig b/tests/Fixtures/templates/index.html.twig index 146181604a7005e747698c3ec263e5c70210bbd1..b377ea802fc8527b3dc4e70c63df505b5d84739f 100644 --- a/tests/Fixtures/templates/index.html.twig +++ b/tests/Fixtures/templates/index.html.twig @@ -1,5 +1,15 @@ {% extends '/base.html.twig' %} -{% block content %} - {{ form(form) }} +{% block content -%} + {{ form_start(form) }} + <div class="tab-content"> + <div class="row"> + <div class="col-md-12"> + <br/><br/> + {{ form_rest(form) }} + </div> + </div> + </div> +</div> +{{ form_end(form) }} {% endblock %} diff --git a/tests/Fixtures/webpack.config.js b/tests/Fixtures/webpack.config.js index 6831c04d5e97aac22e9560d58c0cecafdfb42d68..a8fe4fb096587c1c0809e42e89c94236770a3fd8 100644 --- a/tests/Fixtures/webpack.config.js +++ b/tests/Fixtures/webpack.config.js @@ -1,4 +1,4 @@ -var Encore = require('@symfony/webpack-encore'); + var Encore = require('@symfony/webpack-encore'); Encore // the project directory where compiled assets will be stored @@ -36,6 +36,7 @@ Encore .addEntry('main', [ './assets/main.js', './assets/main.scss', + './assets/fileupload_demo.js', ])