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