YaWK  24.1
Yet another WebKit
contentAnimator.php
Go to the documentation of this file.
1 <?php
2 namespace YAWK\WIDGETS\CONTENTANIMATOR\ANIMATE
3 {
4  /**
5  * @details<b>Add modern fx and motion to any elements of your website.</b>
6  *
7  * <p>The content animator widget lets you animate any kind of content. Simply add class="animate" to
8  * any html object in your DOM and the effect will be applied to the affected element. You can setup,
9  * which effect you wish to be drawn, as well as the scroll distance to the object. Be careful to use
10  * a not too big value, otherwise your users will think, that there is no more content before it got
11  * faded in. (or whichever effect you have activated)</p>
12  *
13  *
14  * @author Daniel Retzl <[email protected]>
15  * @copyright 2018 Daniel Retzl
16  * @version 1.0.0
17  * @brief Add a pre-defined effect to any of your content elements.
18  */
19  class contentAnimator
20  {
21  /** @param object global widget object data */
22  public $widget = '';
23 
24  /** @param string Scroll distance to target which should be effected */
25  public $contentAnimatorScrollValue = '620';
26 
27  /** @param string Which effect should be drawn on class="animated"
28  * At the time of writing this, following effects were available:
29  slideUp, slideDown, slideLeft, slideRight, fade, fadeMedium, fadeSlow */
30  public $contentAnimatorClass = 'slideUp';
31 
32  /**
33  * @brief Load all widget settings from database and fill object
34  * @param object $db Database Object
35  * @brief Load all widget settings on object init.
36  */
37  public function __construct($db)
38  {
39  // load this widget settings from db
40  $this->widget = new \YAWK\widget();
41  $settings = $this->widget->getWidgetSettingsArray($db);
42  foreach ($settings as $property => $value) {
43  $this->$property = $value;
44  }
45  }
46 
47  /**
48  * @brief Print all object data
49  * @brief (for development and testing purpose)
50  */
51  public function printObject()
52  {
53  echo "<pre>";
54  print_r($this);
55  echo "</pre>";
56  }
57 
58  /**
59  * @brief Initialize: prepare proerties and load javascript
60  * @brief use this method to run the clock
61  */
62  public function init()
63  {
64  // check if class is empty
65  if (!isset($this->contentAnimatorClass) || (empty($this->contentAnimatorClass)))
66  { // default behavior:
67  $this->contentAnimatorClass = "fadeIn";
68  }
69  // check if scroll value is empty
70  if (!isset($this->contentAnimatorScrollValue) || (empty($this->contentAnimatorScrollValue)))
71  { // default value
72  $this->contentAnimatorScrollValue = 600;
73  }
74  // check if infinite is set
75  if (!isset($this->contentAnimatorInfinite) || (empty($this->contentAnimatorInfinite)))
76  { // default css value
77  $this->contentAnimatorInfinite = "";
78  }
79  else
80  { // infinite is set to true
81  if ($this->contentAnimatorInfinite === "true")
82  { // set the correct value
83  $this->contentAnimatorInfinite = "infinite";
84  }
85  else
86  { // don't loop animation: leave infinite empty
87  $this->contentAnimatorInfinite = "";
88  }
89  }
90  // load velocity.js
91  // echo "<script src=\"system/engines/velocityJS/velocity.min.js\"></script>";
92  // echo "<script src=\"system/engines/velocityJS/velocity-ui.min.js\"></script>";
93 
94  // load css with animation definitions
95  echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"system/widgets/contentAnimator/animate.css\">";
96  // echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"system/engines/animateCSS/animate.min.css\">";
97  // echo "<style type=\"text/css\">.animate {visibility:hidden;}</style>";
98 
99  // output JS
100  echo"<script>
101  $(document).ready(function(){
102  // Slide in elements on scroll
103  $(window).scroll(function() {
104  // on each element that go animate class
105  $('.animate').each(function()
106  {
107  // get position
108  var pos = $(this).offset().top;
109  // get window top position
110  var winTop = $(window).scrollTop();
111 
112  // user-defined params for every element
113  // if they are not filled, default widget settings will be used
114  var fx = $(this).attr(\"data-fx\"); // animation fx for this element
115  var px = $(this).attr(\"data-px\"); // px value from top for this element
116 
117  // check if custom px value is defined
118  if (px !== undefined) {
119  // set custom px value
120  contentAnimatorScrollValue = px;
121  }
122  else {
123  // set default px value from widget settings
124  contentAnimatorScrollValue = $this->contentAnimatorScrollValue;
125  }
126 
127  // animate when position is in visible area
128  if (pos < winTop + contentAnimatorScrollValue) {
129  // $(this).velocity(\"transition.fadeIn\", {duration:1000, loop:false});
130 
131  // element got custom FX values
132  if (fx !== undefined) {
133  // set animated custom fx
134  $(this).addClass('animated '+fx);
135  // remove animate class to avoid hide after animation
136  $(this).removeClass('animate');
137  }
138  else
139  { // add default fx from widget settings
140  $(this).addClass(\"$this->contentAnimatorClass\");
141  }
142  }
143  });
144  });
145  });
146 </script>";
147  }
148  }
149 }
YAWK\WIDGETS\CONTENTANIMATOR\ANIMATE\contentAnimator
Add a pre-defined effect to any of your content elements.
Definition: contentAnimator.php:19
YAWK\WIDGETS\CONTENTANIMATOR\ANIMATE\contentAnimator\__construct
__construct($db)
Load all widget settings from database and fill object.
Definition: contentAnimator.php:36
YAWK\WIDGETS\CONTENTANIMATOR\ANIMATE\contentAnimator\init
init()
Initialize: prepare proerties and load javascript.
Definition: contentAnimator.php:61
YAWK\widget
Widgets are small, useful tools that you can include everywhere in your website.
Definition: widget.php:22
YAWK\widget\getWidgetSettingsArray
getWidgetSettingsArray($db)
Get widget settings and return it as array.
Definition: widget.php:69
$settings
if(isset($_POST['save'])) $settings
Definition: settings-backend.php:46
$value
$value
Definition: widget-edit.php:244