moved to bootstrap-3.0.2
[myslice.git] / devel / django-insert-above-1.0.4 / README
1 WHAT IS IT?
2 -----------
3
4 These templatetags is a hack making possible to insert 'content' in
5 some (maybe above the current or parent template) places.
6
7 More specifically, when we use these tags, there are some Nodes called
8 'containers' that are rendered after all other nodes are rendered, but placed
9 in it's right posistion. Using this hack, 'containers' may render 
10 depending on variables in context that were generated by nodes placed anywhere in
11 template (maybe after it).
12
13 It's very useful in cases when you are reusing some template parts
14 very often. For example displaying comment list and comment submit form.
15 We write some template and put it into comments.html. Then every time 
16 we need comments we just {% include "comments.html" %}.
17 But what if this part needs some js or css? Then we need to create 
18 some comments-jscss.html and override some {% block head %}. IMHO this
19 is quite inconvenient.
20
21 Using this tool we can insert js and css into head 
22 directly from comments.html 
23
24 MOTIVATION
25 ----------
26
27 1. Create convenient way to include media resources in head of HTML page.
28 2. Handle repetition of resource includes.
29 3. Make it possible to require resources from included templates.
30 4. Keep the order of resource includes from different places.
31
32 INSTALL
33 -------
34
35 1. (required) add 'insert_above' in INSTALLED_APPS in your settings.py
36
37 2. (optional) add these two lines of code somewhere in your project where
38 they will run for sure. For example in urls.py
39
40 ~~~~
41 from django.template.loader import add_to_builtins
42 add_to_builtins('insert_above.templatetags.insert_tags')
43 ~~~~
44
45 TAGS & FILTERS
46 --------------
47
48 1. {% insert_handler %}
49 2. {% container name %}
50 3. {% media_container name %}
51 4. {% insert_str container str %}
52 5. {% insert container %}{% endinsert %}
53 6. media_tag filter simply converts `ga.js` into `<script type='text/javascript' src='/static/ga.js'></script>`
54
55 RESTRICTIONS
56 ------------
57
58 1. `{% container %}` or `{% media_container %}` tags must NOT be in other `{% block %}`.
59 2. `{% insert_handler %}` ought to be at ther very beginning of base template.
60
61 VARIABLES
62 ---------
63
64 1. `IA_USE_MEDIA_PREFIX`, by default True
65 2. `IA_MEDIA_PREFIX`, if not set `STATIC_URL` is used, if not set `MEDIA_URL` is used, if not set '/media/' is used
66 3. `DEBUG`, if True logs how much time spent on rendering
67 4. `IA_JS_FORMAT`, by default `<script type='text/javascript' src='{URL}'></script>`
68 5. `IA_CSS_FORMAT`, by default `<link rel='stylesheet' href='{URL}' type='text/css' />`
69 6. `IA_MEDIA_EXTENSION_FORMAT_MAP`, by default `{'css' : CSS_FORMAT, '.js' : JS_FORMAT}`
70
71 EXAMPLE
72 -------
73
74 Let's analyze an example. 
75
76 base.html
77
78 ~~~~{.html}
79 {% insert_handler %}
80 <html>
81 <head>
82 <script>
83 <script type='text/javascript' src='{{ MEDIA_URL }}js/jquery.min.js'></script> 
84 {% media_container media %}
85
86 $(document).ready(function(){
87 {% container ready %}
88 });
89 </script>
90 </head>
91 <body>
92 {% block content %}
93 {% endblock %}
94 </body>
95 </html>
96 ~~~~
97
98 Base template creating blocks and containers..
99
100 blog/base.html
101
102 ~~~~{.html}
103 {% extends "base.html" %}
104
105 {% block content %}
106 {% insert_str media "js/mathjax.js" %}
107     {% block header %}{% endblock %}
108     {% block menu %}{% include "blog/menu.html" %}{% endblock %}
109     {% block text %}{% endblock %}
110     {% block footer %}{% endblock %}
111 {% endblock %}
112 ~~~~
113
114 Extending content block. Requiring js/mathjax.js resource into 'media' container.
115
116 blog/menu.html
117
118 ~~~~{.html}
119 {% insert_str media "js/animated.menu.js" %}
120 {% insert_str media "css/animated.menu.css" %}
121 {% insert ready %}
122     $('ul.menu').each(function(){
123         $(this).superanimation();
124     });
125 {% endinsert %}
126 <ul id='blog-menu' class='menu'>
127  <li>link</li>
128  <li>link</li>
129  <li>link</li>
130 </ul>
131 ~~~~
132
133 Requiring js/animated.menu.js and css/animated.menu.css into "media" container.
134 Inserting javascript code into "ready" container.
135
136 blog/post_detail.html
137
138 ~~~~{.html}
139 {% extends "blog/base.html" %}
140
141 {% block header %}{{ title }}{% endblock %}
142
143 {% block text %}
144 {% insert_str media "js/mathjax.js" %}
145 {{ text }}
146 {% endblock %}
147
148 {% block footer %}
149 <hr>
150 {% endblock %}
151 ~~~~
152
153 Implementing blocks and requiring js/mathjax.js into media.
154
155
156 So if we render 
157 Template('blog/post_detail.html').render(Context({'title': 'Hello', 'text': 'World'}))
158 we will get:
159
160 ~~~~{.html}
161 <html>
162 <head>
163 <script>
164 <script type='text/javascript' src='/media/js/jquery.min.js'></script> 
165 <script type='text/javascript' src='/media/js/mathjax.js'></script>
166 <script type='text/javascript' src='/media/js/animated.menu.js'></script>
167 <link rel="stylesheet" href="/media/css/animated.menu.css" type="text/css" />
168
169 $(document).ready(function(){
170     $('ul.menu').each(function(){
171         $(this).superanimation();
172     });
173 });
174 </script>
175 </head>
176 <body>
177 Hello
178 <ul id='blog-menu' class='menu'>
179  <li>link</li>
180  <li>link</li>
181  <li>link</li>
182 </ul>
183 World
184 <hr>
185 </body>
186 </html>
187 ~~~~
188
189 What shall be noted?
190 -------------------
191
192 1. `js/mathjax.js` automatically becomes `<script type='text/javascript' src='/media/js/mathjax.js'></script>`
193 and `css/animated.menu.css` becomes `<link rel="stylesheet" href="/media/css/animated.menu.css" type="text/css" />`
194 2. inserting from included template is possible
195 3. any text may be inserted to any container. Here we insert javascript code in  `$(document).ready(function(){});`
196 4. `js/mathjax.js` was required twice, but included only once.
197 5. The order of included resources is kept.
198
199 FIXTURES
200 --------
201
202 ### version 1.0.2
203
204  + **fix MEDIA_URL setting**
205  if STATIC_URL is not set in settings, it's value is None by default in new versions of Django.
206  Now we check if STATIC_URL is None, then use MEDIA_URL
207
208 ### version 1.0.4
209
210  + added new tag `{% insert_form container form %}`
211  + added new tag `{% insert_form container form.media %}`
212
213 ## TODOs
214
215 1. testing
216 2. extending tags
217 3. resource bulking
218