Merge pull request #1805 from albertgasset/MOBILE-2902

Mobile 2902

src/addon/mod/data/components/index/addon-mod-data-index.html

@@ -67,9 +67,7 @@
     </ng-container>
 
     <div class="addon-data-contents addon-data-entries-{{data.id}}" *ngIf="!isEmpty">
-        <style *ngIf="cssTemplate">
+        <core-style [css]="data.csstemplate" prefix=".addon-data-entries-{{data.id}}"></core-style>
-            {{ cssTemplate }}
-        </style>
 
         <core-compile-html [text]="entriesRendered" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html>
     </div>

src/addon/mod/data/components/index/index.ts

@@ -67,7 +67,6 @@ export class AddonModDataIndexComponent extends CoreCourseModuleMainActivityComp
     offlineActions: any;
     offlineEntries: any;
     entriesRendered = '';
-    cssTemplate = '';
     extraImports = [AddonModDataComponentsModule];
     jsData;
     foundRecordsData;
@@ -298,8 +297,6 @@ export class AddonModDataIndexComponent extends CoreCourseModuleMainActivityComp
             }
 
             if (!this.isEmpty) {
-                this.cssTemplate = this.dataHelper.prefixCSS(this.data.csstemplate, '.addon-data-entries-' + this.data.id);
-
                 const siteInfo = this.sitesProvider.getCurrentSite().getInfo(),
                     promises = [];
 

src/addon/mod/data/pages/edit/edit.html

@@ -18,10 +18,8 @@
             </ion-select>
         </ion-item>
 
-        <div class="addon-data-contents {{cssClass}}">
+        <div class="addon-data-contents addon-data-entries-{{data.id}}" *ngIf="data">
-            <style *ngIf="cssTemplate">
+            <core-style [css]="data.csstemplate" prefix=".addon-data-entries-{{data.id}}"></core-style>
-                {{ cssTemplate }}
-            </style>
 
             <form (ngSubmit)="save($event)" [formGroup]="editForm">
                 <core-compile-html [text]="editFormRender" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html>

src/addon/mod/data/pages/edit/edit.ts

@@ -57,7 +57,6 @@ export class AddonModDataEditPage {
     loaded = false;
     selectedGroup = 0;
     cssClass = '';
-    cssTemplate = '';
     groupInfo: any;
     editFormRender = '';
     editForm: FormGroup;
@@ -132,8 +131,6 @@ export class AddonModDataEditPage {
 
             return this.dataProvider.getDatabaseAccessInformation(data.id);
         }).then((accessData) => {
-            this.cssTemplate = this.dataHelper.prefixCSS(this.data.csstemplate, '.' + this.cssClass);
-
             if (this.entryId) {
                 return this.groupsProvider.getActivityGroupInfo(this.data.coursemodule, accessData.canmanageentries)
                         .then((groupInfo) => {

src/addon/mod/data/pages/entry/entry.html

@@ -22,10 +22,8 @@
             </ion-select>
         </ion-item>
 
-        <div class="addon-data-contents {{cssClass}}" *ngIf="entry">
+        <div class="addon-data-contents addon-data-entries-{{data.id}}" *ngIf="entry">
-            <style *ngIf="cssTemplate">
+            <core-style [css]="data.csstemplate" prefix=".addon-data-entries-{{data.id}}"></core-style>
-                {{ cssTemplate }}
-            </style>
 
             <core-compile-html [text]="entryRendered" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html>
         </div>

src/addon/mod/data/pages/entry/entry.ts

@@ -55,7 +55,6 @@ export class AddonModDataEntryPage implements OnDestroy {
     entry: any;
     offlineActions = [];
     hasOffline = false;
-    cssTemplate = '';
     previousOffset: number;
     nextOffset: number;
     access: any;
@@ -64,7 +63,6 @@ export class AddonModDataEntryPage implements OnDestroy {
     showComments: any;
     entryRendered = '';
     siteId: string;
-    cssClass = '';
     extraImports = [AddonModDataComponentsModule];
     jsData;
     ratingInfo: CoreRatingInfo;
@@ -133,7 +131,6 @@ export class AddonModDataEntryPage implements OnDestroy {
         return this.dataProvider.getDatabase(this.courseId, this.module.id).then((data) => {
             this.title = data.name || this.title;
             this.data = data;
-            this.cssClass = 'addon-data-entries-' + data.id;
 
             return this.setEntryIdFromOffset(data.id, this.offset, this.selectedGroup).then(() => {
                 return this.dataProvider.getDatabaseAccessInformation(data.id);
@@ -167,8 +164,6 @@ export class AddonModDataEntryPage implements OnDestroy {
             this.ratingInfo = entry.ratinginfo;
             entry = entry.entry;
 
-            this.cssTemplate = this.dataHelper.prefixCSS(this.data.csstemplate, '.' + this.cssClass);
-
             // Index contents by fieldid.
             entry.contents = this.utils.arrayToObject(entry.contents, 'fieldid');
 

src/addon/mod/data/providers/helper.ts

@@ -423,27 +423,6 @@ export class AddonModDataHelperProvider {
         });
     }
 
-    /**
-     * Add a prefix to all rules in a CSS string.
-     *
-     * @param {string} css      CSS code to be prefixed.
-     * @param {string} prefix   Prefix css selector.
-     * @return {string}         Prefixed CSS.
-     */
-    prefixCSS(css: string, prefix: string): string {
-        if (!css) {
-            return '';
-        }
-
-        // Remove comments first.
-        let regExp = /\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm;
-        css = css.replace(regExp, '');
-        // Add prefix.
-        regExp = /([^]*?)({[^]*?}|,)/g;
-
-        return css.replace(regExp, prefix + ' $1 $2');
-    }
-
     /**
      * Given a list of files (either online files or local files), store the local files in a local folder
      * to be submitted later.

src/components/components.module.ts

@@ -51,6 +51,7 @@ import { CoreIonTabsComponent } from './ion-tabs/ion-tabs';
 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';
 
 @NgModule({
     declarations: [
@@ -87,7 +88,8 @@ import { CoreUserAvatarComponent } from './user-avatar/user-avatar';
         CoreIonTabsComponent,
         CoreIonTabComponent,
         CoreInfiniteLoadingComponent,
-        CoreUserAvatarComponent
+        CoreUserAvatarComponent,
+        CoreStyleComponent
     ],
     entryComponents: [
         CoreContextMenuPopoverComponent,
@@ -131,7 +133,8 @@ import { CoreUserAvatarComponent } from './user-avatar/user-avatar';
         CoreIonTabsComponent,
         CoreIonTabComponent,
         CoreInfiniteLoadingComponent,
-        CoreUserAvatarComponent
+        CoreUserAvatarComponent,
+        CoreStyleComponent
     ]
 })
 export class CoreComponentsModule {}

src/components/style/style.ts

@@ -0,0 +1,73 @@
+// (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, ElementRef, Input, OnChanges, SimpleChange } from '@angular/core';
+
+/**
+ * Component to add a <style> tag.
+ *
+ * @description
+ * This component will include a <style> tag with some CSS rules that can optionally be pefixed.
+ *
+ * Example:
+ *
+ * <core-style [css]="'p { color: red; }'" prefix=".custom-rules"></core-style>
+ */
+@Component({
+    selector: 'core-style',
+    template: ''
+})
+export class CoreStyleComponent implements OnChanges {
+    @Input() css: string; // CSS rules.
+    @Input() prefix?: string; // Prefix to add to CSS rules.
+
+    constructor(private element: ElementRef) {}
+
+    /**
+     * Component being changed.
+     */
+    ngOnChanges(changes: { [name: string]: SimpleChange }): void {
+        const css = this.prefixCSS(this.css, this.prefix);
+
+        if (this.element && this.element.nativeElement) {
+            this.element.nativeElement.innerHTML = '<style>' + css + '</style>';
+        }
+    }
+
+    /**
+     * Add a prefix to all rules in a CSS string.
+     *
+     * @param {string} css CSS code to be prefixed.
+     * @param {string} prefix Prefix css selector.
+     * @return {string} Prefixed CSS.
+     */
+    protected prefixCSS(css: string, prefix: string): string {
+        if (!css) {
+            return '';
+        }
+
+        if (!prefix) {
+            return css;
+        }
+
+        // Remove comments first.
+        let regExp = /\/\*[\s\S]*?\*\/|([^:]|^)\/\/.*$/gm;
+        css = css.replace(regExp, '');
+
+        // Add prefix.
+        regExp = /([^]*?)({[^]*?}|,)/g;
+
+        return css.replace(regExp, prefix + ' $1 $2');
+    }
+}