Added template module

This commit is contained in:
Timothy Warren 2011-11-15 12:03:12 -05:00
parent 057e8c1dd7
commit f98323aeec
17 changed files with 749 additions and 35 deletions

1
.gitignore vendored
View File

@ -2,3 +2,4 @@ kis-custom.js
kis-custom-min.js
combine-build.php
test.html
index.php

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -16,7 +16,7 @@
<span class='line'> 9</span>
<span class='line'> 10</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">d</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 11</span> </span><span class="WHIT">
<span class='line'> 12</span> </span><span class="COMM">//Private function for getting/setting attributes</span><span class="WHIT">
<span class='line'> 12</span> </span><span class="COMM">//Private function for getting/setting attributes/properties</span><span class="WHIT">
<span class='line'> 13</span> </span><span class="WHIT"> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">_attr</span><span class="PUNC">(</span><span class="NAME">sel</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">name</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">value</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 14</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 15</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">oldVal</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">doAttr</span><span class="PUNC">;</span><span class="WHIT">

View File

@ -0,0 +1,240 @@
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>
.KEYW {color: #933;}
.COMM {color: #bbb; font-style: italic;}
.NUMB {color: #393;}
.STRN {color: #393;}
.REGX {color: #339;}
.line {border-right: 1px dotted #666; color: #666; font-style: normal;}
</style></head><body><pre><span class='line'> 1</span> <span class="COMM">/**
<span class='line'> 2</span> * Template module for simple javascript templating
<span class='line'> 3</span> */</span><span class="WHIT">
<span class='line'> 4</span> </span><span class="PUNC">(</span><span class="KEYW">function</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 5</span> </span><span class="WHIT"> </span><span class="STRN">"use strict"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 6</span> </span><span class="WHIT">
<span class='line'> 7</span> </span><span class="COMM">//This module relies on some others for simplicity</span><span class="WHIT">
<span class='line'> 8</span> </span><span class="WHIT"> </span><span class="COMM">//so, if they aren't there, don't initialize the module</span><span class="WHIT">
<span class='line'> 9</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">$_.ajax</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">"undefined"</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 10</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 11</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 12</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 13</span> </span><span class="WHIT">
<span class='line'> 14</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">t</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">_t</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">_p</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 15</span> </span><span class="WHIT">
<span class='line'> 16</span>
<span class='line'> 17</span> </span><span class="COMM">//Private object to store retrieved templates</span><span class="WHIT">
<span class='line'> 18</span> </span><span class="WHIT"> </span><span class="NAME">_t</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 19</span> </span><span class="WHIT">
<span class='line'> 20</span> </span><span class="COMM">//Private object to store parsed templates</span><span class="WHIT">
<span class='line'> 21</span> </span><span class="WHIT"> </span><span class="NAME">_p</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 22</span> </span><span class="WHIT">
<span class='line'> 23</span>
<span class='line'> 24</span> </span><span class="COMM">/**
<span class='line'> 25</span> * Module for html templating. Requires ajax module.
<span class='line'> 26</span> *
<span class='line'> 27</span> * @name template
<span class='line'> 28</span> * @namespace
<span class='line'> 29</span> * @memberOf $_
<span class='line'> 30</span> */</span><span class="WHIT">
<span class='line'> 31</span> </span><span class="WHIT"> </span><span class="NAME">t</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 32</span> </span><span class="WHIT"> </span><span class="COMM">/**
<span class='line'> 33</span> * Retrieves a template
<span class='line'> 34</span> *
<span class='line'> 35</span> * @memberOf $_.template
<span class='line'> 36</span> * @name get
<span class='line'> 37</span> * @param string name
<span class='line'> 38</span> * @return string
<span class='line'> 39</span> * @function
<span class='line'> 40</span> * @type string
<span class='line'> 41</span> */</span><span class="WHIT">
<span class='line'> 42</span> </span><span class="WHIT"> </span><span class="NAME">get</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">name</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 43</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 44</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">res</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 45</span>
<span class='line'> 46</span> </span><span class="WHIT"> </span><span class="NAME">res</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.el.innerHTML</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 47</span> </span><span class="WHIT">
<span class='line'> 48</span> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">res</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">""</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 49</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 50</span> </span><span class="WHIT"> </span><span class="NAME">console.log</span><span class="PUNC">(</span><span class="STRN">"Template is empty or cannot be found"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 51</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 52</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 53</span> </span><span class="WHIT">
<span class='line'> 54</span> </span><span class="NAME">_t</span><span class="PUNC">[</span><span class="NAME">name</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">res</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 55</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">res</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 56</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 57</span> </span><span class="WHIT"> </span><span class="COMM">/**
<span class='line'> 58</span> * Formats a template
<span class='line'> 59</span> *
<span class='line'> 60</span> * @memberOf $_.template
<span class='line'> 61</span> * @name parse
<span class='line'> 62</span> * @param string template_name
<span class='line'> 63</span> * @param object replace_data
<span class='line'> 64</span> * @return string
<span class='line'> 65</span> * @function
<span class='line'> 66</span> * @type string
<span class='line'> 67</span> */</span><span class="WHIT">
<span class='line'> 68</span> </span><span class="WHIT"> </span><span class="NAME">parse</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">name</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 69</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 70</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">tmp</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">_t</span><span class="PUNC">[</span><span class="NAME">name</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 71</span> </span><span class="WHIT"> </span><span class="NAME">pairs</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 72</span> </span><span class="WHIT"> </span><span class="NAME">pseudos</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">[</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 73</span> </span><span class="NAME">num_pairs</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 74</span> </span><span class="WHIT"> </span><span class="NAME">num_pseudos</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 75</span> </span><span class="WHIT"> </span><span class="NAME">i</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 76</span> </span><span class="WHIT"> </span><span class="NAME">j</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 77</span> </span><span class="WHIT"> </span><span class="NAME">var_name</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 78</span> </span><span class="WHIT"> </span><span class="NAME">rep_data</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 79</span> </span><span class="WHIT"> </span><span class="NAME">tmp_data</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 80</span> </span><span class="WHIT"> </span><span class="NAME">data_len</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 81</span> </span><span class="WHIT"> </span><span class="NAME">frag</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 82</span> </span><span class="WHIT"> </span><span class="NAME">frag_section</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 83</span> </span><span class="WHIT"> </span><span class="NAME">emptys</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'> 84</span> </span><span class="WHIT"> </span><span class="NAME">x</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 85</span> </span><span class="WHIT">
<span class='line'> 86</span> </span><span class="NAME">tmp</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">(</span><span class="NAME">tmp</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 87</span> </span><span class="WHIT">
<span class='line'> 88</span> </span><span class="COMM">//Remove newlines and tabs from template because</span><span class="WHIT">
<span class='line'> 89</span> </span><span class="WHIT"> </span><span class="COMM">//those whitespace characters are extra bandwidth</span><span class="WHIT">
<span class='line'> 90</span> </span><span class="WHIT"> </span><span class="NAME">tmp</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">tmp.replace</span><span class="PUNC">(</span><span class="REGX">/\s+/gim</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">" "</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 91</span> </span><span class="WHIT"> </span><span class="NAME">tmp</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">tmp.replace</span><span class="PUNC">(</span><span class="REGX">/>\s+&lt;/gim</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">">&lt;"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 92</span> </span><span class="WHIT"> </span><span class="NAME">tmp</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">tmp.replace</span><span class="PUNC">(</span><span class="REGX">/>\s+\{/gim</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">">{"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 93</span> </span><span class="WHIT"> </span><span class="NAME">tmp</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">tmp.replace</span><span class="PUNC">(</span><span class="REGX">/\}\s+&lt;/gim</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"}&lt;"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 94</span> </span><span class="WHIT">
<span class='line'> 95</span> </span><span class="COMM">//Match all the looped sections of content</span><span class="WHIT">
<span class='line'> 96</span> </span><span class="WHIT"> </span><span class="NAME">pairs</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">tmp.match</span><span class="PUNC">(</span><span class="REGX">/\{([A-Z0-9_\-]+)\}(.*)\{\/\1\}/gim</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 97</span> </span><span class="WHIT">
<span class='line'> 98</span> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">pairs</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'> 99</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>100</span> </span><span class="WHIT"> </span><span class="NAME">num_pairs</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">pairs.length</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>101</span> </span><span class="WHIT">
<span class='line'>102</span> </span><span class="COMM">//Go through the template, and match the pairs</span><span class="WHIT">
<span class='line'>103</span> </span><span class="WHIT"> </span><span class="KEYW">for</span><span class="PUNC">(</span><span class="NAME">i</span><span class="PUNC">=</span><span class="NUMB">0</span><span class="PUNC">;</span><span class="NAME">i</span><span class="PUNC">&lt;</span><span class="NAME">num_pairs</span><span class="PUNC">;</span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>104</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>105</span> </span><span class="WHIT"> </span><span class="COMM">//Put the loop in a placeholder</span><span class="WHIT">
<span class='line'>106</span> </span><span class="WHIT"> </span><span class="NAME">tmp</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">tmp.replace</span><span class="PUNC">(</span><span class="NAME">pairs</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"{"</span><span class="PUNC">+</span><span class="NAME">i</span><span class="PUNC">+</span><span class="STRN">"}"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>107</span> </span><span class="WHIT">
<span class='line'>108</span> </span><span class="COMM">//Create a place to store looped data</span><span class="WHIT">
<span class='line'>109</span> </span><span class="WHIT"> </span><span class="NAME">tmp_data</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">""</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>110</span> </span><span class="WHIT">
<span class='line'>111</span> </span><span class="COMM">//The replace variable is the name of the tag</span><span class="WHIT">
<span class='line'>112</span> </span><span class="WHIT"> </span><span class="NAME">var_name</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">String</span><span class="PUNC">(</span><span class="NAME">pairs</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">match</span><span class="PUNC">(</span><span class="REGX">/^\{([A-Z0-9_\-]+)\}/i</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>113</span> </span><span class="WHIT"> </span><span class="NAME">rep_data</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">[</span><span class="NAME">var_name</span><span class="PUNC">[</span><span class="NUMB">1</span><span class="PUNC">]</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>114</span> </span><span class="WHIT">
<span class='line'>115</span> </span><span class="COMM">//Make sure there are loops</span><span class="WHIT">
<span class='line'>116</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">rep_data.length</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>117</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>118</span> </span><span class="WHIT"> </span><span class="NAME">data_len</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">rep_data.length</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>119</span> </span><span class="WHIT">
<span class='line'>120</span> </span><span class="COMM">//Get rid of the loop tags</span><span class="WHIT">
<span class='line'>121</span> </span><span class="WHIT"> </span><span class="NAME">pairs</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">pairs</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">replace</span><span class="PUNC">(</span><span class="REGX">/\{([A-Z0-9_\-]+)\}(.*)\{\/\1\}/gim</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">"$2"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>122</span> </span><span class="WHIT">
<span class='line'>123</span> </span><span class="COMM">//Replace psudovariables with data</span><span class="WHIT">
<span class='line'>124</span> </span><span class="WHIT"> </span><span class="KEYW">for</span><span class="PUNC">(</span><span class="NAME">j</span><span class="PUNC">=</span><span class="NUMB">0</span><span class="PUNC">;</span><span class="NAME">j</span><span class="PUNC">&lt;</span><span class="NAME">data_len</span><span class="PUNC">;</span><span class="NAME">j</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>125</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>126</span> </span><span class="WHIT"> </span><span class="COMM">//Is there a better way to do this, rather than an inline function?</span><span class="WHIT">
<span class='line'>127</span> </span><span class="WHIT"> </span><span class="NAME">tmp_data</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">pairs</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">replace</span><span class="PUNC">(</span><span class="REGX">/\{([A-Z0-9 _\-]+)\}/gi</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">_</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">varName</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>128</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">rep_data</span><span class="PUNC">[</span><span class="NAME">j</span><span class="PUNC">]</span><span class="PUNC">[</span><span class="NAME">varName</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">?</span><span class="WHIT"> </span><span class="NAME">rep_data</span><span class="PUNC">[</span><span class="NAME">j</span><span class="PUNC">]</span><span class="PUNC">[</span><span class="NAME">varName</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">:</span><span class="WHIT"> </span><span class="STRN">""</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>129</span> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>130</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>131</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>132</span> </span><span class="WHIT">
<span class='line'>133</span> </span><span class="COMM">//Replace the looped content</span><span class="WHIT">
<span class='line'>134</span> </span><span class="WHIT"> </span><span class="NAME">tmp</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">tmp.replace</span><span class="PUNC">(</span><span class="STRN">"{"</span><span class="PUNC">+</span><span class="NAME">i</span><span class="PUNC">+</span><span class="STRN">"}"</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">tmp_data</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>135</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>136</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>137</span> </span><span class="WHIT">
<span class='line'>138</span> </span><span class="COMM">//Replace all the rest of the psudeovariables</span><span class="WHIT">
<span class='line'>139</span> </span><span class="WHIT"> </span><span class="NAME">pseudos</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">tmp.match</span><span class="PUNC">(</span><span class="REGX">/\{([A-Z0-9_\-]+)\}/gim</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>140</span> </span><span class="WHIT">
<span class='line'>141</span> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">pseudos</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>142</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>143</span> </span><span class="WHIT"> </span><span class="NAME">num_pseudos</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">pseudos.length</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>144</span> </span><span class="WHIT">
<span class='line'>145</span> </span><span class="KEYW">for</span><span class="PUNC">(</span><span class="NAME">i</span><span class="PUNC">=</span><span class="NUMB">0</span><span class="PUNC">;</span><span class="NAME">i</span><span class="PUNC">&lt;</span><span class="NAME">num_pseudos</span><span class="PUNC">;</span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>146</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>147</span> </span><span class="WHIT"> </span><span class="COMM">//Remove the {} from the pseudos</span><span class="WHIT">
<span class='line'>148</span> </span><span class="WHIT"> </span><span class="NAME">var_name</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">pseudos</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">replace</span><span class="PUNC">(</span><span class="STRN">'{'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>149</span> </span><span class="WHIT"> </span><span class="NAME">var_name</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">var_name.replace</span><span class="PUNC">(</span><span class="STRN">'}'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="STRN">''</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>150</span> </span><span class="WHIT">
<span class='line'>151</span> </span><span class="COMM">//Replace each pseudovariable with the value of the object</span><span class="WHIT">
<span class='line'>152</span> </span><span class="WHIT"> </span><span class="COMM">//property of the same name</span><span class="WHIT">
<span class='line'>153</span> </span><span class="WHIT"> </span><span class="NAME">tmp</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">tmp.replace</span><span class="PUNC">(</span><span class="NAME">pseudos</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">[</span><span class="NAME">var_name</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>154</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>155</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>156</span> </span><span class="WHIT">
<span class='line'>157</span> </span><span class="COMM">//Create an empty fragement</span><span class="WHIT">
<span class='line'>158</span> </span><span class="WHIT"> </span><span class="NAME">frag</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">document.createDocumentFragment</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>159</span> </span><span class="WHIT">
<span class='line'>160</span> </span><span class="COMM">//Insert the html</span><span class="WHIT">
<span class='line'>161</span> </span><span class="WHIT"> </span><span class="NAME">frag.appendChild</span><span class="PUNC">(</span><span class="NAME">document.createElement</span><span class="PUNC">(</span><span class="STRN">'section'</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>162</span> </span><span class="WHIT"> </span><span class="NAME">frag_section</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">frag.querySelectorAll</span><span class="PUNC">(</span><span class="STRN">'section'</span><span class="PUNC">)</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>163</span> </span><span class="WHIT"> </span><span class="NAME">frag_section.innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">tmp</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>164</span> </span><span class="WHIT">
<span class='line'>165</span> </span><span class="COMM">//Remove bad elements in the fragment, should be faster than being done live</span><span class="WHIT">
<span class='line'>166</span> </span><span class="WHIT"> </span><span class="NAME">emptys</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">frag_section.querySelectorAll</span><span class="PUNC">(</span><span class="STRN">'[src=""], [href=""]'</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>167</span> </span><span class="WHIT">
<span class='line'>168</span> </span><span class="KEYW">for</span><span class="PUNC">(</span><span class="NAME">x</span><span class="WHIT"> </span><span class="KEYW">in</span><span class="WHIT"> </span><span class="NAME">emptys</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>169</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>170</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">emptys</span><span class="PUNC">[</span><span class="NAME">x</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">parentNode</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>171</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>172</span> </span><span class="WHIT"> </span><span class="NAME">emptys</span><span class="PUNC">[</span><span class="NAME">x</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">parentNode.removeChild</span><span class="PUNC">(</span><span class="NAME">emptys</span><span class="PUNC">[</span><span class="NAME">x</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>173</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>174</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>175</span> </span><span class="WHIT">
<span class='line'>176</span> </span><span class="COMM">//Save the parsed template in an object for later retrieval</span><span class="WHIT">
<span class='line'>177</span> </span><span class="WHIT"> </span><span class="NAME">_p</span><span class="PUNC">[</span><span class="NAME">name</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">tmp</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>178</span> </span><span class="WHIT">
<span class='line'>179</span> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">tmp</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>180</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>181</span> </span><span class="WHIT"> </span><span class="COMM">/**
<span class='line'>182</span> * Inserts the formatted template into the page. If the url and data parameters
<span class='line'>183</span> * are passed, it will retrieve a template file from the same domain, parse,
<span class='line'>184</span> * and insert the template into the page.
<span class='line'>185</span> *
<span class='line'>186</span> * @memberOf $_.template
<span class='line'>187</span> * @name apply
<span class='line'>188</span> * @function
<span class='line'>189</span> * @param string parsed_template/template_name
<span class='line'>190</span> * @param [string] url
<span class='line'>191</span> * @param [object] data
<span class='line'>192</span> */</span><span class="WHIT">
<span class='line'>193</span> </span><span class="WHIT"> </span><span class="NAME">apply</span><span class="PUNC">:</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">name</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">url</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>194</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>195</span> </span><span class="WHIT"> </span><span class="COMM">//If the parsed template is supplied, just apply it to the passed selector</span><span class="WHIT">
<span class='line'>196</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">url</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">"undefined"</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">data</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">"undefined"</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>197</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>198</span> </span><span class="WHIT"> </span><span class="COMM">//If the "name" variable is in the _p object, set that</span><span class="WHIT">
<span class='line'>199</span> </span><span class="WHIT"> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="KEYW">typeof</span><span class="WHIT"> </span><span class="NAME">_p</span><span class="PUNC">[</span><span class="NAME">name</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">!==</span><span class="WHIT"> </span><span class="STRN">"undefined"</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>200</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>201</span> </span><span class="WHIT"> </span><span class="NAME">this.el.innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">_p</span><span class="PUNC">[</span><span class="NAME">name</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>202</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>203</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>204</span> </span><span class="WHIT">
<span class='line'>205</span> </span><span class="COMM">//Otherwise, set the passed string to the current selector</span><span class="WHIT">
<span class='line'>206</span> </span><span class="WHIT"> </span><span class="NAME">this.el.innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">name</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>207</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>208</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>209</span> </span><span class="WHIT">
<span class='line'>210</span> </span><span class="COMM">//Otherwise, get the template, parse it, and apply it</span><span class="WHIT">
<span class='line'>211</span> </span><span class="WHIT"> </span><span class="NAME">$_.get</span><span class="PUNC">(</span><span class="NAME">url</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="PUNC">}</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">res</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>212</span> </span><span class="WHIT"> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">parsed</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>213</span> </span><span class="WHIT">
<span class='line'>214</span> </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">res</span><span class="WHIT"> </span><span class="PUNC">===</span><span class="WHIT"> </span><span class="STRN">""</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>215</span> </span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>216</span> </span><span class="WHIT"> </span><span class="NAME">console.log</span><span class="PUNC">(</span><span class="STRN">"Template is empty or can not be found"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>217</span> </span><span class="WHIT"> </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>218</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>219</span> </span><span class="WHIT">
<span class='line'>220</span> </span><span class="COMM">//Cache the template in an object for later use</span><span class="WHIT">
<span class='line'>221</span> </span><span class="WHIT"> </span><span class="NAME">_t</span><span class="PUNC">[</span><span class="NAME">name</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">res</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>222</span> </span><span class="WHIT"> </span><span class="NAME">parsed</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.parse</span><span class="PUNC">(</span><span class="NAME">name</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">data</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>223</span> </span><span class="WHIT"> </span><span class="NAME">_p</span><span class="PUNC">[</span><span class="NAME">name</span><span class="PUNC">]</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parsed</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>224</span> </span><span class="WHIT">
<span class='line'>225</span> </span><span class="NAME">this.el.innerHTML</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parsed</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>226</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>227</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>228</span> </span><span class="WHIT"> </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>229</span> </span><span class="WHIT">
<span class='line'>230</span> </span><span class="COMM">//Add the module to the library</span><span class="WHIT">
<span class='line'>231</span> </span><span class="WHIT"> </span><span class="NAME">$_.ext</span><span class="PUNC">(</span><span class="STRN">'template'</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">t</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>232</span> </span><span class="WHIT">
<span class='line'>233</span> </span><span class="PUNC">}</span><span class="PUNC">)</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="PUNC">;</span></pre></body></html>

View File

@ -445,7 +445,7 @@
var d;
//Private function for getting/setting attributes
//Private function for getting/setting attributes/properties
function _attr(sel, name, value)
{
var oldVal, doAttr;
@ -1623,3 +1623,239 @@
$_.ext('event', e);
}());
// --------------------------------------------------------------------------
/**
* Template module for simple javascript templating
*/
(function(){
"use strict";
//This module relies on some others for simplicity
//so, if they aren't there, don't initialize the module
if($_.ajax === "undefined")
{
return;
}
var t, _t, _p;
//Private object to store retrieved templates
_t = {};
//Private object to store parsed templates
_p = {};
/**
* Module for html templating. Requires ajax module.
*
* @name template
* @namespace
* @memberOf $_
*/
t = {
/**
* Retrieves a template
*
* @memberOf $_.template
* @name get
* @param string name
* @return string
* @function
* @type string
*/
get: function(name)
{
var res;
res = this.el.innerHTML;
if(res === "")
{
console.log("Template is empty or cannot be found");
return;
}
_t[name] = res;
return res;
},
/**
* Formats a template
*
* @memberOf $_.template
* @name parse
* @param string template_name
* @param object replace_data
* @return string
* @function
* @type string
*/
parse: function(name, data)
{
var tmp = _t[name],
pairs = [],
pseudos = [],
num_pairs = 0,
num_pseudos = 0,
i = 0,
j = 0,
var_name = '',
rep_data = {},
tmp_data = '',
data_len,
frag,
frag_section,
emptys,
x;
tmp = String(tmp);
//Remove newlines and tabs from template because
//those whitespace characters are extra bandwidth
tmp = tmp.replace(/\s+/gim, " ");
tmp = tmp.replace(/>\s+</gim, "><");
tmp = tmp.replace(/>\s+\{/gim, ">{");
tmp = tmp.replace(/\}\s+</gim, "}<");
//Match all the looped sections of content
pairs = tmp.match(/\{([A-Z0-9_\-]+)\}(.*)\{\/\1\}/gim);
if(pairs != null)
{
num_pairs = pairs.length;
//Go through the template, and match the pairs
for(i=0;i<num_pairs;i++)
{
//Put the loop in a placeholder
tmp = tmp.replace(pairs[i], "{"+i+"}");
//Create a place to store looped data
tmp_data = "";
//The replace variable is the name of the tag
var_name = String(pairs[i]).match(/^\{([A-Z0-9_\-]+)\}/i);
rep_data = data[var_name[1]];
//Make sure there are loops
if(rep_data.length > 0)
{
data_len = rep_data.length;
//Get rid of the loop tags
pairs[i] = pairs[i].replace(/\{([A-Z0-9_\-]+)\}(.*)\{\/\1\}/gim, "$2");
//Replace psudovariables with data
for(j=0;j<data_len;j++)
{
//Is there a better way to do this, rather than an inline function?
tmp_data += pairs[i].replace(/\{([A-Z0-9 _\-]+)\}/gi, function(_, varName){
return (rep_data[j][varName]) ? rep_data[j][varName] : "";
});
}
}
//Replace the looped content
tmp = tmp.replace("{"+i+"}", tmp_data);
}
}
//Replace all the rest of the psudeovariables
pseudos = tmp.match(/\{([A-Z0-9_\-]+)\}/gim);
if(pseudos != null)
{
num_pseudos = pseudos.length;
for(i=0;i<num_pseudos;i++)
{
//Remove the {} from the pseudos
var_name = pseudos[i].replace('{', '');
var_name = var_name.replace('}', '');
//Replace each pseudovariable with the value of the object
//property of the same name
tmp = tmp.replace(pseudos[i], data[var_name]);
}
}
//Create an empty fragement
frag = document.createDocumentFragment();
//Insert the html
frag.appendChild(document.createElement('section'));
frag_section = frag.querySelectorAll('section')[0];
frag_section.innerHTML = tmp;
//Remove bad elements in the fragment, should be faster than being done live
emptys = frag_section.querySelectorAll('[src=""], [href=""]');
for(x in emptys)
{
if(emptys[x].parentNode)
{
emptys[x].parentNode.removeChild(emptys[x]);
}
}
//Save the parsed template in an object for later retrieval
_p[name] = tmp;
return tmp;
},
/**
* Inserts the formatted template into the page. If the url and data parameters
* are passed, it will retrieve a template file from the same domain, parse,
* and insert the template into the page.
*
* @memberOf $_.template
* @name apply
* @function
* @param string parsed_template/template_name
* @param [string] url
* @param [object] data
*/
apply: function(name, url, data)
{
//If the parsed template is supplied, just apply it to the passed selector
if(typeof url === "undefined" && typeof data === "undefined")
{
//If the "name" variable is in the _p object, set that
if(typeof _p[name] !== "undefined")
{
this.el.innerHTML = _p[name];
return;
}
//Otherwise, set the passed string to the current selector
this.el.innerHTML = name;
return;
}
//Otherwise, get the template, parse it, and apply it
$_.get(url, {}, function(res){
var parsed;
if(res === "")
{
console.log("Template is empty or can not be found");
return;
}
//Cache the template in an object for later use
_t[name] = res;
parsed = this.parse(name, data);
_p[name] = parsed;
this.el.innerHTML = parsed;
});
}
};
//Add the module to the library
$_.ext('template', t);
})();

45
kis-min.js vendored
View File

@ -1,21 +1,24 @@
(function(){if(typeof document.querySelector!=="undefined"){var f,g,d,b;f=function(a){b=typeof a==="undefined"?typeof f.el!=="undefined"?f.el:document.documentElement:typeof a!=="object"?g(a):a;f.prototype.el=b;var a=d(f),c;for(c in a)if(typeof a[c]==="object")a[c].el=b;a.el=b;return a};g=function(a,c){var b;if(typeof a!="string"||typeof a==="undefined")return a;b=c!=null&&c.nodeType===1?c:document;if(a.match(/^#([\w\-]+$)/))return document.getElementById(a.split("#")[1]);else b=b.querySelectorAll(a);
return b.length===1?b[0]:b};d=function(a){var c;if(typeof a!=="undefined"){if(typeof Object.create!=="undefined")return Object.create(a);c=typeof a;if(!(c!=="object"&&c!=="function"))return c=function(){},c.prototype=a,new c}};f.ext=function(a,c){c.el=b;f[a]=c};f.ext("each",function(a){if(typeof b.length!=="undefined"&&b!==window){var c=b.length;if(c!==0)for(var e,d=0;d<c;d++)e=b.item(d)?b.item(d):b[d],a.call(e,e)}else a.call(b,b)});f.type=function(a){return function(){return a&&a!==this}.call(a)?
(typeof a).toLowerCase():{}.toString.call(a).match(/\s([a-z|A-Z]+)/)[1].toLowerCase()};f=window.$_=window.$_||f;f.$=g}})();
(function(){if(typeof window.console==="undefined")window.console={log:function(){}};if(typeof String.prototype.trim==="undefined")String.prototype.trim=function(){return this.replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")};typeof document!=="undefined"&&!("classList"in document.createElement("a"))&&function(f){var f=(f.HTMLElement||f.Element).prototype,g=Object,d=String.prototype.trim||function(){return this.replace(/^\s+|\s+$/g,"")},b=Array.prototype.indexOf||function(a){for(var c=0,b=this.length;c<b;c++)if(c in
this&&this[c]===a)return c;return-1},a=function(a,c){this.name=a;this.code=DOMException[a];this.message=c},c=function(c,e){if(e==="")throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return b.call(c,e)},e=function(a){for(var c=d.call(a.className),c=c?c.split(/\s+/):[],b=0,e=c.length;b<e;b++)this.push(c[b]);this._updateClassName=function(){a.className=this.toString()}},i=e.prototype=[],
h=function(){return new e(this)};a.prototype=Error.prototype;i.item=function(a){return this[a]||null};i.contains=function(a){a+="";return c(this,a)!==-1};i.add=function(a){a+="";c(this,a)===-1&&(this.push(a),this._updateClassName())};i.remove=function(a){a+="";a=c(this,a);a!==-1&&(this.splice(a,1),this._updateClassName())};i.toggle=function(a){a+="";c(this,a)===-1?this.add(a):this.remove(a)};i.toString=function(){return this.join(" ")};if(g.defineProperty){i={get:h,enumerable:true,configurable:true};
try{g.defineProperty(f,"classList",i)}catch(k){if(k.number===-2146823252)i.enumerable=false,g.defineProperty(f,"classList",i)}}else g.prototype.__defineGetter__&&f.__defineGetter__("classList",h)}(self);if(typeof Event.preventDefault==="undefined"&&typeof window.event!=="undefined")Event.prototype.preventDefault=function(){window.event.stop()},Event.prototype.stopPropagation=function(){window.event.returnValue=false}})();
(function(){function f(b,a,c){var e,d;if(typeof b.hasAttribute!=="undefined")b.hasAttribute(a)&&(e=b.getAttribute(a)),d=true;else if(typeof b[a]!=="undefined")e=b[a],d=false;else if(a==="class"&&typeof b.className!=="undefined")a="className",e=b.className,d=false;if(typeof e==="undefined"&&(typeof c==="undefined"||c===null))console.log(c),console.log(b),console.log("Element does not have the selected attribute");else{if(typeof c==="undefined")return e;typeof c!=="undefined"&&c!==null?d===true?b.setAttribute(a,
c):b[a]=c:c===null&&(d===true?b.removeAttribute(a):delete b[a]);return typeof c!=="undefined"?c:e}}function g(b){return b.replace(/(\-[a-z])/g,function(a){return a.toUpperCase().replace("-","")})}function d(b,a,c){var e,a=g(a);e={outerHeight:"offsetHeight",outerWidth:"offsetWidth",top:"posTop"};if(typeof c==="undefined"&&b.style[a]!=="undefined")return b.style[a];else if(typeof c==="undefined"&&b.style[e[a]]!=="undefined")return b.style[e[a]];typeof b.style[a]!=="undefined"?b.style[a]=c:b.style[e[a]]?
b.style[e[a]]=c:console.log("Property "+a+" nor an equivalent seems to exist")}$_.ext("dom",{addClass:function(b){$_.each(function(a){a.classList.add(b)})},removeClass:function(b){$_.each(function(a){a.classList.remove(b)})},hide:function(){this.css("display","none")},show:function(b){typeof b==="undefined"&&(b="block");this.css("display",b)},attr:function(b,a){var c=this.el;if(c.length>1&&typeof a==="undefined")console.log(c),console.log("Must be a singular element");else if(c.length>1&&typeof a!==
"undefined")$_.each(function(c){return f(c,b,a)});else return f(c,b,a)},text:function(b){var a,c,e;e=this.el;c=typeof e.innerText!=="undefined"?"innerText":typeof e.textContent!=="undefined"?"textContent":"innerHTML";a=e[c];return typeof b!=="undefined"?e[c]=b:a},css:function(b,a){if(typeof a==="undefined")return d(this.el,b);$_.each(function(c){d(c,b,a)})},html:function(b){if(typeof b!=="undefined")this.el.innerHTML=b;return this.el.innerHTML}})})();
(function(){if(!(typeof localStorage==="undefined"||typeof JSON==="undefined")){var f=localStorage,g=sessionStorage;$_.ext("store",{get:function(d,b){var a=b?g.getItem(d):f.getItem(d);return JSON.parse(a)},set:function(d,b,a){b=JSON.stringify(b);a?g.setItem(d,b):f.setItem(d,b)},remove:function(d,b){b?g.removeItem(d):f.removeItem(d)},getAll:function(d){var b,a={},c,e;e=d?f:g;b=e.length;for(d=0;d<b;d++)c=e.key(d),a[c]=e.getItem(c);return a},clear:function(d){d?g.clear():f.clear()}})}})();
(function(){if(typeof window.XMLHttpRequest!=="undefined"){var f={_do:function(f,d,b,a){var c=new XMLHttpRequest;typeof b==="undefined"&&(b=function(){});a=a?"POST":"GET";f+=a==="GET"?"?"+this._serialize(d):"";c.open(a,f);c.onreadystatechange=function(){c.readyState===4&&b(c.responseText)};a==="POST"?(c.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),c.send(this._serialize(d))):c.send(null)},_serialize:function(f){var d,b,a=[];for(d in f)f.hasOwnProperty(d)&&typeof f[d]!=="function"&&
(b=f[d].toString(),d=encodeURIComponent(d),b=encodeURIComponent(b),a.push(d+"="+b));return a.join("&")}};$_.ext("get",function(g,d,b){f._do(g,d,b,false)});$_.ext("post",function(g,d,b){f._do(g,d,b,true)})}})();
(function(){var f=function(d){var b=[],a=0,c={},e,b=g.object_keys(d);b.sort(function(a,c){var b=parseFloat(c),e=parseFloat(a),d=b+""===c,f=e+""===a;if(d&&f)return b>e?1:b<e?-1:0;else if(d&&!f)return 1;else if(!d&&f)return-1;return c>a?1:c<a?-1:0});a=b.length;for(e=0;e<a;e++)c[b[e]]=d[b[e]];return c},g={object_keys:function(d){var b=[],a;for(a in d)d.hasOwnProperty(a)&&b.push(a);return b},object_values:function(d){var b=[],a;for(a in d)b.push(d[a]);return b},array_combine:function(d,b){var a={},c,
e=0;$_.type(d)!=="array"&&(d=this.object_values(d));$_.type(b)!=="array"&&(b=this.object_values(b));c=d.length;if(c!==b.length)return console.log("Object combine requires two arrays of the same size"),false;for(e=0;e<c;e++)a[d[e]]=b[e];return a},object_merge:function(){var d=Array.prototype.slice.call(arguments),b=d.length,a={},c,e=0,f,h,g;c=true;for(f=0;f<b;f++)if($_.type(d[f])!=="array"){c=false;break}if(c){a=[];for(f=0;f<b;f++)a=a.contact(d[f]);return a}for(f=0,g=0;f<b;f++)if(c=d[f],$_.type(c)==
"array")for(h=0,e=c.length;h<e;h++)a[g++]=c[h];else for(h in c)c.hasOwnProperty(h)&&(parseInt(h,10)+""===h?a[g++]=c[h]:a[h]=c[h]);return a},str_trans:function(d,b,a){var c=[],e=[],g=false,h=0,k=0,j="",m="",n="",o="",l;if(typeof b==="object"){b=f(b);for(l in b)b.hasOwnProperty(l)&&(c.push(l),e.push(b[l]));b=c;a=e}k=d.length;h=b.length;j=typeof a==="string";m=typeof b==="string";for(c=0;c<k;c++){g=false;if(m){d.charAt(c-1);n=d.charAt(c);d.charAt(c+1);for(e=0;e<h;e++)if(n==b.charAt(e)){g=true;break}}else for(e=
0;e<h;e++)if(d.substr(c,b[e].length)==b[e]){g=true;c=c+b[e].length-1;break}o+=g?j?a.charAt(e):a[e]:d.charAt(c)}return o}};$_.ext("util",g)})();
(function(){var f,g,d,b;typeof document.addEventListener!=="undefined"?(f=function(a,c,b){typeof a.addEventListener!=="undefined"&&a.addEventListener(c,b,false)},g=function(a,c,b){typeof a.removeEventListener!=="undefined"&&a.removeEventListener(c,b,false)}):typeof document.attachEvent!=="undefined"&&(f=function(a,c,b){var e;function d(a){b.apply(a)}typeof a.attachEvent!=="undefined"?(g(c,b),a.attachEvent("on"+c,d),e=a.KIS_0_5_0=a.KIS_0_5_0||{},a=e,a.listeners=a.listeners||{},a.listeners[c]=a.listeners[c]||
[],a.listeners[c].push({callback:b,_listener:d})):console.log("Failed to _attach event:"+c+" on "+a)},g=function(a,c,b){if(typeof a.detachEvent!=="undefined"){var d=a.KIS_0_5_0;if(d&&d.listeners&&d.listeners[c])for(var f=d.listeners[c],g=f.length,j=0;j<g;j++)if(f[j].callback===b){a.detachEvent("on"+c,f[j]._listener);f.splice(j,1);f.length===0&&delete d.listeners[c];break}}});d=function(a,c,b,i){var h,k;if(typeof a==="undefined")return console.log(arguments),console.log(c),false;if(c.match(/^([\w\-]+)$/))i===
true?f(a,c,b):g(a,c,b);else{c=c.split(" ");k=c.length;for(h=0;h<k;h++)d(a,c[h],b,i)}};b=function(a,b,e,f){d(a,e,function(a){var d,e,g,a=a||window.event;e=$_.$(b);for(d in e)g=a.target||a.srcElement,g==e[d]&&(f.call(e[d],a),a.stopPropagation())},true)};$_.ext("event",{add:function(a,b){$_.each(function(e){d(e,a,b,true)})},remove:function(a,b){$_.each(function(e){d(e,a,b,false)})},live:function(a,c,d){b(document.documentElement,a,c,d)},delegate:function(a,c,d){$_.each(function(f){b(f,a,c,d)})}})})();
(function(){if(typeof document.querySelector!=="undefined"){var g,h,d,c;g=function(a){c=typeof a==="undefined"?typeof g.el!=="undefined"?g.el:document.documentElement:typeof a!=="object"?h(a):a;g.prototype.el=c;var a=d(g),b;for(b in a)if(typeof a[b]==="object")a[b].el=c;a.el=c;return a};h=function(a,b){var c;if(typeof a!="string"||typeof a==="undefined")return a;c=b!=null&&b.nodeType===1?b:document;if(a.match(/^#([\w\-]+$)/))return document.getElementById(a.split("#")[1]);else c=c.querySelectorAll(a);
return c.length===1?c[0]:c};d=function(a){var b;if(typeof a!=="undefined"){if(typeof Object.create!=="undefined")return Object.create(a);b=typeof a;if(!(b!=="object"&&b!=="function"))return b=function(){},b.prototype=a,new b}};g.ext=function(a,b){b.el=c;g[a]=b};g.ext("each",function(a){if(typeof c.length!=="undefined"&&c!==window){var b=c.length;if(b!==0)for(var e,f=0;f<b;f++)e=c.item(f)?c.item(f):c[f],a.call(e,e)}else a.call(c,c)});g.type=function(a){return function(){return a&&a!==this}.call(a)?
(typeof a).toLowerCase():{}.toString.call(a).match(/\s([a-z|A-Z]+)/)[1].toLowerCase()};g=window.$_=window.$_||g;g.$=h}})();
(function(){if(typeof window.console==="undefined")window.console={log:function(){}};if(typeof String.prototype.trim==="undefined")String.prototype.trim=function(){return this.replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")};typeof document!=="undefined"&&!("classList"in document.createElement("a"))&&function(g){var g=(g.HTMLElement||g.Element).prototype,h=Object,d=String.prototype.trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array.prototype.indexOf||function(a){for(var b=0,c=this.length;b<c;b++)if(b in
this&&this[b]===a)return b;return-1},a=function(a,b){this.name=a;this.code=DOMException[a];this.message=b},b=function(b,e){if(e==="")throw new a("SYNTAX_ERR","An invalid or illegal string was specified");if(/\s/.test(e))throw new a("INVALID_CHARACTER_ERR","String contains an invalid character");return c.call(b,e)},e=function(a){for(var b=d.call(a.className),b=b?b.split(/\s+/):[],c=0,e=b.length;c<e;c++)this.push(b[c]);this._updateClassName=function(){a.className=this.toString()}},f=e.prototype=[],
k=function(){return new e(this)};a.prototype=Error.prototype;f.item=function(a){return this[a]||null};f.contains=function(a){a+="";return b(this,a)!==-1};f.add=function(a){a+="";b(this,a)===-1&&(this.push(a),this._updateClassName())};f.remove=function(a){a+="";a=b(this,a);a!==-1&&(this.splice(a,1),this._updateClassName())};f.toggle=function(a){a+="";b(this,a)===-1?this.add(a):this.remove(a)};f.toString=function(){return this.join(" ")};if(h.defineProperty){f={get:k,enumerable:true,configurable:true};
try{h.defineProperty(g,"classList",f)}catch(i){if(i.number===-2146823252)f.enumerable=false,h.defineProperty(g,"classList",f)}}else h.prototype.__defineGetter__&&g.__defineGetter__("classList",k)}(self);if(typeof Event.preventDefault==="undefined"&&typeof window.event!=="undefined")Event.prototype.preventDefault=function(){window.event.stop()},Event.prototype.stopPropagation=function(){window.event.returnValue=false}})();
(function(){function g(c,a,b){var e,f;if(typeof c.hasAttribute!=="undefined")c.hasAttribute(a)&&(e=c.getAttribute(a)),f=true;else if(typeof c[a]!=="undefined")e=c[a],f=false;else if(a==="class"&&typeof c.className!=="undefined")a="className",e=c.className,f=false;if(typeof e==="undefined"&&(typeof b==="undefined"||b===null))console.log(b),console.log(c),console.log("Element does not have the selected attribute");else{if(typeof b==="undefined")return e;typeof b!=="undefined"&&b!==null?f===true?c.setAttribute(a,
b):c[a]=b:b===null&&(f===true?c.removeAttribute(a):delete c[a]);return typeof b!=="undefined"?b:e}}function h(c){return c.replace(/(\-[a-z])/g,function(a){return a.toUpperCase().replace("-","")})}function d(c,a,b){var e,a=h(a);e={outerHeight:"offsetHeight",outerWidth:"offsetWidth",top:"posTop"};if(typeof b==="undefined"&&c.style[a]!=="undefined")return c.style[a];else if(typeof b==="undefined"&&c.style[e[a]]!=="undefined")return c.style[e[a]];typeof c.style[a]!=="undefined"?c.style[a]=b:c.style[e[a]]?
c.style[e[a]]=b:console.log("Property "+a+" nor an equivalent seems to exist")}$_.ext("dom",{addClass:function(c){$_.each(function(a){a.classList.add(c)})},removeClass:function(c){$_.each(function(a){a.classList.remove(c)})},hide:function(){this.css("display","none")},show:function(c){typeof c==="undefined"&&(c="block");this.css("display",c)},attr:function(c,a){var b=this.el;if(b.length>1&&typeof a==="undefined")console.log(b),console.log("Must be a singular element");else if(b.length>1&&typeof a!==
"undefined")$_.each(function(b){return g(b,c,a)});else return g(b,c,a)},text:function(c){var a,b,e;e=this.el;b=typeof e.innerText!=="undefined"?"innerText":typeof e.textContent!=="undefined"?"textContent":"innerHTML";a=e[b];return typeof c!=="undefined"?e[b]=c:a},css:function(c,a){if(typeof a==="undefined")return d(this.el,c);$_.each(function(b){d(b,c,a)})},html:function(c){if(typeof c!=="undefined")this.el.innerHTML=c;return this.el.innerHTML}})})();
(function(){if(!(typeof localStorage==="undefined"||typeof JSON==="undefined")){var g=localStorage,h=sessionStorage;$_.ext("store",{get:function(d,c){var a=c?h.getItem(d):g.getItem(d);return JSON.parse(a)},set:function(d,c,a){c=JSON.stringify(c);a?h.setItem(d,c):g.setItem(d,c)},remove:function(d,c){c?h.removeItem(d):g.removeItem(d)},getAll:function(d){var c,a={},b,e;e=d?g:h;c=e.length;for(d=0;d<c;d++)b=e.key(d),a[b]=e.getItem(b);return a},clear:function(d){d?h.clear():g.clear()}})}})();
(function(){if(typeof window.XMLHttpRequest!=="undefined"){var g={_do:function(g,d,c,a){var b=new XMLHttpRequest;typeof c==="undefined"&&(c=function(){});a=a?"POST":"GET";g+=a==="GET"?"?"+this._serialize(d):"";b.open(a,g);b.onreadystatechange=function(){b.readyState===4&&c(b.responseText)};a==="POST"?(b.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),b.send(this._serialize(d))):b.send(null)},_serialize:function(g){var d,c,a=[];for(d in g)g.hasOwnProperty(d)&&typeof g[d]!=="function"&&
(c=g[d].toString(),d=encodeURIComponent(d),c=encodeURIComponent(c),a.push(d+"="+c));return a.join("&")}};$_.ext("get",function(h,d,c){g._do(h,d,c,false)});$_.ext("post",function(h,d,c){g._do(h,d,c,true)})}})();
(function(){var g=function(d){var c=[],a=0,b={},e,c=h.object_keys(d);c.sort(function(a,b){var c=parseFloat(b),e=parseFloat(a),d=c+""===b,g=e+""===a;if(d&&g)return c>e?1:c<e?-1:0;else if(d&&!g)return 1;else if(!d&&g)return-1;return b>a?1:b<a?-1:0});a=c.length;for(e=0;e<a;e++)b[c[e]]=d[c[e]];return b},h={object_keys:function(d){var c=[],a;for(a in d)d.hasOwnProperty(a)&&c.push(a);return c},object_values:function(d){var c=[],a;for(a in d)c.push(d[a]);return c},array_combine:function(d,c){var a={},b,
e=0;$_.type(d)!=="array"&&(d=this.object_values(d));$_.type(c)!=="array"&&(c=this.object_values(c));b=d.length;if(b!==c.length)return console.log("Object combine requires two arrays of the same size"),false;for(e=0;e<b;e++)a[d[e]]=c[e];return a},object_merge:function(){var d=Array.prototype.slice.call(arguments),c=d.length,a={},b,e=0,f,g,h;b=true;for(f=0;f<c;f++)if($_.type(d[f])!=="array"){b=false;break}if(b){a=[];for(f=0;f<c;f++)a=a.contact(d[f]);return a}for(f=0,h=0;f<c;f++)if(b=d[f],$_.type(b)==
"array")for(g=0,e=b.length;g<e;g++)a[h++]=b[g];else for(g in b)b.hasOwnProperty(g)&&(parseInt(g,10)+""===g?a[h++]=b[g]:a[g]=b[g]);return a},str_trans:function(d,c,a){var b=[],e=[],f=false,h=0,i=0,j="",m="",l="",o="",n;if(typeof c==="object"){c=g(c);for(n in c)c.hasOwnProperty(n)&&(b.push(n),e.push(c[n]));c=b;a=e}i=d.length;h=c.length;j=typeof a==="string";m=typeof c==="string";for(b=0;b<i;b++){f=false;if(m){d.charAt(b-1);l=d.charAt(b);d.charAt(b+1);for(e=0;e<h;e++)if(l==c.charAt(e)){f=true;break}}else for(e=
0;e<h;e++)if(d.substr(b,c[e].length)==c[e]){f=true;b=b+c[e].length-1;break}o+=f?j?a.charAt(e):a[e]:d.charAt(b)}return o}};$_.ext("util",h)})();
(function(){var g,h,d,c;typeof document.addEventListener!=="undefined"?(g=function(a,b,c){typeof a.addEventListener!=="undefined"&&a.addEventListener(b,c,false)},h=function(a,b,c){typeof a.removeEventListener!=="undefined"&&a.removeEventListener(b,c,false)}):typeof document.attachEvent!=="undefined"&&(g=function(a,b,c){var e;function d(a){c.apply(a)}typeof a.attachEvent!=="undefined"?(h(b,c),a.attachEvent("on"+b,d),e=a.KIS_0_5_0=a.KIS_0_5_0||{},a=e,a.listeners=a.listeners||{},a.listeners[b]=a.listeners[b]||
[],a.listeners[b].push({callback:c,_listener:d})):console.log("Failed to _attach event:"+b+" on "+a)},h=function(a,b,c){if(typeof a.detachEvent!=="undefined"){var d=a.KIS_0_5_0;if(d&&d.listeners&&d.listeners[b])for(var g=d.listeners[b],h=g.length,j=0;j<h;j++)if(g[j].callback===c){a.detachEvent("on"+b,g[j]._listener);g.splice(j,1);g.length===0&&delete d.listeners[b];break}}});d=function(a,b,c,f){var k,i;if(typeof a==="undefined")return console.log(arguments),console.log(b),false;if(b.match(/^([\w\-]+)$/))f===
true?g(a,b,c):h(a,b,c);else{b=b.split(" ");i=b.length;for(k=0;k<i;k++)d(a,b[k],c,f)}};c=function(a,b,c,f){d(a,c,function(a){var c,d,e,a=a||window.event;d=$_.$(b);for(c in d)e=a.target||a.srcElement,e==d[c]&&(f.call(d[c],a),a.stopPropagation())},true)};$_.ext("event",{add:function(a,b){$_.each(function(c){d(c,a,b,true)})},remove:function(a,b){$_.each(function(c){d(c,a,b,false)})},live:function(a,b,d){c(document.documentElement,a,b,d)},delegate:function(a,b,d){$_.each(function(f){c(f,a,b,d)})}})})();
(function(){if($_.ajax!=="undefined"){var g,h;g={};h={};$_.ext("template",{get:function(d){var c;c=this.el.innerHTML;if(c==="")console.log("Template is empty or cannot be found");else return g[d]=c},parse:function(d,c){var a=g[d],b=[],b=[],e=0,f=e=0,k=0,i="",j={},m="",l,a=String(a).replace(/\s+/gim," "),a=a.replace(/>\s+</gim,"><"),a=a.replace(/>\s+\{/gim,">{"),a=a.replace(/\}\s+</gim,"}<"),b=a.match(/\{([A-Z0-9_\-]+)\}(.*)\{\/\1\}/gim);if(b!=null){e=b.length;for(f=0;f<e;f++){a=a.replace(b[f],"{"+
f+"}");m="";i=String(b[f]).match(/^\{([A-Z0-9_\-]+)\}/i);j=c[i[1]];if(j.length>0){i=j.length;b[f]=b[f].replace(/\{([A-Z0-9_\-]+)\}(.*)\{\/\1\}/gim,"$2");for(k=0;k<i;k++)m+=b[f].replace(/\{([A-Z0-9 _\-]+)\}/gi,function(a,b){return j[k][b]?j[k][b]:""})}a=a.replace("{"+f+"}",m)}}b=a.match(/\{([A-Z0-9_\-]+)\}/gim);if(b!=null){e=b.length;for(f=0;f<e;f++)i=b[f].replace("{",""),i=i.replace("}",""),a=a.replace(b[f],c[i])}f=document.createDocumentFragment();f.appendChild(document.createElement("section"));
f=f.querySelectorAll("section")[0];f.innerHTML=a;f=f.querySelectorAll('[src=""], [href=""]');for(l in f)f[l].parentNode&&f[l].parentNode.removeChild(f[l]);return h[d]=a},apply:function(d,c,a){typeof c==="undefined"&&typeof a==="undefined"?this.el.innerHTML=typeof h[d]!=="undefined"?h[d]:d:$_.get(c,{},function(b){b===""?console.log("Template is empty or can not be found"):(g[d]=b,b=this.parse(d,a),h[d]=b,this.el.innerHTML=b)})}})}})();

View File

@ -9,7 +9,7 @@
var d;
//Private function for getting/setting attributes
//Private function for getting/setting attributes/properties
function _attr(sel, name, value)
{
var oldVal, doAttr;

233
src/modules/template.js Normal file
View File

@ -0,0 +1,233 @@
/**
* Template module for simple javascript templating
*/
(function(){
"use strict";
//This module relies on some others for simplicity
//so, if they aren't there, don't initialize the module
if($_.ajax === "undefined")
{
return;
}
var t, _t, _p;
//Private object to store retrieved templates
_t = {};
//Private object to store parsed templates
_p = {};
/**
* Module for html templating. Requires ajax module.
*
* @name template
* @namespace
* @memberOf $_
*/
t = {
/**
* Retrieves a template
*
* @memberOf $_.template
* @name get
* @param string name
* @return string
* @function
* @type string
*/
get: function(name)
{
var res;
res = this.el.innerHTML;
if(res === "")
{
console.log("Template is empty or cannot be found");
return;
}
_t[name] = res;
return res;
},
/**
* Formats a template
*
* @memberOf $_.template
* @name parse
* @param string template_name
* @param object replace_data
* @return string
* @function
* @type string
*/
parse: function(name, data)
{
var tmp = _t[name],
pairs = [],
pseudos = [],
num_pairs = 0,
num_pseudos = 0,
i = 0,
j = 0,
var_name = '',
rep_data = {},
tmp_data = '',
data_len,
frag,
frag_section,
emptys,
x;
tmp = String(tmp);
//Remove newlines and tabs from template because
//those whitespace characters are extra bandwidth
tmp = tmp.replace(/\s+/gim, " ");
tmp = tmp.replace(/>\s+</gim, "><");
tmp = tmp.replace(/>\s+\{/gim, ">{");
tmp = tmp.replace(/\}\s+</gim, "}<");
//Match all the looped sections of content
pairs = tmp.match(/\{([A-Z0-9_\-]+)\}(.*)\{\/\1\}/gim);
if(pairs != null)
{
num_pairs = pairs.length;
//Go through the template, and match the pairs
for(i=0;i<num_pairs;i++)
{
//Put the loop in a placeholder
tmp = tmp.replace(pairs[i], "{"+i+"}");
//Create a place to store looped data
tmp_data = "";
//The replace variable is the name of the tag
var_name = String(pairs[i]).match(/^\{([A-Z0-9_\-]+)\}/i);
rep_data = data[var_name[1]];
//Make sure there are loops
if(rep_data.length > 0)
{
data_len = rep_data.length;
//Get rid of the loop tags
pairs[i] = pairs[i].replace(/\{([A-Z0-9_\-]+)\}(.*)\{\/\1\}/gim, "$2");
//Replace psudovariables with data
for(j=0;j<data_len;j++)
{
//Is there a better way to do this, rather than an inline function?
tmp_data += pairs[i].replace(/\{([A-Z0-9 _\-]+)\}/gi, function(_, varName){
return (rep_data[j][varName]) ? rep_data[j][varName] : "";
});
}
}
//Replace the looped content
tmp = tmp.replace("{"+i+"}", tmp_data);
}
}
//Replace all the rest of the psudeovariables
pseudos = tmp.match(/\{([A-Z0-9_\-]+)\}/gim);
if(pseudos != null)
{
num_pseudos = pseudos.length;
for(i=0;i<num_pseudos;i++)
{
//Remove the {} from the pseudos
var_name = pseudos[i].replace('{', '');
var_name = var_name.replace('}', '');
//Replace each pseudovariable with the value of the object
//property of the same name
tmp = tmp.replace(pseudos[i], data[var_name]);
}
}
//Create an empty fragement
frag = document.createDocumentFragment();
//Insert the html
frag.appendChild(document.createElement('section'));
frag_section = frag.querySelectorAll('section')[0];
frag_section.innerHTML = tmp;
//Remove bad elements in the fragment, should be faster than being done live
emptys = frag_section.querySelectorAll('[src=""], [href=""]');
for(x in emptys)
{
if(emptys[x].parentNode)
{
emptys[x].parentNode.removeChild(emptys[x]);
}
}
//Save the parsed template in an object for later retrieval
_p[name] = tmp;
return tmp;
},
/**
* Inserts the formatted template into the page. If the url and data parameters
* are passed, it will retrieve a template file from the same domain, parse,
* and insert the template into the page.
*
* @memberOf $_.template
* @name apply
* @function
* @param string parsed_template/template_name
* @param [string] url
* @param [object] data
*/
apply: function(name, url, data)
{
//If the parsed template is supplied, just apply it to the passed selector
if(typeof url === "undefined" && typeof data === "undefined")
{
//If the "name" variable is in the _p object, set that
if(typeof _p[name] !== "undefined")
{
this.el.innerHTML = _p[name];
return;
}
//Otherwise, set the passed string to the current selector
this.el.innerHTML = name;
return;
}
//Otherwise, get the template, parse it, and apply it
$_.get(url, {}, function(res){
var parsed;
if(res === "")
{
console.log("Template is empty or can not be found");
return;
}
//Cache the template in an object for later use
_t[name] = res;
parsed = this.parse(name, data);
_p[name] = parsed;
this.el.innerHTML = parsed;
});
}
};
//Add the module to the library
$_.ext('template', t);
})();

View File

@ -52,7 +52,7 @@ for (var i = 0, tagName; tagName = HTML5[i]; i++) document.createElement(tagName
for(n in o1)
{
//Do a shallow compare -- first level only
if($_.type(o1[n]) === "object")
{
if($_.type(o2[n]) !== "object")
@ -73,7 +73,7 @@ for (var i = 0, tagName; tagName = HTML5[i]; i++) document.createElement(tagName
for(n in o2)
{
//Do a shallow compare -- first level only
if($_.type(o1[n]) === "object")
{
if($_.type(o2[n]) !== "object")