aui

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Aui.Mixin - aui.coffee</title> <link rel="stylesheet" href="assets/style.css"> <style> </style> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> <meta name="groc-relative-root" content=""/> <meta name="groc-document-path" content="aui.coffee"/> </head> <body> <div id="file-area"> <div id="meta"> <code class="file-path"> aui.coffee </code> </div> <div id="document"> <div class="segment"> <div class="code"><div class="wrapper">{React, jQuery} = <span class="hljs-built_in">window</span> <span class="hljs-keyword">or</span> <span class="hljs-built_in">global</span> <span class="hljs-keyword">unless</span> React? <span class="hljs-keyword">then</span> <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> Error <span class="hljs-string">"Aui: window.React not found."</span> <span class="hljs-keyword">unless</span> jQuery? <span class="hljs-keyword">then</span> <span class="hljs-built_in">console</span>.warn <span class="hljs-string">"Aui: window.jQuery not found, Modules and Semantic-UI will be disabled."</span> <span class="hljs-keyword">unless</span> jQuery?.site?.settings?.modules? <span class="hljs-keyword">then</span> <span class="hljs-built_in">console</span>.warn <span class="hljs-string">'Aui: No Semantic-UI window.jQuery.site.settings.modules found, Semantic will be disabled.'</span> </div></div> </div> <div class="segment"> <div class="comments "> <div class="wrapper"><p><a href="http://javascriptismagic.github.io/aui/">JSFiddle around with the examples here!</a></p> <h1 id="aui-mixin"><a href="#aui-mixin" class="anchor"></a>Aui.Mixin</h1><p>Aui.Mixin is the main wrapper around React Components it recursively goes through all it's children, finding props that === true or are on the <code>Aui.modules</code> list, and merges them into the className of each element.</p> </div> </div> <div class="code"><div class="wrapper">AuiMixin =</div></div> </div> <div class="segment"> <div class="comments "> <div class="wrapper"><h1 id="this-39-react-ref-39-"><a href="#this-39-react-ref-39-" class="anchor"></a>this.$('react ref')</h1><p>jQuery wraps a React ref <code><div ref="react ref" /></code> or jQuery selector <code>this.$('react ref')</code>. This is the intended way to interact with jQuery to supply utility functionality. <strong>Warning!</strong> Use this only in <code>componentDidMount</code> or event handlers! Do NOT use jQuery to re-arange the dom or you will run into Invarient erros in React, use React to arange your dom ahead of time as React is expecting.</p> </div> </div> <div class="code"><div class="wrapper"> <span class="hljs-attribute">$</span>: <span class="hljs-function"><span class="hljs-params">(ref)</span> -></span> jQuery React.findDOMNode <span class="hljs-property">@refs</span>[ref] <span class="hljs-keyword">or</span> ref <span class="hljs-attribute">componentWillMount</span>: <span class="hljs-function">-></span> render = <span class="hljs-property">@render</span> <span class="hljs-property">@render</span> = <span class="hljs-function">-></span> element = render?.apply? @, arguments <span class="hljs-keyword">if</span> React.isValidElement element Aui.classify element <span class="hljs-keyword">else</span> Aui.classify Aui.warning <span class="hljs-string">'Aui.Mixin: Child is not a React.isValidElement'</span>, element </div></div> </div> <div class="segment"> <div class="comments "> <div class="wrapper"><p>(depricated) <code><Aui/></code> tag, use Aui.Mixin instead.</p> </div> </div> <div class="code"><div class="wrapper">Aui = React.createClass <span class="hljs-attribute">mixins</span>: [AuiMixin] <span class="hljs-attribute">render</span>: <span class="hljs-function">-></span> Aui.warning <span class="hljs-string">'<Aui/> tag is depricated, use Aui.Mixin instead'</span>, <span class="hljs-property">@props</span>.children <span class="hljs-attribute">componentDidMount</span>: <span class="hljs-function">-></span> <span class="hljs-built_in">console</span>.warn React.findDOMNode @ Aui.Mixin = Aui.AuiMixin = AuiMixin Aui.Aui = Aui</div></div> </div> <div class="segment"> <div class="comments "> <div class="wrapper"><h1 id="aui-"><a href="#aui-" class="anchor"></a>Aui.$</h1><p>The instance of jQuery Aui is using, if needed.</p> </div> </div> <div class="code"><div class="wrapper">Aui.$ = jQuery </div></div> </div> <div class="segment"> <div class="comments "> <div class="wrapper"><h1 id="aui-classify-element-"><a href="#aui-classify-element-" class="anchor"></a>Aui.classify(element)</h1><p>finds all the props that === true or are on the <code>Aui.modules</code> list, and merging them with the className prop. Use this inside the render function like a React helper function. Example: <code>Aui.classify(<div ui grid><div column>content</div></div>)</code> returns <code><div ui grid className="ui grid"><div column className="column">content</div></div></code></p> </div> </div> <div class="code"><div class="wrapper">Aui.classify = <span class="hljs-function"><span class="hljs-params">(element, options)</span> -></span> options = AuiOptions options <span class="hljs-keyword">unless</span> React.isValidElement element element = Aui.warning <span class="hljs-string">'Aui.classify: element is not a React.isValidElement'</span>, element <span class="hljs-function"> <span class="hljs-title">classify</span> = <span class="hljs-params">(element)</span> -></span> <span class="hljs-keyword">return</span> element <span class="hljs-keyword">unless</span> React.isValidElement element classNames = {} modules = <span class="hljs-literal">null</span> props = {} <span class="hljs-keyword">if</span> element.props.className? <span class="hljs-keyword">for</span> className <span class="hljs-keyword">in</span> <span class="hljs-string">"<span class="hljs-subst">#{element.props.className}</span>"</span>.split <span class="hljs-regexp">/\s+/g</span> classNames[className] = <span class="hljs-literal">yes</span> <span class="hljs-keyword">for</span> own key, value <span class="hljs-keyword">of</span> element.props classNames[key] = <span class="hljs-literal">yes</span> <span class="hljs-keyword">if</span> value <span class="hljs-keyword">is</span> <span class="hljs-literal">yes</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">not</span> options.disableModules) <span class="hljs-keyword">and</span> (Array.isArray value) <span class="hljs-keyword">and</span> (key <span class="hljs-keyword">in</span> Aui.modules) classNames[key] = <span class="hljs-literal">yes</span> modules <span class="hljs-keyword">or</span>= {} modules[key] = value props[key] = value props.className = Object.keys(classNames).join <span class="hljs-string">' '</span> <span class="hljs-keyword">unless</span> props.className.length <span class="hljs-keyword">delete</span> props.className element = React.cloneElement element, props, <span class="hljs-keyword">if</span> options.ignoreChildren <span class="hljs-keyword">then</span> element.props.children <span class="hljs-keyword">else</span> React.Children.map element.props.children, classify <span class="hljs-keyword">if</span> modules React.createElement Aui.Module, { modules, options }, element <span class="hljs-keyword">else</span> element classify element </div></div> </div> <div class="segment"> <div class="comments "> <div class="wrapper"><h1 id="aui-warning-39-string-39-element-"><a href="#aui-warning-39-string-39-element-" class="anchor"></a>Aui.warning('string', element)</h1><p>console.warn a warning message inside a ReactElement durring a React Component's render function. returns the element wrapped in a warning span. Use inside the render function of a React Component</p> </div> </div> <div class="code"><div class="wrapper">Aui.warning = <span class="hljs-function"><span class="hljs-params">(message, element)</span> -></span> <span class="hljs-built_in">console</span>.warn message, element React.DOM.span { <span class="hljs-string">'data-warning'</span>: message }, element Aui.settings =</div></div> </div> <div class="segment"> <div class="comments "> <div class="wrapper"><h1 id="aui-settings-disablemodules"><a href="#aui-settings-disablemodules" class="anchor"></a>Aui.settings.disableModules</h1><p>disables jQuery based Aui.modules from calling</p> </div> </div> <div class="code"><div class="wrapper"> <span class="hljs-attribute">disableModules</span>: <span class="hljs-keyword">not</span> jQuery?</div></div> </div> <div class="segment"> <div class="comments "> <div class="wrapper"><h1 id="aui-settings-ignorechildren"><a href="#aui-settings-ignorechildren" class="anchor"></a>Aui.settings.ignoreChildren</h1><p>disables recursively calling <code>Aui.classify</code> to <code>props.children</code>.</p> </div> </div> <div class="code"><div class="wrapper"> <span class="hljs-attribute">ignoreChildren</span>: <span class="hljs-literal">no</span> </div></div> </div> <div class="segment"> <div class="comments "> <div class="wrapper"><p>(internal) AuiOptions defaults options for <code>Aui.classify</code></p> </div> </div> <div class="code"><div class="wrapper"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AuiOptions</span></span> <span class="hljs-attribute">constructor</span>: <span class="hljs-function"><span class="hljs-params">(options)</span> -></span> <span class="hljs-keyword">if</span> options <span class="hljs-keyword">instanceof</span> AuiOptions <span class="hljs-keyword">return</span> options <span class="hljs-keyword">unless</span> @ <span class="hljs-keyword">instanceof</span> AuiOptions <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> AuiOptions options options <span class="hljs-keyword">or</span>= {} <span class="hljs-keyword">for</span> own key, value <span class="hljs-keyword">of</span> Aui.settings @[key] = <span class="hljs-keyword">if</span> options[key]? <span class="hljs-keyword">then</span> options[key] <span class="hljs-keyword">else</span> value </div></div> </div> <div class="segment"> <div class="comments "> <div class="wrapper"><h1 id="aui-modules"><a href="#aui-modules" class="anchor"></a>Aui.modules</h1><p>A whitelist of jQuery modules. <code>Aui.modules.push('widget')</code> to configure Aui to support <code>$.fn.widget</code>. By default this includes <code>window.jQuery.site.settings.modules</code> from Semantic-UI. When a property is encountered on a ReactElement that matches this whitelist and is an Array, the corisponding <code>window.jQuery.fn[modulename]</code> will be called with the property's array value. This is mostly intended for use with Semantic-UI's javascript, but in theory could be used to call any <code>$.fn</code> function.</p> </div> </div> <div class="code"><div class="wrapper">Aui.modules = (jQuery?.site?.settings?.modules <span class="hljs-keyword">or</span> []).slice() </div></div> </div> <div class="segment"> <div class="comments "> <div class="wrapper"><p>internal global cache of options passed to module functions.</p> </div> </div> <div class="code"><div class="wrapper">cache = {} </div></div> </div> <div class="segment"> <div class="comments "> <div class="wrapper"><p>(internal) <code><Aui.Module/></code> This class provides support for <code>Aui.modules</code> internally and generally is not used directly. <code><Aui.Module/></code> handles calling jQuery.fn[module] calls when used inside a React Component's render. <code><div ui checkbox={[]}/></code> will automatically call <code>$.fn.checkbox()</code>, and <code><form ui form={[{...}]}></form></code> will automatically call <code>$.fn.form({...})</code></p> </div> </div> <div class="code"><div class="wrapper">Aui.Module = React.createClass <span class="hljs-attribute">render</span>: <span class="hljs-function">-></span> React.Children.only <span class="hljs-property">@props</span>.children <span class="hljs-attribute">componentDidMount</span>: <span class="hljs-function">-></span> <span class="hljs-property">@callModules</span> <span class="hljs-property">@props</span>.children.props <span class="hljs-attribute">componentWillReceiveProps</span>: <span class="hljs-function"><span class="hljs-params">(props)</span> -></span> <span class="hljs-property">@callModules</span> props.children.props <span class="hljs-attribute">callModules</span>: <span class="hljs-function"><span class="hljs-params">(props)</span> -></span> $element = jQuery React.findDOMNode @ <span class="hljs-property">@id</span> = $element.attr <span class="hljs-string">'data-reactid'</span> cache[<span class="hljs-property">@id</span>] <span class="hljs-keyword">or</span>= {} <span class="hljs-keyword">for</span> own <span class="hljs-built_in">module</span>, options <span class="hljs-keyword">of</span> <span class="hljs-property">@props</span>.modules stringifiedOptions = JSON.stringify options <span class="hljs-keyword">if</span> cache[<span class="hljs-property">@id</span>][<span class="hljs-built_in">module</span>] <span class="hljs-keyword">isnt</span> stringifiedOptions cache[<span class="hljs-property">@id</span>][<span class="hljs-built_in">module</span>] = stringifiedOptions $element[<span class="hljs-built_in">module</span>]? <span class="hljs-property">@props</span>.children.props[<span class="hljs-built_in">module</span>]... <span class="hljs-keyword">return</span> <span class="hljs-attribute">componentWillUnmount</span>: <span class="hljs-function">-></span> <span class="hljs-keyword">delete</span> cache[<span class="hljs-property">@id</span>] <span class="hljs-built_in">window</span>?.Aui = Aui <span class="hljs-built_in">module</span>?.exports = Aui </div></div> </div> </div> </div> <script src="toc.js"></script> <script src="assets/libs.js"></script> <script src="assets/behavior.js"></script> <script> </script> </body> </html>