1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | import onsPlatform from './platform.js';
|
19 | import util from './util.js';
|
20 |
|
21 | let autoStyleEnabled = true;
|
22 |
|
23 |
|
24 | const modifiersMap = {
|
25 | 'quiet': 'material--flat',
|
26 | 'light': 'material--flat',
|
27 | 'outline': 'material--flat',
|
28 | 'cta': '',
|
29 | 'large--quiet': 'material--flat large',
|
30 | 'large--cta': 'large',
|
31 | 'noborder': '',
|
32 | 'tappable': ''
|
33 | };
|
34 |
|
35 | const platforms = {};
|
36 |
|
37 | platforms.android = element => {
|
38 |
|
39 | const elementName = element.tagName.toLowerCase();
|
40 |
|
41 | if (!util.hasModifier(element, 'material')) {
|
42 | const oldModifier = element.getAttribute('modifier') || '';
|
43 |
|
44 | const newModifier = oldModifier.trim().split(/\s+/).map(e => Object.prototype.hasOwnProperty.call(modifiersMap, e) ? modifiersMap[e] : e);
|
45 | newModifier.unshift('material');
|
46 |
|
47 | element.setAttribute('modifier', newModifier.join(' ').trim());
|
48 | }
|
49 |
|
50 | const elements = [
|
51 | 'ons-alert-dialog-button',
|
52 | 'ons-toolbar-button',
|
53 | 'ons-back-button',
|
54 | 'ons-button',
|
55 | 'ons-list-item',
|
56 | 'ons-fab',
|
57 | 'ons-speed-dial',
|
58 | 'ons-speed-dial-item',
|
59 | 'ons-tab'
|
60 | ];
|
61 |
|
62 |
|
63 |
|
64 | if (elements.indexOf(elementName) !== -1
|
65 | && !element.hasAttribute('ripple')
|
66 | && !element.querySelector('ons-ripple')) {
|
67 |
|
68 | if (elementName === 'ons-list-item') {
|
69 | if (element.hasAttribute('tappable')) {
|
70 | element.setAttribute('ripple', '');
|
71 | element.removeAttribute('tappable');
|
72 | }
|
73 | } else {
|
74 | element.setAttribute('ripple', '');
|
75 | }
|
76 | }
|
77 | };
|
78 |
|
79 | platforms.ios = element => {
|
80 |
|
81 |
|
82 | if (util.removeModifier(element, 'material')) {
|
83 | if (util.removeModifier(element, 'material--flat')) {
|
84 | util.addModifier(element, (util.removeModifier(element, 'large')) ? 'large--quiet' : 'quiet');
|
85 | }
|
86 |
|
87 | if (!element.getAttribute('modifier')) {
|
88 | element.removeAttribute('modifier');
|
89 | }
|
90 | }
|
91 |
|
92 |
|
93 | if (element.hasAttribute('ripple')) {
|
94 | if (element.tagName.toLowerCase() === 'ons-list-item') {
|
95 | element.setAttribute('tappable', '');
|
96 | }
|
97 |
|
98 | element.removeAttribute('ripple');
|
99 | }
|
100 | };
|
101 |
|
102 | const unlocked = {
|
103 | android: true
|
104 | };
|
105 |
|
106 | const getPlatform = (element, force) => {
|
107 | if (autoStyleEnabled && !element.hasAttribute('disable-auto-styling')) {
|
108 | const mobileOS = onsPlatform.getMobileOS();
|
109 | if (Object.prototype.hasOwnProperty.call(platforms, mobileOS) && (Object.prototype.hasOwnProperty.call(unlocked, mobileOS) || force)) {
|
110 | return mobileOS;
|
111 | }
|
112 | }
|
113 | return null;
|
114 | };
|
115 |
|
116 | const prepare = (element, force) => {
|
117 | const p = getPlatform(element, force);
|
118 | p && platforms[p](element);
|
119 | };
|
120 |
|
121 | const mapModifier = (modifier, element, force) => {
|
122 | if (getPlatform(element, force)) {
|
123 | return modifier.split(/\s+/).map(m => Object.prototype.hasOwnProperty.call(modifiersMap, m) ? modifiersMap[m] : m).join(' ');
|
124 | }
|
125 | return modifier;
|
126 | };
|
127 |
|
128 | const restoreModifier = element => {
|
129 | if (getPlatform(element) === 'android') {
|
130 | const modifier = element.getAttribute('modifier') || '';
|
131 | let newModifier = mapModifier(modifier, element);
|
132 |
|
133 | if (!/(^|\s+)material($|\s+)/i.test(modifier)) {
|
134 | newModifier = 'material ' + newModifier;
|
135 | }
|
136 |
|
137 | if (newModifier !== modifier) {
|
138 | element.setAttribute('modifier', newModifier.trim());
|
139 | return true;
|
140 | }
|
141 | }
|
142 | return false;
|
143 | };
|
144 |
|
145 | export default {
|
146 | isEnabled: () => autoStyleEnabled,
|
147 | enable: () => autoStyleEnabled = true,
|
148 | disable: () => autoStyleEnabled = false,
|
149 | prepare,
|
150 | mapModifier,
|
151 | getPlatform,
|
152 | restoreModifier
|
153 | };
|