rel="diff-e92338c6e49ff34f9022980cc89bbebd60974badR77">77 
+          },
78 
+          "configurations": {
79 
+            "production": {
80 
+              "browserTarget": "app:build:production"
81 
+            },
82 
+            "ci": {
83 
+              "progress": false
84 
+            }
85 
+          }
86 
+        },
87 
+        "extract-i18n": {
88 
+          "builder": "@angular-devkit/build-angular:extract-i18n",
89 
+          "options": {
90 
+            "browserTarget": "app:build"
91 
+          }
92 
+        },
93 
+        "test": {
94 
+          "builder": "@angular-devkit/build-angular:karma",
95 
+          "options": {
96 
+            "main": "src/test.ts",
97 
+            "polyfills": "src/polyfills.ts",
98 
+            "tsConfig": "tsconfig.spec.json",
99 
+            "karmaConfig": "karma.conf.js",
100 
+            "styles": [],
101 
+            "scripts": [],
102 
+            "assets": [
103 
+              {
104 
+                "glob": "favicon.ico",
105 
+                "input": "src/",
106 
+                "output": "/"
107 
+              },
108 
+              {
109 
+                "glob": "**/*",
110 
+                "input": "src/assets",
111 
+                "output": "/assets"
112 
+              }
113 
+            ]
114 
+          },
115 
+          "configurations": {
116 
+            "ci": {
117 
+              "progress": false,
118 
+              "watch": false
119 
+            }
120 
+          }
121 
+        },
122 
+        "lint": {
123 
+          "builder": "@angular-eslint/builder:lint",
124 
+          "options": {
125 
+            "lintFilePatterns": [
126 
+              "src/**/*.ts",
127 
+              "src/**/*.html"
128 
+            ]
129 
+          }
130 
+        },
131 
+        "e2e": {
132 
+          "builder": "@angular-devkit/build-angular:protractor",
133 
+          "options": {
134 
+            "protractorConfig": "e2e/protractor.conf.js",
135 
+            "devServerTarget": "app:serve"
136 
+          },
137 
+          "configurations": {
138 
+            "production": {
139 
+              "devServerTarget": "app:serve:production"
140 
+            },
141 
+            "ci": {
142 
+              "devServerTarget": "app:serve:ci"
143 
+            }
144 
+          }
145 
+        },
146 
+        "ionic-cordova-build": {
147 
+          "builder": "@ionic/angular-toolkit:cordova-build",
148 
+          "options": {
149 
+            "browserTarget": "app:build"
150 
+          },
151 
+          "configurations": {
152 
+            "production": {
153 
+              "browserTarget": "app:build:production"
154 
+            }
155 
+          }
156 
+        },
157 
+        "ionic-cordova-serve": {
158 
+          "builder": "@ionic/angular-toolkit:cordova-serve",
159 
+          "options": {
160 
+            "cordovaBuildTarget": "app:ionic-cordova-build",
161 
+            "devServerTarget": "app:serve"
162 
+          },
163 
+          "configurations": {
164 
+            "production": {
165 
+              "cordovaBuildTarget": "app:ionic-cordova-build:production",
166 
+              "devServerTarget": "app:serve:production"
167 
+            }
168 
+          }
169 
+        }
170 
+      }
171 
+    }
172 
+  },
173 
+  "cli": {
174 
+    "defaultCollection": "@ionic/angular-toolkit"
175 
+  },
176 
+  "schematics": {
177 
+    "@ionic/angular-toolkit:component": {
178 
+      "styleext": "scss"
179 
+    },
180 
+    "@ionic/angular-toolkit:page": {
181 
+      "styleext": "scss"
182 
+    }
183 
+  }
184 
+}

+ 37 - 0
e2e/protractor.conf.js
Voir le fichier 

@@ -0,0 +1,37 @@
1 
+// @ts-check
2 
+// Protractor configuration file, see link for more information
3 
+// https://github.com/angular/protractor/blob/master/lib/config.ts
4 
+
5 
+const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
6 
+
7 
+/**
8 
+ * @type { import("protractor").Config }
9 
+ */
10 
+exports.config = {
11 
+  allScriptsTimeout: 11000,
12 
+  specs: [
13 
+    './src/**/*.e2e-spec.ts'
14 
+  ],
15 
+  capabilities: {
16 
+    browserName: 'chrome'
17 
+  },
18 
+  directConnect: true,
19 
+  SELENIUM_PROMISE_MANAGER: false,
20 
+  baseUrl: 'http://localhost:4200/',
21 
+  framework: 'jasmine',
22 
+  jasmineNodeOpts: {
23 
+    showColors: true,
24 
+    defaultTimeoutInterval: 30000,
25 
+    print: function() {}
26 
+  },
27 
+  onPrepare() {
28 
+    require('ts-node').register({
29 
+      project: require('path').join(__dirname, './tsconfig.json')
30 
+    });
31 
+    jasmine.getEnv().addReporter(new SpecReporter({
32 
+      spec: {
33 
+        displayStacktrace: StacktraceOption.PRETTY
34 
+      }
35 
+    }));
36 
+  }
37 
+};

+ 14 - 0
e2e/src/app.e2e-spec.ts
Voir le fichier 

@@ -0,0 +1,14 @@
1 
+import { AppPage } from './app.po';
2 
+
3 
+describe('new App', () => {
4 
+  let page: AppPage;
5 
+
6 
+  beforeEach(() => {
7 
+    page = new AppPage();
8 
+  });
9 
+
10 
+  it('should display welcome message', () => {
11 
+    page.navigateTo();
12 
+    expect(page.getPageTitle()).toContain('Tab 1');
13 
+  });
14 
+});

+ 11 - 0
e2e/src/app.po.ts
Voir le fichier 

@@ -0,0 +1,11 @@
1 
+import { browser, by, element } from 'protractor';
2 
+
3 
+export class AppPage {
4 
+  navigateTo() {
5 
+    return browser.get('/');
6 
+  }
7 
+
8 
+  getPageTitle() {
9 
+    return element(by.css('ion-title')).getText();
10 
+  }
11 
+}

+ 12 - 0
e2e/tsconfig.json
Voir le fichier 

@@ -0,0 +1,12 @@
1 
+{
2 
+  "extends": "../tsconfig.json",
3 
+  "compilerOptions": {
4 
+    "outDir": "../out-tsc/e2e",
5 
+    "module": "commonjs",
6 
+    "target": "es2018",
7 
+    "types": [
8 
+      "jasmine",
9 
+      "node"
10 
+    ]
11 
+  }
12 
+}

+ 5 - 0
ionic.config.json
Voir le fichier 

@@ -0,0 +1,5 @@
1 
+{
2 
+  "name": "hp",
3 
+  "integrations": {},
4 
+  "type": "angular"
5 
+}

+ 44 - 0
karma.conf.js
Voir le fichier 

@@ -0,0 +1,44 @@
1 
+// Karma configuration file, see link for more information
2 
+// https://karma-runner.github.io/1.0/config/configuration-file.html
3 
+
4 
+module.exports = function (config) {
5 
+  config.set({
6 
+    basePath: '',
7 
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 
+    plugins: [
9 
+      require('karma-jasmine'),
10 
+      require('karma-chrome-launcher'),
11 
+      require('karma-jasmine-html-reporter'),
12 
+      require('karma-coverage'),
13 
+      require('@angular-devkit/build-angular/plugins/karma')
14 
+    ],
15 
+    client: {
16 
+      jasmine: {
17 
+        // you can add configuration options for Jasmine here
18 
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 
+        // for example, you can disable the random execution with `random: false`
20 
+        // or set a specific seed with `seed: 4321`
21 
+      },
22 
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
23 
+    },
24 
+    jasmineHtmlReporter: {
25 
+      suppressAll: true // removes the duplicated traces
26 
+    },
27 
+    coverageReporter: {
28 
+      dir: require('path').join(__dirname, './coverage/ngv'),
29 
+      subdir: '.',
30 
+      reporters: [
31 
+        { type: 'html' },
32 
+        { type: 'text-summary' }
33 
+      ]
34 
+    },
35 
+    reporters: ['progress', 'kjhtml'],
36 
+    port: 9876,
37 
+    colors: true,
38 
+    logLevel: config.LOG_INFO,
39 
+    autoWatch: true,
40 
+    browsers: ['Chrome'],
41 
+    singleRun: false,
42 
+    restartOnFileChange: true
43 
+  });
44 
+};

Fichier diff supprimé car celui-ci est trop grand
+ 34537 - 0
package-lock.json


+ 61 - 0
package.json
Voir le fichier 

@@ -0,0 +1,61 @@
1 
+{
2 
+  "name": "hp",
3 
+  "version": "0.0.1",
4 
+  "author": "Ionic Framework",
5 
+  "homepage": "https://ionicframework.com/",
6 
+  "scripts": {
7 
+    "ng": "ng",
8 
+    "start": "ng serve",
9 
+    "build": "ng build",
10 
+    "test": "ng test",
11 
+    "lint": "ng lint",
12 
+    "e2e": "ng e2e"
13 
+  },
14 
+  "private": true,
15 
+  "dependencies": {
16 
+    "@angular/common": "~12.1.1",
17 
+    "@angular/compiler": "~12.1.1",
18 
+    "@angular/core": "~12.1.1",
19 
+    "@angular/forms": "~12.1.1",
20 
+    "@angular/platform-browser": "~12.1.1",
21 
+    "@angular/platform-browser-dynamic": "~12.1.1",
22 
+    "@angular/router": "~12.1.1",
23 
+    "@ionic/angular": "^5.5.2",
24 
+    "rxjs": "~6.6.0",
25 
+    "tslib": "^2.2.0",
26 
+    "zone.js": "~0.11.4"
27 
+  },
28 
+  "devDependencies": {
29 
+    "@angular-devkit/build-angular": "~12.1.1",
30 
+    "@angular-eslint/builder": "~12.0.0",
31 
+    "@angular-eslint/eslint-plugin": "~12.0.0",
32 
+    "@angular-eslint/eslint-plugin-template": "~12.0.0",
33 
+    "@angular-eslint/template-parser": "~12.0.0",
34 
+    "@angular/cli": "~12.1.1",
35 
+    "@angular/compiler": "~12.1.1",
36 
+    "@angular/compiler-cli": "~12.1.1",
37 
+    "@angular/language-service": "~12.0.1",
38 
+    "@ionic/angular-toolkit": "^4.0.0",
39 
+    "@types/jasmine": "~3.6.0",
40 
+    "@types/jasminewd2": "~2.0.3",
41 
+    "@types/node": "^12.11.1",
42 
+    "@typescript-eslint/eslint-plugin": "4.16.1",
43 
+    "@typescript-eslint/parser": "4.16.1",
44 
+    "eslint": "^7.6.0",
45 
+    "eslint-plugin-import": "2.22.1",
46 
+    "eslint-plugin-jsdoc": "30.7.6",
47 
+    "eslint-plugin-prefer-arrow": "1.2.2",
48 
+    "jasmine-core": "~3.8.0",
49 
+    "jasmine-spec-reporter": "~5.0.0",
50 
+    "karma": "~6.3.2",
51 
+    "karma-chrome-launcher": "~3.1.0",
52 
+    "karma-coverage": "~2.0.3",
53 
+    "karma-coverage-istanbul-reporter": "~3.0.2",
54 
+    "karma-jasmine": "~4.0.0",
55 
+    "karma-jasmine-html-reporter": "^1.5.0",
56 
+    "protractor": "~7.0.0",
57 
+    "ts-node": "~8.3.0",
58 
+    "typescript": "~4.2.4"
59 
+  },
60 
+  "description": "An Ionic project"
61 
+}

+ 16 - 0
src/app/app-routing.module.ts
Voir le fichier 

@@ -0,0 +1,16 @@
1 
+import { NgModule } from '@angular/core';
2 
+import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
3 
+
4 
+const routes: Routes = [
5 
+  {
6 
+    path: '',
7 
+    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
8 
+  }
9 
+];
10 
+@NgModule({
11 
+  imports: [
12 
+    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
13 
+  ],
14 
+  exports: [RouterModule]
15 
+})
16 
+export class AppRoutingModule {}

+ 3 - 0
src/app/app.component.html
Voir le fichier 

@@ -0,0 +1,3 @@
1 
+<ion-app>
2 
+  <ion-router-outlet></ion-router-outlet>
3 
+</ion-app>

+ 0 - 0
src/app/app.component.scss
Voir le fichier


+ 23 - 0
src/app/app.component.spec.ts
Voir le fichier 

@@ -0,0 +1,23 @@
1 
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 
+import { TestBed, waitForAsync } from '@angular/core/testing';
3 
+
4 
+import { AppComponent } from './app.component';
5 
+
6 
+describe('AppComponent', () => {
7 
+
8 
+  beforeEach(waitForAsync(() => {
9 
+
10 
+    TestBed.configureTestingModule({
11 
+      declarations: [AppComponent],
12 
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
13 
+    }).compileComponents();
14 
+  }));
15 
+
16 
+  it('should create the app', () => {
17 
+    const fixture = TestBed.createComponent(AppComponent);
18 
+    const app = fixture.debugElement.componentInstance;
19 
+    expect(app).toBeTruthy();
20 
+  });
21 
+  // TODO: add more tests!
22 
+
23 
+});

+ 10 - 0
src/app/app.component.ts
Voir le fichier 

@@ -0,0 +1,10 @@
1 
+import { Component } from '@angular/core';
2 
+
3 
+@Component({
4 
+  selector: 'app-root',
5 
+  templateUrl: 'app.component.html',
6 
+  styleUrls: ['app.component.scss'],
7 
+})
8 
+export class AppComponent {
9 
+  constructor() {}
10 
+}

+ 17 - 0
src/app/app.module.ts
Voir le fichier 

@@ -0,0 +1,17 @@
1 
+import { NgModule } from '@angular/core';
2 
+import { BrowserModule } from '@angular/platform-browser';
3 
+import { RouteReuseStrategy } from '@angular/router';
4 
+
5 
+import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
6 
+
7 
+import { AppRoutingModule } from './app-routing.module';
8 
+import { AppComponent } from './app.component';
9 
+
10 
+@NgModule({
11 
+  declarations: [AppComponent],
12 
+  entryComponents: [],
13 
+  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
14 
+  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
15 
+  bootstrap: [AppComponent],
16 
+})
17 
+export class AppModule {}

+ 4 - 0
src/app/explore-container/explore-container.component.html
Voir le fichier 

@@ -0,0 +1,4 @@
1 
+<div id="container">
2 
+  <strong>{{ name }}</strong>
3 
+  <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
4 
+</div>

+ 27 - 0
src/app/explore-container/explore-container.component.scss
Voir le fichier 

@@ -0,0 +1,27 @@
1 
+#container {
2 
+  text-align: center;
3 
+
4 
+  position: absolute;
5 
+  left: 0;
6 
+  right: 0;
7 
+  top: 50%;
8 
+  transform: translateY(-50%);
9 
+}
10 
+
11 
+#container strong {
12 
+  font-size: 20px;
13 
+  line-height: 26px;
14 
+}
15 
+
16 
+#container p {
17 
+  font-size: 16px;
18 
+  line-height: 22px;
19 
+
20 
+  color: #8c8c8c;
21 
+
22 
+  margin: 0;
23 
+}
24 
+
25 
+#container a {
26 
+  text-decoration: none;
27 
+}

+ 24 - 0
src/app/explore-container/explore-container.component.spec.ts
Voir le fichier 

@@ -0,0 +1,24 @@
1 
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 
+import { IonicModule } from '@ionic/angular';
3 
+
4 
+import { ExploreContainerComponent } from './explore-container.component';
5 
+
6 
+describe('ExploreContainerComponent', () => {
7 
+  let component: ExploreContainerComponent;
8 
+  let fixture: ComponentFixture<ExploreContainerComponent>;
9 
+
10 
+  beforeEach(waitForAsync(() => {
11 
+    TestBed.configureTestingModule({
12 
+      declarations: [ ExploreContainerComponent ],
13 
+      imports: [IonicModule.forRoot()]
14 
+    }).compileComponents();
15 
+
16 
+    fixture = TestBed.createComponent(ExploreContainerComponent);
17 
+    component = fixture.componentInstance;
18 
+    fixture.detectChanges();
19 
+  }));
20 
+
21 
+  it('should create', () => {
22 
+    expect(component).toBeTruthy();
23 
+  });
24 
+});

+ 15 - 0
src/app/explore-container/explore-container.component.ts
Voir le fichier 

@@ -0,0 +1,15 @@
1 
+import { Component, OnInit, Input } from '@angular/core';
2 
+
3 
+@Component({
4 
+  selector: 'app-explore-container',
5 
+  templateUrl: './explore-container.component.html',
6 
+  styleUrls: ['./explore-container.component.scss'],
7 
+})
8 
+export class ExploreContainerComponent implements OnInit {
9 
+  @Input() name: string;
10 
+
11 
+  constructor() { }
12 
+
13 
+  ngOnInit() {}
14 
+
15 
+}

+ 14 - 0
src/app/explore-container/explore-container.module.ts
Voir le fichier 

@@ -0,0 +1,14 @@
1 
+import { NgModule } from '@angular/core';
2 
+import { CommonModule } from '@angular/common';
3 
+import { FormsModule } from '@angular/forms';
4 
+
5 
+import { IonicModule } from '@ionic/angular';
6 
+
7 
+import { ExploreContainerComponent } from './explore-container.component';
8 
+
9 
+@NgModule({
10 
+  imports: [ CommonModule, FormsModule, IonicModule],
11 
+  declarations: [ExploreContainerComponent],
12 
+  exports: [ExploreContainerComponent]
13 
+})
14 
+export class ExploreContainerComponentModule {}

+ 16 - 0
src/app/tab1/tab1-routing.module.ts
Voir le fichier 

@@ -0,0 +1,16 @@
1 
+import { NgModule } from '@angular/core';
2 
+import { RouterModule, Routes } from '@angular/router';
3 
+import { Tab1Page } from './tab1.page';
4 
+
5 
+const routes: Routes = [
6 
+  {
7 
+    path: '',
8 
+    component: Tab1Page,
9 
+  }
10 
+];
11 
+
12 
+@NgModule({
13 
+  imports: [RouterModule.forChild(routes)],
14 
+  exports: [RouterModule]
15 
+})
16 
+export class Tab1PageRoutingModule {}

+ 20 - 0
src/app/tab1/tab1.module.ts
Voir le fichier 

@@ -0,0 +1,20 @@
1 
+import { IonicModule } from '@ionic/angular';
2 
+import { NgModule } from '@angular/core';
3 
+import { CommonModule } from '@angular/common';
4 
+import { FormsModule } from '@angular/forms';
5 
+import { Tab1Page } from './tab1.page';
6 
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
7 
+
8 
+import { Tab1PageRoutingModule } from './tab1-routing.module';
9 
+
10 
+@NgModule({
11 
+  imports: [
12 
+    IonicModule,
13 
+    CommonModule,
14 
+    FormsModule,
15 
+    ExploreContainerComponentModule,
16 
+    Tab1PageRoutingModule
17 
+  ],
18 
+  declarations: [Tab1Page]
19 
+})
20 
+export class Tab1PageModule {}

+ 17 - 0
src/app/tab1/tab1.page.html
Voir le fichier 

@@ -0,0 +1,17 @@
1 
+<ion-header [translucent]="true">
2 
+  <ion-toolbar>
3 
+    <ion-title>
4 
+      Tab 1
5 
+    </ion-title>
6 
+  </ion-toolbar>
7 
+</ion-header>
8 
+
9 
+<ion-content [fullscreen]="true">
10 
+  <ion-header collapse="condense">
11 
+    <ion-toolbar>
12 
+      <ion-title size="large">Tab 1</ion-title>
13 
+    </ion-toolbar>
14 
+  </ion-header>
15 
+
16 
+  <app-explore-container name="Tab 1 page"></app-explore-container>
17 
+</ion-content>

+ 0 - 0
src/app/tab1/tab1.page.scss
Voir le fichier


+ 25 - 0
src/app/tab1/tab1.page.spec.ts
Voir le fichier 

@@ -0,0 +1,25 @@
1 
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 
+import { IonicModule } from '@ionic/angular';
3 
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
4 
+
5 
+import { Tab1Page } from './tab1.page';
6 
+
7 
+describe('Tab1Page', () => {
8 
+  let component: Tab1Page;
9 
+  let fixture: ComponentFixture<Tab1Page>;
10 
+
11 
+  beforeEach(waitForAsync(() => {
12 
+    TestBed.configureTestingModule({
13 
+      declarations: [Tab1Page],
14 
+      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
15 
+    }).compileComponents();
16 
+
17 
+    fixture = TestBed.createComponent(Tab1Page);
18 
+    component = fixture.componentInstance;
19 
+    fixture.detectChanges();
20 
+  }));
21 
+
22 
+  it('should create', () => {
23 
+    expect(component).toBeTruthy();
24 
+  });
25 
+});

+ 12 - 0
src/app/tab1/tab1.page.ts
Voir le fichier 

@@ -0,0 +1,12 @@
1 
+import { Component } from '@angular/core';
2 
+
3 
+@Component({
4 
+  selector: 'app-tab1',
5 
+  templateUrl: 'tab1.page.html',
6 
+  styleUrls: ['tab1.page.scss']
7 
+})
8 
+export class Tab1Page {
9 
+
10 
+  constructor() {}
11 
+
12 
+}

+ 16 - 0
src/app/tab2/tab2-routing.module.ts
Voir le fichier 

@@ -0,0 +1,16 @@
1 
+import { NgModule } from '@angular/core';
2 
+import { RouterModule, Routes } from '@angular/router';
3 
+import { Tab2Page } from './tab2.page';
4 
+
5 
+const routes: Routes = [
6 
+  {
7 
+    path: '',
8 
+    component: Tab2Page,
9 
+  }
10 
+];
11 
+
12 
+@NgModule({
13 
+  imports: [RouterModule.forChild(routes)],
14 
+  exports: [RouterModule]
15 
+})
16 
+export class Tab2PageRoutingModule {}

+ 21 - 0
src/app/tab2/tab2.module.ts
Voir le fichier 

@@ -0,0 +1,21 @@
1 
+import { IonicModule } from '@ionic/angular';
2 
+import { RouterModule } from '@angular/router';
3 
+import { NgModule } from '@angular/core';
4 
+import { CommonModule } from '@angular/common';
5 
+import { FormsModule } from '@angular/forms';
6 
+import { Tab2Page } from './tab2.page';
7 
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
8 
+
9 
+import { Tab2PageRoutingModule } from './tab2-routing.module';
10 
+
11 
+@NgModule({
12 
+  imports: [
13 
+    IonicModule,
14 
+    CommonModule,
15 
+    FormsModule,
16 
+    ExploreContainerComponentModule,
17 
+    Tab2PageRoutingModule
18 
+  ],
19 
+  declarations: [Tab2Page]
20 
+})
21 
+export class Tab2PageModule {}

+ 17 - 0
src/app/tab2/tab2.page.html
Voir le fichier 

@@ -0,0 +1,17 @@
1 
+<ion-header [translucent]="true">
2 
+  <ion-toolbar>
3 
+    <ion-title>
4 
+      Tab 2
5 
+    </ion-title>
6 
+  </ion-toolbar>
7 
+</ion-header>
8 
+
9 
+<ion-content [fullscreen]="true">
10 
+  <ion-header collapse="condense">
11 
+    <ion-toolbar>
12 
+      <ion-title size="large">Tab 2</ion-title>
13 
+    </ion-toolbar>
14 
+  </ion-header>
15 
+
16 
+  <app-explore-container name="Tab 2 page"></app-explore-container>
17 
+</ion-content>

+ 0 - 0
src/app/tab2/tab2.page.scss
Voir le fichier


+ 25 - 0
src/app/tab2/tab2.page.spec.ts
Voir le fichier 

@@ -0,0 +1,25 @@
1 
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 
+import { IonicModule } from '@ionic/angular';
3 
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
4 
+
5 
+import { Tab2Page } from './tab2.page';
6 
+
7 
+describe('Tab2Page', () => {
8 
+  let component: Tab2Page;
9 
+  let fixture: ComponentFixture<Tab2Page>;
10 
+
11 
+  beforeEach(waitForAsync(() => {
12 
+    TestBed.configureTestingModule({
13 
+      declarations: [Tab2Page],
14 
+      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
15 
+    }).compileComponents();
16 
+
17 
+    fixture = TestBed.createComponent(Tab2Page);
18 
+    component = fixture.componentInstance;
19 
+    fixture.detectChanges();
20 
+  }));
21 
+
22 
+  it('should create', () => {
23 
+    expect(component).toBeTruthy();
24 
+  });
25 
+});

+ 12 - 0
src/app/tab2/tab2.page.ts
Voir le fichier 

@@ -0,0 +1,12 @@
1 
+import { Component } from '@angular/core';
2 
+
3 
+@Component({
4 
+  selector: 'app-tab2',
5 
+  templateUrl: 'tab2.page.html',
6 
+  styleUrls: ['tab2.page.scss']
7 
+})
8 
+export class Tab2Page {
9 
+
10 
+  constructor() {}
11 
+
12 
+}

+ 16 - 0
src/app/tab3/tab3-routing.module.ts
Voir le fichier 

@@ -0,0 +1,16 @@
1 
+import { NgModule } from '@angular/core';
2 
+import { RouterModule, Routes } from '@angular/router';
3 
+import { Tab3Page } from './tab3.page';
4 
+
5 
+const routes: Routes = [
6 
+  {
7 
+    path: '',
8 
+    component: Tab3Page,
9 
+  }
10 
+];
11 
+
12 
+@NgModule({
13 
+  imports: [RouterModule.forChild(routes)],
14 
+  exports: [RouterModule]
15 
+})
16 
+export class Tab3PageRoutingModule {}

+ 22 - 0
src/app/tab3/tab3.module.ts
Voir le fichier 

@@ -0,0 +1,22 @@
1 
+import { IonicModule } from '@ionic/angular';
2 
+import { RouterModule } from '@angular/router';
3 
+import { NgModule } from '@angular/core';
4 
+import { CommonModule } from '@angular/common';
5 
+import { FormsModule } from '@angular/forms';
6 
+import { Tab3Page } from './tab3.page';
7 
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
8 
+
9 
+import { Tab3PageRoutingModule } from './tab3-routing.module';
10 
+
11 
+@NgModule({
12 
+  imports: [
13 
+    IonicModule,
14 
+    CommonModule,
15 
+    FormsModule,
16 
+    ExploreContainerComponentModule,
17 
+    RouterModule.forChild([{ path: '', component: Tab3Page }]),
18 
+    Tab3PageRoutingModule,
19 
+  ],
20 
+  declarations: [Tab3Page]
21 
+})
22 
+export class Tab3PageModule {}

+ 17 - 0
src/app/tab3/tab3.page.html
Voir le fichier 

@@ -0,0 +1,17 @@
1 
+<ion-header [translucent]="true">
2 
+  <ion-toolbar>
3 
+    <ion-title>
4 
+      Tab 3
5 
+    </ion-title>
6 
+  </ion-toolbar>
7 
+</ion-header>
8 
+
9 
+<ion-content [fullscreen]="true">
10 
+  <ion-header collapse="condense">
11 
+    <ion-toolbar>
12 
+      <ion-title size="large">Tab 3</ion-title>
13 
+    </ion-toolbar>
14 
+  </ion-header>
15 
+
16 
+  <app-explore-container name="Tab 3 page"></app-explore-container>
17 
+</ion-content>

+ 0 - 0
src/app/tab3/tab3.page.scss
Voir le fichier


+ 25 - 0
src/app/tab3/tab3.page.spec.ts
Voir le fichier 

@@ -0,0 +1,25 @@
1 
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
2 
+import { IonicModule } from '@ionic/angular';
3 
+import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
4 
+
5 
+import { Tab3Page } from './tab3.page';
6 
+
7 
+describe('Tab3Page', () => {
8 
+  let component: Tab3Page;
9 
+  let fixture: ComponentFixture<Tab3Page>;
10 
+
11 
+  beforeEach(waitForAsync(() => {
12 
+    TestBed.configureTestingModule({
13 
+      declarations: [Tab3Page],
14 
+      imports: [IonicModule.forRoot(), ExploreContainerComponentModule]
15 
+    }).compileComponents();
16 
+
17 
+    fixture = TestBed.createComponent(Tab3Page);
18 
+    component = fixture.componentInstance;
19 
+    fixture.detectChanges();
20 
+  }));
21 
+
22 
+  it('should create', () => {
23 
+    expect(component).toBeTruthy();
24 
+  });
25 
+});

+ 12 - 0
src/app/tab3/tab3.page.ts
Voir le fichier 

@@ -0,0 +1,12 @@
1 
+import { Component } from '@angular/core';
2 
+
3 
+@Component({
4 
+  selector: 'app-tab3',
5 
+  templateUrl: 'tab3.page.html',
6 
+  styleUrls: ['tab3.page.scss']
7 
+})
8 
+export class Tab3Page {
9 
+
10 
+  constructor() {}
11 
+
12 
+}

+ 39 - 0
src/app/tabs/tabs-routing.module.ts
Voir le fichier 

@@ -0,0 +1,39 @@
1 
+import { NgModule } from '@angular/core';
2 
+import { RouterModule, Routes } from '@angular/router';
3 
+import { TabsPage } from './tabs.page';
4 
+
5 
+const routes: Routes = [
6 
+  {
7 
+    path: 'tabs',
8 
+    component: TabsPage,
9 
+    children: [
10 
+      {
11 
+        path: 'tab1',
12 
+        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
13 
+      },
14 
+      {
15 
+        path: 'tab2',
16 
+        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
17 
+      },
18 
+      {
19 
+        path: 'tab3',
20 
+        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
21 
+      },
22 
+      {
23 
+        path: '',
24 
+        redirectTo: '/tabs/tab1',
25 
+        pathMatch: 'full'
26 
+      }
27 
+    ]
28 
+  },
29 
+  {
30 
+    path: '',
31 
+    redirectTo: '/tabs/tab1',
32 
+    pathMatch: 'full'
33 
+  }
34 
+];
35 
+
36 
+@NgModule({
37 
+  imports: [RouterModule.forChild(routes)],
38 
+})
39 
+export class TabsPageRoutingModule {}

+ 19 - 0
src/app/tabs/tabs.module.ts
Voir le fichier 

@@ -0,0 +1,19 @@
1 
+import { IonicModule } from '@ionic/angular';
2 
+import { NgModule } from '@angular/core';
3 
+import { CommonModule } from '@angular/common';
4 
+import { FormsModule } from '@angular/forms';
5 
+
6 
+import { TabsPageRoutingModule } from './tabs-routing.module';
7 
+
8 
+import { TabsPage } from './tabs.page';
9 
+
10 
+@NgModule({
11 
+  imports: [
12 
+    IonicModule,
13 
+    CommonModule,
14 
+    FormsModule,
15 
+    TabsPageRoutingModule
16 
+  ],
17 
+  declarations: [TabsPage]
18 
+})
19 
+export class TabsPageModule {}

+ 20 - 0
src/app/tabs/tabs.page.html
Voir le fichier 

@@ -0,0 +1,20 @@
1 
+<ion-tabs>
2 
+
3 
+  <ion-tab-bar slot="bottom">
4 
+    <ion-tab-button tab="tab1">
5 
+      <ion-icon name="triangle"></ion-icon>
6 
+      <ion-label>Tab 1</ion-label>
7 
+    </ion-tab-button>
8 
+
9 
+    <ion-tab-button tab="tab2">
10 
+      <ion-icon name="ellipse"></ion-icon>
11 
+      <ion-label>Tab 2</ion-label>
12 
+    </ion-tab-button>
13 
+
14 
+    <ion-tab-button tab="tab3">
15 
+      <ion-icon name="square"></ion-icon>
16 
+      <ion-label>Tab 3</ion-label>
17 
+    </ion-tab-button>
18 
+  </ion-tab-bar>
19 
+
20 
+</ion-tabs>

+ 1 - 0
src/app/tabs/tabs.page.scss
Voir le fichier 

@@ -0,0 +1 @@
1 
+

+ 26 - 0
src/app/tabs/tabs.page.spec.ts
Voir le fichier 

@@ -0,0 +1,26 @@
1 
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2 
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
3 
+
4 
+import { TabsPage } from './tabs.page';
5 
+
6 
+describe('TabsPage', () => {
7 
+  let component: TabsPage;
8 
+  let fixture: ComponentFixture<TabsPage>;
9 
+
10 
+  beforeEach(waitForAsync(() => {
11 
+    TestBed.configureTestingModule({
12 
+      declarations: [TabsPage],
13 
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 
+    }).compileComponents();
15 
+  }));
16 
+
17 
+  beforeEach(() => {
18 
+    fixture = TestBed.createComponent(TabsPage);
19 
+    component = fixture.componentInstance;
20 
+    fixture.detectChanges();
21 
+  });
22 
+
23 
+  it('should create', () => {
24 
+    expect(component).toBeTruthy();
25 
+  });
26 
+});

+ 12 - 0
src/app/tabs/tabs.page.ts
Voir le fichier 

@@ -0,0 +1,12 @@
1 
+import { Component } from '@angular/core';
2 
+
3 
+@Component({
4 
+  selector: 'app-tabs',
5 
+  templateUrl: 'tabs.page.html',
6 
+  styleUrls: ['tabs.page.scss']
7 
+})
8 
+export class TabsPage {
9 
+
10 
+  constructor() {}
11 
+
12 
+}

BIN
src/assets/icon/favicon.png
Voir le fichier


Fichier diff supprimé car celui-ci est trop grand
+ 1 - 0
src/assets/shapes.svg


+ 3 - 0
src/environments/environment.prod.ts
Voir le fichier 

@@ -0,0 +1,3 @@
1 
+export const environment = {
2 
+  production: true
3 
+};

+ 16 - 0
src/environments/environment.ts
Voir le fichier 

@@ -0,0 +1,16 @@
1 
+// This file can be replaced during build by using the `fileReplacements` array.
2 
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 
+// The list of file replacements can be found in `angular.json`.
4 
+
5 
+export const environment = {
6 
+  production: false
7 
+};
8 
+
9 
+/*
10 
+ * For easier debugging in development mode, you can import the following file
11 
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 
+ *
13 
+ * This import should be commented out in production mode because it will have a negative impact
14 
+ * on performance if an error is thrown.
15 
+ */
16 
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

+ 26 - 0
src/global.scss
Voir le fichier 

@@ -0,0 +1,26 @@
1 
+/*
2 
+ * App Global CSS
3 
+ * ----------------------------------------------------------------------------
4 
+ * Put style rules here that you want to apply globally. These styles are for
5 
+ * the entire app and not just one component. Additionally, this file can be
6 
+ * used as an entry point to import other CSS/Sass files to be included in the
7 
+ * output CSS.
8 
+ * For more information on global stylesheets, visit the documentation:
9 
+ * https://ionicframework.com/docs/layout/global-stylesheets
10 
+ */
11 
+
12 
+/* Core CSS required for Ionic components to work properly */
13 
+@import "~@ionic/angular/css/core.css";
14 
+
15 
+/* Basic CSS for apps built with Ionic */
16 
+@import "~@ionic/angular/css/normalize.css";
17 
+@import "~@ionic/angular/css/structure.css";
18 
+@import "~@ionic/angular/css/typography.css";
19 
+@import '~@ionic/angular/css/display.css';
20 
+
21 
+/* Optional CSS utils that can be commented out */
22 
+@import "~@ionic/angular/css/padding.css";
23 
+@import "~@ionic/angular/css/float-elements.css";
24 
+@import "~@ionic/angular/css/text-alignment.css";
25 
+@import "~@ionic/angular/css/text-transformation.css";
26 
+@import "~@ionic/angular/css/flex-utils.css";

+ 26 - 0
src/index.html
Voir le fichier 

@@ -0,0 +1,26 @@
1 
+<!DOCTYPE html>
2 
+<html lang="en">
3 
+
4 
+<head>
5 
+  <meta charset="utf-8" />
6 
+  <title>Ionic App</title>
7 
+
8 
+  <base href="/" />
9 
+
10 
+  <meta name="color-scheme" content="light dark" />
11 
+  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
12 
+  <meta name="format-detection" content="telephone=no" />
13 
+  <meta name="msapplication-tap-highlight" content="no" />
14 
+
15 
+  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
16 
+
17 
+  <!-- add to homescreen for ios -->
18 
+  <meta name="apple-mobile-web-app-capable" content="yes" />
19 
+  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
20 
+</head>
21 
+
22 
+<body>
23 
+  <app-root></app-root>
24 
+</body>
25 
+
26 
+</html>

+ 12 - 0
src/main.ts
Voir le fichier 

@@ -0,0 +1,12 @@
1 
+import { enableProdMode } from '@angular/core';
2 
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 
+
4 
+import { AppModule } from './app/app.module';
5 
+import { environment } from './environments/environment';
6 
+
7 
+if (environment.production) {
8 
+  enableProdMode();
9 
+}
10 
+
11 
+platformBrowserDynamic().bootstrapModule(AppModule)
12 
+  .catch(err => console.log(err));

+ 65 - 0
src/polyfills.ts
Voir le fichier 

@@ -0,0 +1,65 @@
1 
+/**
2 
+ * This file includes polyfills needed by Angular and is loaded before the app.
3 
+ * You can add your own extra polyfills to this file.
4 
+ *
5 
+ * This file is divided into 2 sections:
6 
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 
+ *      file.
9 
+ *
10 
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 
+ *
14 
+ * Learn more in https://angular.io/guide/browser-support
15 
+ */
16 
+
17 
+/***************************************************************************************************
18 
+ * BROWSER POLYFILLS
19 
+ */
20 
+
21 
+/** IE11 requires the following for NgClass support on SVG elements */
22 
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
23 
+
24 
+/**
25 
+ * Web Animations `@angular/platform-browser/animations`
26 
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 
+ */
29 
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
30 
+
31 
+/**
32 
+ * By default, zone.js will patch all possible macroTask and DomEvents
33 
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
34 
+ * because those flags need to be set before `zone.js` being loaded, and webpack
35 
+ * will put import in the top of bundle, so user need to create a separate file
36 
+ * in this directory (for example: zone-flags.ts), and put the following flags
37 
+ * into that file, and then add the following code before importing zone.js.
38 
+ * import './zone-flags';
39 
+ *
40 
+ * The flags allowed in zone-flags.ts are listed here.
41 
+ *
42 
+ * The following flags will work for all browsers.
43 
+ *
44 
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 
+ *
48 
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
50 
+ *
51 
+ *  (window as any).__Zone_enable_cross_context_check = true;
52 
+ *
53 
+ */
54 
+
55 
+import './zone-flags';
56 
+
57 
+/***************************************************************************************************
58 
+ * Zone JS is required by default for Angular itself.
59 
+ */
60 
+import 'zone.js/dist/zone';  // Included with Angular CLI.
61 
+
62 
+
63 
+/***************************************************************************************************
64 
+ * APPLICATION IMPORTS
65 
+ */

+ 25 - 0
src/test.ts
Voir le fichier 

@@ -0,0 +1,25 @@
1 
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 
+
3 
+import 'zone.js/dist/zone-testing';
4 
+import { getTestBed } from '@angular/core/testing';
5 
+import {
6 
+  BrowserDynamicTestingModule,
7 
+  platformBrowserDynamicTesting
8 
+} from '@angular/platform-browser-dynamic/testing';
9 
+
10 
+declare const require: {
11 
+  context(path: string, deep?: boolean, filter?: RegExp): {
12 
+    keys(): string[];
13 
+    <T>(id: string): T;
14 
+  };
15 
+};
16 
+
17 
+// First, initialize the Angular testing environment.
18 
+getTestBed().initTestEnvironment(
19 
+  BrowserDynamicTestingModule,
20 
+  platformBrowserDynamicTesting()
21 
+);
22 
+// Then we find all the tests.
23 
+const context = require.context('./', true, /\.spec\.ts$/);
24 
+// And load the modules.
25 
+context.keys().map(context);

+ 236 - 0
src/theme/variables.scss
Voir le fichier 

@@ -0,0 +1,236 @@
1 
+// Ionic Variables and Theming. For more info, please see:
2 
+// http://ionicframework.com/docs/theming/
3 
+
4 
+/** Ionic CSS Variables **/
5 
+:root {
6 
+  /** primary **/
7 
+  --ion-color-primary: #3880ff;
8 
+  --ion-color-primary-rgb: 56, 128, 255;
9 
+  --ion-color-primary-contrast: #ffffff;
10 
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
11 
+  --ion-color-primary-shade: #3171e0;
12 
+  --ion-color-primary-tint: #4c8dff;
13 
+
14 
+  /** secondary **/
15 
+  --ion-color-secondary: #3dc2ff;
16 
+  --ion-color-secondary-rgb: 61, 194, 255;
17 
+  --ion-color-secondary-contrast: #ffffff;
18 
+  --ion-color-secondary-contrast-rgb: 255, 255, 255;
19 
+  --ion-color-secondary-shade: #36abe0;
20 
+  --ion-color-secondary-tint: #50c8ff;
21 
+
22 
+  /** tertiary **/
23 
+  --ion-color-tertiary: #5260ff;
24 
+  --ion-color-tertiary-rgb: 82, 96, 255;
25 
+  --ion-color-tertiary-contrast: #ffffff;
26 
+  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
27 
+  --ion-color-tertiary-shade: #4854e0;
28 
+  --ion-color-tertiary-tint: #6370ff;
29 
+
30 
+  /** success **/
31 
+  --ion-color-success: #2dd36f;
32 
+  --ion-color-success-rgb: 45, 211, 111;
33 
+  --ion-color-success-contrast: #ffffff;
34 
+  --ion-color-success-contrast-rgb: 255, 255, 255;
35 
+  --ion-color-success-shade: #28ba62;
36 
+  --ion-color-success-tint: #42d77d;
37 
+
38 
+  /** warning **/
39 
+  --ion-color-warning: #ffc409;
40 
+  --ion-color-warning-rgb: 255, 196, 9;
41 
+  --ion-color-warning-contrast: #000000;
42 
+  --ion-color-warning-contrast-rgb: 0, 0, 0;
43 
+  --ion-color-warning-shade: #e0ac08;
44 
+  --ion-color-warning-tint: #ffca22;
45 
+
46 
+  /** danger **/
47 
+  --ion-color-danger: #eb445a;
48 
+  --ion-color-danger-rgb: 235, 68, 90;
49 
+  --ion-color-danger-contrast: #ffffff;
50 
+  --ion-color-danger-contrast-rgb: 255, 255, 255;
51 
+  --ion-color-danger-shade: #cf3c4f;
52 
+  --ion-color-danger-tint: #ed576b;
53 
+
54 
+  /** dark **/
55 
+  --ion-color-dark: #222428;
56 
+  --ion-color-dark-rgb: 34, 36, 40;
57 
+  --ion-color-dark-contrast: #ffffff;
58 
+  --ion-color-dark-contrast-rgb: 255, 255, 255;
59 
+  --ion-color-dark-shade: #1e2023;
60 
+  --ion-color-dark-tint: #383a3e;
61 
+
62 
+  /** medium **/
63 
+  --ion-color-medium: #92949c;
64 
+  --ion-color-medium-rgb: 146, 148, 156;
65 
+  --ion-color-medium-contrast: #ffffff;
66 
+  --ion-color-medium-contrast-rgb: 255, 255, 255;
67 
+  --ion-color-medium-shade: #808289;
68 
+  --ion-color-medium-tint: #9d9fa6;
69 
+
70 
+  /** light **/
71 
+  --ion-color-light: #f4f5f8;
72 
+  --ion-color-light-rgb: 244, 245, 248;
73 
+  --ion-color-light-contrast: #000000;
74 
+  --ion-color-light-contrast-rgb: 0, 0, 0;
75 
+  --ion-color-light-shade: #d7d8da;
76 
+  --ion-color-light-tint: #f5f6f9;
77 
+}
78 
+
79 
+@media (prefers-color-scheme: dark) {
80 
+  /*
81 
+   * Dark Colors
82 
+   * -------------------------------------------
83 
+   */
84 
+
85 
+  body {
86 
+    --ion-color-primary: #428cff;
87 
+    --ion-color-primary-rgb: 66,140,255;
88 
+    --ion-color-primary-contrast: #ffffff;
89 
+    --ion-color-primary-contrast-rgb: 255,255,255;
90 
+    --ion-color-primary-shade: #3a7be0;
91 
+    --ion-color-primary-tint: #5598ff;
92 
+
93 
+    --ion-color-secondary: #50c8ff;
94 
+    --ion-color-secondary-rgb: 80,200,255;
95 
+    --ion-color-secondary-contrast: #ffffff;
96 
+    --ion-color-secondary-contrast-rgb: 255,255,255;
97 
+    --ion-color-secondary-shade: #46b0e0;
98 
+    --ion-color-secondary-tint: #62ceff;
99 
+
100 
+    --ion-color-tertiary: #6a64ff;
101 
+    --ion-color-tertiary-rgb: 106,100,255;
102 
+    --ion-color-tertiary-contrast: #ffffff;
103 
+    --ion-color-tertiary-contrast-rgb: 255,255,255;
104 
+    --ion-color-tertiary-shade: #5d58e0;
105 
+    --ion-color-tertiary-tint: #7974ff;
106 
+
107 
+    --ion-color-success: #2fdf75;
108 
+    --ion-color-success-rgb: 47,223,117;
109 
+    --ion-color-success-contrast: #000000;
110 
+    --ion-color-success-contrast-rgb: 0,0,0;
111 
+    --ion-color-success-shade: #29c467;
112 
+    --ion-color-success-tint: #44e283;
113 
+
114 
+    --ion-color-warning: #ffd534;
115 
+    --ion-color-warning-rgb: 255,213,52;
116 
+    --ion-color-warning-contrast: #000000;
117 
+    --ion-color-warning-contrast-rgb: 0,0,0;
118 
+    --ion-color-warning-shade: #e0bb2e;
119 
+    --ion-color-warning-tint: #ffd948;
120 
+
121 
+    --ion-color-danger: #ff4961;
122 
+    --ion-color-danger-rgb: 255,73,97;
123 
+    --ion-color-danger-contrast: #ffffff;
124 
+    --ion-color-danger-contrast-rgb: 255,255,255;
125 
+    --ion-color-danger-shade: #e04055;
126 
+    --ion-color-danger-tint: #ff5b71;
127 
+
128 
+    --ion-color-dark: #f4f5f8;
129 
+    --ion-color-dark-rgb: 244,245,248;
130 
+    --ion-color-dark-contrast: #000000;
131 
+    --ion-color-dark-contrast-rgb: 0,0,0;
132 
+    --ion-color-dark-shade: #d7d8da;
133 
+    --ion-color-dark-tint: #f5f6f9;
134 
+
135 
+    --ion-color-medium: #989aa2;
136 
+    --ion-color-medium-rgb: 152,154,162;
137 
+    --ion-color-medium-contrast: #000000;
138 
+    --ion-color-medium-contrast-rgb: 0,0,0;
139 
+    --ion-color-medium-shade: #86888f;
140 
+    --ion-color-medium-tint: #a2a4ab;
141 
+
142 
+    --ion-color-light: #222428;
143 
+    --ion-color-light-rgb: 34,36,40;
144 
+    --ion-color-light-contrast: #ffffff;
145 
+    --ion-color-light-contrast-rgb: 255,255,255;
146 
+    --ion-color-light-shade: #1e2023;
147 
+    --ion-color-light-tint: #383a3e;
148 
+  }
149 
+
150 
+  /*
151 
+   * iOS Dark Theme
152 
+   * -------------------------------------------
153 
+   */
154 
+
155 
+  .ios body {
156 
+    --ion-background-color: #000000;
157 
+    --ion-background-color-rgb: 0,0,0;
158 
+
159 
+    --ion-text-color: #ffffff;
160 
+    --ion-text-color-rgb: 255,255,255;
161 
+
162 
+    --ion-color-step-50: #0d0d0d;
163 
+    --ion-color-step-100: #1a1a1a;
164 
+    --ion-color-step-150: #262626;
165 
+    --ion-color-step-200: #333333;
166 
+    --ion-color-step-250: #404040;
167 
+    --ion-color-step-300: #4d4d4d;
168 
+    --ion-color-step-350: #595959;
169 
+    --ion-color-step-400: #666666;
170 
+    --ion-color-step-450: #737373;
171 
+    --ion-color-step-500: #808080;
172 
+    --ion-color-step-550: #8c8c8c;
173 
+    --ion-color-step-600: #999999;
174 
+    --ion-color-step-650: #a6a6a6;
175 
+    --ion-color-step-700: #b3b3b3;
176 
+    --ion-color-step-750: #bfbfbf;
177 
+    --ion-color-step-800: #cccccc;
178 
+    --ion-color-step-850: #d9d9d9;
179 
+    --ion-color-step-900: #e6e6e6;
180 
+    --ion-color-step-950: #f2f2f2;
181 
+
182 
+    --ion-item-background: #000000;
183 
+
184 
+    --ion-card-background: #1c1c1d;
185 
+  }
186 
+
187 
+  .ios ion-modal {
188 
+    --ion-background-color: var(--ion-color-step-100);
189 
+    --ion-toolbar-background: var(--ion-color-step-150);
190 
+    --ion-toolbar-border-color: var(--ion-color-step-250);
191 
+  }
192 
+
193 
+
194 
+  /*
195 
+   * Material Design Dark Theme
196 
+   * -------------------------------------------
197 
+   */
198 
+
199 
+  .md body {
200 
+    --ion-background-color: #121212;
201 
+    --ion-background-color-rgb: 18,18,18;
202 
+
203 
+    --ion-text-color: #ffffff;
204 
+    --ion-text-color-rgb: 255,255,255;
205 
+
206 
+    --ion-border-color: #222222;
207 
+
208 
+    --ion-color-step-50: #1e1e1e;
209 
+    --ion-color-step-100: #2a2a2a;
210 
+    --ion-color-step-150: #363636;
211 
+    --ion-color-step-200: #414141;
212 
+    --ion-color-step-250: #4d4d4d;
213 
+    --ion-color-step-300: #595959;
214 
+    --ion-color-step-350: #656565;
215 
+    --ion-color-step-400: #717171;
216 
+    --ion-color-step-450: #7d7d7d;
217 
+    --ion-color-step-500: #898989;
218 
+    --ion-color-step-550: #949494;
219 
+    --ion-color-step-600: #a0a0a0;
220 
+    --ion-color-step-650: #acacac;
221 
+    --ion-color-step-700: #b8b8b8;
222 
+    --ion-color-step-750: #c4c4c4;
223 
+    --ion-color-step-800: #d0d0d0;
224 
+    --ion-color-step-850: #dbdbdb;
225 
+    --ion-color-step-900: #e7e7e7;
226 
+    --ion-color-step-950: #f3f3f3;
227 
+
228 
+    --ion-item-background: #1e1e1e;
229 
+
230 
+    --ion-toolbar-background: #1f1f1f;
231 
+
232 
+    --ion-tab-bar-background: #1f1f1f;
233 
+
234 
+    --ion-card-background: #1e1e1e;
235 
+  }
236 
+}

+ 6 - 0
src/zone-flags.ts
Voir le fichier 

@@ -0,0 +1,6 @@
1 
+/**
2 
+ * Prevents Angular change detection from
3 
+ * running with certain Web Component callbacks
4 
+ */
5 
+// eslint-disable-next-line no-underscore-dangle
6 
+(window as any).__Zone_disable_customElements = true;

+ 15 - 0
tsconfig.app.json
Voir le fichier 

@@ -0,0 +1,15 @@
1 
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
2 
+{
3 
+  "extends": "./tsconfig.json",
4 
+  "compilerOptions": {
5 
+    "outDir": "./out-tsc/app",
6 
+    "types": []
7 
+  },
8 
+  "files": [
9 
+    "src/main.ts",
10 
+    "src/polyfills.ts"
11 
+  ],
12 
+  "include": [
13 
+    "src/**/*.d.ts"
14 
+  ]
15 
+}

+ 23 - 0
tsconfig.json
Voir le fichier 

@@ -0,0 +1,23 @@
1 
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
2 
+{
3 
+  "compileOnSave": false,
4 
+  "compilerOptions": {
5 
+    "baseUrl": "./",
6 
+    "outDir": "./dist/out-tsc",
7 
+    "sourceMap": true,
8 
+    "declaration": false,
9 
+    "downlevelIteration": true,
10 
+    "experimentalDecorators": true,
11 
+    "moduleResolution": "node",
12 
+    "importHelpers": true,
13 
+    "target": "es2015",
14 
+    "module": "es2020",
15 
+    "lib": ["es2018", "dom"]
16 
+  },
17 
+  "angularCompilerOptions": {
18 
+    "enableI18nLegacyMessageIdFormat": false,
19 
+    "strictInjectionParameters": true,
20 
+    "strictInputAccessModifiers": true,
21 
+    "strictTemplates": true
22 
+  }
23 
+}

+ 18 - 0
tsconfig.spec.json
Voir le fichier 

@@ -0,0 +1,18 @@
1 
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
2 
+{
3 
+  "extends": "./tsconfig.json",
4 
+  "compilerOptions": {
5 
+    "outDir": "./out-tsc/spec",
6 
+    "types": [
7 
+      "jasmine"
8 
+    ]
9 
+  },
10 
+  "files": [
11 
+    "src/test.ts",
12 
+    "src/polyfills.ts"
13 
+  ],
14 
+  "include": [
15 
+    "src/**/*.spec.ts",
16 
+    "src/**/*.d.ts"
17 
+  ]
18 
+}

tum/whitesports - Gogs: Simplico Git Service
Etusivu Tutki Apua
Kirjaudu sisään
tum
/
whitesports
Tarkkaile 1
Äänestä 0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Commitit 1 Julkaisut 0 Wiki

Ei kuvausta

Puu: d01d7cf85d
Branchit Tagit
whitesports
/
app
/
wp-includes
/
class-wp-cus...

class-wp-customize-panel.php 10KB
Historia Raaka

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395 
  1. <?php
    2. 

  2. /**
    3. 

  3.  * WordPress Customize Panel classes
    4. 

  4.  *
    5. 

  5.  * @package WordPress
    6. 

  6.  * @subpackage Customize
    7. 

  7.  * @since 4.0.0
    8. 

  8.  */
    9. 

  9. 

  10. /**
    11. 

  11.  * Customize Panel class.
    12. 

  12.  *
    13. 

  13.  * A UI container for sections, managed by the WP_Customize_Manager.
    14. 

  14.  *
    15. 

  15.  * @since 4.0.0
    16. 

  16.  *
    17. 

  17.  * @see WP_Customize_Manager
    18. 

  18.  */
    19. 

  19. class WP_Customize_Panel {
    20. 

  20. 

  21. 	/**
    22. 

  22. 	 * Incremented with each new class instantiation, then stored in $instance_number.
    23. 

  23. 	 *
    24. 

  24. 	 * Used when sorting two instances whose priorities are equal.
    25. 

  25. 	 *
    26. 

  26. 	 * @since 4.1.0
    27. 

  27. 	 * @var int
    28. 

  28. 	 */
    29. 

  29. 	protected static $instance_count = 0;
    30. 

  30. 

  31. 	/**
    32. 

  32. 	 * Order in which this instance was created in relation to other instances.
    33. 

  33. 	 *
    34. 

  34. 	 * @since 4.1.0
    35. 

  35. 	 * @var int
    36. 

  36. 	 */
    37. 

  37. 	public $instance_number;
    38. 

  38. 

  39. 	/**
    40. 

  40. 	 * WP_Customize_Manager instance.
    41. 

  41. 	 *
    42. 

  42. 	 * @since 4.0.0
    43. 

  43. 	 * @var WP_Customize_Manager
    44. 

  44. 	 */
    45. 

  45. 	public $manager;
    46. 

  46. 

  47. 	/**
    48. 

  48. 	 * Unique identifier.
    49. 

  49. 	 *
    50. 

  50. 	 * @since 4.0.0
    51. 

  51. 	 * @var string
    52. 

  52. 	 */
    53. 

  53. 	public $id;
    54. 

  54. 

  55. 	/**
    56. 

  56. 	 * Priority of the panel, defining the display order of panels and sections.
    57. 

  57. 	 *
    58. 

  58. 	 * @since 4.0.0
    59. 

  59. 	 * @var integer
    60. 

  60. 	 */
    61. 

  61. 	public $priority = 160;
    62. 

  62. 

  63. 	/**
    64. 

  64. 	 * Capability required for the panel.
    65. 

  65. 	 *
    66. 

  66. 	 * @since 4.0.0
    67. 

  67. 	 * @var string
    68. 

  68. 	 */
    69. 

  69. 	public $capability = 'edit_theme_options';
    70. 

  70. 

  71. 	/**
    72. 

  72. 	 * Theme features required to support the panel.
    73. 

  73. 	 *
    74. 

  74. 	 * @since 4.0.0
    75. 

  75. 	 * @var string|string[]
    76. 

  76. 	 */
    77. 

  77. 	public $theme_supports = '';
    78. 

  78. 

  79. 	/**
    80. 

  80. 	 * Title of the panel to show in UI.
    81. 

  81. 	 *
    82. 

  82. 	 * @since 4.0.0
    83. 

  83. 	 * @var string
    84. 

  84. 	 */
    85. 

  85. 	public $title = '';
    86. 

  86. 

  87. 	/**
    88. 

  88. 	 * Description to show in the UI.
    89. 

  89. 	 *
    90. 

  90. 	 * @since 4.0.0
    91. 

  91. 	 * @var string
    92. 

  92. 	 */
    93. 

  93. 	public $description = '';
    94. 

  94. 

  95. 	/**
    96. 

  96. 	 * Auto-expand a section in a panel when the panel is expanded when the panel only has the one section.
    97. 

  97. 	 *
    98. 

  98. 	 * @since 4.7.4
    99. 

  99. 	 * @var bool
    100. 

  100. 	 */
    101. 

  101. 	public $auto_expand_sole_section = false;
    102. 

  102. 

  103. 	/**
    104. 

  104. 	 * Customizer sections for this panel.
    105. 

  105. 	 *
    106. 

  106. 	 * @since 4.0.0
    107. 

  107. 	 * @var array
    108. 

  108. 	 */
    109. 

  109. 	public $sections;
    110. 

  110. 

  111. 	/**
    112. 

  112. 	 * Type of this panel.
    113. 

  113. 	 *
    114. 

  114. 	 * @since 4.1.0
    115. 

  115. 	 * @var string
    116. 

  116. 	 */
    117. 

  117. 	public $type = 'default';
    118. 

  118. 

  119. 	/**
    120. 

  120. 	 * Active callback.
    121. 

  121. 	 *
    122. 

  122. 	 * @since 4.1.0
    123. 

  123. 	 *
    124. 

  124. 	 * @see WP_Customize_Section::active()
    125. 

  125. 	 *
    126. 

  126. 	 * @var callable Callback is called with one argument, the instance of
    127. 

  127. 	 *               WP_Customize_Section, and returns bool to indicate whether
    128. 

  128. 	 *               the section is active (such as it relates to the URL currently
    129. 

  129. 	 *               being previewed).
    130. 

  130. 	 */
    131. 

  131. 	public $active_callback = '';
    132. 

  132. 

  133. 	/**
    134. 

  134. 	 * Constructor.
    135. 

  135. 	 *
    136. 

  136. 	 * Any supplied $args override class property defaults.
    137. 

  137. 	 *
    138. 

  138. 	 * @since 4.0.0
    139. 

  139. 	 *
    140. 

  140. 	 * @param WP_Customize_Manager $manager Customizer bootstrap instance.
    141. 

  141. 	 * @param string               $id      A specific ID for the panel.
    142. 

  142. 	 * @param array                $args    {
    143. 

  143. 	 *     Optional. Array of properties for the new Panel object. Default empty array.
    144. 

  144. 	 *
    145. 

  145. 	 *     @type int             $priority        Priority of the panel, defining the display order
    146. 

  146. 	 *                                            of panels and sections. Default 160.
    147. 

  147. 	 *     @type string          $capability      Capability required for the panel.
    148. 

  148. 	 *                                            Default `edit_theme_options`.
    149. 

  149. 	 *     @type string|string[] $theme_supports  Theme features required to support the panel.
    150. 

  150. 	 *     @type string          $title           Title of the panel to show in UI.
    151. 

  151. 	 *     @type string          $description     Description to show in the UI.
    152. 

  152. 	 *     @type string          $type            Type of the panel.
    153. 

  153. 	 *     @type callable        $active_callback Active callback.
    154. 

  154. 	 * }
    155. 

  155. 	 */
    156. 

  156. 	public function __construct( $manager, $id, $args = array() ) {
    157. 

  157. 		$keys = array_keys( get_object_vars( $this ) );
    158. 

  158. 		foreach ( $keys as $key ) {
    159. 

  159. 			if ( isset( $args[ $key ] ) ) {
    160. 

  160. 				$this->$key = $args[ $key ];
    161. 

  161. 			}
    162. 

  162. 		}
    163. 

  163. 

  164. 		$this->manager = $manager;
    165. 

  165. 		$this->id      = $id;
    166. 

  166. 		if ( empty( $this->active_callback ) ) {
    167. 

  167. 			$this->active_callback = array( $this, 'active_callback' );
    168. 

  168. 		}
    169. 

  169. 		self::$instance_count += 1;
    170. 

  170. 		$this->instance_number = self::$instance_count;
    171. 

  171. 

  172. 		$this->sections = array(); // Users cannot customize the $sections array.
    173. 

  173. 	}
    174. 

  174. 

  175. 	/**
    176. 

  176. 	 * Check whether panel is active to current Customizer preview.
    177. 

  177. 	 *
    178. 

  178. 	 * @since 4.1.0
    179. 

  179. 	 *
    180. 

  180. 	 * @return bool Whether the panel is active to the current preview.
    181. 

  181. 	 */
    182. 

  182. 	final public function active() {
    183. 

  183. 		$panel  = $this;
    184. 

  184. 		$active = call_user_func( $this->active_callback, $this );
    185. 

  185. 

  186. 		/**
    187. 

  187. 		 * Filters response of WP_Customize_Panel::active().
    188. 

  188. 		 *
    189. 

  189. 		 * @since 4.1.0
    190. 

  190. 		 *
    191. 

  191. 		 * @param bool               $active Whether the Customizer panel is active.
    192. 

  192. 		 * @param WP_Customize_Panel $panel  WP_Customize_Panel instance.
    193. 

  193. 		 */
    194. 

  194. 		$active = apply_filters( 'customize_panel_active', $active, $panel );
    195. 

  195. 

  196. 		return $active;
    197. 

  197. 	}
    198. 

  198. 

  199. 	/**
    200. 

  200. 	 * Default callback used when invoking WP_Customize_Panel::active().
    201. 

  201. 	 *
    202. 

  202. 	 * Subclasses can override this with their specific logic, or they may
    203. 

  203. 	 * provide an 'active_callback' argument to the constructor.
    204. 

  204. 	 *
    205. 

  205. 	 * @since 4.1.0
    206. 

  206. 	 *
    207. 

  207. 	 * @return bool Always true.
    208. 

  208. 	 */
    209. 

  209. 	public function active_callback() {
    210. 

  210. 		return true;
    211. 

  211. 	}
    212. 

  212. 

  213. 	/**
    214. 

  214. 	 * Gather the parameters passed to client JavaScript via JSON.
    215. 

  215. 	 *
    216. 

  216. 	 * @since 4.1.0
    217. 

  217. 	 *
    218. 

  218. 	 * @return array The array to be exported to the client as JSON.
    219. 

  219. 	 */
    220. 

  220. 	public function json() {
    221. 

  221. 		$array                          = wp_array_slice_assoc( (array) $this, array( 'id', 'description', 'priority', 'type' ) );
    222. 

  222. 		$array['title']                 = html_entity_decode( $this->title, ENT_QUOTES, get_bloginfo( 'charset' ) );
    223. 

  223. 		$array['content']               = $this->get_content();
    224. 

  224. 		$array['active']                = $this->active();
    225. 

  225. 		$array['instanceNumber']        = $this->instance_number;
    226. 

  226. 		$array['autoExpandSoleSection'] = $this->auto_expand_sole_section;
    227. 

  227. 		return $array;
    228. 

  228. 	}
    229. 

  229. 

  230. 	/**
    231. 

  231. 	 * Checks required user capabilities and whether the theme has the
    232. 

  232. 	 * feature support required by the panel.
    233. 

  233. 	 *
    234. 

  234. 	 * @since 4.0.0
    235. 

  235. 	 *
    236. 

  236. 	 * @return bool False if theme doesn't support the panel or the user doesn't have the capability.
    237. 

  237. 	 */
    238. 

  238. 	final public function check_capabilities() {
    239. 

  239. 		if ( $this->capability && ! current_user_can( $this->capability ) ) {
    240. 

  240. 			return false;
    241. 

  241. 		}
    242. 

  242. 

  243. 		if ( $this->theme_supports && ! current_theme_supports( ... (array) $this->theme_supports ) ) {
    244. 

  244. 			return false;
    245. 

  245. 		}
    246. 

  246. 

  247. 		return true;
    248. 

  248. 	}
    249. 

  249. 

  250. 	/**
    251. 

  251. 	 * Get the panel's content template for insertion into the Customizer pane.
    252. 

  252. 	 *
    253. 

  253. 	 * @since 4.1.0
    254. 

  254. 	 *
    255. 

  255. 	 * @return string Content for the panel.
    256. 

  256. 	 */
    257. 

  257. 	final public function get_content() {
    258. 

  258. 		ob_start();
    259. 

  259. 		$this->maybe_render();
    260. 

  260. 		return trim( ob_get_clean() );
    261. 

  261. 	}
    262. 

  262. 

  263. 	/**
    264. 

  264. 	 * Check capabilities and render the panel.
    265. 

  265. 	 *
    266. 

  266. 	 * @since 4.0.0
    267. 

  267. 	 */
    268. 

  268. 	final public function maybe_render() {
    269. 

  269. 		if ( ! $this->check_capabilities() ) {
    270. 

  270. 			return;
    271. 

  271. 		}
    272. 

  272. 

  273. 		/**
    274. 

  274. 		 * Fires before rendering a Customizer panel.
    275. 

  275. 		 *
    276. 

  276. 		 * @since 4.0.0
    277. 

  277. 		 *
    278. 

  278. 		 * @param WP_Customize_Panel $this WP_Customize_Panel instance.
    279. 

  279. 		 */
    280. 

  280. 		do_action( 'customize_render_panel', $this );
    281. 

  281. 

  282. 		/**
    283. 

  283. 		 * Fires before rendering a specific Customizer panel.
    284. 

  284. 		 *
    285. 

  285. 		 * The dynamic portion of the hook name, `$this->id`, refers to
    286. 

  286. 		 * the ID of the specific Customizer panel to be rendered.
    287. 

  287. 		 *
    288. 

  288. 		 * @since 4.0.0
    289. 

  289. 		 */
    290. 

  290. 		do_action( "customize_render_panel_{$this->id}" );
    291. 

  291. 

  292. 		$this->render();
    293. 

  293. 	}
    294. 

  294. 

  295. 	/**
    296. 

  296. 	 * Render the panel container, and then its contents (via `this->render_content()`) in a subclass.
    297. 

  297. 	 *
    298. 

  298. 	 * Panel containers are now rendered in JS by default, see WP_Customize_Panel::print_template().
    299. 

  299. 	 *
    300. 

  300. 	 * @since 4.0.0
    301. 

  301. 	 */
    302. 

  302. 	protected function render() {}
    303. 

  303. 

  304. 	/**
    305. 

  305. 	 * Render the panel UI in a subclass.
    306. 

  306. 	 *
    307. 

  307. 	 * Panel contents are now rendered in JS by default, see WP_Customize_Panel::print_template().
    308. 

  308. 	 *
    309. 

  309. 	 * @since 4.1.0
    310. 

  310. 	 */
    311. 

  311. 	protected function render_content() {}
    312. 

  312. 

  313. 	/**
    314. 

  314. 	 * Render the panel's JS templates.
    315. 

  315. 	 *
    316. 

  316. 	 * This function is only run for panel types that have been registered with
    317. 

  317. 	 * WP_Customize_Manager::register_panel_type().
    318. 

  318. 	 *
    319. 

  319. 	 * @since 4.3.0
    320. 

  320. 	 *
    321. 

  321. 	 * @see WP_Customize_Manager::register_panel_type()
    322. 

  322. 	 */
    323. 

  323. 	public function print_template() {
    324. 

  324. 		?>
    325. 

  325. 		<script type="text/html" id="tmpl-customize-panel-<?php echo esc_attr( $this->type ); ?>-content">
    326. 

  326. 			<?php $this->content_template(); ?>
    327. 

  327. 		</script>
    328. 

  328. 		<script type="text/html" id="tmpl-customize-panel-<?php echo esc_attr( $this->type ); ?>">
    329. 

  329. 			<?php $this->render_template(); ?>
    330. 

  330. 		</script>
    331. 

  331. 		<?php
    332. 

  332. 	}
    333. 

  333. 

  334. 	/**
    335. 

  335. 	 * An Underscore (JS) template for rendering this panel's container.
    336. 

  336. 	 *
    337. 

  337. 	 * Class variables for this panel class are available in the `data` JS object;
    338. 

  338. 	 * export custom variables by overriding WP_Customize_Panel::json().
    339. 

  339. 	 *
    340. 

  340. 	 * @see WP_Customize_Panel::print_template()
    341. 

  341. 	 *
    342. 

  342. 	 * @since 4.3.0
    343. 

  343. 	 */
    344. 

  344. 	protected function render_template() {
    345. 

  345. 		?>
    346. 

  346. 		<li id="accordion-panel-{{ data.id }}" class="accordion-section control-section control-panel control-panel-{{ data.type }}">
    347. 

  347. 			<h3 class="accordion-section-title" tabindex="0">
    348. 

  348. 				{{ data.title }}
    349. 

  349. 				<span class="screen-reader-text"><?php _e( 'Press return or enter to open this panel' ); ?></span>
    350. 

  350. 			</h3>
    351. 

  351. 			<ul class="accordion-sub-container control-panel-content"></ul>
    352. 

  352. 		</li>
    353. 

  353. 		<?php
    354. 

  354. 	}
    355. 

  355. 

  356. 	/**
    357. 

  357. 	 * An Underscore (JS) template for this panel's content (but not its container).
    358. 

  358. 	 *
    359. 

  359. 	 * Class variables for this panel class are available in the `data` JS object;
    360. 

  360. 	 * export custom variables by overriding WP_Customize_Panel::json().
    361. 

  361. 	 *
    362. 

  362. 	 * @see WP_Customize_Panel::print_template()
    363. 

  363. 	 *
    364. 

  364. 	 * @since 4.3.0
    365. 

  365. 	 */
    366. 

  366. 	protected function content_template() {
    367. 

  367. 		?>
    368. 

  368. 		<li class="panel-meta customize-info accordion-section <# if ( ! data.description ) { #> cannot-expand<# } #>">
    369. 

  369. 			<button class="customize-panel-back" tabindex="-1"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
    370. 

  370. 			<div class="accordion-section-title">
    371. 

  371. 				<span class="preview-notice">
    372. 

  372. 				<?php
    373. 

  373. 					/* translators: %s: The site/panel title in the Customizer. */
    374. 

  374. 					printf( __( 'You are customizing %s' ), '<strong class="panel-title">{{ data.title }}</strong>' );
    375. 

  375. 				?>
    376. 

  376. 				</span>
    377. 

  377. 				<# if ( data.description ) { #>
    378. 

  378. 					<button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
    379. 

  379. 				<# } #>
    380. 

  380. 			</div>
    381. 

  381. 			<# if ( data.description ) { #>
    382. 

  382. 				<div class="description customize-panel-description">
    383. 

  383. 					{{{ data.description }}}
    384. 

  384. 				</div>
    385. 

  385. 			<# } #>
    386. 

  386. 

  387. 			<div class="customize-control-notifications-container"></div>
    388. 

  388. 		</li>
    389. 

  389. 		<?php
    390. 

  390. 	}
    391. 

  391. }
    392. 

  392. 

  393. /** WP_Customize_Nav_Menus_Panel class */
    394. 

  394. require_once ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php';
    395. 

  395.