12.WT-javaScript-Drupal

Транскрипт

1 Visoka škola strukovnih studija za informacione i komunikacione tehnologije Beograd WEB TEHNOLOGIJE Drupal i javascript (jquery) Školska 2014/15. dr Nenad Kojić, dipl. inž. Milena Vesić, spec. inž. Marko M. Spasojević, spec. inž.

2 javascript, jquery javascript standardni script jezik na strani klijenta (browser) drupal.js fajl koji definiše globalni JS objekat jquery biblioteka, olakšava rad sa elementima web strane tj. DOM-om Princip rada jquery: Nađi element i izvrši akciju Primer: $( #test ).show(); Odabir elemenata po principu CSS selektora

3 jquery i Drupal javascript kod se može dodati preko f-je drupal_add_js() ili preko.info fajla teme javascript se može pisati i uokviru polja koje se odnosi na telo node-a, samo ako je omogućen PHP filter Osnovna biblioteka jquery-a je podrazumevano ukjučena uz stranu i nalazi se u misc/jquery.js

4 javascript preko theme.info Sam kod se nalazi u okviru teme u posebnom js fajlu Uključuje se preko.info fajla kroz scripts[]=test.js Ovako dodat kod se uključuje na svakoj stranici

5 Funkcija drupal_add_js() Dodaje javascript putem PHP-a Najčešće ako se želi dodati javascript kod putem modula tj. javascript samo uz modul

6 Funkcija drupal_add_js() drupal_add_js('misc/collapse.js'); drupal_add_js('misc/collapse.js', 'file'); drupal_add_js('jquery(document).ready(function () { alert("hello!"); );', 'inline'); drupal_add_js('jquery(document).ready(function () { alert("hello!"); );', ); array('type' => 'inline', 'scope' => 'footer', 'weight' => 5) drupal_add_js(' 'external'); drupal_add_js(array('mymodule' => array('key' => 'value')), 'setting');

7 javascript - override Ako neko želi da override-je vaš javascript kod iz modula Preko theme override-a function blockaway_init() { theme('blockaway_javascript'); function blockaway_theme() { return array( 'blockaway_javascript' => array( 'arguments' => array(),), ); function theme_blockaway_javascript() { drupal_add_js(drupal_get_path('module', 'blockaway').'/blockaway.js'); function bartik_blockaway_javascript() { drupal_add_js(path_to_theme(). '/blockaway.js');

8 hook_js_alter() Mogućnost da iz modula menjate putanju script-a function hook_js_alter(&$javascript) { $javascript['misc/jquery.js']['data'] = drupal_get_path('module', 'jquery_update'). '/jquery.js';

9 hook_library() Dodavanje spoljnih biblioteka koje ne pripadaju modulu function system_library() {... $libraries['vertical-tabs'] = array( 'title' => 'Vertical Tabs', 'website' => ' 'version' => '1.0', 'js' => array('misc/vertical-tabs.js' => array()), 'css' => array('misc/vertical-tabs.css' => array()), );... return $libraries;

10 drupal.js Centralni fajl za inicijalizaciju js promenljivih Glavna promenljiva je Drupal objekat var Drupal = Drupal { 'settings': {, 'behaviors': {, 'themes': {, 'locale': { ;

11 Drupal.settings Mogućnost prosleđivanja parametara za podešavanje iz PHP u JS <?php $my_settings = array( 'basepath' => $base_path, 'animation_effect' => variable_get('effect', 'none') ); drupal_add_js(array('my_module' => $my_settings), 'setting');?> var basepath = Drupal.settings.my_module.basepath; var effect = Drupal.settings.my_module.animation_effect;

12 Drupal.behaviors Obezbeđuje pravovremeno izvršavanje koda isto kao jquery.ready() Možete da dodate akciju koja će nešto uraditi Drupal.behaviors.exampleModule = { attach: function (context, settings) { $('.example', context).click(function () { $(this).next('ul').toggle('show'); ); ;

13 Drupal.theme Ima istu ulogu kao theme() Drupal.theme = function(func) { for (var i = 1, args = []; i < arguments.length; i++) { args.push(arguments[i]); return (Drupal.theme[func] Drupal.theme.prototype[func]).apply(this, args); ; Drupal.theme.prototype.myThemeFunction = function (left, top, width) { var mydiv = '<div id="mydiv" style="left:'+ left +'px; top:'+ top +'px; width:'+ width +'px;">';mydiv += '</div>'; return mydiv; ; Drupal.theme('myThemeFunction', 50, 100, 500);

14 Drupal.locale Osnovna namena je prevođenje teksta u JS Drupal.t() isto što i t()

15 Visoka škola strukovnih studija za informacione i komunikacione tehnologije Beograd WEB TEHNOLOGIJE Drupal i javascript (jquery) Školska 2014/15. dr Nenad Kojić, dipl. inž. Milena Vesić, spec. inž. Marko M. Spasojević, spec. inž.