Browse Source

Revision complete du JS pour s'adapter au date picker de SPIP 3.3+

master
Cerdic 5 months ago
parent
commit
88008dc7d2
  1. 18
      formulaires/calendrier_mini.html
  2. 139
      javascript/calendrier_mini.js.html

18
formulaires/calendrier_mini.html

@ -47,19 +47,21 @@
Chargement du javascript du mini-calendrier
]<script type='text/javascript'>/*<![CDATA[*/
]<script type='text/javascript'>
if (window.jQuery){jQuery(function(){
#SET{ui,#CHEMIN{javascript/ui/jquery-ui.min.js}}[(#REM) SPIP 3.2+]
[(#GET{ui}|oui)jQuery.getScript('#GET{ui}', function(){]
jQuery.getScript('[(#PRODUIRE{fond=javascript/calendrier_mini.js,lang=#ENV{lang}}|compacte)]',function(){minical.init('.minicalendar .calendar-container');});
[(#GET{ui}|oui)});]
});}/*]]>*/</script>[
jQuery.getScript('[(#PRODUIRE{fond=javascript/calendrier_mini.js,lang=#ENV{lang}}|compacte)]',function(){minical.init('.minicalendar .calendar-container');});
});}
</script>[
(#REM) --------------------------------------------------------------------------------------------------
Chargement de la css que l'on importe inline pour eviter un hit (performance)
+ fixer la css de background pour les boutons precedent/suivant
]<style type="text/css">
[(#INCLURE{css/minical-datepicker.css}|compacte{css})]
[(#INCLURE{css/minical.css}|compacte{css})]
.calendriermini .ui-datepicker-header .ui-icon {background-image: url("#CHEMIN{css/img/month_prev_next-32x16.png}");}
[(#CONFIG{calendriermini/affichage_hors_mois,1}|non)
.calendriermini .old.day,
.calendriermini .new.day {visibility: hidden}
]
old day
</style>

139
javascript/calendrier_mini.js.html

@ -1,23 +1,16 @@
#HTTP_HEADER{Content-type:text/javascript}
if (!jQuery.fn.datepicker){
[(#INCLURE{javascript/ui/core.js}|sinon{#INCLURE{javascript/ui/jquery.ui.core.js}})]
[(#INCLURE{javascript/ui/widget.js}|sinon{#INCLURE{javascript/ui/jquery.ui.widget.js}})]
[(#INCLURE{javascript/ui/datepicker.js}|sinon{#INCLURE{javascript/ui/jquery.ui.datepicker.js}})]
}
if (!jQuery.fn.multiDatesPicker){
#INCLURE{javascript/jquery-ui.multidatespicker.js}
#INCLURE{prive/formulaires/dateur/bootstrap-datepicker.js}
}
[(#REM)<script>]
var ajax_image_searching = "<img src='#CHEMIN{images/searching.gif}' width='16' height='16' />";
var ajax_image_searching = "<img src='#CHEMIN{images/loader.svg}' width='32' height='32' />";
var minical = {
options: {
buttonText: '<:afficher_calendrier|texte_script:>',
buttonImage: '#CHEMIN_IMAGE{calendrier-16.png}',
buttonImageOnly: true,
closeText: '<:bouton_fermer|texte_script:>',
prevText: '<:precedent|texte_script:>',
nextText: '<:suivant|texte_script:>',
currentText: '<:date_aujourdhui|texte_script:>',
closeText: '<:bouton_fermer|texte_script:>',
clearText: '<:lien_supprimer|texte_script:>',
monthNames: [
'<:date_mois_1|texte_script:>','<:date_mois_2|texte_script:>','<:date_mois_3|texte_script:>','<:date_mois_4|texte_script:>','<:date_mois_5|texte_script:>','<:date_mois_6|texte_script:>',
'<:date_mois_7|texte_script:>','<:date_mois_8|texte_script:>','<:date_mois_9|texte_script:>','<:date_mois_10|texte_script:>','<:date_mois_11|texte_script:>','<:date_mois_12|texte_script:>'],
@ -34,12 +27,7 @@ var minical = {
'<:date_jour_1_initiale|texte_script:>','<:date_jour_2_initiale|texte_script:>','<:date_jour_3_initiale|texte_script:>','<:date_jour_4_initiale|texte_script:>',
'<:date_jour_5_initiale|texte_script:>','<:date_jour_6_initiale|texte_script:>','<:date_jour_7_initiale|texte_script:>'],
dateFormat: 'yy-mm-dd',
firstDay: #CONFIG{calendriermini/jour1,1},
isRTL: [(#ENV{lang}|lang_dir|=={rtl}|?{true,false})],
changeMonth: [(#CONFIG{calendriermini/changement_rapide,1}|?{true,false})],
changeYear: [(#CONFIG{calendriermini/changement_rapide,1}|?{true,false})],
showOtherMonths: [(#CONFIG{calendriermini/affichage_hors_mois,1}|?{true,false})],
selectOtherMonths: [(#CONFIG{calendriermini/affichage_hors_mois,1}|?{true,false})]
firstDay: #CONFIG{calendriermini/jour1,1}
},
add_tooltip_and_class: function($this,date,id,tooltip,className){
@ -96,25 +84,25 @@ var minical = {
}
}
me.multiDatesPicker('addDates', dates);
// toujours retirer la classe active qui n'a pas de sens pour l'affichage
jQuery('.ui-state-active',me).removeClass('ui-state-active');
var args = ['update'].concat(dates);
jQuery.fn.datepicker.apply(me, args);
$this.currentDates = dates;
}
},
before_show_day: function(date) {
var d = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
var c = [true, ''];
var c = {enabled:true, classes:''};
if (this.cn && this.cn[d]){
for (var i in this.cn[d])
c[1] += ' ' + this.cn[d][i];
c.classes += ' ' + this.cn[d][i];
}
if (this.tooltip && this.tooltip[d]){
var glue = '';
c[2] = '';
c.tooltip = '';
for (var i in this.tooltip[d]) {
c[2] += glue + this.tooltip[d][i];
c.tooltip += glue + this.tooltip[d][i];
glue = "\n";
}
}
@ -135,7 +123,7 @@ var minical = {
var o = me.get(0);
if (typeof o.dateseen == "undefined")
o.dateseen = {};
if (!o.dateseen[year+"/"+month]){
if (typeof o.dateseen[year+"/"+month] === "undefined"){
//console.log(o.dateseen);
o.dateseen[year+"/"+month] = true;
minical.show_loading(me);
@ -144,11 +132,15 @@ var minical = {
data:{start:start,end:end},
success:function(data, textStatus, jqXHR){
data = eval(data);
o.dateseen[year+"/"+month] = data;
minical.set_events(me,start,end,data);
minical.hide_loading(me);
}
});
}
else {
minical.set_events(me,start,end,o.dateseen[year+"/"+month]);
}
inst.currentDay=0; // annuler la date active : pas de sens ici
},
show_loading : function(me){
@ -158,50 +150,85 @@ var minical = {
me.endLoading(true);
},
scripts_loaded: {widget:false,datepicker:false,multidatepicker:false},
init : function(selecteur){
//if (!minical.scripts_loaded.widget || !minical.scripts_loaded.datepicker || !minical.scripts_loaded.multidatepicker)
// return;
var options = minical.options;
var lang = '[(#LANG|texte_script)]';
[(#CONFIG{calendriermini/format_jour,initiale}|=={abbr}|oui)
minical.options.dayNamesMin = minical.options.dayNamesShort;
]
if (typeof jQuery.fn.datepicker.dates !== "undefined"){
if (typeof jQuery.fn.datepicker.dates[lang]==="undefined"){
jQuery.fn.datepicker.dates[lang] = {
days: options.dayNames,
daysShort: options.dayNamesShort,
daysMin: options.dayNamesMin,
months: options.monthNames,
monthsShort: options.monthNamesShort,
today: options.currentText,
clear: options.clearText,
format: options.dateFormat.replace('yy', 'yyyy'),
titleFormat: "MM yyyy", /* Leverages same syntax as 'format' */
weekStart: options.firstDay,
rtl: [(#LANG_DIR|=={'rtl'}|?{true, false})]
};
}
options.language = lang;
}
jQuery(function(){
jQuery(selecteur).not('.loaded')
.addClass('loaded')
.multiDatesPicker(jQuery.extend(minical.options,
{
showButtonPanel: true,
prevText: '<:minical:mois_precedent|texte_script:>',
nextText: '<:minical:mois_suivant|texte_script:>',
create: minical.create,
beforeShowDay: minical.before_show_day,
onChangeMonthYear: minical.change_month_year,
onSelect: minical.on_select
})
)
.each(function(){
var me=jQuery(this);
// se mettre a la date demandee (pour afficher le bon mois)
me.datepicker("setDate" , me.attr('data-year')+"-"+me.attr('data-month')+"-1");
// et retirer la classe active qui n'a pas de sens pour l'affichage
jQuery('.ui-state-active',me).removeClass('ui-state-active');
.each(function() {
var me = jQuery(this);
me.datepicker(jQuery.extend({},options, {
multidate: true,
updateViewDate: false,
// se mettre a la date demandee (pour afficher le bon mois)
defaultViewDate: me.attr('data-year')+"-"+me.attr('data-month')+"-1",
beforeShowDay: function(date) {
return minical.before_show_day.apply(me.get(0), [date]);
}
}))
// initialiser le mois par defaut
minical.change_month_year(me.attr('data-year'),me.attr('data-month'),me);
})
.on('changeMonth', function(e) {
var me = jQuery(e.target); minical.change_month_year(e.date.getFullYear(), e.date.getMonth()+1, me);
})
.on('changeDate', minical.onChangeDate)
.trigger('miniCalendarLoaded')
.find(".alt").remove();
});
},
on_select : function(dateText, inst){
var me = inst.input;
if (dateText) {
// annuler la selection !
me.multiDatesPicker('toggleDate', dateText);
var actif = (me.multiDatesPicker('gotDate', dateText) !==false);
if (actif){
var url = me.attr('data-url');
url = parametre_url(url,me.attr('data-vardate'),dateText);
//console.log(url);
window.location = url;
onChangeDate : function(e){
var me = jQuery(this);
if (e.dates.length>this.currentDates.length) {
// on a picke une date qui n'etait pas dans la liste, on peut ignorer
// remettre l'affichage d'aplomb
//console.log('added => IGNORED');
var args = ['update'].concat(this.currentDates);
jQuery.fn.datepicker.apply(me, args);
}
else {
//console.log('removed => on a clique');
// remettre l'affichage d'aplomb
var args = ['update'].concat(this.currentDates);
jQuery.fn.datepicker.apply(me, args);
var dates = [];
for (var i in e.dates) {
dates.push(e.dates[i].getFullYear()+'-'+(e.dates[i].getMonth()+1)+'-'+e.dates[i].getDate());
}
var datePicked;
for (var i in this.currentDates) {
var d = this.currentDates[i].getFullYear()+'-'+(this.currentDates[i].getMonth()+1)+'-'+this.currentDates[i].getDate();
if (dates.indexOf(d) === -1) {
datePicked = d;
var url = me.attr('data-url');
url = parametre_url(url,me.attr('data-vardate'),datePicked);
//console.log("REDIRECT",url);
window.location = url;
}
}
}
}

Loading…
Cancel
Save