Feature/iframe sizes (#12)

* Avoid loading iframe before it is shown. This will create a slight load when the iframe slide is shown. * Added text explaining the possible issues with using the iframe template. * Added option to explicitly set iframe width and height.
os2display · Oct 7, 2019 · c3240bc · c3240bc
1 parent bee59b6
commit c3240bc
Show file tree

Hide file tree

Showing 10 changed files with 4,155 additions and 31 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # os2display/default-template-bundle CHANGELOG
 
+## 1.2.0
+
+* Avoid loading iframe before it is shown. This will create a slight load when the iframe slide is shown.
+* Added text explaining the possible issues with using the iframe template.
+* Added option to explicitly set iframe width and height.
+
 ## 1.1.2
 
 * Merged https://github.com/os2display/default-template-bundle/pull/10.

diff --git a/Resources/public/apps/toolsModule/source-editor.html b/Resources/public/apps/toolsModule/source-editor.html
@@ -15,17 +15,34 @@ <h2 class="edit-menu--iframe-header">Indstillinger</h2>
           <div class="edit-menu--iframe-label">Vælg sti</div>
           <input type="text" data-ng-model="slide.options.source">
         </div>
+        <div class="edit-menu--iframe-content">
+          <p>
+            <strong>Bemærk!!</strong> Brug af iFrame-skabelonen kan give problemer i os2display, da en ekstern side bliver
+            vist i iframen. I denne kan der køre alt muligt kode, som os2display ikke har styr på, og noget kan
+            muligvis ikke eksekveres i iframen.
+          </p>
+          <p>
+            Derfor er brug af denne skabelon på eget ansvar.
+          </p>
+          <p>
+            Stien skal være sikker (starte med https://), da indholdet ellers vil blive blokeret af browseren.
+          </p>
+        </div>
         <div class="edit-menu--iframe-content">
           <div class="edit-menu--iframe-label">Deaktiver automatiske opdateringer af iframe</div>
           <input type="checkbox" data-ng-model="slide.options.disable_update">
         </div>
         <div class="edit-menu--iframe-content">
-          <div class="edit-menu--iframe-label">Vælg iframe bredde (Px eller %)</div>
-          <input type="text" placeholder="300px"  data-ng-model="slide.options.framewidth">
+          <div class="edit-menu--iframe-label">Vælg iframe bredde (px eller %)</div>
+          <input type="text" placeholder="100%" data-ng-model="slide.options.framewidth">
+        </div>
+        <div class="edit-menu--iframe-content">
+          <div class="edit-menu--iframe-label">Vælg iframe højde (px eller %)</div>
+          <input type="text" placeholder="100%" data-ng-model="slide.options.frameheight">
         </div>
         <div class="edit-menu--iframe-content">
           <div class="edit-menu--iframe-label">Deaktivér scrollbar på iframe</div>
-          <input type="checkbox" placeholder="300px"  data-ng-model="slide.options.disable_scrollbar">
+          <input type="checkbox" placeholder="300px" data-ng-model="slide.options.disable_scrollbar">
         </div>
         <div class="edit-menu--iframe-content">
           <div class="edit-menu--iframe-label">Vælg baggrundsfarve</div>

diff --git a/Resources/public/templates/default_templates/slides/ik-iframe/ik-iframe-edit.html b/Resources/public/templates/default_templates/slides/ik-iframe/ik-iframe-edit.html
@@ -1,3 +1,3 @@
 <div class="ik-iframe" data-ng-style="{'background-color': ikSlide.options.bgcolor,'width': theStyle.width, 'height': theStyle.height}">
-  <div class="ik-iframe--inner" data-ng-style="{'width': ikSlide.options.framewidth}">IFrame</div>
-</div>
+  <div class="ik-iframe--inner">IFrame</div>
+</div>
diff --git a/Resources/public/templates/default_templates/slides/ik-iframe/ik-iframe.css b/Resources/public/templates/default_templates/slides/ik-iframe/ik-iframe.css
diff --git a/Resources/public/templates/default_templates/slides/ik-iframe/ik-iframe.html b/Resources/public/templates/default_templates/slides/ik-iframe/ik-iframe.html
@@ -1,3 +1,11 @@
 <div class="ik-iframe" data-ng-style="{'background-color': ikSlide.options.bgcolor}">
-  <iframe sandbox="allow-same-origin allow-scripts" class="ik-iframe--iframe" data-ng-src="{{ikSlide.getRefreshedSource()}}" frameborder="0" data-ng-style="{'background-color': ikSlide.options.bgcolor, 'width': ikSlide.options.framewidth}"  scrolling="{{ikSlide.scroll}}"></iframe>
-</div>
+  <div class="ik-iframe--wrapper" data-ng-if="!ikSlide.hide">
+    <iframe
+        sandbox="allow-same-origin allow-scripts" class="ik-iframe--iframe"
+        data-ng-src="{{ ikSlide.getRefreshedSource() }}" frameborder="0"
+        width="{{ ikSlide.options.framewidth ? ikSlide.options.framewidth : '100%' }}" height="{{ ikSlide.options.frameheight ? ikSlide.options.frameheight : '100%' }}"
+        data-ng-style="{'background-color': ikSlide.options.bgcolor }"
+        scrolling="{{ ikSlide.scroll }}">
+    </iframe>
+  </div>
+</div>
diff --git a/Resources/public/templates/default_templates/slides/ik-iframe/ik-iframe.scss b/Resources/public/templates/default_templates/slides/ik-iframe/ik-iframe.scss
@@ -9,6 +9,11 @@
   text-align: center;
   width: 100%;
 
+  &--wrapper {
+    width: 100%;
+    height: 100%;
+  }
+
   &.is-preview {
     padding-top: 0;
   }

diff --git a/Resources/public/templates/js/iframeSlide.js b/Resources/public/templates/js/iframeSlide.js
@@ -12,8 +12,9 @@ if (!window.slideFunctions['iframe']) {
      */
     setup: function setupIframeSlide(scope) {
       var slide = scope.ikSlide;
+      slide.hide = true;
 
-      scope.ikSlide.scroll = slide.options.disable_scrollbar ? "no" : "auto";
+      slide.scroll = slide.options.disable_scrollbar ? "no" : "auto";
 
       // Last time the slide was refreshed.
       slide.lastRefresh = 0;
@@ -52,6 +53,8 @@ if (!window.slideFunctions['iframe']) {
 
       var duration = slide.duration !== null ? slide.duration : 15;
 
+      slide.hide = false;
+
       // Wait fadeTime before start to account for fade in.
       region.$timeout(function () {
         // Set the progress bar animation.
@@ -60,9 +63,11 @@ if (!window.slideFunctions['iframe']) {
         // Wait for slide duration, then show next slide.
         // + fadeTime to account for fade out.
         region.$timeout(function () {
+          // Remove the iframe from the DOM when not in use to avoid javascript running from iframe.
+          slide.hide = true;
           region.nextSlide();
         }, duration * 1000 + region.fadeTime);
       }, region.fadeTime);
     }
   };
-}
+}
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,4 +1,4 @@
-var gulp = require('gulp-help')(require('gulp'));
+var gulp = require('gulp');
 
 // Plugins.
 var jshint = require('gulp-jshint');
@@ -53,7 +53,7 @@ var templates = {
 /**
  * Process SCSS using libsass
  */
-gulp.task('sass', 'Compile the sass for each templates into minified css files.', function () {
+gulp.task('sass', function (done) {
   'use strict';
 
   // Iterates through the screen and slide templates defined in templates variable, and compresses each one.
@@ -75,6 +75,8 @@ gulp.task('sass', 'Compile the sass for each templates into minified css files.'
       });
     }
   }
+
+  done();
 });
 
 // We only want to process our own non-processed JavaScript files.
@@ -111,7 +113,7 @@ var adminJsPath = (function () {
 /**
  * Run Javascript through JSHint.
  */
-gulp.task('jshint', 'Runs JSHint on js', function () {
+gulp.task('jshint', function () {
   return gulp.src(adminJsPath)
   .pipe(jshint())
   .pipe(jshint.reporter(stylish));
@@ -120,7 +122,7 @@ gulp.task('jshint', 'Runs JSHint on js', function () {
 /**
  * Build single app.js file.
  */
-gulp.task('js', 'Build all custom js files into one minified js file.', function () {
+gulp.task('js', function () {
     return gulp.src(adminJsPath)
     .pipe(concat('os2displaydefaulttemplate.js'))
     .pipe(ngAnnotate())
@@ -134,7 +136,7 @@ gulp.task('js', 'Build all custom js files into one minified js file.', function
 /**
  * Build single app.js file.
  */
-gulp.task('js-src', 'Report all source files for "js" task.', function () {
+gulp.task('js-src', function () {
   adminJsPath.forEach(function (path) {
     process.stdout.write(path + '\n');
   });

diff --git a/package.json b/package.json
@@ -3,28 +3,26 @@
   "description": "Default templates",
   "version": "1.0.0",
   "private": true,
-  "dependencies": {
-    "gulp": "^3.9.1",
+  "scripts": {
+    "gulp": "gulp"
+  },
+  "devDependencies": {
+    "gulp": "^4.0.2",
     "gulp-concat": "^2.6.1",
-    "gulp-header": "^1.8.9",
+    "gulp-header": "^2.0.9",
     "gulp-help": "^1.6.1",
-    "gulp-if": "^2.0.2",
+    "gulp-if": "^3.0.0",
     "gulp-jshint": "^2.1.0",
     "gulp-ng-annotate": "^2.1.0",
-    "gulp-notify": "^3.1.0",
-    "gulp-rename": "^1.2.2",
-    "gulp-sass": "^3.1.0",
-    "gulp-uglify": "^3.0.0",
+    "gulp-notify": "^3.2.0",
+    "gulp-rename": "^1.4.0",
+    "gulp-sass": "^4.0.2",
+    "gulp-uglify": "^3.0.2",
     "gulp-util": "^3.0.8",
-    "js-yaml": "^3.10.0",
+    "js-yaml": "^3.13.1",
+    "jshint": "^2.10.2",
     "jshint-stylish": "^2.2.1",
     "npm-font-open-sans": "^1.1.0",
-    "yargs": "^10.1.1"
-  },
-  "scripts": {
-    "gulp": "gulp"
-  },
-  "devDependencies": {
-    "jshint": "^2.10.1"
+    "yargs": "^14.0.0"
   }
 }