Tempo fa avevo scritto questo:
http://www.joomla.it/download-della-community/item/232-modulo-page-flip-con-jquery.htmlPurtroppo destinato ad una versione di joomla durata molto poco; inoltre ho usato uno script un po complicato da integrare, ..troppi parametri e troppi script per imparare qualcosa, facilmente causa problemi irrisolvibili per chi comincia... ma anche per me...
Così rinfreschiamo un po' il modulo partendo da 0 con un nuovo script.
Lo stesso procedimento e ragionamento vale un po' per tutti gli script JQ di cui si vuole costruire un modulo o cmq un estensione.
Uno script per flippare pagine molto conosciuto è Turn.js, o meglio Turn.js è molto di più ma nella versione free è "all'essenziale" anche se cmq molto gradevole
Lo potete trovare in Git
https://github.com/blasten/turn.js e occorre scaricare la cartella master e decomprimerla.
Vediamo cosa contiene:
- I files di licenza e documentazione
- I due files (di cui ne useremo uno solo) di Turn.js , minimized e normale
- Una cartella contenente delle pagine html con esempi di utilizzo
Come sarà fatto il nostro modulo:
/mod_pflip (cartella modulo)
-- / tmpl (cartella template)
---- default.php (template)
-- mod_pflip.xml (manifest)
-- mod_pflip. php (entry point)
-- /language (cartella lingue)
----/it-IT (cartella lingua italiana)
------ it-IT.mod_pflip.ini
------ it-IT.mod_pflip.sys.ini
--/assets (cartella script)
Il manifesto "dice a joomla" come è fatta l'estensione, quindi diciamogli col codice corretto la struttura qui sopra e i parametri di inizializzazione del modulo (quelli di setup che troveremo da compilare quando usiamo il modulo in admin)
mod_pflip.xml
<?xml version="1.0" encoding="utf-8"?>
<extension
type="module"
version="3.1"
client="site"
method="upgrade"
>
<name>mod_pflip</name>
<author>Milano Web City</author>
<creationDate>Agosto 2013</creationDate>
<copyright>Copyright (C) 2013 - 2018 Milano Web City</copyright>
<license>GNU General Public License version 2 or later</license>
<authorEmail>Tua mail</authorEmail>
<authorUrl>Tuo sito</authorUrl>
<version>0.0.1</version>
<description>MOD_PFLIP_XML_DESCRIPTION</description>
<files>
<filename module="mod_pflip">mod_pflip.php</filename>
<filename>mod_pflip.xml</filename>
<filename>index.html</filename>
<folder>tmpl</folder>
<folder>assets</folder>
<folder>language</folder>
</files>
<config>
<fields name="params">
<fieldset name="basic">
<field
name="flipfolder"
type="folderlist"
label="MOD_PFLIP_IMGFLIPFOLDER_LABEL"
description="MOD_PFLIP_IMGFLIPFOLDER_DESC"
directory="images"
exclude=".."
stripext=""
/>
<field name="flipname"
type="text"
label="MOD_PFLIP_NAME_LABEL"
description="MOD_PFLIP_NAME_DESC"
default=""
/>
<field name="width"
type="text"
label="MOD_PFLIP_WIDTH_LABEL"
description="MOD_PFLIP_WIDTH_DESC"
default=""
/>
<field name="height"
type="text"
label="MOD_PFLIP_HEIGHT_LABEL"
description="MOD_PFLIP_HEIGHT_DESC"
default=""
/>
<field name="pagetype"
type="list"
default="1"
description="MOD_PFLIP_PAGETYPE_DESC"
label="MOD_PFLIP_PAGETYPE_LABEL"
>
<option value="1">MOD_PFLIP_PAGETYPE_SINGLE</option>
<option value="2">MOD_PFLIP_PAGETYPE_DOUBLE</option>
</field>
<field name="acceleration"
type="list"
default="1"
description="MOD_PFLIP_ACCEL_DESC"
label="MOD_PFLIP_ACCEL_LABEL"
>
<option value="0">JNO</option>
<option value="1">JYES</option>
</field>
<field
name="elevation"
type="text"
label="MOD_PFLIP_ELEVATION_LABEL"
description="MOD_PFLIP_ELEVATION_DESC"
size="2"
default="0"
/>
</fieldset>
<fieldset name="advanced">
<field
name="moduleclass_sfx"
type="text"
label="MOD_PFLIP_FIELD_MODULECLASS_SFX_LABEL"
description="MOD_PFLIP_FIELD_MODULECLASS_SFX_DESC"
/>
</fieldset>
</fields>
</config>
</extension>
nel codice ho lasciato gli stessi nomi usati nello script così da rendere semplice capire da dove sono stati presi e a cosa servono.
Ad esempio i parametri riguardano per la maggior parte le variabili che inizializzano lo script di Turn.js così da rendere flessibile lo script senza intervenire nel codice ma solo nella configurazione.
Ricordate inoltre di mettere sempre il file index.html vuoto in ogni cartella
Ora facciamo ordine e iniziamo a copiare i due flies Turn.js in /assets ( i files di doc li trascuro ma inserite un richiamo alla licenza... è vostro ciò che scrivete intorno..non Turn.js).
il codice nei tre files html in /Demos è uguale in due casi, varia l'inizializzazione per la pag singola o doppia, ma noi l'abbiamo trasformata in una variabile/parametro per cui ne copiamo il contenuto di uno dei due nel nostro file del template (default.php)
Ora non rimane che scrivere il codice che andrà nel nostro entry point
Normalmente troviamo la funzione statica che carica template e layout... e la scriviamo al termine.. all'inizio vietiamo l'accesso diretto
mod_pflip.php
// no direct access
defined('_JEXEC') or die;
......
require JModuleHelper::getLayoutPath('mod_pflip', $params->get('layout', 'default'));
in mezzo che ci va?
innanzitutto recuperiamo i parametri
$moduleclass_sfx = htmlspecialchars($params->get('moduleclass_sfx'));
$flipname = htmlspecialchars($params->get('flipname'));
$width = htmlspecialchars($params->get('width'));
$height = htmlspecialchars($params->get('height'));
if((int)htmlspecialchars($params->get('pagetype')) == 1){
$pagetype = 'single';
} elseif((int)htmlspecialchars($params->get('pagetype')) == 2){
$pagetype = 'double';
} else {
$pagetype = '';
}
$acceleration = htmlspecialchars($params->get('acceleration'));
$elevation = (int)htmlspecialchars($params->get('elevation'));
$acc= $acceleration ? 'true' : 'false';
Inoltre usiamo l'enty point per caricare tutti gli script necessari al funzionamento che trovate con i relativi tag nel contenuto che avete copiato nel file del template default.php
$document = JFactory::getDocument();
JHtml::_('jquery.framework');
$document->addStyleDeclaration("
#{$flipname}{
width:{$width}px;
height:{$height}px;
}
#{$flipname} .turn-page{
background-color:#ccc;
background-size:100% 100%;
}
");
$document->addScript(JURI::root(true).'/modules/mod_pflip/assets/turn.min.js');
$document->addScriptDeclaration("
jQuery( document ).ready(function($) {
$('#{$flipname}').turn({
display: '{$pagetype}',
acceleration: $acc,
gradients: !$.isTouch,
elevation:$elevation,
when: {
turned: function(e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
});
");
quindi non rimane che dare un aspetto al modulo
default.php
<?php defined('_JEXEC') or die; ?>
<div class="pageflip<?php echo $moduleclass_sfx ?>">
<div id="<?php echo $flipname; ?>">
<div style="background-image:url(images/pages/01.jpg);"></div>
<div style="background-image:url(images/pages/02.jpg);"></div>
<div style="background-image:url(images/pages/03.jpg);"></div>
<div style="background-image:url(images/pages/04.jpg);"></div>
<div style="background-image:url(images/pages/05.jpg);"></div>
<div style="background-image:url(images/pages/06.jpg);"></div>
</div>
</div>
cosa manca?
..poco o nulla...
se vedete nei parametri ho previsto di indicare una directory in /images da dove caricare le immagini; quelle quì sopra sono quelle presenti nell'esempio e che ho copiato nella path mostrata.
Quindi bisognerà scrivere nel template o in un file helper la funzione che leggerà la cartella e costruirà dinamicamente i div quì sopra
Poi manca la traduzione.... ma non ho voglia, quando l'ho sistemato poi posto uno zip completo.
Ma siamo nella sez. sviluppo... non nella jed
