Flex Stylesheet Mixin - Custom Properties in CSS


/ Published in: ActionScript 3
Save to your folder(s)



Copy this code and paste it in your HTML
  1. // =================================================================
  2. /*
  3.  * Copyright (c) 2010 viatropos http://www.viatropos.com/
  4.  * Lance Pollard
  5.  * lancejpollard at gmail dot com
  6.  *
  7.  * Permission is hereby granted, free of charge, to any person
  8.  * obtaining a copy of this software and associated documentation
  9.  * files (the "Software"), to deal in the Software without
  10.  * restriction, including without limitation the rights to use,
  11.  * copy, modify, merge, publish, distribute, sublicense, and/or sell
  12.  * copies of the Software, and to permit persons to whom the
  13.  * Software is furnished to do so, subject to the following
  14.  * conditions:
  15.  *
  16.  * The above copyright notice and this permission notice shall be
  17.  * included in all copies or substantial portions of the Software.
  18.  *
  19.  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  20.  * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
  21.  * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  22.  * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
  23.  * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
  24.  * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  25.  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
  26.  * OTHER DEALINGS IN THE SOFTWARE.
  27.  */
  28. // =================================================================
  29.  
  30. package
  31. {
  32. import flash.display.Sprite;
  33. import flash.events.Event;
  34. import flash.utils.getDefinitionByName;
  35.  
  36. import mx.core.IMXMLObject;
  37. import mx.core.Singleton;
  38. import mx.styles.CSSStyleDeclaration;
  39. import mx.styles.IStyleManager2;
  40. import mx.styles.StyleManager;
  41.  
  42. public class StylesheetMixin implements IMXMLObject
  43. {
  44. private var _palettes:Array;
  45. /**
  46. * Classes of static constants storing values for css
  47. */
  48. public function get palettes():Array
  49. {
  50. return _palettes;
  51. }
  52. public function set palettes(value:Array):void
  53. {
  54. _palettes = value;
  55. }
  56.  
  57. public function StylesheetMixin()
  58. {
  59. }
  60.  
  61. public function setStyles():void
  62. {
  63. // get all selectors in the application
  64. var styleManager:IStyleManager2 = getStyleManager();
  65. var selectors:Array = styleManager.selectors;
  66. var declaration:CSSStyleDeclaration;
  67. var i:int = 0;
  68. var n:int = selectors.length;
  69. for (i; i < n; i++)
  70. {
  71. declaration = styleManager.getStyleDeclaration(selectors[i]);
  72. // set palette properties to each declaration
  73. setProperties(declaration);
  74. }
  75. }
  76.  
  77. protected function getStyleManager():IStyleManager2
  78. {
  79. var application:*;
  80. try {
  81. application = flash.utils.getDefinitionByName("mx.core::FlexGlobals")["topLevelApplication"];
  82. if (application)
  83. return application.styleManager as IStyleManager2;
  84. } catch (error:Error) {
  85. application = flash.utils.getDefinitionByName("mx.core::Application")["application"];
  86. if (application)
  87. return IStyleManager2(Singleton.getInstance("mx.styles::IStyleManager2"));
  88. }
  89. return null;
  90. }
  91.  
  92. protected function setProperties(declaration:CSSStyleDeclaration):void
  93. {
  94. var selector:Object = getDeclarationToken(declaration);
  95. var property:String;
  96. for (property in selector)
  97. {
  98. setProperty(declaration, property, selector[property]);
  99. }
  100. }
  101.  
  102. public function getDeclarationToken(declaration:CSSStyleDeclaration):Object
  103. {
  104. var selector:Object = {factory:declaration.factory};
  105. // maybe your selector has a "factory" property which we should avoid?
  106. if (!(typeof(selector.factory) == "function") || selector.factory == null)
  107. return null;
  108. selector.factory();
  109. delete selector.factory;
  110. return selector;
  111. }
  112.  
  113. public function setProperty(declaration:CSSStyleDeclaration, property:String, value:*):*
  114. {
  115. var paletteValue:*;
  116. var changed:Boolean = false;
  117. if (value is Array)
  118. {
  119. var i:int = 0;
  120. var n:int = value.length;
  121. for (i; i < n; i++)
  122. {
  123. paletteValue = getPaletteItem(value[i]);
  124. if (paletteValue)
  125. {
  126. changed = true;
  127. value[i] = paletteValue;
  128. }
  129. }
  130.  
  131. }
  132. else if (value is String)
  133. {
  134. paletteValue = getPaletteItem(value);
  135. if (paletteValue)
  136. {
  137. value = paletteValue;
  138. changed = true;
  139. }
  140. }
  141. if (changed)
  142. {
  143. declaration.setStyle(property, value);
  144. }
  145. }
  146.  
  147. public function getPaletteItem(targetId:String):*
  148. {
  149. var i:int = 0;
  150. var n:int = palettes.length;
  151. var PaletteClass:Object;
  152. for (i; i < n; i++)
  153. {
  154. PaletteClass = palettes[i];
  155. if (PaletteClass[targetId])
  156. return PaletteClass[targetId];
  157. }
  158. return null;
  159. }
  160.  
  161. private var timer:Sprite = new Sprite();
  162. // have to wait a frame for styles to be initialized
  163. public function initialized(document:Object, id:String):void
  164. {
  165. var handler:Function = function(event:Event):void
  166. {
  167. timer.removeEventListener(Event.ENTER_FRAME, handler);
  168. timer = null;
  169. setStyles();
  170. }
  171. timer.addEventListener(Event.ENTER_FRAME, handler);
  172. }
  173. }
  174. }

URL: flex-stylesheet-mixin

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.