123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150 |
- /*
- Copyright 2013-2015 ASIAL CORPORATION
-
- 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 onsPlatform from './platform';
- import util from './util';
-
- var autoStyleEnabled = true;
-
- // Modifiers
- var modifiersMap = {
- 'quiet': 'material--flat',
- 'light': 'material--flat',
- 'outline': 'material--flat',
- 'cta': '',
- 'large--quiet': 'material--flat large',
- 'large--cta': 'large',
- 'noborder': '',
- 'tappable': ''
- };
-
- var platforms = {};
-
- platforms.android = function (element) {
-
- var elementName = element.tagName.toLowerCase();
-
- if (!util.hasModifier(element, 'material')) {
- var oldModifier = element.getAttribute('modifier') || '';
-
- var newModifier = oldModifier.trim().split(/\s+/).map(function (e) {
- return modifiersMap.hasOwnProperty(e) ? modifiersMap[e] : e;
- });
- newModifier.unshift('material');
-
- element.setAttribute('modifier', newModifier.join(' ').trim());
- }
-
- 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'];
-
- // Effects
- if (elements.indexOf(elementName) !== -1 && !element.hasAttribute('ripple') && !element.querySelector('ons-ripple')) {
-
- if (elementName === 'ons-list-item') {
- if (element.hasAttribute('tappable')) {
- element.setAttribute('ripple', '');
- element.removeAttribute('tappable');
- }
- } else {
- element.setAttribute('ripple', '');
- }
- }
- };
-
- platforms.ios = function (element) {
-
- // Modifiers
- if (util.removeModifier(element, 'material')) {
- if (util.removeModifier(element, 'material--flat')) {
- util.addModifier(element, util.removeModifier(element, 'large') ? 'large--quiet' : 'quiet');
- }
-
- if (!element.getAttribute('modifier')) {
- element.removeAttribute('modifier');
- }
- }
-
- // Effects
- if (element.hasAttribute('ripple')) {
- if (element.tagName.toLowerCase() === 'ons-list-item') {
- element.setAttribute('tappable', '');
- }
-
- element.removeAttribute('ripple');
- }
- };
-
- var unlocked = {
- android: true
- };
-
- var getPlatform = function getPlatform(element, force) {
- if (autoStyleEnabled && !element.hasAttribute('disable-auto-styling')) {
- var mobileOS = onsPlatform.getMobileOS();
- if (platforms.hasOwnProperty(mobileOS) && (unlocked.hasOwnProperty(mobileOS) || force)) {
- return mobileOS;
- }
- }
- return null;
- };
-
- var prepare = function prepare(element, force) {
- var p = getPlatform(element, force);
- p && platforms[p](element);
- };
-
- var mapModifier = function mapModifier(modifier, element, force) {
- if (getPlatform(element, force)) {
- return modifier.split(/\s+/).map(function (m) {
- return modifiersMap.hasOwnProperty(m) ? modifiersMap[m] : m;
- }).join(' ');
- }
- return modifier;
- };
-
- var restoreModifier = function restoreModifier(element) {
- if (getPlatform(element) === 'android') {
- var modifier = element.getAttribute('modifier') || '';
- var newModifier = mapModifier(modifier, element);
-
- if (!/(^|\s+)material($|\s+)/i.test(modifier)) {
- newModifier = 'material ' + newModifier;
- }
-
- if (newModifier !== modifier) {
- element.setAttribute('modifier', newModifier.trim());
- return true;
- }
- }
- return false;
- };
-
- export default {
- isEnabled: function isEnabled() {
- return autoStyleEnabled;
- },
- enable: function enable() {
- return autoStyleEnabled = true;
- },
- disable: function disable() {
- return autoStyleEnabled = false;
- },
- prepare: prepare,
- mapModifier: mapModifier,
- getPlatform: getPlatform,
- restoreModifier: restoreModifier
- };
|