Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ekaputra07/django-scripter

Django app to easily manage static file such as Javascript files and CSS files. Its almost like {% extrastyles %} and {% extrascripts %} block, but instead of put it directly on the template, we register each css and js we will used via application code. and this app will manage its depedencies to avoid duplicate script on the page. Similar to WordPress wp_enqueu_script and wp_enqueu_style.
https://github.com/ekaputra07/django-scripter

Last synced: 5 days ago
JSON representation

Django app to easily manage static file such as Javascript files and CSS files. Its almost like {% extrastyles %} and {% extrascripts %} block, but instead of put it directly on the template, we register each css and js we will used via application code. and this app will manage its depedencies to avoid duplicate script on the page. Similar to WordPress wp_enqueu_script and wp_enqueu_style.

Awesome Lists containing this project

README 

        
DJANGO SCRIPTER

===============

Django Scripter is a simple app for django to manage JS and CSS file on django projects.



Original uses cases:

--------------------

We at Egomedia Bali create an in-house CMS that consist of several in-house django apps to build this another django CMS.

Our CMS is working as a modular content system, that means each part of content is a page module. eg. Title/subtitle module, text module, image gallery module, contact form module.



And to use those module is as easy as drag and drop, put content and save it. The problem comes when we need to use several javascript library and saparate CSS for each module, because basically each module is an django app, so we want them as independent as possible, do not rely on other module js or css, so they bring their own css and js file event they are exist in other modules static files.



We need a way to avoid duplicate css or js needed on one page if module appear more than one time at the same page, no problem for css but can be a problem for loading js file more than one, such as loading jQuery more than one.



What it does:

-------------

Basically Django-scripter bundled with several js and css library that we use frequently such as latest version Jquery and 960gs css. and we can use it in each new project without re-downloading and re-putting them together each time we need them, as long as django-scripter installed, we can access them anytime in the template header file.



The principal thing how i works is, if you include the same javascript or css from many different code, this app will filter it out and will display only one on the head section of your page.



How to use it:

--------------

As I explained above, django-scripter bundled with jQuery and 960gs.

First check whats available scripts:



::



    $> python manage.py list_scripts



Will list all available scripts:



::



    \* Available Javascripts



    jquery



    \|____[1.7.2], "scripter/js/jquery/jquery-1.7.2.min.js"



    \* Available Stylesheet



    reset



    \|____[reset], "scripter/css/960gs/reset.css"



    \|____[text], "scripter/css/960gs/text.css"



    960gs



    \|____[12cols], "scripter/css/960gs/960_12_col.css"



    \|____[16cols], "scripter/css/960gs/960_16_col.css"



    \|____[24cols], "scripter/css/960gs/960_24_col.css"



If we want to use them at template we just need to call the tags from template.



::



    {% load scripts %}

    

    

    

    {% head_css "reset, 960gs==12cols" %}



    

    {% head_js "jquery" %}

    

    

    



Above tags will print:



::



    

    

    

    

    



    

    



    

    



    

    

    



Available template tags:

------------------------

* **head_css**

  

  This will be holder for all CSS file that called or registered to show at head section of html. 

  ::

      

      Usage:



      {% head_css %}



      or



      {% head_css "cssname, other_cssname==version/id" %)



* **head_js**



  This will be holder for all JS file that called or registered to show at head section of html. 

  ::

      

      Usage:



      {% head_js %}



      or



      {% head_js "jsname, other_jsname==version/id" %)



Available methods:

------------------



* **include_head_js**



  Use this method if you want to include javascript to head section of your page from app code.  

  ::

      

      Usage:



      from scripter import scripts



      # if you need jQuery to run the scripts

      scripts.include_head_js(['myapp/js/some_js.js', 'myapp/js/other_js.js'], ['jquery'])



      or



      # if no need for other js depedencies

      scripts.include_head_js(['myapp/js/some_js.js', 'myapp/js/other_js.js'])



* **print_head_js**



  Use this method if you want to include javascript inline javascript code to head section of your page from app code.  

  ::

      

      Usage:



      from scripter import scripts



      # if you need jQuery to run the scripts

      myscript = """

      

         alert('helo world');

      

      """

      scripts.print_head_js(myscript, ['jquery'])



      or



      # if no need for other js depedencies

      scripts.print_head_js(myscript)



* **include_head_css**



  Use this method if you want to include css file to head section of your page from app code.  

  ::

      

      Usage:



      from scripter import scripts



      scripts.include_head_js(['myapp/css/some_css.css', 'myapp/css/other_style.js'])



* **print_head_css**



  Use this method if you want to include inline css code to head section of your page from app code.  

  ::

      

      Usage:



      from scripter import scripts



      mycss = """

      

         body{background:#fff;}

      

      """

      scripts.print_head_css(mycss)



Notes

-----

I know this is just a short HOWTO of Django-scripter application, far from perfect and I am sure not all projects need this apps, if you need more information on how it works and how to customize it, just drop me an email at ekaputra[at]balitechy.com.