https://www.lsrhs.net/js/pause_carousels.js

1/**
2 * @author Glenn Powell
3
4 * @desc - Creates a Pause/Play Button for Bootstrap 3 Carousels and adaptable to 3rd party carousels.
5
6           !!!
7 *         Be sure to add data-itemid="YOUR STACK ID" to your Slideshow or a unique ID if not a stack
8           !!!
9
10 * @param JSON Object
11     * @json  string (carousel) ID of the Carousel
12     * @json  string (type) declare type (can be used for additional styling or alternate plugin methods)
13     * @json  string (category) needs to only be set if it is not a stack or design stack element
14     * @json  string (random) needs to only be set if not a stack or design stack element
15     * @json  string (placement) needs to only be set if you wish to adjust the left margin of the buttons over carousel
16
17 * @return string = html to create working pause/play buttons displayed over the slideshow you call it on.
18
19===============================
20STACK OR DESIGN STACK EXAMPLE:
21===============================
22
23pauseCarousels(JSON.stringify({
24    carousel_id_to_pause: "#full_width_carousel_<random-id>",
25    type: "slideshow"
26}));
27
28===============================
29NON STACK EXAMPLE:
30===============================
31
32pauseCarousels(JSON.stringify({
33    carousel_id_to_pause: "#headerCarousel",
34    type: "slideshow",
35    category: "nonstack",
36    random: "<random-id>",
37    placement: "0px"
38}));
39
40
41*/
42
43function pauseCarousels(json) {
44    const obj = JSON.parse(json);
45
46    let type = '';
47    let category = '';
48    let random = '';
49    let placement = '';
50    let carousel_id_to_pause = '';
51    let loadID = '';
52
53
54    if ("carousel_id_to_pause" in obj) {
55
56        carousel_id_to_pause = obj.carousel_id_to_pause;
57        //set orginal html ID value passed
58        loadID = carousel_id_to_pause;
59        //pass html ID into object HTML node
60        carousel_id_to_pause = $(carousel_id_to_pause);
61    }
62    if ("type" in obj) {
63        type = obj.type;
64    }
65    if ("category" in obj) {
66        category = obj.category;
67    }
68    if ("random" in obj) {
69        random = obj.random;
70    }
71    if ("placement" in obj) {
72        placement = obj.placement;
73    }
74    if (placement == '') {
75        placement = "100px";
76    }
77    //get the stackID of the current carousel, if its not a stack, a random unique ID should be passed as a parem
78    var stackID = carousel_id_to_pause.data("itemid") != undefined ? carousel_id_to_pause.data("itemid"): carousel_id_to_pause.data("itemid");
79
80    let stack_visibility = ''
81    let pausePlay = '';
82    let api = '';
83    let controlsID = '';
84    let useCase = '';
85    let buttonID = '';
86
87    //account for toggling visibility on the front end (don't show if slideshow is turned off)
88    if (("#stack_content_"+stackID)) {
89        stack_visibility = $("#stack_content_"+stackID).attr("class");
90    }
91    //can be used to account for widgets that are not part of a stack element, or any non stack Carousel
92    if (category != '' && category == 'nonstack')  {
93        var stackID = random;
94    }
95
96    //make sure the stack visibility is not on if we plan to add a play/pause button
97    if (stackID != '' && stackID !== undefined && stack_visibility != 'stack_off') {
98        //we can pass types to clarify if we need to use a plugin other than bootstrap carousel to activate pause/play
99        switch(type) {
100            case "stack_announcement":
101                controlsID = 'carouselButtonsAnnouncements';
102                useCase = 'stack_announcement'
103            break;
104            case "slideshow":
105                controlsID = 'carouselButtons';
106                useCase = 'slideshow';
107            break;
108            case "article_slideshow":
109                controlsID = 'carouselButtons';
110                useCase = 'slideshow';
111            break;
112            case "widget":
113                controlsID = 'carouselButtons';
114                useCase = 'slideshow';
115            break;
116            case "slider":
117                controlsID = 'carouselButtons';
118                useCase = 'slider';
119            break;
120            default:
121                controlsID = '';
122                useCase = '';
123        }

124        if (controlsID != '') {
125
126            if (type == "widget") {
127                buttonID = loadID.substring(1);
128            } else {
129                buttonID = stackID;
130            }
131            //Create the layout of the buttons that will overlay your Carousel
132            if (type == 'slider') {
133                pausePlay = `
134                <div class="${controlsID}">
135                    <button data-toggle="tooltip" title="Press Enter To Play. Use the arrow keys to change slides." id="playButton_${buttonID}" type="button" class="btn pause_play ss_control_${buttonID} btn-default btn-xs" aria-label="Play Slideshow button. Press Enter To Play. Use the arrow keys to change slides." data-carouselType="${useCase}" data-ssID="${loadID}" style="display: none;">
136                        <span class="glyphicon glyphicon-play"></span>
137                     </button>
138                    <button data-toggle="tooltip" title="Press Enter To Pause. Use the arrow keys to change slides." id="pauseButton_${buttonID}" type="button" class="btn pause_play ss_control_${buttonID} btn-default btn-xs" aria-label="Pause Slideshow button. Press Enter To Pause. Use the arrow keys to change slides." data-carouselType="${useCase}" data-ssID="${loadID}" style="display: inline-block;">
139                        <span class="glyphicon glyphicon-pause"></span>
140                    </button>
141                </div>
142                `;
143            } else {
144                pausePlay = `
145                <div class="${controlsID}">
146                    <button data-toggle="tooltip" title="Press Enter To Play" id="playButton_${buttonID}" type="button" class="btn play_anchor pause_play ss_control_${buttonID} btn-default btn-xs" aria-label="Play Slideshow" data-carouselType="${useCase}" data-ssID="${loadID}" style="display: none;">
147                        <span class="glyphicon glyphicon-play"></span>
148                     </button>
149                    <button data-toggle="tooltip" title="Press Enter To Pause" id="pauseButton_${buttonID}" type="button" class="btn pause_anchor pause_play ss_control_${buttonID} btn-default btn-xs" aria-label="Pause Slideshow" data-carouselType="${useCase}" data-ssID="${loadID}" style="display: inline-block;">
150                        <span class="glyphicon glyphicon-pause"></span>
151                    </button>
152                </div>
153                `;
154            }
155
156            //style our buttons, we can base on type
157            if (type == "stack_announcement") {
158                pausePlay += `
159                <style>
160                .carouselButtonsAnnouncements {
161                    width:100%;
162                    margin-left: 0px;
163                    position: relative;
164                    bottom: 0px;
165                    z-index:90;
166                    padding: 0px 0px 10px 10px;
167                    background-color:transparent !important;
168                    top:0;
169                    right:40px;
170                }
171                .carouselButtonsAnnouncements .btn {
172
173                    padding-left:10px !important;
174                    padding-right:10px !important;
175                    padding-top:5px !important;
176                    padding-bottom: 7px !important;
177
178
179                }
180                #playButton_${stackID} {
181
182                    float:right;
183                }
184                #pauseButton_${stackID} {
185                    float:right;
186                }
187                </style>
188                `;
189            } else if (type == 'slider') {
190                pausePlay += `
191                <style>
192                .carouselButtons {
193                    left: 15;
194                    position: absolute;
195                    bottom: 0px;
196                    z-index:999;
197                    padding:10px;
198                }`;
199                /*This is used if extra parms are passed to override the above default margin-left position*/
200                if (loadID != "" && placement != '') {
201                    pausePlay += `
202                    ${loadID} .carouselButtons {
203                        margin-left: ${placement};
204                        position: absolute;
205                        bottom: 0px;
206                        z-index:999;
207                        padding:10px;
208                    }`;
209                }
210                pausePlay += `
211                .carouselButtons .btn {
212                    padding-left:10px !important;
213                    padding-right:10px !important;
214                    padding-top:5px !important;
215                    padding-bottom: 7px !important;
216
217                }
218                </style>
219                `;
220            } else {
221                pausePlay += `
222                <style>
223                .carouselButtons {
224                    margin-left: 100px;
225                    position: absolute;
226                    bottom: 0px;
227                    z-index:90;
228                    padding:10px;
229                }`;
230                /*This is used if extra parms are passed to override the above default margin-left position*/
231                if (loadID != "" && placement != '') {
232                    pausePlay += `
233                    ${loadID} .carouselButtons {
234                        margin-left: ${placement};
235                        position: absolute;
236                        bottom: 0px;
237                        z-index:90;
238                        padding:10px;
239                    }`;
240                }
241                pausePlay += `
242                .carouselButtons .btn {
243                    padding-left:10px !important;
244                    padding-right:10px !important;
245                    padding-top:5px !important;
246                    padding-bottom: 7px !important;
247
248                }
249                </style>
250                `;
251            }
252        }
253        //Append buttons to your Carousel

254        carousel_id_to_pause.prepend(pausePlay);
255
256        //Hide Play Button on load so Pause/Play icons can be toggled
257        $("#playButton_"+buttonID).hide();
258
259        if (type == 'slider') {
260            if ($(carousel_id_to_pause).slick('slickGetOption','autoplay') == false) {
261                $("#pauseButton_"+buttonID).hide();
262                $("#playButton_"+buttonID).show();
263            }
264        }
265
266        //On click of the pause or play button, check the ID and peform pause or play action
267        $(document).on("click", '.btn.ss_control_'+buttonID, function(e) {
268            let carousel_type = $(this).attr("data-carouselType");
269            let element = $(this).attr("data-ssID");
270            let api = '';
271            //show tooltip instructions on button focus
272            $(this).tooltip({
273                 placement: "top",
274                 trigger: "focus"
275            });
276
277            //can use type param to activate other plugin methods for Pause/Play
278            if (carousel_type == "stack_announcement") {
279                api = $.data( $('#main-slider_'+stackID)[0], 'liquidSlider');
280            }
281            //PLAY:
282            //If playing, delay before moving to next slide instead of full interval for more natural effect
283            if ($(this).attr("id") == "playButton_"+buttonID) {
284                setTimeout( function(){
285                    if (carousel_type == "stack_announcement") {
286                        $("#main-slider_"+stackID).carousel('cycle');
287                        api.startAutoSlide();
288                    }
289                    if (carousel_type == "slideshow") {
290                        $(element).carousel('cycle');
291                        $(element).carousel('next');
292                    }
293                    if (carousel_type == "slider") {
294                        $(element).slick('slickPlay');
295                    }
296                }  , 1000 );
297
298                $("#playButton_"+buttonID).hide();
299                $("#pauseButton_"+buttonID).show();
300                setTimeout(function () {
301                    $("#pauseButton_"+buttonID).focus();
302                }, 100);
303            }
304            //PAUSE
305            if ($(this).attr("id") == "pauseButton_"+buttonID) {
306                if (carousel_type == "stack_announcement") {
307                    api.stopAutoSlide();
308                }
309                if (carousel_type == "slideshow") {
310                    $(element).carousel('pause');
311                }
312                if (carousel_type == "slider") {
313                    $(element).slick('slickPause');
314                }
315
316                $("#playButton_"+buttonID).show();
317                $("#pauseButton_"+buttonID).hide();
318                //set timer as IE don't like to respond quickly and need small delay
319                setTimeout(function () {
320                    $("#playButton_"+buttonID).focus();
321                }, 100);
322            }
323        });
324        //allow a simple tooltip on hover of pause/play buttons on mouseover
325        $('[data-toggle="tooltip"]').tooltip();
326    }
327}