MOBILE-1275 modules: Show full description in new view

dpalou · dpalou · commit 4d473e4addc5 · 2015-11-19T11:04:40.000+01:00
diff --git a/www/addons/mod_imscp/directives/bar.js b/www/addons/mod_imscp/directives/bar.js
@@ -28,7 +28,7 @@ angular.module('mm.addons.mod_imscp')
  * @param {String}   next     ID of the next item.
  * @param {Function} action   Function to call when an arrow is clicked. Will receive as a param the itemId to load.
  */
-.directive('mmaModImscpBar', function($ionicModal) {
+.directive('mmaModImscpBar', function($state, $translate) {
     return {
         restrict: 'E',
         scope: {
@@ -39,20 +39,12 @@ angular.module('mm.addons.mod_imscp')
         },
         templateUrl: 'addons/mod_imscp/templates/bar.html',
         link: function(scope) {
-            $ionicModal.fromTemplateUrl('addons/mod_imscp/templates/description.html', {
-                scope: scope,
-                animation: 'slide-in-up'
-            }).then(function(modal) {
-                scope.showDescription = function() {
-                    modal.show();
-                };
-                scope.closeDescription = function() {
-                    modal.hide();
-                };
-                scope.$on('$destroy', function() {
-                    modal.remove();
+            scope.showDescription = function() {
+                $state.go('site.mm_textviewer', {
+                    title: $translate.instant('mm.core.description'),
+                    content: scope.description
                 });
-            });
+            };
         }
     };
 });
diff --git a/www/addons/mod_imscp/templates/description.html b/www/addons/mod_imscp/templates/description.html
diff --git a/www/core/components/course/templates/mod_description.html b/www/core/components/course/templates/mod_description.html
@@ -1,6 +1,6 @@
 <div class="card" ng-if="description">
     <div class="item item-text-wrap item-body">
-        <mm-format-text class="mm-content-with-float">{{ description }}</mm-format-text>
+        <mm-format-text class="mm-content-with-float" shorten="100" fullview-on-click="true">{{ description }}</mm-format-text>
         <p ng-if="note"><span class="item-note">{{ note }}</span></p>
     </div>
 </div>
diff --git a/www/core/components/textviewer/controllers/index.js b/www/core/components/textviewer/controllers/index.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.textviewer')
+
+/**
+ * Text viewer  controller.
+ *
+ * @module mm.core.textviewer
+ * @ngdoc controller
+ * @name mmTextViewerIndexCtrl
+ */
+.controller('mmTextViewerIndexCtrl', function($stateParams, $scope) {
+    $scope.title = $stateParams.title;
+    $scope.content = $stateParams.content;
+});
diff --git a/www/core/components/textviewer/main.js b/www/core/components/textviewer/main.js
@@ -0,0 +1,35 @@
+// (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.textviewer', [])
+
+.config(function($stateProvider) {
+
+    $stateProvider
+
+    .state('site.mm_textviewer', {
+        url: '/mm_textviewer',
+        params: {
+            title: null,
+            content: null
+        },
+        views: {
+            'site': {
+                templateUrl: 'core/components/textviewer/templates/textviewer.html',
+                controller: 'mmTextViewerIndexCtrl'
+            }
+        }
+    });
+
+});
diff --git a/www/core/components/textviewer/templates/textviewer.html b/www/core/components/textviewer/templates/textviewer.html
@@ -0,0 +1,6 @@
+<ion-view>
+    <ion-nav-title>{{ title }}</ion-nav-title>
+    <ion-content class="padding">
+        <mm-format-text class="mm-content-with-float">{{ content }}</mm-format-text>
+    </ion-content>
+</ion-view>
diff --git a/www/core/directives/formattext.js b/www/core/directives/formattext.js
@@ -30,10 +30,11 @@ angular.module('mm.core')
  *     -singleline: True if new lines should be removed (all the text in a single line). Only valid if clean is true.
  *     -shorten: Number of characters to shorten the text.
  *     -expand-on-click: Indicate if contents should be expanded on click (undo shorten). Only applied if "shorten" is set.
+ *     -fullview-on-click: Indicate if should open a new state with the full contents on click. Only applied if "shorten" is set.
  *     -watch: True if the variable used inside the directive should be watched for changes. If the variable data is retrieved
  *             asynchronously, this value must be set to true, or the directive should be inside a ng-if, ng-repeat or similar.
  */
-.directive('mmFormatText', function($interpolate, $mmText, $compile, $q, $translate) {
+.directive('mmFormatText', function($interpolate, $mmText, $compile, $translate, $state) {
 
     var extractVariableRegex = new RegExp('{{([^|]+)(|.*)?}}', 'i'),
         tagsToIgnore = ['AUDIO', 'VIDEO', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'A'];
@@ -45,14 +46,23 @@ angular.module('mm.core')
      * @param  {Object} element Directive root DOM element.
      * @param  {Object} attrs   Directive attributes.
      * @param  {String} text    Directive contents.
-     * @return {Promise}        Promise resolved with the formatted text.
+     * @return {Void}
      */
     function formatAndRenderContents(scope, element, attrs, text) {
-        // If expandOnClick is set we won't shorten the text on interpolateAndFormat, we'll do it later.
-        var shorten = attrs.expandOnClick ? 0 : attrs.shorten;
 
-        interpolateAndFormat(scope, element, attrs, text, shorten).then(function(fullText) {
-            if (attrs.shorten && attrs.expandOnClick) {
+        if (typeof text == 'undefined') {
+            element.removeClass('hide');
+            return;
+        }
+
+        // If expandOnClick or fullviewOnClick are set we won't shorten the text on formatContents, we'll do it later.
+        var shorten = (attrs.expandOnClick || attrs.fullviewOnClick) ? 0 : attrs.shorten;
+
+        text = $interpolate(text)(scope); // "Evaluate" scope variables.
+        text = text.trim();
+
+        formatContents(scope, element, attrs, text, shorten).then(function(fullText) {
+            if (attrs.shorten && (attrs.expandOnClick || attrs.fullviewOnClick)) {
                 var shortened = $mmText.shortenText($mmText.cleanTags(fullText, false), parseInt(attrs.shorten)),
                     expanded = false;
 
@@ -69,7 +79,7 @@ angular.module('mm.core')
 
                     if (hasContent) {
                         // The content has meaningful tags. Show a placeholder to expand the content.
-                        shortened = $translate.instant('mm.core.clicktohideshow');
+                        shortened = $translate.instant(attrs.expandOnClick ? 'mm.core.clicktohideshow' : 'mm.core.clicktoseefull');
                     }
                 }
 
@@ -78,10 +88,19 @@ angular.module('mm.core')
                     e.stopPropagation();
                     var target = e.target;
                     if (tagsToIgnore.indexOf(target.tagName) === -1 || (target.tagName === 'A' && !target.getAttribute('href'))) {
-                        expanded = !expanded;
-                        element.html( expanded ? fullText : shortened);
-                        if (expanded) {
-                            $compile(element.contents())(scope);
+                        if (attrs.expandOnClick) {
+                            // Expand/collapse.
+                            expanded = !expanded;
+                            element.html( expanded ? fullText : shortened);
+                            if (expanded) {
+                                $compile(element.contents())(scope);
+                            }
+                        } else {
+                            // Open a new state with the interpolated contents.
+                            $state.go('site.mm_textviewer', {
+                                title: $translate.instant('mm.core.description'),
+                                content: text
+                            });
                         }
                     }
                 });
@@ -94,7 +113,7 @@ angular.module('mm.core')
     }
 
     /**
-     * Interpolate contents, apply formatText and set sub-directives.
+     * Apply formatText and set sub-directives.
      *
      * @param  {Object} scope     Directive scope.
      * @param  {Object} element   Directive root DOM element.
@@ -103,20 +122,12 @@ angular.module('mm.core')
      * @param  {Number} [shorten] Number of characters to shorten contents to. If not defined, don't shorten the text.
      * @return {Promise}          Promise resolved with the formatted text.
      */
-    function interpolateAndFormat(scope, element, attrs, text, shorten) {
+    function formatContents(scope, element, attrs, text, shorten) {
 
         var siteId = scope.siteid,
             component = attrs.component,
             componentId = attrs.componentId;
 
-        if (typeof text == 'undefined') {
-            element.removeClass('hide');
-            return $q.reject();
-        }
-
-        text = $interpolate(text)(scope); // "Evaluate" scope variables.
-        text = text.trim();
-
         // Apply format text function.
         return $mmText.formatText(text, attrs.clean, attrs.singleline, shorten).then(function(formatted) {
 
diff --git a/www/core/lang/en.json b/www/core/lang/en.json
@@ -9,6 +9,7 @@
     "choose": "Choose",
     "clearsearch": "Clear search",
     "clicktohideshow": "Click to expand or collapse",
+    "clicktoseefull": "Click to see full contents.",
     "close": "Close",
     "completion-alt-auto-fail": "Completed: {{$a}} (did not achieve pass grade)",
     "completion-alt-auto-n": "Not completed: {{$a}}",
