Post on 17-Jan-2015
description
Drupal front-end
Marek Sotak a Bohdan Ganicky
Představení
Marek SotakDeveloper, designer
co-founder of atomic ant ltd web design company based in London, Prague and Denmark, operates internationaly.
Creator of RootCandy admin theme
http://drupal.org/project/rootcandy
@sotak –http://twitter.com/sotak
Bohdan GanickyFront-end developer
Part of the atomic ant team since 2009. Responsible for magic things.
@bganicky – http://twitter.com/bganicky
Šablonování – theming – Drupal 6
Šablona = prezentační vrstva oddělená od kóduNemusíme zasahovat do modulů, když chceme přepsat
výstup (mark-up)
PHPTemplate engine (Smarty, xtemplate, atd...)
Ukládáme do sites/*/themes/moje-sablona
Anatomie šablony
Generování stránky – suggestions + preprocess
theme('hook', $arguments)
theme_breadcrumb, skolavafrice_links,...
Definováno v hook_theme()function search_theme() {
return array(
'search_theme_form' => array(
'arguments' => array('form' => NULL),
'template' => 'search-theme-form',
),
);
}
hook = funkce – suggestions
nazevSablony_hook($arguments)skolavafrice_breadcrumbs($arguments)
engineName_hook($arguments)phptemplate_hook($arguments)
theme_hook($aguments)
hook = template – suggestions
Převést $arguments $variables→
Hledání render funkce (theme_render_template)
Hledání funkce pro zjištění připony (.tpl.php)
$variables se předávají referencí
hook = template – suggestions
template_preprocess
template_preprocess_hook
moduleName_preprocess
moduleName_preprocess_hook
engineName_engine_preprocess
engineName_engine_preprocess_hook
hook = template – suggestions
engineName_preprocess
engineName_preprocess_hook
themeName_preprocess
themeName_preprocess_hook
Sesbírané návrhy
Najdi implementované funkce (drupal_discover_template)
hook = template – suggestions
theme_render_template
Poskládat .tpl.php
navrh.tpl.php
nebo fallback
hook.tpl.php
Sub-theming – šablony v šabloně
Stačí .info soubor s hodnotoubase theme = ninesixty
Můžou sdílet některé soubory z hlavní šablonyCSS, js, .tpl.php, přepsané funkce z template.php
Nesdílítheme-settings.php, logo, color, některá nast. z .info
Sub-theming – jak na to
Vytvořte novou složku v sites/*/themes s názvem vaší šablony – eg. sites/all/themes/skolavafrice
Přidejte .info soubor se základními vlastnostmi – name, description,...
Přidejte “base theme = ninesixty” do .info souboru
Hotovo
Subtheming quick and dirty - http://drupal.org/node/441088
Užitečné tipy
DrupalContrib.orghttp://drupalcontrib.org
admin/settings/performanceOptimalizace css + js souborů
Base themesZen, Ninesixty, Genesis,... http://drupal.org/project/Themes
Užitečné tipy
Themer modulehttp://drupal.org/project/devel_themer
Firebug – firefox extension - http://getfirebug.com/
Odkazy
Theming handbook d.o - Drupal 6http://drupal.org/theme-guide
Drupal 6.x 7.x guide→http://drupal.org/update/theme/6/7
Mailing listhttp://drupal.org/mailing-lists
Theme garden - http://themegarden.org
IRC #drupal-themes
Drupal a JavaScript
jQuery
jQuery?
Javascriptová knihovna (nejpopulárnější)
Abstrakce JS do srozumitelného API
Řeší rozdíly implementace JS v různých prohlížečích
Přidává vlastní funkcionalitu (např. animace)
Usnadňuje nám práci
Ukázka<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>Wordpress</li>
</ul>
<ul>
<li>Prototype</li>
<li>jQuery</li>
<li>Dojo</li>
</ul>
Ukázka<ul>
<li class=”odd”>Joomla</li>
<li>Drupal</li>
<li class=”odd”>Wordpress</li>
</ul>
<ul>
<li class=”odd”>Prototype</li>
<li>jQuery</li>
<li class=”odd”>Dojo</li>
</ul>
Před
var lists = document.getElementsByTagName('ul');
for (var i = 0; i < lists.length; i++) {
var items = lists[i].getElementsByTagName('li');
for (var j = 1; j < items.length; j += 2) {
if (!/(^|s)odd(s|$)/.test(items[i].className)) {
rows[i].className += ' odd';
}
}
}
Základní koncept
$('ul li:nth-child(odd)').addClass('odd');
Něco najdi . . .
. . .něco s t ím udělej .
Základní koncept
$('ul li:nth-child(odd)').addClass('odd');
CSS selektor (CSS3)
jQuery metoda
$ == jQuery
$('ul li:nth-child(odd)').addClass('odd');
$ == jQuery
jQuery('ul li:nth-child(odd)').addClass('odd');
CSS selektory...
Všechny pokročilé selektory včetně CSS3$('div p'), $('div > p')
$('div ~ p'), $('div + p')
$('div p:first-child'), $('div p:last-child')
$('div p:only-child'), $('div p:nth-child(2)')
...a mnoho dalších
+ filtry
$(“li:odd”), $(“li:even”)
$(“li:first”), $(“li:last”)
$(“input:checked”), $(“input:not(:checked)”)
$(“div:contains('Drupal')”), $(“div:has(ul)”)
$(“div:hidden”), $(“div:visible”)
...a mnoho dalších
http://api.jquery.com/category/selectors/
Řetězení metod
$('ul li:nth-child(odd)').addClass('odd').append(“I'm odd”).fadeOut(“slow”);
demo
jQuery API
● http://api.jquery.com● http://www.futurecolors.ru/jquery/
Rozšíření pro jQuery - plugins
stěžejní vlastnost jQuery → http://plugins.jquery.com
$.fn.showLinkTarget = function() {
return this.each(function() {
console.log(this.href);});
}
$(“a”).showLinkTarget(); demo
$(document).ready();
Událost nastane 1x běhěm načtení dokumentu→
V daný moment máme k dispozici celý DOM a můžeme s ním začít manipulovat
Netýká se obrázků! $(window).load();→
$(document).ready(function() {
alert('Dokument je připraven.');
});
Progressive enhancement
3 vrstvy
Obsah (html) prezentace (css) chování (js)→ →
Jedna nezávislá na druhé pokud možno co nejmenší →třecí zóny
JQuery ideální nástroj pro PE!→
Verze jQuery
Drupal 5.x jQuery 1.0.x ( 1.0.4)→ →
Drupal 6.x jQuery 1.2.x ( 1.2.6)→ →
Drupal 7.x snad jQuery 1.4.x →http://drupal.org/node/653580
Modul “jQuery update”
http://drupal.org/project/jquery_update
Drupal 5.x jQuery 1.2.6→
Drupal 6.x jQuery 1.3.2 (dev verze)→
Jak začít?
Čeho chci dosáhnout?
Neudělal to už někdo za mě? (viz plugins)
Neexistuje dokonce řešení ve formě Drupal modulu? (viz jCarousel či Lightbox2)
Nic z výše uvedeného? →
page.tpl.php
<?php print $scripts; ?>
Soubor .info
● Drupal automaticky vezme soubor script.js v kořenovém adresáři tématu.
● Pokud chceme použít jiný název či umístění, pak upravíme .info soubor:
...
stylesheets[all][] = my_style.css
scripts[] = js/my_script.js
...
Soubor .info
● Drupal automaticky vezme soubor script.js v kořenovém adresáři tématu.
● Pokud chceme použít jiný název či umístění, pak upravíme .info soubor:
...
stylesheets[all][] = my_style.css
scripts[] = js/jquery.plugin.js
scripts[] = js/my_script.js
...
Automatické změny v HTML
<html class=”js” ...>
<script type=”text/javascript” src=”jquery.js”>
<script type=”text/javascript” src=”drupal.js”>
<script type=”text/javascript” src=”my_script.js”>
<html class=”js” ...>
Opomíjená třída
Důležité pro stylování prvků s nimiž nějak manipulujeme přes JS/jQuery
Místo v .js:$(document).ready(function() {
$('#something').hide();
});
● použijeme CSS: .js #something { display: none; }
function fancyLogin() {var $login_block = $('#block-user-0');var $target = $('.top-navigation .item-list .first');var $trigger = $target.find('a').click(function() {
if ($login_block.is(':visible')) {$login_block.add($overlay).fadeOut();return false;
}else {
$login_block.add($overlay).fadeIn();$('#edit-name').focus();return false;
}});var $overlay = $('<div id="overlay">').appendTo('body').click(function() {
$trigger.trigger('click');});
$login_block.appendTo($target);}
$(document).ready(fancyLogin);
Nástroje
Firebug pro Firefox: http://getfirebug.com/
Developer Tools v Google Chrome
IE8 Developer Tools
http://jsbin.com/
http://james.padolsey.com/jquery/
http://www.woods.iki.fi/interactive-jquery-tester.html
Odkazy
http://jquery.com
http://api.jquery.com
http://www.futurecolors.ru/jquery/
Knihy
jQuery for Designers
jQuery Enlightenment
jQuery in Action
Learning jQuery
Drupal 6 JavaScript and jQuery
Otázky?
Děkujeme za pozornost!
Credits
Slide 4 by Medical Student on flickr
Slide 44 - http://web.mac.com/moistproduction/flash/index.html
Slide 60 by poopoorama on flickr
Website preview: http://skolavafrice.cz