Merge pull request #287 from dpalou/MOBILE-1275

jleyva · jleyva · commit f33c1c9a3141 · 2015-11-20T11:21:26.000+01:00
Mobile 1275
diff --git a/www/addons/mod_forum/templates/discussions.html b/www/addons/mod_forum/templates/discussions.html
@@ -26,7 +26,7 @@ <h2><summary>{{discussion.subject}}</summary></h2>
                                     <p>{{discussion.userfullname}}</p>
                                 </div>
                                 <div class="item item-body">
-                                    <p><mm-format-text watch="true" clean="true" shorten="150">{{discussion.message}}</mm-format-text></p>
+                                    <p><mm-format-text watch="true" clean="true" shorten>{{discussion.message}}</mm-format-text></p>
                                     <span class="item-note text-right">
                                         <span ng-if="discussion.groupname">
                                             <i class="icon ion-ios-people"></i> {{ discussion.groupname }}
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 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/courses/templates/list.html b/www/core/components/courses/templates/list.html
@@ -20,7 +20,7 @@ <h2><mm-format-text watch="true">{{course.fullname}}</mm-format-text></h2>
                 <div class="item item-text-wrap" ng-show="course.summary">
                     <p>
                         <summary>
-                            <mm-format-text class="mm-content-with-float" watch="true" shorten="150" expand-on-click="true">{{course.summary}}</mm-format-text>
+                            <mm-format-text class="mm-content-with-float" watch="true" shorten="40%" expand-on-click="true">{{course.summary}}</mm-format-text>
                         </summary>
                     </p>
                 </div>
diff --git a/www/core/components/courses/templates/search.html b/www/core/components/courses/templates/search.html
@@ -21,7 +21,7 @@ <h2><mm-format-text watch="true">{{course.fullname}}</mm-format-text></h2>
                 <div class="item item-text-wrap" ng-if="course.summary">
                     <p>
                         <summary>
-                            <mm-format-text class="mm-content-with-float" watch="true" shorten="150" expand-on-click="true">{{course.summary}}</mm-format-text>
+                            <mm-format-text class="mm-content-with-float" watch="true" shorten="40%" expand-on-click="true">{{course.summary}}</mm-format-text>
                         </summary>
                     </p>
                 </div>
diff --git a/www/core/components/courses/templates/viewresult.html b/www/core/components/courses/templates/viewresult.html
@@ -18,7 +18,7 @@ <h2><mm-format-text watch="true">{{course.fullname}}</mm-format-text></h2>
                 <div class="item item-text-wrap" ng-if="course.summary">
                     <p>
                         <summary>
-                            <mm-format-text class="mm-content-with-float" watch="true" shorten="150" expand-on-click="true">{{course.summary}}</mm-format-text>
+                            <mm-format-text class="mm-content-with-float" watch="true" shorten="40%" expand-on-click="true">{{course.summary}}</mm-format-text>
                         </summary>
                     </p>
                 </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
@@ -28,31 +28,84 @@ angular.module('mm.core')
  *     -after-render: Scope function to call once the content is renderered. Passes the current scope as argument.
  *     -clean: True if all HTML tags should be removed, false otherwise.
  *     -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.
+ *     -shorten: To shorten the text. If a number is supplied, it will shorten the text to that number of characters.
+ *               If a percentage is supplied the number of characters to short will be the percentage of element's width.
+ *               E.g. 50% of an element with 1000px width = 500 characters.
+ *               If the element has no width it'll use 100 characters. If the attribute is empty it'll use 30% width.
  *     -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'];
 
+    /**
+     * Returns the number of characters to shorten the text. If the text shouldn't be shortened, returns undefined.
+     *
+     * @param  {Object} element   Directive root DOM element.
+     * @param  {String} [shorten] Shorten attribute. Can be undefined or a string: empty, number or a percentage.
+     * @return {Number}           Number of characters to shorten the text to. Undefined if it shouldn't shorten.
+     */
+    function calculateShorten(element, shorten) {
+        var multiplier;
+
+        if (typeof shorten == 'string' && shorten.indexOf('%') > -1) {
+            // It's a percentage. Extract the multiplier.
+            multiplier = parseInt(shorten.replace(/%/g, '').trim()) / 100;
+            if (isNaN(multiplier)) {
+                multiplier = 0.3;
+            }
+        } else if (typeof shorten != 'undefined' && shorten === '') {
+            // Not defined, use default value.
+            multiplier = 0.3;
+        } else {
+            var number = parseInt(shorten);
+            if (isNaN(number)) {
+                return; // Return undefined so it's not shortened.
+            } else {
+                return number;
+            }
+        }
+
+        var el = element[0],
+            elWidth = el.offsetWidth || el.width || el.clientWidth;
+        if (!elWidth) {
+            // Cannot calculate element's width, use default value.
+            return 100;
+        } else {
+            return Math.round(elWidth * multiplier);
+        }
+    }
+
     /**
      * Format contents and render.
      *
      * @param  {Object} scope   Directive scope.
      * @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;
+        }
+
+        attrs.shorten = calculateShorten(element, attrs.shorten);
+
+        // 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 +122,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 +131,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 +156,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 +165,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}}",
