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ž.
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
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
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
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
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('http://example.com/example.js', 'external'); drupal_add_js(array('mymodule' => array('key' => 'value')), 'setting');
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');
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';
hook_library() Dodavanje spoljnih biblioteka koje ne pripadaju modulu function system_library() {... $libraries['vertical-tabs'] = array( 'title' => 'Vertical Tabs', 'website' => 'http://drupal.org/node/323112', 'version' => '1.0', 'js' => array('misc/vertical-tabs.js' => array()), 'css' => array('misc/vertical-tabs.css' => array()), );... return $libraries;
drupal.js Centralni fajl za inicijalizaciju js promenljivih Glavna promenljiva je Drupal objekat var Drupal = Drupal { 'settings': {, 'behaviors': {, 'themes': {, 'locale': { ;
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;
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'); ); ;
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);
Drupal.locale Osnovna namena je prevođenje teksta u JS Drupal.t() isto što i t()
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ž.