From 4f427d4ee4389ca02f9e2edf8de5a4e173b3515b Mon Sep 17 00:00:00 2001
From: Ndame Kital <ndame.kial@smile.fr>
Date: Wed, 24 Jun 2020 09:15:54 +0200
Subject: [PATCH] =?UTF-8?q?ajout=20dependance=20manquantes=20et=20am=C3=A9?=
=?UTF-8?q?lioration=20du=20showcase?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
composer.json | 1 -
package.json | 8 ++-
.../IrsteaFileUploadExtension.php | 28 ++++----
src/Resources/assets/js/file_upload.js | 2 +
src/Resources/assets/js/main.js | 20 ++++--
src/Resources/assets/js/widget/file_upload.js | 7 +-
src/Resources/assets/sass/file_upload.scss | 65 +++++++++++++++++++
.../views/Form/file_upload.html.twig | 5 +-
.../App/Controller/DefaultController.php | 2 +-
tests/Fixtures/assets/fileupload_demo.css | 16 +++++
tests/Fixtures/assets/fileupload_demo.js | 19 ++++++
tests/Fixtures/package.json | 2 +-
tests/Fixtures/templates/base.html.twig | 41 ------------
tests/Fixtures/templates/index.html.twig | 14 +++-
tests/Fixtures/webpack.config.js | 3 +-
15 files changed, 159 insertions(+), 74 deletions(-)
create mode 100644 src/Resources/assets/sass/file_upload.scss
create mode 100644 tests/Fixtures/assets/fileupload_demo.css
create mode 100644 tests/Fixtures/assets/fileupload_demo.js
diff --git a/composer.json b/composer.json
index dc3f683f..a7225641 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 175c943f..1383bd82 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 cf671acb..fe45b604 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 8c0a1b45..42c95ab1 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 1c169463..e2c2f6ba 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 373b5cc1..d1b994ba 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 00000000..c4962c87
--- /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 6e618d3d..694c96b8 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 a5dee38d..27323474 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 00000000..38c56703
--- /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 00000000..55e73a7e
--- /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 8182dc5e..0781d4d3 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 0c074640..9dcfde37 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 14618160..b377ea80 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 6831c04d..a8fe4fb0 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',
])
--
GitLab