Added template module
This commit is contained in:
parent
057e8c1dd7
commit
f98323aeec
|
|
@ -1,4 +1,5 @@
|
|||
kis-custom.js
|
||||
kis-custom-min.js
|
||||
combine-build.php
|
||||
test.html
|
||||
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
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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+</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'> 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+</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'> 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"><</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"><</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"><</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>
|
||||
238
kis-all.js
238
kis-all.js
|
|
@ -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);
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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)})}})}})();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
})();
|
||||
|
|
@ -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")
|
||||
|
|
|
|||
Loading…
Reference in New Issue