MOBILE-1859 sidemenu: Allow embedded custom items

Author: dpalou

www/core/components/sidemenu/controllers/iframe.js

@@ -0,0 +1,27 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+angular.module('mm.core.sidemenu')
+
+/**
+ * Controller of the iframe viewer.
+ *
+ * @module mm.core.sidemenu
+ * @ngdoc controller
+ * @name mmSideMenuIframeViewCtrl
+ */
+.controller('mmSideMenuIframeViewCtrl', function($scope, $stateParams, $sce) {
+    $scope.title = $stateParams.title;
+    $scope.url = $sce.trustAsResourceUrl($stateParams.url);
+});

www/core/components/sidemenu/main.js

@@ -33,6 +33,20 @@ angular.module('mm.core.sidemenu', [])
                 $state.go('mm_login.init');
             }
         }
+    })
+
+    .state('site.iframe-view', {
+        url: '/iframe-view',
+        params: {
+            title: null,
+            url: null
+        },
+        views: {
+            'site': {
+                templateUrl: 'core/components/sidemenu/templates/iframe.html',
+                controller: 'mmSideMenuIframeViewCtrl'
+            }
+        }
     });
 
 })

www/core/components/sidemenu/templates/iframe.html

@@ -0,0 +1,6 @@
+<ion-view>
+    <ion-nav-title>{{ title }}</ion-nav-title>
+    <ion-content mm-state-class>
+        <mm-iframe src="url"></mm-iframe>
+    </ion-content>
+</ion-view>

www/core/components/sidemenu/templates/menu.html

@@ -45,7 +45,10 @@ <h2>{{siteinfo.fullname}}</h2>
                         </a>
                     </li>
                     <li ng-repeat="item in customItems" class="mm-sidemenu-customitem">
-                        <a menu-close class="item item-icon-left" ng-href="{{item.url}}" mm-link in-app="{{item.type == 'inappbrowser'}}" title="{{item.label}}">
+                        <a ng-if="item.type != 'embedded'" menu-close class="item item-icon-left" ng-href="{{item.url}}" mm-link in-app="{{item.type == 'inappbrowser'}}" title="{{item.label}}">
+                            <i class="icon {{item.icon}}"></i>{{item.label}}
+                        </a>
+                        <a ng-if="item.type == 'embedded'" menu-close class="item item-icon-left" ui-sref="site.iframe-view({title: item.label, url: item.url})" title="{{item.label}}">
                             <i class="icon {{item.icon}}"></i>{{item.label}}
                         </a>
                     </li>

www/core/directives/iframe.js

@@ -14,6 +14,8 @@
 
 angular.module('mm.core')
 
+.constant('mmCoreIframeTimeout', 15000)
+
 /**
  * Directive to display content in an iframe.
  *
@@ -27,7 +29,7 @@ angular.module('mm.core')
  * @param {Mixed} [width=100%]  Width of the iframe. If not defined, use 100%.
  * @param {Mixed} [height=100%] Height of the iframe. If not defined, use 100%.
  */
-.directive('mmIframe', function($log, $mmUtil, $mmText, $mmSite, $mmFS) {
+.directive('mmIframe', function($log, $mmUtil, $mmText, $mmSite, $mmFS, $timeout, mmCoreIframeTimeout) {
     $log = $log.getInstance('mmIframe');
 
     var tags = ['iframe', 'frame', 'object', 'embed'];
@@ -195,17 +197,38 @@ angular.module('mm.core')
 
     return {
         restrict: 'E',
-        template: '<div class="iframe-wrapper"><iframe class="mm-iframe" ng-style="{\'width\': width, \'height\': height}" ng-src="{{src}}"></iframe></div>',
+        templateUrl: 'core/templates/iframe.html',
         scope: {
             src: '='
         },
         link: function(scope, element, attrs) {
+            var url = (scope.src && scope.src.toString()) || '',  // Convert $sce URLs to string URLs.
+                iframe = angular.element(element.find('iframe')[0]);
+
             scope.width = $mmUtil.formatPixelsSize(attrs.iframeWidth) || '100%';
             scope.height = $mmUtil.formatPixelsSize(attrs.iframeHeight) || '100%';
 
-            var iframe = angular.element(element.find('iframe')[0]);
+            // Show loading only with external URLs.
+            scope.loading = !!url.match(/^https?:\/\//i);
+
             treatFrame(iframe);
 
+            if (scope.loading) {
+                iframe.on('load', function() {
+                    scope.loading = false;
+                    $timeout(); // Use $timeout to force a digest and update the view.
+                });
+
+                iframe.on('error', function() {
+                    scope.loading = false;
+                    $mmUtil.showErrorModal('mm.core.errorloadingcontent', true);
+                    $timeout(); // Use $timeout to force a digest and update the view.
+                });
+
+                $timeout(function() {
+                    scope.loading = false;
+                }, mmCoreIframeTimeout);
+            }
         }
     };
 });

www/core/lang/en.json

@@ -60,6 +60,7 @@
     "errorfileexistssamename": "There's already a file with this name.",
     "errorinvalidform": "The form contains invalid data. Please make sure to fill all required fields and that the data is valid.",
     "errorinvalidresponse": "Invalid response received. Please contact your Moodle site administrator if the error persists.",
+    "errorloadingcontent": "Error loading content.",
     "erroropenfilenoapp": "Error opening the file: no app found to open this kind of file.",
     "erroropenfilenoextension": "Error opening the file: the file doesn't have extension.",
     "erroropenpopup": "This activity is trying to open a popup. This is not supported in this app.",

www/core/templates/iframe.html

@@ -0,0 +1,4 @@
+<div class="iframe-wrapper" ng-class="{'mm-loading-container': loading}">
+    <iframe ng-show="!loading" class="mm-iframe" ng-style="{'width': width, 'height': height}" ng-src="{{src}}"></iframe>
+    <ion-spinner ng-if="loading"></ion-spinner>
+</div>