1 | /*
|
2 | Copyright 2013-2015 ASIAL CORPORATION
|
3 |
|
4 | Licensed under the Apache License, Version 2.0 (the "License");
|
5 | you may not use this file except in compliance with the License.
|
6 | You may obtain a copy of the License at
|
7 |
|
8 | http://www.apache.org/licenses/LICENSE-2.0
|
9 |
|
10 | Unless required by applicable law or agreed to in writing, software
|
11 | distributed under the License is distributed on an "AS IS" BASIS,
|
12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13 | See the License for the specific language governing permissions and
|
14 | limitations under the License.
|
15 |
|
16 | */
|
17 |
|
18 | import onsElements from '../ons/elements.js';
|
19 | import orientation from '../ons/orientation.js';
|
20 | import platform from '../ons/platform.js';
|
21 | import BaseElement from './base/base-element.js';
|
22 | import contentReady from '../ons/content-ready.js';
|
23 |
|
24 | /**
|
25 | * @element ons-if
|
26 | * @category conditional
|
27 | * @tutorial vanilla/Reference/if
|
28 | * @description
|
29 | * [en]
|
30 | * Conditionally display content depending on the platform, device orientation or both.
|
31 | *
|
32 | * Sometimes it is useful to conditionally hide or show certain components based on platform. When running on iOS the `<ons-if>` element can be used to hide the `<ons-fab>` element.
|
33 | * [/en]
|
34 | * [ja][/ja]
|
35 | * @guide theming.html#cross-platform-styling-autostyling [en]Information about cross platform styling[/en][ja]Information about cross platform styling[/ja]
|
36 | * @example
|
37 | * <ons-page>
|
38 | * <ons-if orientation="landscape">
|
39 | * Landscape view!
|
40 | * </ons-if>
|
41 | * <ons-if platform="android">
|
42 | * This is Android.
|
43 | * </ons-if>
|
44 | * <ons-if platform="ios other">
|
45 | * This is not Android.
|
46 | * </ons-if>
|
47 | * </ons-page>
|
48 | */
|
49 | export default class IfElement extends BaseElement {
|
50 |
|
51 | /**
|
52 | * @attribute platform
|
53 | * @initonly
|
54 | * @type {string}
|
55 | * @description
|
56 | * [en]Space-separated platform names. Possible values are `"ios"`, `"android"`, `"windows"` and `"other"`.[/en]
|
57 | * [ja][/ja]
|
58 | */
|
59 |
|
60 | /**
|
61 | * @attribute orientation
|
62 | * @type {string}
|
63 | * @description
|
64 | * [en]Either `"portrait"` or `"landscape"`.[/en]
|
65 | * [ja]portraitもしくはlandscapeを指定します[/ja]
|
66 | */
|
67 |
|
68 | constructor() {
|
69 | super();
|
70 |
|
71 | contentReady(this, () => {
|
72 | if (platform._getSelectedPlatform() !== null) {
|
73 | this._platformUpdate();
|
74 | } else if (!this._isAllowedPlatform()) {
|
75 | while (this.childNodes[0]) {
|
76 | this.childNodes[0].remove();
|
77 | }
|
78 | this._platformUpdate();
|
79 | }
|
80 | });
|
81 |
|
82 | this._onOrientationChange();
|
83 | }
|
84 |
|
85 | connectedCallback() {
|
86 | orientation.on('change', this._onOrientationChange.bind(this));
|
87 | }
|
88 |
|
89 | static get observedAttributes() {
|
90 | return ['orientation'];
|
91 | }
|
92 |
|
93 | attributeChangedCallback(name) {
|
94 | if (name === 'orientation') {
|
95 | this._onOrientationChange();
|
96 | }
|
97 | }
|
98 |
|
99 | disconnectedCallback() {
|
100 | orientation.off('change', this._onOrientationChange);
|
101 | }
|
102 |
|
103 | _platformUpdate() {
|
104 | this.style.display = this._isAllowedPlatform() ? '' : 'none';
|
105 | }
|
106 |
|
107 | _isAllowedPlatform() {
|
108 | return !this.getAttribute('platform') || this.getAttribute('platform').split(/\s+/).indexOf(platform.getMobileOS()) >= 0;
|
109 | }
|
110 |
|
111 | _onOrientationChange() {
|
112 | if (this.hasAttribute('orientation') && this._isAllowedPlatform()) {
|
113 | const conditionalOrientation = this.getAttribute('orientation').toLowerCase();
|
114 | const currentOrientation = orientation.isPortrait() ? 'portrait' : 'landscape';
|
115 |
|
116 | this.style.display = (conditionalOrientation === currentOrientation) ? '' : 'none';
|
117 | }
|
118 | }
|
119 | }
|
120 |
|
121 | onsElements.If = IfElement;
|
122 | customElements.define('ons-if', IfElement);
|