Changeset 60053 in spip-zone


Ignore:
Timestamp:
Apr 3, 2012, 2:05:09 PM (7 years ago)
Author:
cedric@…
Message:

Optimisation du chargement :

  • tout le JS en un seul script compresse cote serveur, que l'on met en statique via #PRODUIRE. Le selecteur css pour cibler le conteneur du minicalendrier est passe a l'init depuis le squelette
  • le script JS externe ne contient aucune info liee au squelette calendrier_mini qui peut donc etre facilement surcharge/modifie
  • regroupement des 2 icones precedent/suivant en une seule image spritee
  • commentaire dans le squelette qui redevient lisible
Location:
_plugins_/calendrier_mini/trunk
Files:
2 added
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/calendrier_mini/trunk/css/minical.css

    r60052 r60053  
    2525.calendriermini .ui-datepicker-prev { left:2px; }
    2626.calendriermini .ui-datepicker-next { right:2px; }
     27.calendriermini .ui-datepicker-prev .ui-icon {background-position: top left;}
     28.calendriermini .ui-datepicker-next .ui-icon {background-position: top right;}
    2729.calendriermini .ui-datepicker-prev-hover { left:1px; }
    2830.calendriermini .ui-datepicker-next-hover { right:1px; }
  • _plugins_/calendrier_mini/trunk/formulaires/calendrier_mini.html

    r60052 r60053  
    1313                                        data-vardate="#ENV{var_date}"
    1414                                        ></div>
    15 </div>
    16 <script type='text/javascript'>/*<![CDATA[*/
    17 var ajax_image_searching = "<img src='#CHEMIN{images/searching.gif}' width='16' height='16' />";
    18 var minical = {
    19         options: {
    20                 buttonText: '<:afficher_calendrier|texte_script:>',
    21                 buttonImage: '#CHEMIN_IMAGE{calendrier-16.png}',
    22                 buttonImageOnly: true,
    23                 prevText: '<:precedent|texte_script:>',
    24                 nextText: '<:suivant|texte_script:>',
    25                 currentText: '<:date_aujourdhui|texte_script:>',
    26                 closeText: '<:bouton_fermer|texte_script:>',
    27                 monthNames: [
    28                         '<: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:>',
    29                         '<: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:>'],
    30                 monthNamesShort: [
    31                         '<:date_mois_1_abbr|texte_script:>','<:date_mois_2_abbr|texte_script:>','<:date_mois_3_abbr|texte_script:>','<:date_mois_4_abbr|texte_script:>','<:date_mois_5_abbr|texte_script:>','<:date_mois_6_abbr|texte_script:>',
    32                         '<:date_mois_7_abbr|texte_script:>','<:date_mois_8_abbr|texte_script:>','<:date_mois_9_abbr|texte_script:>','<:date_mois_10_abbr|texte_script:>','<:date_mois_11_abbr|texte_script:>','<:date_mois_12_abbr|texte_script:>'],
    33                 dayNames: [
    34                         '<:date_jour_1|texte_script:>','<:date_jour_2|texte_script:>','<:date_jour_3|texte_script:>','<:date_jour_4:|texte_script>',
    35                         '<:date_jour_5|texte_script:>','<:date_jour_6|texte_script:>','<:date_jour_7|texte_script:>'],
    36                 dayNamesShort: [
    37                         '<:date_jour_1_abbr|texte_script:>','<:date_jour_2_abbr|texte_script:>','<:date_jour_3_abbr|texte_script:>','<:date_jour_4_abbr|texte_script:>',
    38                         '<:date_jour_5_abbr|texte_script:>','<:date_jour_6_abbr|texte_script:>','<:date_jour_7_abbr|texte_script:>'],
    39                 dayNamesMin: [
    40                         '<:date_jour_1_initiale|texte_script:>','<:date_jour_2_initiale|texte_script:>','<:date_jour_3_initiale|texte_script:>','<:date_jour_4_initiale|texte_script:>',
    41                         '<:date_jour_5_initiale|texte_script:>','<:date_jour_6_initiale|texte_script:>','<:date_jour_7_initiale|texte_script:>'],
    42                 dateFormat: 'yy-mm-dd',
    43                 firstDay: 1,
    44                 isRTL: [(#ENV{lang}|lang_dir|=={rtl}|?{true,false})],
    45                 changeMonth: true,
    46                 changeYear: true,
    47                 showOtherMonths: true,
    48                 selectOtherMonths: true
    49         },
     15</div>[
     16(#REM) --------------------------------------------------------------------------------------------------
    5017
    51         set_events: function(me,start,end,data){
    52                 var dates = [];
    53                 if (data.length){
    54                         var d;
    55                         for(var j in data){
    56                                 d = data[j].start.split(" ");
    57                                 d = d[0].split("-");
    58                                 d = new Date(d[0],d[1]-1,d[2]);
    59                                 dates.push(d);
    60                         }
    61                         //console.log(dates);
    62                         me.multiDatesPicker('addDates', dates);
    63                 }
    64         },
     18Chargement du javascript du mini-calendrier
    6519
    66         change_month_year: function(year, month, inst){
    67                 var me = inst;
    68                 //console.log("change_month_year:"+year+"/"+month);
    69                 if (typeof inst.input != "undefined")
    70                         me = inst.input;
    71                 //console.log(me);
    72                 var t = new Date(year,month-1,1);
    73                 t = parseInt(t.getTime()/1000);
    74                 var start = t-7*24*3600;
    75                 var end = t+38*24*3600;
    76                 // stocker les year/month deja vus pour ne pas les recharger 2 fois quand on va et vient
    77                 var o = me.get(0);
    78                 if (typeof o.dateseen == "undefined")
    79                         o.dateseen = {};
    80                 if (!o.dateseen[year+"/"+month]){
    81                         //console.log(o.dateseen);
    82                         o.dateseen[year+"/"+month] = true;
    83                         minical.show_loading(me);
    84                         jQuery.ajax({
    85                                 url:jQuery(me).attr("data-json"),
    86                                 data:{start:start,end:end},
    87                                 success:function(data, textStatus, jqXHR){
    88                                         data = eval(data);
    89                                         minical.set_events(me,start,end,data);
    90                                         minical.hide_loading(me);
    91                                 }
    92                         });
    93                 }
    94         },
    95         show_loading : function(me){
    96                 me.animateLoading();
    97         },
    98         hide_loading : function(me) {
    99                 me.endLoading(true);
    100         },
     20]<script type='text/javascript'>/*<![CDATA[*/
     21if (window.jQuery){jQuery(function(){
     22                jQuery.getScript('[(#PRODUIRE{fond=javascript/calendrier_mini.js,lang=#ENV{lang}}|compacte)]',function(){minical.init('.minicalendar .calendar-container');});
     23});}/*]]>*/</script>[
     24(#REM) --------------------------------------------------------------------------------------------------
    10125
    102         scripts_loaded: {widget:false,datepicker:false,multidatepicker:false},
    103         init : function(){
    104                 if (!minical.scripts_loaded.widget || !minical.scripts_loaded.datepicker || !minical.scripts_loaded.multidatepicker)
    105                         return;
    106                 jQuery(function(){
    107                         jQuery('.minicalendar .calendar-container').not('.loaded')
    108                                 .addClass('loaded')
    109                                 .multiDatesPicker(jQuery.extend(minical.options,
    110                                         {
    111                                                 showButtonPanel: true,
    112                                                 prevText: '<:minical:mois_precedent|texte_script:>',
    113                                                 nextText: '<:minical:mois_suivant|texte_script:>',
    114                                                 create: minical.create,
    115                                                 beforeShow: minical.before_show,
    116                                                 onChangeMonthYear: minical.change_month_year,
    117                                                 onSelect: minical.on_select
    118                                         })
    119                                 )
    120                                 .each(function(){
    121                                         var me=jQuery(this);
    122                                         me.datepicker("setDate" , me.attr('data-year')+"-"+me.attr('data-month')+"-1");
    123                                         minical.change_month_year(me.attr('data-year'),me.attr('data-month'),me);
    124                                 })
    125                                 .trigger('miniCalendarLoaded');
    126                 });
    127         },
    128         on_select : function(dateText, inst){
    129                 var me = inst.input;
    130                 if (dateText) {
    131                         // annuler la selection !
    132                         me.multiDatesPicker('toggleDate', dateText);
    133                         var actif = (me.multiDatesPicker('gotDate', dateText) !==false);
    134                         if (actif){
    135                                 var url = me.attr('data-url');
    136                                 url = parametre_url(url,me.attr('data-vardate'),dateText);
    137                                 //console.log(url);
    138                                 window.location = url;
    139                         }
    140                 }
    141         }
    142 }
     26Chargement de la css que l'on importe inline pour eviter un hit (performance)
     27+ fixer la css de background pour les boutons precedent/suivant
    14328
    144 if (window.jQuery){
    145         jQuery(function(){
    146                 jQuery.getScript('#CHEMIN{javascript/ui/jquery.ui.widget.js}',function(){minical.scripts_loaded.widget = true;minical.init();});
    147                 jQuery.getScript('#CHEMIN{javascript/ui/jquery.ui.datepicker.js}',function(){minical.scripts_loaded.datepicker = true;minical.init();});
    148                 jQuery.getScript('#CHEMIN{javascript/jquery-ui.multidatespicker.js}',function(){minical.scripts_loaded.multidatepicker = true;minical.init();});
    149         });
    150 }
    151 /*]]>*/</script>
    152 <style type="text/css">
    153 #INCLURE{css/minical.css}
    154 #calendar .ui-datepicker-prev .ui-icon {background-image: url("#CHEMIN{css/img/month_prev.png}");}
    155 #calendar .ui-datepicker-next .ui-icon {background-image: url("#CHEMIN{css/img/month_next.png}");}
     29]<style type="text/css">
     30[(#INCLURE{css/minical.css}|compacte{css})]
     31.calendriermini .ui-datepicker-header .ui-icon {background-image: url("#CHEMIN{css/img/month_prev_next-32x16.png}");}
    15632</style>
Note: See TracChangeset for help on using the changeset viewer.