🌍
English
This shows you the differences between two versions of the page.
dev:changes_in_2.2 [2011/03/08 23:07] plg created |
— (current) | ||
---|---|---|---|
Line 1: | Line 1: | ||
- | ====== Technical changes in Piwigo 2.2 ====== | ||
- | FIXME (2011-03-09) this page is under preparation | ||
- | |||
- | This page lists the technical changes that may be useful for plugin and theme developpers to make their extension compatible with Piwigo 2.2. | ||
- | |||
- | * CSS and Javascript files are combined to reduce the number of HTTP requests | ||
- | * core themes use CSS sprites for icons to reduce the number of HTTP requests | ||
- | * cleaner URL for plugin administration page admin.php?page=plugin-community-pendings | ||
- | * $config['local_dir'] instead of "./local/" | ||
- | * adviser mode was removed | ||
- | |||
- | ===== combined_script + footer_script replaces known_script ===== | ||
- | |||
- | To reduce the number of HTTP requests from the visitor web browser to the web server, we use the new "combine script" method, which merge several javascript files into a single one, minified. | ||
- | |||
- | <code html> | ||
- | {combine_script id="jquery" load="header" path=...} | ||
- | {combine_script id="jquery.anything" load="footer" require="jquery" path=...} | ||
- | {combine_script id="jquery.ui" load="footer" require="jquery" path=...} | ||
- | {combine_script id="jquery.ui.datepicker" load="footer" require="jquery.ui" path=...} | ||
- | {combine_script id="core.scripts" load="async" path=scripts.js} | ||
- | {combine_script id="rating" load="async" require="core.scripts" path=rating.js} | ||
- | |||
- | {combine_script id="jquery" load="async"} | ||
- | {combine_script id="jquery.ui" load="async"} | ||
- | {combine_script id="jquery.ui.draggable" load="async"} | ||
- | |||
- | {footer_script require='jquery.ui.xxxx'} | ||
- | </code> | ||
- | |||
- | * **id** : a string that make the javascript file unique | ||
- | * **load** : header/footer/async. header and footer values means the javascript file doesn't need to be loaded by the web browser to display the page. For example Google Analytics javascript could be "async". | ||
- | * **require** : the id of the parent javascript file. | ||
- | * **path** : relative to the "root url" of your gallery | ||
- | |||
- | ==== Example 1, jquery.fcbkcomplete ==== | ||
- | |||
- | <code html> | ||
- | {known_script id="jquery.fcbkcomplete" src=$ROOT_URL|@cat:"themes/default/js/plugins/jquery.fcbkcomplete.js"} | ||
- | {literal} | ||
- | <script type="text/javascript"> | ||
- | $(document).ready(function() { | ||
- | $("#tags").fcbkcomplete({ | ||
- | json_url: "admin.php?fckb_tags=1", | ||
- | cache: false, | ||
- | filter_case: false, | ||
- | filter_hide: true, | ||
- | firstselected: true, | ||
- | filter_selected: true, | ||
- | maxitems: 100, | ||
- | newel: true | ||
- | }); | ||
- | }); | ||
- | </script> | ||
- | {/literal} | ||
- | </code> | ||
- | |||
- | becomes: | ||
- | |||
- | <code html> | ||
- | {combine_script id='jquery.fcbkcomplete' load='footer' require='jquery' path='themes/default/js/plugins/jquery.fcbkcomplete.js'} | ||
- | |||
- | {footer_script require='jquery.fcbkcomplete'}{literal} | ||
- | jQuery(document).ready(function() { | ||
- | jQuery("#tags").fcbkcomplete({ | ||
- | json_url: "admin.php?fckb_tags=1", | ||
- | cache: false, | ||
- | filter_case: false, | ||
- | filter_hide: true, | ||
- | firstselected: true, | ||
- | filter_selected: true, | ||
- | maxitems: 100, | ||
- | newel: true | ||
- | }); | ||
- | }); | ||
- | {/literal}{/footer_script} | ||
- | </code> | ||
- | |||
- | ==== Example 2, jquery.ui.sortable ==== | ||
- | |||
- | <code html> | ||
- | {known_script id="jquery" src=$ROOT_URL|@cat:"themes/default/js/jquery.packed.js"} | ||
- | {known_script id="jquery.ui" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.core.packed.js" } | ||
- | {known_script id="jquery.ui.sortable" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.sortable.packed.js" } | ||
- | |||
- | {literal} | ||
- | <script type="text/javascript"> | ||
- | jQuery().ready(function(){ | ||
- | jQuery(".catPos").hide(); | ||
- | jQuery(".drag_button").show(); | ||
- | jQuery(".categoryLi").css("cursor","move"); | ||
- | jQuery(".categoryUl").sortable({ | ||
- | axis: "y", | ||
- | opacity: 0.8 | ||
- | }); | ||
- | }); | ||
- | </script> | ||
- | {/literal} | ||
- | </code> | ||
- | |||
- | becomes: | ||
- | |||
- | <code html> | ||
- | {footer_script require='jquery.ui.sortable'}{literal} | ||
- | jQuery(document).ready(function() { | ||
- | jQuery(".catPos").hide(); | ||
- | jQuery(".drag_button").show(); | ||
- | jQuery(".categoryLi").css("cursor","move"); | ||
- | jQuery(".categoryUl").sortable({ | ||
- | axis: "y", | ||
- | opacity: 0.8 | ||
- | }); | ||
- | }); | ||
- | {/literal}{/footer_script} | ||
- | </code> | ||
- | |||
- | No need to use combined_script, because Piwigo will automatically load jquery.ui.sortable, which automatically requires jquery.ui which automatically requires jquery. It works because jquery.ui.sortable is available in themes/default/js4 |