Namespaces

Classes

Exceptions

Functions

1: <?php
2: /**
3: * For use in .front file of SartajPhp.
4: * Example:
5: * <header id="slider1" runat="server"
6: * path="mypath/comp/heroslider/HeroSlider.php"
7: * funsetStyler="1"
8: * funsetImages='{"masters/images/pic1.jpg":"First caption","masters/images/pic2.jpg":"Second caption"}'
9: * funsetInterval="5000"
10: * funsetTitle="Canada Agency"></header>
11: */
12: class HeroSlider extends Sphp\tools\Component {
13: private $images = array();
14: private $interval = 3000;
15: private $title = "Default Title";
16:
17: // Style variables
18: private $overlayClass = "overlay-dark";
19: private $captionClass = "text-white text-center animate__animated";
20: private $textClass = "animate__animated animate__fadeInUp";
21: private $btnClass = "btn btn-light btn-lg mt-3";
22:
23: public function fu_setTitle($title){
24: $this->title = $title;
25: }
26:
27: public function fu_setImages($images){
28: $this->images = json_decode($images,true);
29: }
30:
31: public function fu_setInterval($interval){
32: $this->interval = $interval;
33: }
34:
35:
36: public function setupjs() {
37: // CSS dependencies
38: addFileLink($this->myrespath."/heroslider.css",true);
39: addFileLink($this->myrespath."/animate.min.css",true);
40:
41: // JS hook: bounce effect on slide change
42: addHeaderJSFunctionCode("ready", $this->name.'jsready', '
43: var effects = ["animate__slideInLeft", "animate__slideInRight", "animate__slideInUp", "animate__slideInDown","animate__bounce","animate__shakeX","animate__shakeY","animate__fadeInUp","animate__fadeInDown","animate_zoomIn","animate__zoomOut"];
44: $("#'.$this->name.'").on("slid.bs.carousel", function () {
45: var caption = $(this).find(".carousel-item.active .carousel-caption h1, .carousel-item.active .carousel-caption p");
46: var effect = effects[Math.floor(Math.random() * effects.length)];
47: caption.each(function(){
48: var $el = $(this);
49: $.each(effects, function(i, effect2){
50: $el.removeClass(effect2);
51: });
52: void this.offsetWidth; // force reflow
53: $el.addClass(effect);
54: });
55: });
56: ', true);
57: }
58:
59: private function applyStyler(){
60: switch($this->styler){
61: case 2: // Gradient overlay + zoom
62: $this->overlayClass = "overlay-gradient";
63: $this->captionClass = "text-start";
64: $this->textClass = "";
65: $this->btnClass = "btn btn-outline-light btn-lg mt-3 rounded-pill";
66: break;
67:
68: case 3: // Blur overlay + slide
69: $this->overlayClass = "overlay-blur";
70: $this->captionClass = "text-end";
71: $this->textClass = "";
72: $this->btnClass = "btn btn-success btn-lg mt-3";
73: break;
74:
75: default: // Styler 1: dark overlay + fade
76: $this->overlayClass = "overlay-dark";
77: $this->captionClass = "text-white text-center";
78: $this->textClass = "";
79: $this->btnClass = "btn btn-light btn-lg mt-3";
80: }
81: }
82:
83: protected function onrender(){
84: if(SphpBase::sphp_router()->getCurrentRequest() != 'index'){
85: $key1 = array_key_first($this->images);
86: $this->element->setAttribute('class','hero d-flex align-items-center text-center text-white');
87: $this->style = "background: linear-gradient(rgba(0, 100, 0, 0.6), rgba(0, 100, 0, 0.6)),url('". $key1 ."') no-repeat center center/cover;height: 30vh;";
88: $this->setInnerHTML('<div class="container">
89: <h1 class="display-4 fw-bold animate__animated animate__fadeInDown">'. $this->title .'</h1>
90: <p class="lead animate__animated animate__fadeInUp">'. $this->images[$key1] .'</p>
91: <a href="#apply" class="btn btn-light btn-lg mt-3"><i class="fas fa-child"></i> Learn More</a>
92: </div>
93: ');
94: }else{
95: $this->normalRender();
96: }
97:
98: }
99: private function normalRender(){
100: $this->setupjs();
101: $this->element->hasAttribute('class')
102: ? $this->element->appendAttribute('class',' heroCarousel carousel slide')
103: : $this->element->setAttribute('class','heroCarousel carousel slide');
104:
105: $this->element->setAttribute('data-bs-ride','carousel');
106: $this->element->setAttribute('data-bs-interval',$this->interval);
107:
108: $this->applyStyler();
109:
110: // Build indicators
111: $indicators = '<div class="carousel-indicators">';
112: $i = 0;
113: foreach($this->images as $image=>$text){
114: $activeClass = ($i === 0) ? ' class="active"' : '';
115: $indicators .= '<button type="button" data-bs-target="#'.$this->name.'" data-bs-slide-to="'.$i.'"'.$activeClass.' aria-current="true" aria-label="Slide '.($i+1).'"></button>';
116: $i++;
117: }
118: $indicators .= '</div>';
119:
120: // Build slides
121: $imageshtml = "";
122: $i = 0;
123: foreach($this->images as $image=>$text){
124: $activeClass = ($i === 0) ? " active" : "";
125: $i++;
126: $imageshtml .= '
127: <div class="carousel-item'.$activeClass.'" style="background-image:url(\''.$image.'\');">
128: <div class="'.$this->overlayClass.'"></div>
129: <div class="carousel-caption '.$this->captionClass.'">
130: <h1 class="display-4 fw-bold">'.$this->title.'</h1>
131: <p class=" '.$this->textClass.'">'.$text.'</p>
132: <a href="#apply" class="'.$this->btnClass.'"><i class="fas fa-child"></i> Learn More</a>
133: </div>
134: </div>';
135: }
136:
137: $this->setInnerHTML('
138: '.$indicators.'
139: <div class="carousel-inner">'.$imageshtml.'</div>
140: <button class="carousel-control-prev" type="button" data-bs-target="#'.$this->name.'" data-bs-slide="prev">
141: <span class="carousel-control-prev-icon"></span>
142: </button>
143: <button class="carousel-control-next" type="button" data-bs-target="#'.$this->name.'" data-bs-slide="next">
144: <span class="carousel-control-next-icon"></span>
145: </button>
146: ');
147: }
148: }
149:
SartajPHP 5 API