Merge pull request #1899 from dpalou/MOBILE-3010

Mobile 3010

src/addon/mod/resource/providers/module-handler.ts

@@ -175,7 +175,9 @@ export class AddonModResourceModuleHandler implements CoreCourseModuleHandler {
             if (module.contentsinfo) {
                 // No need to use the list of files.
                 const mimetype = module.contentsinfo.mimetypes[0];
+                if (mimetype) {
                     resourceData.icon = this.mimetypeUtils.getMimetypeIcon(mimetype);
+                }
                 resourceData.extra = this.textUtils.cleanTags(module.afterlink);
 
             } else if (files && files.length) {

src/components/bs-tooltip/bs-tooltip.scss

@@ -0,0 +1,2 @@
+ion-app.app-root core-bs-tooltip {
+}

src/components/bs-tooltip/bs-tooltip.ts

@@ -0,0 +1,33 @@
+// (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.
+
+import { Component } from '@angular/core';
+import { NavParams } from 'ionic-angular';
+
+/**
+ * Component to display a Bootstrap Tooltip in a popover.
+ */
+@Component({
+    selector: 'core-bs-tooltip',
+    templateUrl: 'core-bs-tooltip.html'
+})
+export class CoreBSTooltipComponent {
+    content: string;
+    html: boolean;
+
+    constructor(navParams: NavParams) {
+        this.content = navParams.get('content') || '';
+        this.html = !!navParams.get('html');
+    }
+}

src/components/bs-tooltip/core-bs-tooltip.html

@@ -0,0 +1,4 @@
+<ion-item text-wrap>
+    <p *ngIf="html" [innerHTML]="content"></p>
+    <p *ngIf="!html">{{content}}</p>
+</ion-item>

src/components/components.module.ts

@@ -53,6 +53,7 @@ import { CoreIonTabComponent } from './ion-tabs/ion-tab';
 import { CoreInfiniteLoadingComponent } from './infinite-loading/infinite-loading';
 import { CoreUserAvatarComponent } from './user-avatar/user-avatar';
 import { CoreStyleComponent } from './style/style';
+import { CoreBSTooltipComponent } from './bs-tooltip/bs-tooltip';
 
 @NgModule({
     declarations: [
@@ -91,12 +92,14 @@ import { CoreStyleComponent } from './style/style';
         CoreIonTabComponent,
         CoreInfiniteLoadingComponent,
         CoreUserAvatarComponent,
-        CoreStyleComponent
+        CoreStyleComponent,
+        CoreBSTooltipComponent
     ],
     entryComponents: [
         CoreContextMenuPopoverComponent,
         CoreCoursePickerMenuPopoverComponent,
-        CoreRecaptchaModalComponent
+        CoreRecaptchaModalComponent,
+        CoreBSTooltipComponent
     ],
     imports: [
         IonicModule,
@@ -137,7 +140,8 @@ import { CoreStyleComponent } from './style/style';
         CoreIonTabComponent,
         CoreInfiniteLoadingComponent,
         CoreUserAvatarComponent,
-        CoreStyleComponent
+        CoreStyleComponent,
+        CoreBSTooltipComponent
     ]
 })
 export class CoreComponentsModule {}

src/directives/format-text.ts

@@ -442,6 +442,8 @@ export class CoreFormatTextDirective implements OnChanges {
                 this.iframeUtils.treatFrame(frame);
             });
 
+            this.domUtils.handleBootstrapTooltips(div);
+
             return div;
         });
     }

src/providers/utils/dom.ts

@@ -14,8 +14,8 @@
 
 import { Injectable, SimpleChange } from '@angular/core';
 import {
-    LoadingController, Loading, ToastController, Toast, AlertController, Alert, Platform, Content,
-    ModalController
+    LoadingController, Loading, ToastController, Toast, AlertController, Alert, Platform, Content, PopoverController,
+    ModalController,
 } from 'ionic-angular';
 import { DomSanitizer } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
@@ -24,6 +24,7 @@ import { CoreAppProvider } from '../app';
 import { CoreConfigProvider } from '../config';
 import { CoreUrlUtilsProvider } from './url';
 import { CoreConstants } from '@core/constants';
+import { CoreBSTooltipComponent } from '@components/bs-tooltip/bs-tooltip';
 import { Md5 } from 'ts-md5/dist/md5';
 import { Subject } from 'rxjs';
 
@@ -65,7 +66,7 @@ export class CoreDomUtilsProvider {
     constructor(private translate: TranslateService, private loadingCtrl: LoadingController, private toastCtrl: ToastController,
             private alertCtrl: AlertController, private textUtils: CoreTextUtilsProvider, private appProvider: CoreAppProvider,
             private platform: Platform, private configProvider: CoreConfigProvider, private urlUtils: CoreUrlUtilsProvider,
-            private modalCtrl: ModalController, private sanitizer: DomSanitizer) {
+            private modalCtrl: ModalController, private sanitizer: DomSanitizer, private popoverCtrl: PopoverController) {
 
         // Check if debug messages should be displayed.
         configProvider.get(CoreConstants.SETTINGS_DEBUG_DISPLAY, false).then((debugDisplay) => {
@@ -564,6 +565,45 @@ export class CoreDomUtilsProvider {
         return this.instances[id];
     }
 
+    /**
+     * Handle bootstrap tooltips in a certain element.
+     *
+     * @param {HTMLElement} element Element to check.
+     */
+    handleBootstrapTooltips(element: HTMLElement): void {
+        const els = Array.from(element.querySelectorAll('[data-toggle="tooltip"]'));
+
+        els.forEach((el) => {
+            const content = el.getAttribute('title') || el.getAttribute('data-original-title'),
+                trigger = el.getAttribute('data-trigger') || 'hover focus',
+                treated = el.getAttribute('data-bstooltip-treated');
+
+            if (!content || treated === 'true' ||
+                    (trigger.indexOf('hover') == -1 && trigger.indexOf('focus') == -1 && trigger.indexOf('click') == -1)) {
+                return;
+            }
+
+            el.setAttribute('data-bstooltip-treated', 'true'); // Mark it as treated.
+
+            // Store the title in data-original-title instead of title, like BS does.
+            el.setAttribute('data-original-title', content);
+            el.setAttribute('title', '');
+
+            el.addEventListener('click', (e) => {
+                const html = el.getAttribute('data-html');
+
+                const popover = this.popoverCtrl.create(CoreBSTooltipComponent, {
+                    content: content,
+                    html: html === 'true'
+                });
+
+                popover.present({
+                    ev: e
+                });
+            });
+        });
+    }
+
     /**
      * Check if an element is outside of screen (viewport).
      *