1 2if(typeof g_ugFunctions != "undefined") 3 g_ugFunctions.registerTheme("video"); 4else 5 jQuery(document).ready(function(){g_ugFunctions.registerTheme("video")}); 6 7 8/** 9 * Video gallery theme 10 * themes: right-thumb | right-title-only | right-no-thumb | bottom-text | bottom | top 11 */ 12function UGTheme_video(){ 13 14 var t = this; 15 var g_gallery = new UniteGalleryMain(), g_objGallery, g_objects, g_objWrapper, g_objPanelButton; 16 var g_objPlayer = new UGVideoPlayer(), g_objButtonsPanel, g_buttonPrev, g_buttonNext, g_videoThumb; 17 var g_functions = new UGFunctions(); 18 var g_objPanel = new UGStripPanel(); 19 20 21 //theme options 22 var g_options = { 23 theme_skin: "right-thumb", //right-thumb | right-title-only | right-no-thumb | top | bottom 24 theme_autoplay: false, //autoplay videos at start. true / false. Don't working on mobiles. 25 theme_next_video_onend:false, //go to next video automatically when the video ends 26 theme_disable_panel_timeout: 2500, //How much time the right panel will be disabled. in ms 27 strippanel_start_closed_on_mobile: true //on mobile devices close strip panel after load 28 }; 29 30 //global defaults 31 var g_defaults = { 32 gallery_width:1100, 33 slider_controls_always_on:true, 34 strippanel_enable_handle:true,
35 strippanel_enable_buttons: false, 36 strip_space_between_thumbs: 0, 37 strippanel_padding_top: 0, 38 strippanel_padding_bottom: 0, 39 strippanel_padding_left: 0, 40 strippanel_padding_right: 0, 41 strippanel_vertical_type:true 42 }; 43 44 45 //temp variables 46 var g_temp = { 47 panel_position:"right", 48 isVertical: true, 49 putButtonsPanel: false, 50 isFirstChange: true, 51 playerRatio:null, 52 }; 53 54 55 /** 56 * Init the theme 57 */ 58 function initTheme(gallery, customOptions){ 59 60 g_gallery = gallery; 61 62 g_options = jQuery.extend(g_options, g_defaults); 63 64 g_options = jQuery.extend(g_options, customOptions); 65 g_options.strippanel_vertical_type = true; 66 67 modifyOptions(); 68 69 //set gallery options 70 g_gallery.setOptions(g_options); 71 if(g_temp.isVertical == false) 72 g_gallery.setFuncCustomHeight(getHeightByWidthOnResize); 73 74 //set panel options 75 g_objPanel.init(gallery, g_options); 76 g_objPanel.setOrientation(g_temp.panel_position); 77 78 g_objPanel.setCustomThumbs(setHtmlThumb); 79 80 g_objPanel.setDisabledAtStart(g_options.theme_disable_panel_timeout); 81 82 var galleryID = g_gallery.getGalleryID(); 83 84 //set player options 85 g_objPlayer.init(g_options, true, galleryID); 86 87 g_objects = gallery.getObjects(); 88 g_objGallery = jQuery(gallery); 89 g_objWrapper = g_objects.g_objWrapper; 90 91 if(g_options.theme_skin == 'top' || g_options.theme_skin == 'bottom') 92 setTimeout(setInnerStripToCenter, 200); 93 94 } 95 96 97 /** 98 * modify options 99 */ 100 function modifyOptions(){ 101 102 switch(g_options.theme_skin){ 103 case "right-no-thumb": 104 case "right-title-only": 105 g_temp.putButtonsPanel = true; 106 break; 107 case "bottom-text": 108 g_temp.panel_position = "bottom"; 109 break; 110 case "top": 111 g_temp.isVertical = false;
112 g_options.strippanel_vertical_type = false; 113 g_temp.panel_position = "top"; 114 break; 115 case "bottom": 116 g_temp.isVertical = false; 117 g_options.strippanel_vertical_type = false; 118 g_temp.panel_position = "bottom"; 119 break; 120 121 } 122 123 //set isVertical 124 switch(g_temp.panel_position){ 125 case "top": 126 case "bottom": 127 g_temp.isVertical = false; 128 g_options.strippanel_vertical_type = false; 129 break; 130 } 131 132 } 133 134 /** 135 * set stip panel to center in case inner strip is less then its wrapper 136 */ 137 function setInnerStripToCenter(){ 138 139 //only if inner strip is less then its wrapper 140 var objStripInner = g_objWrapper.find('.ug-thumbs-strip-inner'); 141 var objStripOuter = g_objWrapper.find('.ug-thumbs-strip'); 142 143 var innerWidth = objStripInner.width(); 144 var outerWidth = objStripOuter.width(); 145 146 if(innerWidth > outerWidth){ 147 148 objStripInner.css({ 149 'left': '', 150 'transform': '' 151 }); 152 153 return(false); 154 155 } 156 157 objStripInner.css({ 158 'left': '50%', 159 'transform': 'translate(-50%, 0)' 160 }); 161 162 } 163 164 /** 165 * add button on mobile devices that opens / hides vidio list 166 */ 167 function setCssForVideoWrapper(objPanelButton){ 168 169 var objVideoPlayer = g_objWrapper.find('.ug-videoplayer'); 170 var objPlayerDisactivePanelCss = { 171 'min-width': '100%', 172 'min-height': '100%' 173 }; 174 175 var closedButtonClass = 'ug-button-closed'; 176 var isPanelClosed = objPanelButton.hasClass(closedButtonClass); 177 178 if(isPanelClosed == true) 179 objVideoPlayer.css(objPlayerDisactivePanelCss); 180 181 var objPlayeActivePanelCss = { 182 'min-width': '', 183 'min-height': '' 184 }; 185 186 if(isPanelClosed == false)
187 objVideoPlayer.css(objPlayeActivePanelCss); 188 189 setTimeout(placePlayer,300) 190 191 } 192 193 /** 194 * on panel button click 195 */ 196 function onPanelButtonClick(){ 197 198 var objPanelButton = jQuery(this); 199 200 setCssForVideoWrapper(objPanelButton); 201 202 } 203 204 /** 205 * init all the theme's elements and set them to their places 206 * according gallery's dimentions. 207 * this function should work on resize too. 208 */ 209 function initAndPlaceElements(){ 210 211 //place objects: 212 initThumbsPanel(); 213 placeThumbsPanel(); 214 placePlayer(); 215 216 if(g_objButtonsPanel) 217 resizeAndPlaceButtonsPanel(); 218 219 if(g_options.theme_skin == 'top' || g_options.theme_skin == 'bottom') 220 setTimeout(setInnerStripToCenter, 200); 221 222 } 223 224 /** 225 * close strip om mobile viewport 226 */ 227 function closeStripOnMobile(){ 228 //check if viewport is mobile 229 var isMobileViewport = g_objWrapper.hasClass('ug-under-780') || g_objWrapper.hasClass('ug-under-480'); 230 231 if(isMobileViewport == false) 232 return(false); 233 234 //enable handle tip if needed 235 g_objPanelButton = g_objWrapper.find('.ug-panel-handle-tip'); 236 237 //close strip panel after load 238 if(g_objPanelButton.length) 239 g_objPanelButton.trigger('click'); 240 241 242 243 } 244 245 /** 246 * closse strip on mobile if needed 247 */ 248 function closeStripOnMobileOnLoad(){ 249 250 if(g_options.strippanel_start_closed_on_mobile == false) 251 return(false); 252 253 closeStripOnMobile(); 254 255 } 256 257 /** 258 * run the theme 259 */ 260 function runTheme(){ 261 262 setHtml(); 263 264 initAndPlaceElements(); 265 266 initEvents(); 267 268 g_objPlayer.show(); 269 270 closeStripOnMobileOnLoad(); 271 272 } 273 274 275 276 277 /** 278 * set gallery html elements 279 */ 280 function setHtml(){ 281 282 //add html elements 283 g_objWrapper.addClass("ug-theme-video ug-videoskin-"+g_options.theme_skin); 284 285 286 g_objPanel.setHtml(); 287 g_objPlayer.setHtml(g_objWrapper); 288 289 //add buttons panel 290 if(g_temp.putButtonsPanel == true){ 291 292 var html = "<div class='ug-video-buttons-panel'>"; 293 html += "<div href='javascript:void(0)' class='ug-button-prev-video'></div>" 294 html += "<div href='javascript:void(0)' class='ug-button-next-video'></div>" 295 html += "</div>" 296 297 g_objWrapper.append(html); 298 299 g_objButtonsPanel = g_objWrapper.children(".ug-video-buttons-panel"); 300 g_buttonPrev = g_objButtonsPanel.children(".ug-button-prev-video"); 301 g_buttonNext = g_objButtonsPanel.children(".ug-button-next-video"); 302 303 } 304 305 } 306 307 308 309 310 311 /** 312 * custom function fo drawing thumb 313 */ 314 function setHtmlThumb(objThumbWrapper, objItem){ 315 316 var showDesc = true; 317 var showIcon = false; 318 319 switch(g_options.theme_skin){ 320 case "right-title-only": 321 showDesc = false; 322 break; 323 case "right-thumb": 324 case "bottom": 325 case "top": 326 showIcon = true; 327 break; 328 } 329 330 var html = "<div class='ug-thumb-inner'>"; 331 332 if(showIcon == true){ 333 html += "<div class='ug-thumb-icon' style='background-image:url(\""+objItem.urlThumb+"\")'></div>"; 334 html += "<div class='ug-thumb-content'>"; 335 } 336 337 html += "<div class='ug-thumb-title'>" + objItem.title + "</div>"; 338 339 if(showDesc == true) 340 html += "<div class='ug-thumb-desc'>" + objItem.description + "</div>"; 341 342 if(showIcon == true) 343 html += "</div>"; //thumb content end 344 345 var playButtonSvg = '<div class="ug-thumb-play-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><circle cx="24" cy="24" r="24" fill="#000" opacity=".6"></circle><path fill="#FFF" d="M19.8 32c-.124 0-.247-.028-.36-.08-.264-.116-.436-.375-.44-.664V16.744c.005-.29.176-.55.44-.666.273-.126.592-.1.84.07l10.4 7.257c.2.132.32.355.32.595s-.12.463-.32.595l-10.4 7.256c-.14.1-.31.15-.48.15z"></path></svg></div>'; 346 347 html += playButtonSvg; 348 349 html += "</div>"; 350 351 objThumbWrapper.html(html); 352 353 } 354 355 356 /** 357 * init size of the thumbs panel 358 */ 359 function initThumbsPanel(){ 360 361 //set size: 362 var objGallerySize = g_gallery.getSize(); 363 364 if(g_temp.isVertical == false) 365 g_objPanel.setWidth(objGallerySize.width); 366 else 367 g_objPanel.setHeight(objGallerySize.height); 368 369 g_objPanel.run(); 370 371 } 372 373 374 /** 375 * place thumbs panel according the settings 376 */ 377 function placeThumbsPanel(){ 378 379 var objPanelElement = g_objPanel.getElement(); 380 381 switch(g_temp.panel_position){ 382 default: 383 case "right": 384 g_functions.placeElement(objPanelElement, "right", 0); 385 break; 386 case "bottom": 387 g_functions.placeElement(objPanelElement, 0, "bottom"); 388 break; 389 } 390 391 } 392 393 394 395 /** 396 * place the player according the thumbs panel size and position 397 */ 398 function placePlayer(){ 399 400 var gallerySize = g_functions.getElementSize(g_objWrapper); 401 var panelSize = g_objPanel.getSize(); 402 var playerWidth = gallerySize.width;
403 var playerHeight = gallerySize.height; 404 var playerTop = 0; 405 var playerLeft = 0; 406 407 if(g_objPanel){ 408 409 var panelSize = g_objPanel.getSize(); 410 411 switch(g_temp.panel_position){ 412 case "left": 413 playerLeft = panelSize.right; 414 playerWidth = gallerySize.width - panelSize.right; 415 break; 416 case "right": 417 playerWidth = panelSize.left; 418 break; 419 case "top": 420 playerHeight = gallerySize.height - panelSize.bottom; 421 playerTop = panelSize.bottom; 422 break; 423 case "bottom": 424 playerHeight = panelSize.top; 425 break; 426 } 427 428 } 429 430 431 if(g_objButtonsPanel && g_objButtonsPanel.is(":visible")){ 432 var buttonsPanelSize = g_functions.getElementSize(g_objButtonsPanel); 433 var buttonsHeight = buttonsPanelSize.height; 434 playerHeight -= buttonsHeight; 435 } 436 437 //set size 438 g_objPlayer.setSize(playerWidth, playerHeight); 439 440 //place 441 var objPlayer = g_objPlayer.getObject(); 442 g_functions.placeElement(objPlayer, playerLeft, playerTop); 443 444 //remember player ratio 445 if(g_temp.playerRatio == null) 446 g_temp.playerRatio = playerHeight / playerWidth; 447 448 } 449 450 451 /** 452 * resize and place buttons panel 453 */ 454 function resizeAndPlaceButtonsPanel(){ 455 456 if(!g_objButtonsPanel) 457 return(false); 458 459 if(g_objButtonsPanel.is(":visible") == false) 460 return(false); 461 462 var playerObj = g_objPlayer.getObject(); 463 var playerSize = g_functions.getElementSize(playerObj); 464 465 g_objButtonsPanel.width(playerSize.width); 466 467 //position to the bottom of the gallery 468 g_functions.placeElement(g_objButtonsPanel, 0, "bottom"); 469 } 470 471 472 /** 473 * get height by width and raetio on resize 474 */ 475 function getHeightByWidthOnResize(objSize){ 476 477 initThumbsPanel(); 478 var objPanelSize = g_objPanel.getSize(); 479 var thumbsHeight = objPanelSize.height; 480 var newWidth = objSize.width; 481 482 var playerHeight = g_temp.playerRatio * newWidth;
483 var newHeight = playerHeight + thumbsHeight; 484 485 return(newHeight); 486 } 487 488 489 /** 490 * on gallery size change - resize the theme. 491 */ 492 function onSizeChange(){ 493 494 initAndPlaceElements(); 495 } 496 497 498 /** 499 * on item change function 500 */ 501 function onItemChange(){ 502 503 var isAutoplay = g_options.theme_autoplay; 504 505 var selectedItem = g_gallery.getSelectedItem(); 506 507 switch(selectedItem.type){ 508 case "youtube": 509 g_objPlayer.playYoutube(selectedItem.videoid, isAutoplay); 510 break; 511 case "vimeo": 512 g_objPlayer.playVimeo(selectedItem.videoid, isAutoplay); 513 break; 514 case "html5video": 515 g_objPlayer.playHtml5Video(selectedItem.videoogv, selectedItem.videowebm, selectedItem.videomp4, selectedItem.urlImage, isAutoplay); 516 break; 517 case "wistia": 518 g_objPlayer.playWistia(selectedItem.videoid, isAutoplay); 519 break; 520 case "soundcloud": 521 g_objPlayer.playSoundCloud(selectedItem.trackid, isAutoplay); 522 break; 523 } 524 525 //hide strip panel on mobile after item change 526 if(g_temp.isFirstChange == false) 527 closeStripOnMobile(); 528 529 g_temp.isFirstChange = false; 530 531 532 } 533 534 535 /** 536 * on video ended playing 537 */ 538 function onVideoEnded(){ 539 540 if(g_options.theme_next_video_onend == true) 541 g_gallery.nextItem(); 542 543 } 544 545 546 /** 547 * init buttons functionality and events 548 */ 549 function initEvents(){ 550 551 g_objGallery.on(g_gallery.events.SIZE_CHANGE, onSizeChange); 552 g_objGallery.on(g_gallery.events.ITEM_CHANGE, onItemChange); 553 554 g_objPlayer.initEvents(); 555 556 if(g_options.theme_next_video_onend == true) 557 jQuery(g_objPlayer).on(g_objPlayer.events.VIDEO_ENDED, onVideoEnded); 558 559 //init buttons panel events: 560 if(g_objButtonsPanel){ 561 562 g_functions.setButtonMobileReady(g_buttonPrev); 563 g_gallery.setPrevButton(g_buttonPrev); 564 565 g_functions.setButtonMobileReady(g_buttonNext); 566 g_gallery.setNextButton(g_buttonNext); 567 568 } 569 570 g_objPanelButton = g_objWrapper.find('.ug-panel-handle-tip'); 571 572 g_objPanelButton.on('handle_tip_clicked', onPanelButtonClick); 573 574 } 575 576 /** 577 * destroy the theme 578 */ 579 this.destroy = function(){ 580 581 g_objGallery.off(g_gallery.events.SIZE_CHANGE); 582 g_objGallery.off(g_gallery.events.ITEM_CHANGE); 583 g_objPlayer.destroy(); 584 if(g_objButtonsPanel){ 585 g_functions.destroyButton(g_buttonPrev); 586 g_functions.destroyButton(g_buttonNext); 587 } 588 589 if(g_options.theme_next_video_onend == true) 590 jQuery(g_objPlayer).off(g_objPlayer.events.VIDEO_ENDED); 591 592 if(g_objPanel) 593 g_objPanel.destroy(); 594 } 595 596 597 /** 598 * run the theme setting 599 */ 600 this.run = function(){ 601 602 runTheme(); 603 } 604 605 606 /** 607 * init 608 */ 609 this.init = function(gallery, customOptions){ 610 611 initTheme(gallery, customOptions); 612 } 613 614 615} 616
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.