Merge pull request #220 from ezsystems/ezp-24298-studio_iframe_descri…

…ption

EZP-24298: Display an iframe in the studio and studio+ description

Resources/config/css.yml

@@ -40,6 +40,8 @@ system:
                 - '@eZPlatformUIBundle/Resources/public/css/views/fieldedit.css'
                 - '@eZPlatformUIBundle/Resources/public/css/views/error.css'
                 - '@eZPlatformUIBundle/Resources/public/css/views/asynchronous.css'
+                - '@eZPlatformUIBundle/Resources/public/css/views/studiopresentation.css'
+                - '@eZPlatformUIBundle/Resources/public/css/views/studiopluspresentation.css'
                 - '@eZPlatformUIBundle/Resources/public/css/views/fields/edit/checkbox.css'
                 - '@eZPlatformUIBundle/Resources/public/css/views/fields/edit/textline.css'
                 - '@eZPlatformUIBundle/Resources/public/css/views/fields/edit/keyword.css'

Resources/config/yui.yml

@@ -118,13 +118,13 @@ system:
                     type: 'template'
                     path: %ez_platformui.public_dir%/templates/locationview.hbt
                 ez-studiopresentationview:
-                    requires: ['ez-templatebasedview', 'studiopresentationview-ez-template']
+                    requires: ['ez-templatebasedview', 'studiopresentationview-ez-template', 'ez-height-fit']
                     path: %ez_platformui.public_dir%/js/views/ez-studiopresentationview.js
                 studiopresentationview-ez-template:
                     type: 'template'
                     path: %ez_platformui.public_dir%/templates/studiopresentation.hbt
                 ez-studiopluspresentationview:
-                    requires: ['ez-templatebasedview', 'studiopluspresentationview-ez-template']
+                    requires: ['ez-templatebasedview', 'studiopluspresentationview-ez-template', 'ez-height-fit']
                     path: %ez_platformui.public_dir%/js/views/ez-studiopluspresentationview.js
                 studiopluspresentationview-ez-template:
                     type: 'template'
@@ -661,6 +661,9 @@ system:
                 ez-expandable:
                     requires: ['view']
                     path: %ez_platformui.public_dir%/js/extensions/ez-expandable.js
+                ez-height-fit:
+                    requires: ['view', 'node-screen', 'node-style']
+                    path: %ez_platformui.public_dir%/js/extensions/ez-height-fit.js
                 ez-accordion-element:
                     requires: ['transition']
                     path: %ez_platformui.public_dir%/js/extensions/ez-accordion-element.js

Resources/public/css/theme/views/studiopluspresentation.css

@@ -4,7 +4,9 @@
  */
 
 .ez-view-studiopluspresentationview {
-    /* for test purpose */
-    padding: 1em;
     background: #fff;
 }
+
+.ez-view-studiopluspresentationview .ez-studiopluspresentation-content {
+    border: 0;
+}

Resources/public/css/theme/views/studiopresentation.css

@@ -4,7 +4,9 @@
  */
 
 .ez-view-studiopresentationview {
-    /* for test purpose */
-    padding: 1em;
     background: #fff;
 }
+
+.ez-view-studiopresentationview .ez-studiopresentation-content {
+    border: 0;
+}

Resources/public/css/views/studiopluspresentation.css

@@ -0,0 +1,9 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ez-view-studiopluspresentationview .ez-studiopluspresentation-content {
+    width: 100%;
+    height: 100%;
+}

Resources/public/css/views/studiopresentation.css

@@ -0,0 +1,9 @@
+/**
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+
+.ez-view-studiopresentationview .ez-studiopresentation-content {
+    width: 100%;
+    height: 100%;
+}

Resources/public/js/extensions/ez-height-fit.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) eZ Systems AS. All rights reserved.
+ * For full copyright and license information view LICENSE file distributed with this source code.
+ */
+YUI.add('ez-height-fit', function (Y) {
+    "use strict";
+    /**
+     * The height fit extension
+     *
+     * @module ez-height-fit
+     */
+    Y.namespace('eZ');
+
+    /**
+     * Views extension providing the content of height fit . When, `fitted to height`, the view
+     * container scales to match the viewport's height new dimension.
+     *
+     * @namespace eZ
+     * @class HeightFit
+     * @extensionfor Y.View
+     */
+    Y.eZ.HeightFit = Y.Base.create('heightFitExtension', Y.View, [], {
+        initializer: function () {
+            this.after('activeChange', function () {
+                if (this.get('active')) {
+                    this._uiSetHeight();
+                }
+            });
+        },
+
+        /**
+         * Sets the height of the view
+         *
+         * @private
+         * @method _uiSetHeight
+         */
+        _uiSetHeight: function () {
+            var container = this.get('container');
+
+            container.setStyle(
+                'height', container.get('winHeight') - container.getY() + 'px'
+            );
+        },
+    });
+});

Resources/public/js/views/ez-studiopluspresentationview.js

@@ -19,7 +19,11 @@ YUI.add('ez-studiopluspresentationview', function (Y) {
      * @constructor
      * @extends eZ.TemplateBasedView
      */
-    Y.eZ.StudioPlusPresentationView = Y.Base.create('studioPlusPresentationView', Y.eZ.TemplateBasedView, [], {
+    Y.eZ.StudioPlusPresentationView = Y.Base.create('studioPlusPresentationView', Y.eZ.TemplateBasedView, [Y.eZ.HeightFit], {
+        initializer: function () {
+            this.after('activeChange', this._setIFrameSource);
+        },
+
         /**
          * Renders the studio plus presentation view
          *
@@ -28,7 +32,35 @@ YUI.add('ez-studiopluspresentationview', function (Y) {
          */
         render: function () {
             this.get('container').setHTML(this.template());
+            this._attachedViewEvents.push(Y.on("windowresize", Y.bind(this._uiSetHeight, this)));
+
             return this;
+        },
+
+        /**
+         * Sets the source of the iframe to the value of the iframeSource attribute.
+         *
+         * @method _setIFrameSource
+         * @private
+         */
+        _setIFrameSource: function () {
+            this.get('container').one('.ez-studiopluspresentation-content').set('src', this.get('iframeSource'));
         }
+
+    }, {
+        ATTRS: {
+            /**
+             * Stores the iframe Source
+             *
+             * @attribute iframeSource
+             * @type String
+             * @default 'http://ez.no/in-product-studioplus-teaser'
+             * @readOnly
+             */
+            iframeSource: {
+                value: 'http://ez.no/in-product-studioplus-teaser',
+                readOnly: true,
+            },
+        },
     });
 });

Resources/public/js/views/ez-studiopresentationview.js

@@ -19,7 +19,12 @@ YUI.add('ez-studiopresentationview', function (Y) {
      * @constructor
      * @extends eZ.TemplateBasedView
      */
-    Y.eZ.StudioPresentationView = Y.Base.create('studioPresentationView', Y.eZ.TemplateBasedView, [], {
+    Y.eZ.StudioPresentationView = Y.Base.create('studioPresentationView', Y.eZ.TemplateBasedView, [Y.eZ.HeightFit], {
+
+        initializer: function () {
+            this.after('activeChange', this._setIFrameSource);
+        },
+
         /**
          * Renders the studio presentation view
          *
@@ -28,7 +33,35 @@ YUI.add('ez-studiopresentationview', function (Y) {
          */
         render: function () {
             this.get('container').setHTML(this.template());
+            this._attachedViewEvents.push(Y.on("windowresize", Y.bind(this._uiSetHeight, this)));
+
             return this;
+        },
+
+        /**
+         * Sets the source of the iframe to the value of the iframeSource attribute.
+         *
+         * @method _setIFrameSource
+         * @private
+         */
+        _setIFrameSource: function () {
+            this.get('container').one('.ez-studiopresentation-content').set('src', this.get('iframeSource'));
         }
+
+    }, {
+        ATTRS: {
+            /**
+             * Stores the iframe Source
+             *
+             * @attribute iframeSource
+             * @type String
+             * @default 'http://ez.no/in-product-studio-teaser'
+             * @readOnly
+             */
+            iframeSource: {
+                value: 'http://ez.no/in-product-studio-teaser',
+                readOnly: true,
+            },
+        },
     });
 });

Resources/public/templates/studiopluspresentation.hbt

@@ -1,22 +1 @@
-<p>You don't have eZ Studio Plus Installed :(</p>
-
-<h1>Learn more about eZ Studio Plus</h1>
-
-<p>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis tristique felis, in euismod
-    ipsum sollicitudin vitae. Morbi pellentesque ut purus non placerat. Vivamus sollicitudin condimentum
-    nunc, eget euismod dolor. Etiam ultricies sit amet dui vel sagittis. Maecenas vitae fermentum urna.
-    Sed aliquam lacinia ante, ac convallis justo pulvinar ac. Nunc pellentesque lobortis diam, nec
-    placerat sapien pulvinar ac. Nullam euismod mattis dictum. Suspendisse consectetur, nisl vel
-    porttitor bibendum, eros nisi placerat est, ut mattis magna lorem ac dolor. Aliquam viverra sit
-    amet purus eu tincidunt.
-</p>
-
-<p>
-Quisque ut tincidunt elit. Pellentesque nulla felis, vestibulum non eros vitae, lacinia luctus odio.
-    Etiam dapibus metus eget bibendum mattis. Donec lectus risus, hendrerit non condimentum et,
-    venenatis nec neque. Etiam sed varius arcu. Nulla ullamcorper luctus augue, blandit tempor neque
-    lobortis sit amet. Mauris ac eleifend augue. Etiam condimentum auctor ex, nec vehicula nunc aliquam
-    et. Quisque sagittis sed mi maximus rutrum. Proin eu enim non neque viverra iaculis. In hac habitasse
-    platea dictumst. Aenean euismod nunc urna, id iaculis nisl gravida vel.
-</p>
+<iframe class="ez-studiopluspresentation-content" src="about:blank"></iframe>

Resources/public/templates/studiopresentation.hbt

@@ -1,22 +1 @@
-<p>You don't have eZ Studio Installed :(</p>
-
-<h1>Learn more about eZ Studio</h1>
-
-<p>
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis tristique felis, in euismod
-    ipsum sollicitudin vitae. Morbi pellentesque ut purus non placerat. Vivamus sollicitudin condimentum
-    nunc, eget euismod dolor. Etiam ultricies sit amet dui vel sagittis. Maecenas vitae fermentum urna.
-    Sed aliquam lacinia ante, ac convallis justo pulvinar ac. Nunc pellentesque lobortis diam, nec
-    placerat sapien pulvinar ac. Nullam euismod mattis dictum. Suspendisse consectetur, nisl vel
-    porttitor bibendum, eros nisi placerat est, ut mattis magna lorem ac dolor. Aliquam viverra sit
-    amet purus eu tincidunt.
-</p>
-
-<p>
-Quisque ut tincidunt elit. Pellentesque nulla felis, vestibulum non eros vitae, lacinia luctus odio.
-    Etiam dapibus metus eget bibendum mattis. Donec lectus risus, hendrerit non condimentum et,
-    venenatis nec neque. Etiam sed varius arcu. Nulla ullamcorper luctus augue, blandit tempor neque
-    lobortis sit amet. Mauris ac eleifend augue. Etiam condimentum auctor ex, nec vehicula nunc aliquam
-    et. Quisque sagittis sed mi maximus rutrum. Proin eu enim non neque viverra iaculis. In hac habitasse
-    platea dictumst. Aenean euismod nunc urna, id iaculis nisl gravida vel.
-</p>
+<iframe class="ez-studiopresentation-content" src="about:blank"></iframe>

Tests/js/assets/dummy-iframe.htm

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>Dummy Iframe</title>
+</head>
+<body>
+<p>I am the content of an iframe and I can be called from unit tests :)</p>
+
+</body>
+</html>

Tests/js/views/assets/ez-studiopluspresentationview-tests.js

@@ -9,7 +9,9 @@ YUI.add('ez-studiopluspresentationview-tests', function (Y) {
         name: "eZ Studio Plus Presentation View test",
 
         setUp: function () {
-            this.view = new Y.eZ.StudioPlusPresentationView();
+            this.view = new Y.eZ.StudioPlusPresentationView({container: '.container'});
+            this.dummyIframeFile = '/Tests/js/assets/dummy-iframe.htm';
+            this.view._set('iframeSource', this.dummyIframeFile);
         },
 
         tearDown: function () {
@@ -28,6 +30,34 @@ YUI.add('ez-studiopluspresentationview-tests', function (Y) {
             this.view.render();
             Y.Assert.isTrue(templateCalled, "The template should have been used to render this.view");
         },
+
+        "Test height fit": function () {
+            var container = this.view.get('container');
+            this.view.render();
+            this.view.set('active', true);
+
+            Y.Assert.areSame(
+                container.get('winHeight') - container.getY() + "px",
+                container.getStyle('height'),
+                "The height of the container should have been adapted to the windows size"
+            );
+        },
+
+        "Test iframe link": function () {
+            var iframeSource;
+            this.view.render();
+            this.view.set('active', true);
+
+            iframeSource = this.view.get('container').one('.ez-studiopluspresentation-content').get('src');
+
+            Y.Assert.isTrue(
+                iframeSource.indexOf(
+                    this.dummyIframeFile,
+                    iframeSource.length - this.dummyIframeFile.length
+                ) !== -1,
+                'Link of the iframe should have been replaced'
+            );
+        }
     });
 
     Y.Test.Runner.setName("eZ Studio Plus Presentation View tests");

Tests/js/views/assets/ez-studiopresentationview-tests.js

@@ -9,7 +9,9 @@ YUI.add('ez-studiopresentationview-tests', function (Y) {
         name: "eZ Studio Presentation View test",
 
         setUp: function () {
-            this.view = new Y.eZ.StudioPresentationView();
+            this.view = new Y.eZ.StudioPresentationView({container: '.container'});
+            this.dummyIframeFile = '/Tests/js/assets/dummy-iframe.htm';
+            this.view._set('iframeSource', this.dummyIframeFile);
         },
 
         tearDown: function () {
@@ -28,6 +30,34 @@ YUI.add('ez-studiopresentationview-tests', function (Y) {
             this.view.render();
             Y.Assert.isTrue(templateCalled, "The template should have been used to render this.view");
         },
+
+        "Test height fit": function () {
+            var container = this.view.get('container');
+            this.view.render();
+            this.view.set('active', true);
+
+            Y.Assert.areSame(
+                container.get('winHeight') - container.getY() + "px",
+                container.getStyle('height'),
+                "The height of the container should have been adapted to the windows size"
+            );
+        },
+
+        "Test iframe link": function () {
+            var iframeSource;
+            this.view.render();
+            this.view.set('active', true);
+
+            iframeSource = this.view.get('container').one('.ez-studiopresentation-content').get('src');
+
+            Y.Assert.isTrue(
+                iframeSource.indexOf(
+                    this.dummyIframeFile,
+                    iframeSource.length - this.dummyIframeFile.length
+                ) !== -1,
+                'Link of the iframe should have been replaced'
+            );
+        }
     });
 
     Y.Test.Runner.setName("eZ Studio Presentation View tests");