Demos/demo8.html @@ -14,6 +14,7 @@ var SubtleTemplate = new Class({ Implements: Options, options:{ + subTemplateClass:'SubtleTemplate', tag: 'div', id: '', 'class': '', @@ -52,6 +53,8 @@ var SubtleTemplate = new Class({ if(!element) return this.fireEvent('error'); element = $(element); + this.parseSubTemplates(element); + if(Browser.Engine.trident)element.getElements('*').each(function(el){ // Edit this list to include // all attribute names whose value you may set in your html templates @@ -79,6 +82,17 @@ var SubtleTemplate = new Class({ return this; }, + subTemplates:{}, + parseSubTemplates: function(element){ + var subTemplateElements = element.getElements('.'+this.options.subTemplateClass); + subTemplateElements.each(function(subTemplateElement){ + var key = subTemplateElement.removeClass(this.options.subTemplateClass).get('class'); + if (!key) return; + new Element('span',{ 'class':this.options.subTemplateClass+'-'+key.camelCase() }).inject(subTemplateElement, 'before'); + this.subTemplates[key] = new SubtleTemplate(subTemplateElement); + },this); + }, + updateTemplate: function(fn){ try{console.log( "updateTemplate", fn );}catch(e){}; if($type(fn) != 'function') return this; @@ -132,9 +146,29 @@ SubtleTemplate.Template = new Class({ 'class':(this.data.html_class||this.constructor.instance.options['class']||'').substitute(this.data), 'id': (this.data.html_id||'').substitute(this.data) }); + + this.populateSubTemplates(this.data); + return this.fireEvent("populate"); }, + populateSubTemplates: function(data){ + var self = this; + Hash.each(this.constructor.instance.subTemplates, function(subTemplate,key){ + + try{console.log( self.constructor.instance.options.subTemplateClass+'-'+key.camelCase() );}catch(e){}; + var elementForKey = self.element.getElement('.'+ self.constructor.instance.options.subTemplateClass+'-'+key.camelCase() ) + + if ($type(data[key])=='array') data[key].each(function(dataForKey){ + + new subTemplate(dataForKey).element.inject(elementForKey, 'before'); + + }); + + elementForKey.dispose(); + }); + }, + toElement: function(){ return this.element; }, Source/Plugins/SubtleTemplate.js @@ -3,7 +3,7 @@ <plist version="1.0"> <dict> <key>currentDocument</key> - <string>Demos/demo2.html</string> + <string>Source/Plugins/SubtleTemplate.js</string> <key>documents</key> <array> <dict> @@ -77,12 +77,42 @@ <key>firstVisibleLine</key> <integer>0</integer> </dict> + <key>Demos/demo3.html</key> + <dict> + <key>caret</key> + <dict> + <key>column</key> + <integer>0</integer> + <key>line</key> + <integer>37</integer> + </dict> + <key>columnSelection</key> + <false/> + <key>firstVisibleColumn</key> + <integer>0</integer> + <key>firstVisibleLine</key> + <integer>0</integer> + <key>selectFrom</key> + <dict> + <key>column</key> + <integer>0</integer> + <key>line</key> + <integer>32</integer> + </dict> + <key>selectTo</key> + <dict> + <key>column</key> + <integer>0</integer> + <key>line</key> + <integer>37</integer> + </dict> + </dict> <key>Demos/demo4.html</key> <dict> <key>caret</key> <dict> <key>column</key> - <integer>22</integer> + <integer>21</integer> <key>line</key> <integer>41</integer> </dict> @@ -96,9 +126,9 @@ <key>caret</key> <dict> <key>column</key> - <integer>0</integer> + <integer>5</integer> <key>line</key> - <integer>0</integer> + <integer>27</integer> </dict> <key>firstVisibleColumn</key> <integer>0</integer> @@ -110,15 +140,59 @@ <key>caret</key> <dict> <key>column</key> - <integer>0</integer> + <integer>109</integer> + <key>line</key> + <integer>49</integer> + </dict> + <key>columnSelection</key> + <false/> + <key>firstVisibleColumn</key> + <integer>0</integer> + <key>firstVisibleLine</key> + <integer>0</integer> + <key>selectFrom</key> + <dict> + <key>column</key> + <integer>104</integer> + <key>line</key> + <integer>49</integer> + </dict> + <key>selectTo</key> + <dict> + <key>column</key> + <integer>111</integer> <key>line</key> + <integer>49</integer> + </dict> + </dict> + <key>Demos/demo7.html</key> + <dict> + <key>caret</key> + <dict> + <key>column</key> <integer>0</integer> + <key>line</key> + <integer>44</integer> </dict> <key>firstVisibleColumn</key> <integer>0</integer> <key>firstVisibleLine</key> <integer>0</integer> </dict> + <key>Source/Plugins/SubtleTemplate.js</key> + <dict> + <key>caret</key> + <dict> + <key>column</key> + <integer>20</integer> + <key>line</key> + <integer>97</integer> + </dict> + <key>firstVisibleColumn</key> + <integer>0</integer> + <key>firstVisibleLine</key> + <integer>76</integer> + </dict> </dict> <key>openDocuments</key> <array> @@ -126,14 +200,15 @@ <string>Demos/demo.css</string> <string>Demos/demo1.html</string> <string>Demos/demo2.html</string> + <string>Demos/demo3.html</string> <string>Demos/demo4.html</string> <string>Demos/demo5.html</string> <string>Demos/demo6.html</string> + <string>Demos/demo7.html</string> + <string>Source/Plugins/SubtleTemplate.js</string> </array> <key>showFileHierarchyDrawer</key> <false/> - <key>showFileHierarchyPanel</key> - <true/> <key>treeState</key> <dict> <key>mootools-subtle-templates</key> @@ -141,15 +216,7 @@ <key>isExpanded</key> <true/> <key>subItems</key> - <dict> - <key>Demos</key> - <dict> - <key>isExpanded</key> - <true/> - <key>subItems</key> - <dict/> - </dict> - </dict> + <dict/> </dict> </dict> <key>windowFrame</key> mootools-subtle-templates.tmproj b6076dfb7f4f0ca78080caa3573a69ed4bdfcf5d Thomas Aylott oblivious+git@subtlegradient.com http://github.com/subtleGradient/mootools-subtle-templates/commit/1902ced26cc7e6e7a28a6aa3ca0b92a0bb71b948 1902ced26cc7e6e7a28a6aa3ca0b92a0bb71b948 2009-01-12T13:48:31-08:00 2009-01-12T13:48:31-08:00 [NEW] Added basic subtemplate support! Check out demo8 for a simple demo. WARNING: API For this will change soon. very Alpha right now 4d94310676d11ece07a88c68ae694cbadcd74443 Thomas Aylott oblivious+git@subtlegradient.com