Back to top

Autore Topic: Integrare JQuery nelle estensioni  (Letto 2396 volte)

mau_develop

  • Visitatore
Integrare JQuery nelle estensioni
« il: 23 Ago 2013, 19:50:11 »
Tempo fa avevo scritto questo:
http://www.joomla.it/download-della-community/item/232-modulo-page-flip-con-jquery.html
Purtroppo 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
Codice: [Seleziona]
<?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
Codice: [Seleziona]
// 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
Codice: [Seleziona]
$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

Codice: [Seleziona]

$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
Codice: [Seleziona]
<?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 :)

Offline Apples

  • Nuovo arrivato
  • *
  • Post: 1
    • Mostra profilo
Re:Integrare JQuery nelle estensioni
« Risposta #1 il: 26 Apr 2016, 19:02:47 »
magari il post è un attimino "agè"...ma hai poi creato il modulo? :D

 



Web Design Bolzano Kreatif