Merge pull request #228 from vaadin/es5-demos

Change demo snippets to use es5
vaadin · Nov 13, 2017 · 86102fd · 86102fd
2 parents 7c09ba2 + 70e9bcd
commit 86102fd
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 64 deletions.
diff --git a/bower.json b/bower.json
@@ -40,7 +40,6 @@
     "mock-http-request": "abuinitski/MockHttpRequest#npm_fix",
     "web-component-tester": "^6.1.5",
     "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers",
-    "iron-icons": "^2.0.1",
-    "paper-toast": "^2.0.0"
+    "iron-icons": "^2.0.1"
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -26,7 +26,6 @@
   <link rel="import" href="../../iron-icons/iron-icons.html">
   <script src="../../mock-http-request/lib/mock.js"></script>
   <link rel="import" href="../vaadin-upload.html">
-  <link rel="import" href="../../paper-toast/paper-toast.html">
 
   <vaadin-component-demo config-src="demos.json"></vaadin-component-demo>
 </body>

diff --git a/demo/upload-advanced-demos.html b/demo/upload-advanced-demos.html
@@ -38,10 +38,10 @@ <h3>Customizing the Upload Request</h3>
         <vaadin-upload id="requestDemo"></vaadin-upload>
 
         <script>
-          window.addDemoReadyListener('#upload-advanced-demos-customizing-the-upload-request', document => {
-            var upload1 = document.querySelector('vaadin-upload#requestDemo');
+          window.addDemoReadyListener('#upload-advanced-demos-customizing-the-upload-request', function(document) {
+            var upload = document.querySelector('vaadin-upload#requestDemo');
 
-            upload1.addEventListener('upload-before', event => {
+            upload.addEventListener('upload-before', function(event) {
               console.log('upload xhr before open: ', event.detail.xhr);
 
               // Prevent the upload request:
@@ -50,20 +50,20 @@ <h3>Customizing the Upload Request</h3>
               var file = event.detail.file;
 
               // Custom upload request url for file
-              file.uploadTarget = upload1.target + '/' + file.name;
+              file.uploadTarget = upload.target + '/' + file.name;
 
               // Custom name in the Content-Disposition header
               file.formDataName = 'attachment';
             });
 
-            upload1.addEventListener('upload-request', event => {
+            upload.addEventListener('upload-request', function(event) {
               console.log('upload xhr after open: ', event.detail.xhr);
 
               event.detail.xhr.setRequestHeader('X-File-Name', event.detail.file.name);
               event.detail.formData.append('documentId', 1234);
             });
 
-            upload1.addEventListener('upload-start', event => {
+            upload.addEventListener('upload-start', function(event) {
               console.log('upload xhr after send: ', event.detail.xhr);
             });
           });
@@ -78,10 +78,10 @@ <h3>Sending Files Without Wrapping in FormData</h3>
         <vaadin-upload id="rawDemo"></vaadin-upload>
 
         <script>
-          window.addDemoReadyListener('#upload-advanced-demos-sending-files-without-wrapping-in-formdata', document => {
-            var upload2 = document.querySelector('vaadin-upload#rawDemo');
+          window.addDemoReadyListener('#upload-advanced-demos-sending-files-without-wrapping-in-formdata', function(document) {
+            var upload = document.querySelector('vaadin-upload#rawDemo');
 
-            upload2.addEventListener('upload-request', event => {
+            upload.addEventListener('upload-request', function(event) {
               event.preventDefault();
               event.detail.xhr.send(event.detail.file);
             });
@@ -97,10 +97,10 @@ <h3>Custom Reaction on Server Response</h3>
         <vaadin-upload id="responseDemo"></vaadin-upload>
 
         <script>
-          window.addDemoReadyListener('#upload-advanced-demos-custom-reaction-on-server-response', document => {
-            var upload3 = document.querySelector('vaadin-upload#responseDemo');
+          window.addDemoReadyListener('#upload-advanced-demos-custom-reaction-on-server-response', function(document) {
+            var upload = document.querySelector('vaadin-upload#responseDemo');
 
-            upload3.addEventListener('upload-response', event => {
+            upload.addEventListener('upload-response', function(event) {
               console.log('upload xhr after server response: ', event.detail.xhr);
               event.detail.file.error = 'Custom server error message.';
 
@@ -121,7 +121,7 @@ <h3>Pre-Filling the File List in Advance</h3>
           <span slot="drop-label">Drop your favourite Novels here</span>
         </vaadin-upload>
         <script>
-          window.addDemoReadyListener('#upload-advanced-demos-pre-filling-the-file-list-in-advance', document => {
+          window.addDemoReadyListener('#upload-advanced-demos-pre-filling-the-file-list-in-advance', function(document) {
             var upload = document.querySelector('vaadin-upload#preFill');
             upload.files = [
               {name: 'Don Quixote.pdf', progress: 100, complete: true},
@@ -137,39 +137,11 @@ <h3>Pre-Filling the File List in Advance</h3>
     <h3>Custom Upload Button</h3>
     <vaadin-demo-snippet id='upload-advanced-demos-custom-upload-button'>
       <template preserve-content>
-        <button-events-demo></button-events-demo>
-
-        <dom-module id="button-events-demo">
-          <template preserve-content>
-            <style>
-              vaadin-upload {
-                --vaadin-upload-buttons-primary: {
-                  align-items: center;
-                };
-              }
-            </style>
-            <vaadin-upload id="upload" max-files="1" max-files-reached="{{maxFilesReached}}">
-              <button slot="add-button" disabled$="[[maxFilesReached]]">
-                UPLOAD
-              </button>
-            </vaadin-upload>
-          </template>
-          <script>
-            class ButtonEventsDemo extends Polymer.Element {
-              static get is() {
-                return 'button-events-demo';
-              }
-
-              static get properties() {
-                return {
-                  maxFilesReached: Boolean
-                };
-              }
-            }
-
-            window.customElements.define('button-events-demo', ButtonEventsDemo);
-          </script>
-        </dom-module>
+        <vaadin-upload id="upload">
+          <button slot="add-button">
+            UPLOAD BUTTON
+          </button>
+        </vaadin-upload>
       </template>
     </vaadin-demo-snippet>
 
@@ -182,11 +154,11 @@ <h3>Manual Upload Trigger</h3>
         <button id="uploadButton">Start Upload(s)</button>
 
         <script>
-          window.addDemoReadyListener('#upload-advanced-demos-manual-upload-trigger', document => {
+          window.addDemoReadyListener('#upload-advanced-demos-manual-upload-trigger', function(document) {
             var upload = document.querySelector('vaadin-upload#manualUpload');
             var uploadButton = document.getElementById('uploadButton');
 
-            uploadButton.addEventListener('click', () => {
+            uploadButton.addEventListener('click', function() {
               upload.uploadFiles();
             });
 

diff --git a/demo/upload-basic-demos.html b/demo/upload-basic-demos.html
@@ -69,16 +69,12 @@ <h3>Setting Restrictions on Files to Upload</h3>
           <span slot="drop-label">Up to 3 PDF files, 1 MB each</span>
         </vaadin-upload>
 
-        <paper-toast id="rejectToast"></paper-toast>
-
         <script>
-          window.addDemoReadyListener('#upload-basic-demos-setting-restrictions-on-files-to-upload', document => {
+          window.addDemoReadyListener('#upload-basic-demos-setting-restrictions-on-files-to-upload', function(document) {
             var upload = document.querySelector('vaadin-upload#rejectEventDemo');
-            var toast = document.querySelector('paper-toast#rejectToast');
 
-            upload.addEventListener('file-reject', event => {
-              toast.text = event.detail.file.name + ' error: ' + event.detail.error;
-              toast.open();
+            upload.addEventListener('file-reject', function(event) {
+              window.alert(event.detail.file.name + ' error: ' + event.detail.error);
             });
           });
         </script>

diff --git a/demo/upload-i18n-demos.html b/demo/upload-i18n-demos.html
@@ -13,7 +13,7 @@ <h3>I18n</h3>
       <template preserve-content>
         <vaadin-upload id="ru"></vaadin-upload>
         <script>
-          window.addDemoReadyListener('#upload-i18n-demos-i18n', document => {
+          window.addDemoReadyListener('#upload-i18n-demos-i18n', function(document) {
             var upload = document.querySelector('vaadin-upload#ru');
             upload.i18n = {
               dropFiles: {
@@ -61,19 +61,19 @@ <h3>Custom progress status</h3>
       <template preserve-content>
         <vaadin-upload id="shortTime"></vaadin-upload>
         <script>
-          window.addDemoReadyListener('#upload-i18n-demos-custom-progress-status', document => {
+          window.addDemoReadyListener('#upload-i18n-demos-custom-progress-status', function(document) {
             var upload = document.querySelector('vaadin-upload#shortTime');
 
-            upload.set('i18n.formatTime', (seconds, split) => {
+            upload.set('i18n.formatTime', function(seconds, split) {
               return split
-                .map((number, i) => {
+                .map(function(number, i) {
                   return {number: number, unit: ['s', 'min', 'h', 'd'][i]};
                 })
                 .reverse()
-                .filter(value => {
+                .filter(function(value) {
                   return value.number > 0;
                 })
-                .map(value => {
+                .map(function(value) {
                   return value.number + ' ' + value.unit;
                 })
                 .join(' ');