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}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.