Fonctionnement
*1. Créer un prototype pour le nouveau widget
*
* var spinBoxWidget = {
* settings: {
* itemClass: '.myItem',
* 'upBtnClass': '.upBtn',
* 'downBtnClass': '.downBtn'
* },
* _buildWidget: function() {
* //Construire le squelette du widget ici.
* },
* _init: function() {
* //
* var eventData = {widgetName: this.widgetName};
* this._fireEvent("spinBoxWidgetInit")
* }
* };
*
*
* 2. Enregister le widget
* Une fois le prototype de futur widget créé, il faut l'enregister * auprès du widgetManager: * PV.widgetManager.createWidget("PvSpinBoxWidget",spinBoxWidget); * * PV.widgetManager.createWidget ou * PV.widgetManager.registerWidget * étendent alors PvBaseWidget avec les paramètres définis dans le * nouveau prototype. Toutes les fonctions de PVBaseWidget qui n'ont * pas été redéfinies sont automatiquement disponibles dans le * prototype.3. cycle de vie
* Lorsqu'une nouvelle instance d'un widget est créée deux fonctions * sont automatiquement appelées: *1. _buildWidget()
* (utilisée pour créer le template du widget) *2. _init()
4. Paramètres inline
* Pour tous les paramètres de type Booléen, chaîne de caractères, ou entier, il est possible de les ajouter en 'ligne' grâce * à un attribut 'inlineOptions' de l'élément principal du widget. Il est à noter que les paramètres inline * ont la priorité sur les paramètres définis lors de l'initialisation du widget en javascript. * Le format est le suivant: * *
*
*
*
*
*5.Exemple d'utilisation
*
* var aSpinBoxWidget = new PV.widgetManager.ui({},"elementId");
* aSpinBoxWidget.on("spinBoxWidgetInit",function() {
* console.log(" spinbox initialisé");
* });
*
*/
initialize: function(settings,element) {
/** L'élément sur lequel s'applique le widget */
this.element = $(element) || false;
if (!this.element) throw new Error("An element or an element id must be provided.");
this.id = this._generateID();
/** Les paramètres du widget */
settings = this._parseInlineOptions(settings); //prise en compte des options en ligne
this.settings = Object.extend(Object.clone(this.settings), settings);
this._buildWidget();
this._handleListeners();
this._fireEvent("create", this.widget());
this._init();
this._fireEvent("init", this.widget());
},
/** @ignore */
_handleListeners: function() {
var listeners = this.settings.listeners;
if (!listeners || !listeners instanceof Array) return;
if (listeners.length === 0) return;
var self = this;
$(listeners).each(function(eventData) {
if (! (typeof eventData.event === "string" && typeof eventData.eventHandler === "function"))
return;
self.settings[eventData.event] = eventData.eventHandler;
var completeEventName = self.widgetName+":"+eventData.event;
var obv = new Event.observe( self.element, completeEventName, eventData.eventHandler);
});
},
/** @ignore */
_isEvent: function(optionName) {
var pattern = /Event$/;
return pattern.test(optionName);
},
/** @ignore */
_generateID: function() {
var currentTime = new Date().getTime();
var randomNumber = Math.ceil(Math.random()*1420);
currentId = "pvWidget_"+currentTime+"_"+randomNumber+"_"+this.widgetName;
return currentId;
},
/**
* Permet de construire le squelette du widget. Cette fonction est automatiquementExemple
*@example *
* PV.widgetManager.createWidget('PvAccordionWidget',accordionProtoType);
* var oAccordionWidget = new PV.widgetManager.ui.PvAccordionWidget({},'containerId');
*
*/
createWidget: registerWidget,
/**
* @function registerWidget
*
* @param {String} widgetName
* @param {Object} widgetPrototype
*
* @see PV.widgetManager.createWidget
*/
registerWidget: registerWidget,
/**@field */
ui: widgetsHandler,
/**
* @function requireWidget
* @param {String} widgetName
* @param {Function} callback
*
* @desc
* Charger un widget dans la page avant de l'utiliser.
* Cette fonction prend deux paramètres:Exemple
*@example *
* PV.widgetManager.requireComponent("utils", function() {
* var el = $("myElement");
* var contentEl = $("myContent");
* new PV.utils.PvToggle(el,contentEl);
* });
*
*/
requireWidget : loadWidget,
/**
* @function requireComponent
* @param {String} componentName
* @param {Function} callback
*
* @desc
* Charger un component dans la page avant de l'utiliser
* Cette fonction prend deux paramètres :Exemple
*@example *
* PV.widgetManager.requireWidget("PvGoogleMapWidget", function() {
* var settings = {zoom: 13};
* var gmapManager = new PV.widgetManager.ui.PvGoogleMapWidget(settings,"googleMapWidget");
* });
*
*
**/
requireComponent : _loadComponent
};
return publicApi;
})();
/**
* @desc
* PV.sciptManager est un module qui permet d'inclure dynamiquement des scripts
* dans le DOM.
*
* @namespace PV.scriptsManager
*/
PV.scriptsManager = (function() {
var loadedScripts = {};
/** @ignore */
var require = function(params) {
if (typeof params.script !== "string")
throw new Error("A script name must be provided");
if (typeof params.callback !== "function")
throw new Error("callback must be a function");
var completeScriptPath = (typeof params.base === "string") ? params.base+params.script+".js" : params.script+".js";
var scriptKey = params.script;
if (loadedScripts[scriptKey] !== completeScriptPath) {
try {
/** @ignore */
var s = document.createElement("script");
s.src = completeScriptPath;
s.type = "text/javascript";
/** @ignore */
s.onload = function(e) {
params.callback();
};
/** @ignore */
s.onerror = function() {
throw new Error(" The widget "+completeScriptPath+ " can't be found");
};
if(params.head==true)
{
document.getElementsByTagName("head")[0].appendChild(s);
}
else
{
document.getElementsByTagName("body")[0].appendChild(s);
}
//load the script once
loadedScripts[scriptKey] = completeScriptPath;
//IE
if (s.readyState){
/**@ignore */
s.onreadystatechange = function() {
if (s.readyState === 'complete' || s.readyState==='loaded')
s.onload();
};
}
} catch(e) {
alert(e.message);
}
}
else if (loadedScripts[scriptKey] === completeScriptPath) {
alert(" the script '"+completeScriptPath+ "' is already loaded.");
params.callback();
}
else{
throw new Error(" The script "+completePath+ " can't be found");
}
return this;
};
/*require with queue*/
var _syncRequire = function(params){
if (typeof params.script !== "string") throw new Error("A script name must be provided");
if (typeof params.callback !== "function") throw new Error("callback must be a function");
/*Créer une queue pour les futurs appels*/
var scriptKey = params.script;
var scriptLoadingStatus = PV.widgetsQueueManager.getLoadingStatus(scriptKey);
var scriptQueue = PV.widgetsQueueManager.createOrRetrieveQueue(scriptKey);
switch(scriptLoadingStatus){
case "unloaded":
var completeScriptPath = (typeof params.base === "string") ? params.base+params.script+".js" : params.script+".js";
/*callback*/
var customCallback = function(){
PV.widgetsQueueManager.setLoadingStatus(scriptKey,'loaded');
params.callback();
var completeQueue = PV.widgetsQueueManager.createOrRetrieveQueue(scriptKey);
completeQueue.runTasks();
};
//Créer le script
var scriptParam = {};
Object.extend(scriptParam,params);
scriptParam.completeScriptPath = completeScriptPath;
scriptParam.callback = customCallback;
_createScript(scriptParam);
PV.widgetsQueueManager.setLoadingStatus(scriptKey,'loading');
break;
case "loading":
scriptQueue.addTask(params.callback);
break;
case "loaded":
params.callback(); //script déjà chargé, l'exécuter
break;
}
};
var _createScript = function(params){
/** @ignore */
try{
var s = document.createElement("script");
var completeScriptPath = params.completeScriptPath || "";
s.src = completeScriptPath;
s.type = "text/javascript";
/** @ignore */
s.onload = function(e) {
params.callback();
};
/** @ignore */
s.onerror = function() {
throw new Error(" The script '"+completeScriptPath+ "' can't be found");
};
if(params.head==true)
{
document.getElementsByTagName("head")[0].appendChild(s);
}
else
{
document.getElementsByTagName("body")[0].appendChild(s);
}
//IE
if (s.readyState){
/**@ignore */
s.onreadystatechange = function() {
if (s.readyState === 'complete' || s.readyState==='loaded')
s.onload();
};
}
}catch(e){
}
};
var publicApi = {
/** @scope PV.scriptsManager */
/**
* @function require
*
* @param {Object} params
* @param {String} params.base Le chemin du script à charger . /path/to/scripts/
* @param {String} params.script Nom du script à charger sans l'extension '.js'
* @param {String} params.callback Fonction à executer une fois le script chargé.
*
* @return {Object} PV.scriptsManager
*
* @desc Inclure un script dans le DOM et execute une function une fois
* le script chargé.
* require renvoie {PV.scriptManager} ce qui permet de
* chainer plusieurs appels à require.
*
* @example
*
* PV.scriptsManager.require({
* base: '/path/to/scripts/',
* script: 'lightView',
* callback: function() { console.log("lightview loaded"); }
* });
*
*/
require: _syncRequire,//require,
/**
* @function load
*
* @param {Object} params
*
* @see PV.scriptsManager.require
*/
load: _syncRequire,
syncRequire : _syncRequire,
syncLoad : _syncRequire
};
return publicApi;
})();
/**
* @namespace PV.lightviewManager
* @desc
* PV.lightviewManager est un module qui permet d'inclure dynamiquement la bibliothèque Lightview dans une page
*/
PV.lightviewManager = (function() {
var isLoaded = false;
var currentElement = null;
/** @ignore */
var init = function(settings) {
var defaultSettings = {
base: PV.settings.COMPONENT_PATH+'/lightview/',
script: 'lightview'
};
var currentSettings = Object.clone(defaultSettings);
if (typeof settings === "object"){
currentSettings = Object.extend(currentSettings,settings) || currentSettings;
}
else if (typeof settings === "function"){
currentSettings.callback = settings;
}
try {
var userCallback = (typeof currentSettings.callback==='function') ? currentSettings.callback : Prototype.emptyFunction;
/** @ignore */
var completeCallback = function(){
beforeUserCallBack(userCallback);
};
currentSettings.callback = completeCallback;
PV.scriptsManager.require(currentSettings);
}
catch(e){}
};
/** @ignore */
var beforeUserCallBack = function(userFunc){
//fix navigator plugin detection
fixLightViewInit();
isLoaded = true;
var simulateClick;
if(currentElement){
simulateClick = function(){
Element.triggerEvent($(currentElement),'click');
return false;
}
}else{
simulateClick = Prototype.emptyFunction;
}
document.observe('lightview:loaded', function() {
simulateClick();
if(typeof userFunc==="function"){
userFunc();
}
});
Lightview.start.bind(Lightview)();
};
/** @ignore */
var fixLightViewInit = function(){
//from lightview unpacked line : 2670
var c = (navigator.plugins && navigator.plugins.length);
/** @ignore */
var detectPlugin = function(a)
{
var b = false;
if (c)
{
b = ($A(navigator.plugins).pluck("name").join(",").indexOf(a) >= 0);
}
else
{
try
{
b = new ActiveXObject(a);
}
catch (e){}
}
return !!b;
}
if (c)
{
window.Lightview.Plugin = {
flash: detectPlugin("Shockwave Flash"),
quicktime: detectPlugin("QuickTime")
};
}
else
{
window.Lightview.Plugin = {
flash: detectPlugin("ShockwaveFlash.ShockwaveFlash"),
quicktime: detectPlugin("QuickTime.QuickTime")
};
}
//ie hack from lightview unpacked line 200
if (document.documentMode >= 8 && !document.namespaces.ns_vml)
{
document.namespaces.add("ns_vml", "urn:schemas-microsoft-com:vml", "#default#VML");
}
else
{
if(document.createStyleSheet){
var a = document.createStyleSheet();
a.cssText = "ns_vml\\:*{behavior:url(#default#VML)}";
}
}
};
/** @ignore */
var initLightView = function(settings){
var lv = (typeof Lightview !="undefined") ? true : false;
if(lv) return false;
//load lightview on the first click. load once
var settings = (typeof settings === 'object') ? settings : {};
var lightviewClass = settings.ligthviewClass || '.lightview';
//load lightview - init lightview - then simulate click - load once
$(document).on('click',lightviewClass, function(e){
e.stop();
var currentTarget = e.element();
lightviewClass = lightviewClass.replace('.','');
currentElement = ($(currentTarget).hasClassName(lightviewClass)) ? currentTarget : $(currentTarget).up('.'+lightviewClass) || false;
if(isLoaded){
return false;
}
if(currentElement){
init(settings);
}
return false;
});
//Allow only one call
publicApi.initLightview = Prototype.emptyFunction;
};
publicApi = /** @scope PV.lightviewManager */{
/**
* @function initLightview
* @desc Permet d'inséser la bibliothèque Lightview sur une page.1. Exemple d'utilisation simple
*
*
*
*
*2. Exemple d'utilisation avec callback et une lightviewClass
*
*
*
*
**/
initLightviewOnclick : initLightView,
/**
* @function require requireLigthview
* @desc Charger la bibliothèque Lightview sur une page.
* @param {Object} settings Paramètres
* @param {String} settings.base Chemin du dossier contenant la bibliothèque Lightview. Valeur par defaut PV.settings.COMPONENT_PATH+'/lightview/',
* @param {String} settings.script Nom du script. Valeur par defaut: lightview
* @param {Function} settings.callback Function à executer après le chargement de la bibliothèque
*
*Exemple d'utilisation
*
var showSplash = Lightview.show({
href: baseLink + '/splash_pop',
rel: 'ajax',
title: '',
caption: '',
options: {
autosize: true,
topclose: false,
overlayClose: false,
menubar: false,
closeButton: false,
ajax: {
method: 'get',
evalScripts: true
}
}
});
Event.observe(window, 'load', function(){
PV.lightviewManager.requireLigthview({callback : showSplash});
});
*/
requireLigthview : init
};
return publicApi;
})();
PV.widgetsQueueManager = (function(){
/** @ignore */
var queuesContainer = {};
var widgetsLoadingStatus = {}; //unloaded - loading - loaded
/** @ignore */
var Queue = function(queueName){
this.tasks = [];
this.name = queueName || "none";
/** @ignore */
Queue.prototype.getLength = function(){
return this.tasks.length;
}
/** @ignore */
Queue.prototype.getTasks = function(){
return this.tasks;
}
/** @ignore */
Queue.prototype.addTask = function(task){
if(typeof task == "function"){
var taskLength = this.getLength();
this.tasks[taskLength] = task;
}
}
/** @ignore */
Queue.prototype.runTasks = function(){
var queueLength = this.getLength();
if(queueLength == 0) return;
var i;
for(i=0; i< queueLength; i++){
var task = this.tasks[i];
if(typeof task =="function"){
task();
}
}
/** @ignore */
this.clear();
}
/** @ignore */
Queue.prototype.clear = function(){
this.tasks = [];
}
};
/** @ignore */
var getQueue = function(queueName){
var queue = queuesContainer[queueName] || false;
return queue;
};
/** @ignore */
var createQueue = function(name){
if(typeof name != 'string') return false;
var queue = getQueue(name);
if(!queue){
queuesContainer[name] = new Queue(name);
queue = queuesContainer[name];
}
return queue;
};
/** @ignore */
var setStatus = function(widgetName,status){
widgetsLoadingStatus[widgetName] = status;
};
/** @ignore */
var getStatus = function(widgetName){
var loadingStatus = "unloaded";
var widgetStatus = widgetsLoadingStatus[widgetName]||false;
if(!widgetStatus){
setStatus(widgetName,"unloaded");
}else{
loadingStatus = widgetStatus;
}
return loadingStatus;
};
//Public API
var publicApi ={
createOrRetrieveQueue : createQueue,
setLoadingStatus : setStatus,
getLoadingStatus : getStatus
};
return publicApi;
})();