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