https://leboisdesbuttes.fr/plugins/auto/escal/v5.6.1/scripts/Rotative.js

1/******************************************************************************
2*******************************************************************************
3
4  Inspired by Bernard Blazin's (June 2007) rotative_js.html
5
6
7  Noisette name : Rotative.js
8  Version       : 1.0
9  Author        : Patrice Guerlais paguerlais .at. free<dot>fr
10  Licence       : BSD Licence
11  Date          : 20150613
12
13*******************************************************************************
14USAGE
15*******************************************************************************
16
17Rotative object : animate the hiding and display of display elements grouped
18                  in a container, e.g. rotate div.something contained in a
19                  #scroll section.
20
21Parameters :
22container : the HTML object containing the objects to rotate e.g. "#scroll"
23element   : the HTML object to rotate e.g. "div.something"
24tempo     : rotate every "tempo" seconds
25debug     : optional, activate logs to the console if set to a non-null value,
26            e.g. 'yes' or 1. Warning : 'no' IS a non-null value...
27
28Example :
29$(document).ready(
30  function()
31  {
32    new Rotative
33    (
34      {
35        container : "#annonces_defilantes",
36        element   : "div.annonce_defilante",
37        tempo     : [(#CONFIG{escal/config/tempoannoncedefil, 8})],
38        debug     : 'yes'
39      }
40    )
41  }
42) ;
43
44*******************************************************************************
45******************************************************************************/
46
47function Rotative(options)
48{
49  //options.debug = 1 ;
50  if (options.debug) console.log("Rotative.new options=", options) ;
51
52  /////////////////////////////////////////////////////////////////////////////
53  //
54  // Methods definition
55  //
56  /////////////////////////////////////////////////////////////////////////////
57
58  //
59  // Relay method to hide the current element (the one which index is stored in
60  // this.current). It is necessary because we need to access some properties
61  // stored within the Rotative object when this method is used as a callback.
62  // The speed of hiding can be passed as a parameter on call, defaulted to
63  // "slow". This is useful to initialize a rotation : the initial hiding is
64  // done with the speed set to 0 as this.hide_current(0), but for an actual
65  // rotation the default speed is ok : this.hide_current().
66  //
67  this.hide_current = function(speed)
68    {
69      // Set speed to "slow" if it is undefined
70      speed = speed || "slow" ;
71
72      if (this.debug) console.log("hide_current element="+this.element+" current="+this.current+" height="+this.height) ;
73
74      // Need to copy locally the height_px property because we'll use it in
75      // the animate post-animation function which is executed in the element
76      // context whereas this.height_px is accessed in Rotative context :-(
77      var height_px = this.height_px ;
78      $(this.element)
79        .eq(this.current)
80          .animate({top: -this.height}, speed,
81		   // $(this).css : refers to an element item
82		   // height_px   : must be accessed in a Rotative context thus
83		   //               the relay variable.
84		   function() { $(this).css('top', height_px) } ) ;
85    }
86
87
88  this.show_current = function(speed)
89    {
90      if (this.debug) console.log("show_current current="+this.current) ;
91
92      // Set speed to "slow" if it is undefined
93      speed = speed || "slow" ;
94
95      $(this.element).eq(this.current).show().animate({top: 0}, speed) ;
96    }
97
98
99  //
100  // Rotation method : scroll up the current element to hide it, progress to
101  // the next one and scroll this new element up to show it.
102  //
103  this.rotate = function()
104    {
105      if (this.debug) console.log("rotate entry count="+this.count+" current="+this.current) ;
106
107      // Hide the current element
108      this.hide_current() ;
109
110      // Next element : use an addition and a test rather than a modulo, it's
111      // faster to compute.
112      // To be noted : the test is >= rather than >. Indeed > should suit but
113      // >= acts as a goal-keeper just in case the current index would have an
114      // unattended value at entry.
115      if (++this.current >= this.count) this.current = 0 ;
116      this.show_current() ;

117    }
118
119
120  //
121  // Callback to call when entering the container object : stop rotating.
122  //
123  this.HoverEnter = function()
124    {
125      if (this.debug) console.log("Hover enter "+this.container) ;
126      clearInterval(this.interval) ;
127    }
128
129
130  // Callback to call when leaving the container object : rotate and
131  // reinstantiate the automatic rotation
132  this.HoverLeave = function()
133    {
134      if (this.debug) console.log("Hover leave "+this.container) ;
135      this.rotate() ;
136      this.interval = setInterval(this.rotate.bind(this), this.tempo) ;
137    }
138
139
140  /////////////////////////////////////////////////////////////////////////////
141  //
142  // Properties definition
143  // Note : 'current' will be defined later to avoid an unuseful initialization
144  //
145  /////////////////////////////////////////////////////////////////////////////
146
147  // Allocate the object with the received parameters
148  this.container = options.container ||
149    console.log("Missing 'container' parameter, options=", options) ;
150  this.element   = options.element ||
151    console.log("Missing 'element' parameter, options=", options) ;
152  this.tempo     = options.tempo * 1000 ||
153    console.log("Missing 'tempo' parameter, options=", options) ;
154  this.height    = $(this.container).height() ;
155  this.height_px = this.height+"px" ;
156  this.debug     = options.debug || 0 ;
157
158  // Add some computed properties
159  // Number of instances of the document item
160  this.count    = $(this.element).length ;
161
162  if (this.debug) console.log("rotative constructor : this=", this) ;
163
164
165  /////////////////////////////////////////////////////////////////////////////
166  //
167  // Instance initialization
168  //
169  /////////////////////////////////////////////////////////////////////////////
170
171// Nothing to do if there's no element to rotate
172  if (!this.count)
173    {
174      if (this.debug) console.log(this.container+" : empty list of ["+this.element+"] elements") ;
175      return ;
176    }
177
178  // Positionne tous les éléments hors champ (sous le conteneur) avant
179  // d'afficher le premier, pour éviter que le dernier élément du DOM
180  // ne s'affiche par défaut (superposition à top:0).
181  $(this.element).css('top', this.height_px) ;
182
183  // Display the first (lower) element of the stack : index 0
184  this.current = 0 ;
185  this.show_current() ;
186
187  // Set the callbacks and rotation temporisation if there's at least 2
188  // elements : it would be dumb to rotate an element on itself ;-)
189  if (this.count < 2)
190    {
191      if (this.debug) console.log("No callbacks nor rotation, there's only "+this.count+" elements") ;
192      return ;
193    }
194  // The the callbacks on entry and leaving of the container
195  $(this.container).hover(
196			  this.HoverEnter.bind(this),
197			  this.HoverLeave.bind(this)
198			  ) ;
199  // Set the rotation
200  this.interval = setInterval(this.rotate.bind(this), this.tempo) ;
201}