/* <copyright> This file contains proprietary software owned by Motorola Mobility, Inc.<br/> No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. </copyright> */ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component; exports.PresetsController = Montage.create(Component, { hasTemplate : { value: false }, transitionClass : { value : "nj-preset-transition" }, addTransition: { value: function(element) { var transitionDuration; element.classList.add(this.transitionClass); element.addEventListener("webkitTransitionEnd", this, true); //// TODO: replace this hack when webkit supports transitionStart event transitionDuration = this.application.ninja.stylesController.getElementStyle(element, '-webkit-transition-duration', true); element.njTimeout = window.setTimeout(function() { this.captureWebkitTransitionEnd({ 'target': element }); }.bind(this), this._getMilliseconds(transitionDuration) + 100); } }, _getMilliseconds : { value: function(duration) { if(duration.indexOf('ms') !== -1) { return parseInt(duration); } else { return parseFloat(duration)*1000; } } }, captureWebkitTransitionEnd : { value : function(e) { var el = e.target; //// TODO: replace this hack when webkit supports transitionStart event (see above) window.clearTimeout(el.njTimeout); el.classList.remove(this.transitionClass); el.removeEventListener("webkitTransitionEnd", this, true); } }, applyPreset : { value: function(presetData, useTransition) { var selection = this.application.ninja.selectedElements; if(!selection || !selection.length || selection.length === 0) { return false; } var stylesController = this.application.ninja.stylesController, selectorBase = presetData.selectorBase, rules = [], animationNames = []; selectorBase = stylesController.generateClassName(selectorBase); selection.forEach(function(element) { var animationName; if(useTransition) { this.addTransition(element); } ///// TODO: remove when we find out what to do with competing animations animationName = stylesController.getElementStyle(element, '-webkit-animation-name'); if(animationName) { animationNames.push(animationName); } element.classList.add(selectorBase); }, this); presetData.rules.forEach(function(rule, i) { ///// Treat keyframed rules differently if(rule.isKeyFrameRule) { this.application.ninja.stylesController.addRule( '@-webkit-keyframes ' + presetData.selectorBase, this.stringifyKeys(rule.keys) ); } else { var suffix = rule.selectorSuffix || ''; ///// TODO: remove when we find out what to do with competing animations if(rule.styles['-webkit-animation-name'] && animationNames.length) { rule.styles['-webkit-animation-name'] += ',' + animationNames.join(','); } rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); } }, this); } }, stringifyKeys : { value: function(keysArray) { var keysString = ''; keysArray.forEach(function(key) { var styles = '', style; for(style in key.styles) { styles += style + ':' + key.styles[style] + '; '; } keysString += key.keyText + ' {' + styles + ' }'; }); return keysString; } } });