"vid"
Bootstrap 3.0.0 Snippet by irinashuvalova

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div>
<script id="video-template" type="text/x-handlebars-template"> <div class="videogallery-container clearfix"> {{#if this}} {{#each this}} {{#if Size}} <div class="item-wrapper"> <a href="{{PlayerUrl}}" class="item-video-wrapper fancyboxlink" style="background: url({{CoverUrl}}); background-size: cover;"> <img class="item-video-play-btn" src='/_layouts/15/WSSC.PRT.PNT6.Design/img/Galleries/play.png'> </a> {{#if Title}} <div class="item-header"> <a href="{{UrlToGallery}}">{{Title}}</a> </div> {{/if}} <div class="item-footer"> <% if (CanEdit) { %> <button type="button" class="edit-video-btn {{#if Folder}}js-edit-folder-video{{else}}js-edit-video{{/if}}" data-id="{{ID}}"></button> <% } %> <a href="{{UrlToGallery}}" class="item-comment-count-wrapper"> <div class="item-comment"> <span>{{CommentsCountStr}}</span> </div> </a> <div class="item-like-wrapper"> <div id='like_things_locator' class='LIKE_div_initial_locator' objtype='video' objid='{{ID}}'> </div> </div> </div> </div> {{else}} <div class="item-wrapper"> <div class="item-video-wrapper js-open-folder" data-id="{{ID}}" style="background: url({{CoverUrl}}); background-size: cover;"> </div> <div class="item-header"> <button type="button" class="js-open-folder" data-id="{{ID}}"> {{Title}}</button> </div> <% if (CanEdit) { %> <div class="item-footer folder-footer"> <button class="ico edit js-edit-folder" data-id="{{ID}}" title="Редактировать папку" type="button"> </button> <button class="ico remove js-remove-folder" data-id="{{ID}}" type="button" title="Удалить папку"> </button> </div> <% } %> </div> {{/if}} {{/each}} {{/if}} </div> </script> <div class='c-video-gallery js-video-gallery'> <h1 class="o-main-header">Видеогалерея</h1> <% if (CanEdit) { %> <button type="button" class="o-video-btn js-add-folder">Добавить папку</button> <button type="button" class="o-video-btn add-video-btn js-add-video">Загрузить видео</button> <% } %> <div id="content-video" class="content-video js-content-video"></div> <div class="c-folder-edit js-folder-edit" style="display: none;"> <div class="form-wrapper"> <div class="field-item"> <label>Название</label> <input type="text" placeholder="Введите название" class="js-folder-title" /> </div> <div class="field-item"> <label>Обложка</label> <div class="folder-cover js-folder-cover"> <div class="add-cover-btn" title="<%= Properties.Language.LoadCover %>"></div> <img src="" class="hidden" /> <input type="hidden" value='' name="new-video" id="new-video" /> <button class="remove-preview js-remove-preview hidden" type="button" title="<%= Properties.Language.Delete %>">X</button> </div> </div> </div> <button type="button" class="js-confirm-edit-folder">Применить</button> <button type="button" class="js-cancel-folder">Отмена</button> </div> <div class="js-folder-content hidden"> <button type="button" class="o-video-btn js-from-folder">Назад</button> <div class="js-folder-items"></div> </div> <div class="c-video-edit js-video-edit" style="display: none;"> <div class="form-wrapper"> <div class="field-item"> <label>Название:</label> <input type="text" class="js-video-title" placeholder="Введите название видео" value="" /> </div> <div class="field-item"> <label>Превью:</label> <div class="preview-cover js-video-preview-cover"> <div class="add-preview-btn" title="<%= Properties.Language.LoadCover %>"></div> <img src="" class="hidden" /> <input type="hidden" value='' name="new-preview" id="new-preview" /> <button class="remove-preview js-remove-preview hidden" type="button" title="<%= Properties.Language.Delete %>">X</button> </div> </div> <div class="field-item"> <label>Папка</label> <input type="hidden" id="video-folder" class="js-folders-list" value="" /> </div> </div> <button type="button" class="js-confirm-edit-video" data-id="0">Применить</button> <button type="button" class="js-cancel-edit-video">Отмена</button> </div> <input class="fileupload" id="fileupload" type="file" name="files[]" style="display: none;" multiple="multiple" accept="image/*"> </div> <input type="hidden" class="allGalleriesCount" value="<%=GetCountAllGalleries() %>" /> <script> var foldersList = <%= GetFoldersList() %>; </script>
var spin = (function () { var spinnerOpts = { lines: 17, length: 40, width: 10, radius: 30, corners: 1, rotate: 0, direction: 1, color: '#000', speed: 1, trail: 82, shadow: false, hwaccel: false, className: 'spinner', zIndex: 2e9, top: '50%', left: '50%' }; var spinner = new Spinner(spinnerOpts); var targetSpin = document.getElementsByClassName('js-video-gallery')[0]; function init() { spinner.spin(targetSpin); } return { start: init, stop: function () { spinner.stop(); } } })(); var folder = (function () { var ID = 0, cover, template = Handlebars.compile(document.getElementById('video-template').innerHTML); function renderVideogallery(data) { var renderHtml = template(data); $('.js-folder-items').html(renderHtml); FindLikeThingsAndDisplayStars(); } function getFolderItems(id) { $.ajax({ url: '/_layouts/15/WSSC.PRT.PNT6.Core/Handlers/Ajax.ashx', async: true, type: 'POST', data: { method: 'WSSC.PRT.PNT6.Galleries:VideoGallery:GetFolderItems', id: id, rand: Math.random() }, success: function (response) { if (response) { if (response == "[]") { $('.js-folder-items').empty(); $('.js-folder-items').append("<div class='folder-empty-msg'>В этой папке еще нет видео</div>"); } else { renderVideogallery(JSON.parse(response)); } } } }); } function initEditFolder(id) { $.ajax({ url: "/_layouts/15/WSSC.PRT.PNT6.Core/Handlers/ajax.ashx", data: { method: "WSSC.PRT.PNT6.Galleries:VideoGallery:AjaxGetFolder", id: id }, dataType: "json", async: true, type: "POST", success: function (data) { if (data.Error) { console.log(data.Error); } else { editViewToggle(); editViewSet(data); } } }); } function createOrEditFolder(id, title, cover) { $.ajax({ url: "/_layouts/15/WSSC.PRT.PNT6.Core/Handlers/ajax.ashx", data: { method: "WSSC.PRT.PNT6.Galleries:VideoGallery:AjaxEditFolder", id: id, title: title, cover: cover }, dataType: "json", async: true, type: "POST", success: function (data) { if (data.Error) { console.log(data.Error); spin.stop(); } else { window.location.reload(); } } }); } function removeFolder(id, el) { $.ajax({ url: "/_layouts/15/WSSC.PRT.PNT6.Core/Handlers/ajax.ashx", data: { method: "WSSC.PRT.PNT6.Galleries:VideoGallery:AjaxRemoveFolder", id: id }, dataType: "json", async: true, type: "POST", success: function (response) { if (response.Success) { window.location.reload(); } else { console.log(response); spin.stop(); } } }); } function makeUploader(callback) { try { uploader.fileupload('destroy'); } catch (e) { console.log(e); } uploader = $('#fileupload').fileupload({ autoUpload: true, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, url: '/_layouts/15/WSSC.PRT.PNT6.Core/Handlers/ajax.ashx', dataType: 'json', formData: { method: 'WSSC.PRT.PNT6.Galleries:PhotoGallery:AjaxUploadPhoto' }, done: function (e, data) { var response = data.result; if (response.Error) { alert('Не удалось загрузить изображение'); console.log(response); } else { callback(response); } } }); } function initCover() { var cover = $('.js-folder-cover'); cover.unbind() .click(function () { makeUploader(function (url) { setCover(url); }); uploader.trigger('click'); }); } function setCover(url) { var cover = $('.js-folder-cover'); cover.children().addClass('hidden'); cover = url; if (url != null) { $('.js-folder-cover').find('img') .prop('src', url) .removeClass('hidden'); $('.js-folder-cover').find('button') .removeClass('hidden') .unbind() .click(delCover); } else { initCover(); $('.add-cover-btn').removeClass('hidden'); } } function delCover(e) { if (e) { e.stopPropagation(); } var cover = $('.js-folder-cover'); cover.children().addClass('hidden'); cover = null; $('.js-folder-cover').find('img').attr('src', '/_layouts/15/WSSC.PRT.PNT6.Design/Img/Galleries/noVideoCover.png'); $('.js-folder-cover').find('div').removeClass('hidden'); initCover(); } function editViewSet(item) { ID = item.ID; $('.js-folder-title').val(item.Title); setCover(item.Cover); } function editViewToggle() { $('.js-content-video').toggle(); $('.js-folder-edit').toggle(); $('.js-add-folder').toggle(); $('.js-add-video').toggle(); } function folderViewToggle() { $('.js-content-video').toggle(); $('.js-folder-content').toggle(); $('.js-add-folder').toggle(); $('.js-add-video').toggle(); } function openFolder(id) { folderViewToggle(); getFolderItems(id); action = false; } function clearEditFolder() { $('.js-folder-title').val(''); delCover(); } function init() { $('.js-video-gallery') .on('click', '.js-add-folder', function () { editViewToggle(); initCover(); }) .on('click', '.js-confirm-edit-folder', function () { var title = $('.js-folder-title').val(); var cover = $('.js-folder-cover img').attr('src'); createOrEditFolder(ID, title, cover); spin.start(); }) .on('click', '.js-cancel-folder', function () { editViewToggle(); clearEditFolder(); }) .on('click', '.js-open-folder', function () { var id = $(this).data('id'); openFolder(id); }) .on('click', '.js-from-folder', function () { folderViewToggle(); action = true; }) .on('click', '.js-edit-folder', function () { var id = $(this).data('id'); initEditFolder(id); }) .on('click', '.js-remove-folder', function () { var id = $(this).data('id'); if (confirm("Вы действительно хотите удалить эту папку?")) { removeFolder(id, $(this)); spin.start(); } }) } return { init: init } })(); var video = (function () { var id = 0, isFolderView = false; function editViewToggle() { $('.js-content-video').toggle(); $('.js-video-edit').toggle(); $('.js-add-folder').toggle(); $('.js-add-video').toggle(); } function editFolderViewToggle() { $('.js-folder-content').toggle(); $('.js-video-edit').toggle(); } function createViewToggle() { $('.js-content-video').toggle(); $('.js-create-video').toggle(); $('.js-add-folder').toggle(); $('.js-add-video').toggle(); } function initNewFolderDropDown() { $('.js-new-folders-list').select2({ placeholder: 'Выберите папку', allowClear: true, width: '221px', data: foldersList }).select2('val', []); } function initFolderDropDown() { $('.js-folders-list').select2({ placeholder: 'Выберите папку', allowClear: true, width: '221px', data: foldersList }).select2('val', []); } function initFolderDropDownPreset(id, folderId) { $('.js-folders-list').select2({ placeholder: 'Выберите папку', allowClear: true, width: '221px', data: foldersList, initSelection: function (element, callback) { var data = foldersList.filter(function (obj) { if (obj.id == folderId) { return obj; } }); callback(data[0]); data[0] != undefined ? $('.js-folders-list').val(data[0].id) : ''; } }).select2('val', []); } function saveEdited(id) { var errors = []; var folder = $('#video-folder').val(); var cover = $('.js-video-preview-cover img').attr('src'); var title = $('.js-video-title').val(); if (isNaN(folder)) { errors.push("Неверное значение папки"); } if (errors.length != 0) { alert(errors.toString()); } else { $.ajax({ url: "/_layouts/15/WSSC.PRT.PNT6.Core/Handlers/ajax.ashx", data: { method: "WSSC.PRT.PNT6.Galleries:VideoGallery:AjaxEditVideo", folder: folder, id: id, cover: cover, title: title }, dataType: "json", async: true, type: "POST", success: function (response) { if (response.Success) { window.location.reload(); } else { console.log(response); spin.stop(); } } }); } } function makeUploader(callback) { try { uploader.fileupload('destroy'); } catch (e) { console.log(e); } uploader = $('#fileupload').fileupload({ autoUpload: true, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i, url: '/_layouts/15/WSSC.PRT.PNT6.Core/Handlers/ajax.ashx', dataType: 'json', formData: { method: 'WSSC.PRT.PNT6.Galleries:PhotoGallery:AjaxUploadPhoto' }, done: function (e, data) { var response = data.result; if (response.Error) { alert('Не удалось загрузить изображение'); console.log(response); } else { callback(response); } } }); } function initCover() { var cover = $('.js-video-preview-cover'); cover.unbind() .click(function () { makeUploader(function (url) { setCover(url); }); uploader.trigger('click'); }); } function setCover(url) { var cover = $('.js-video-preview-cover'); cover.children().addClass('hidden'); cover = url; if (url != null) { $('.js-video-preview-cover').find('img') .prop('src', url) .removeClass('hidden'); $('.js-video-preview-cover').find('button') .removeClass('hidden') .unbind() .click(delCover); } else { initCover(); $('.add-preview-btn').removeClass('hidden'); } } function delCover(e) { if (e) { e.stopPropagation(); } var cover = $('.js-video-preview-cover'); cover.children().addClass('hidden'); cover = null; $('.js-video-preview-cover').find('img').attr('src', '/_layouts/15/WSSC.PRT.PNT6.Design/Img/Galleries/noVideoCover.png'); $('.js-video-preview-cover').find('div').removeClass('hidden'); initCover(); } function initUpload() { var uploaderPostVideo = new qq.FileUploader({ element: $('.js-add-video')[0], action: '/_layouts/15/wssc.prt.pnt6.Galleries/Handlers/VideoUpload.ashx', allowedExtensions: ["mp4"], template: '<div class="qq-upload-drop-area"><span>Перетащите файл сюда</span></div>' + '<div class="qq-upload-button">' + '<p class="qq-upload-choose-file uploaderImg">Загрузить видео</p>' + '</div>' + '<ul class="qq-upload-list" style="display:none;"></ul>' + '', debug: true, sizeLimit: 100 * 1024 * 1024, onSubmit: function (id, fileName) { $('.js-add-video').hide(); spin.start(); uploaderPostVideo.setParams({ filename: fileName, comName: '' }); }, onProgress: function (id, fileName, loaded, total) { }, onComplete: function (id, fileName, responseJSON) { if (responseJSON.Status == 'OK') { window.location.reload(); } } }); } function initEditVideo(id) { $.ajax({ url: "/_layouts/15/WSSC.PRT.PNT6.Core/Handlers/ajax.ashx", data: { method: "WSSC.PRT.PNT6.Galleries:VideoGallery:GetVideoInfo", id: id }, dataType: "json", async: true, type: "POST", success: function (data) { if (data) { $('.js-video-title').val(data.Title); data.Cover ? setCover(data.Cover) : initCover(); data.Folder ? initFolderDropDownPreset(id, data.Folder) : initFolderDropDown(); } else { console.log(data); spin.stop(); } } }); } function init() { initUpload(); $('.js-video-gallery') .on('click', '.js-edit-video', function () { id = $(this).data('id'); editViewToggle(); initEditVideo(id); }) .on('click', '.js-edit-folder-video', function () { isFolderView = true; id = $(this).data('id'); editFolderViewToggle(); initEditVideo(id); }) .on('click', '.js-cancel-edit-video', function () { if (!isFolderView) { editViewToggle(); } else { editFolderViewToggle(); isFolderView = false; } delCover(); }) .on('click', '.js-confirm-edit-video', function () { saveEdited(id); spin.start(); }) } return { init: init } })(); $(function () { var initialVideoTemplate = document.getElementById('video-template').innerHTML; var videoTemplate = Handlebars.compile(initialVideoTemplate); var lastid = $('.videogallery-container').children().length; var action = true; var isLast = false; var isLoading = false; var renderVideogallery = function (data) { var renderHtml = videoTemplate(data); $('#content-video').append(renderHtml); FindLikeThingsAndDisplayStars(); } function videogalleryShow() { $.ajax({ url: '/_layouts/15/WSSC.PRT.PNT6.Core/Handlers/Ajax.ashx', async: true, type: 'POST', data: { method: 'WSSC.PRT.PNT6.Galleries:VideoGallery:GetVideos', lastid: lastid, rand: Math.random() }, success: function (response) { var result = JSON.parse(response); if (result.length > 0) { renderVideogallery(result); lastid = lastid + result.length; if (result.length < 6) { isLast = true; } isLoading = false; } else { isLast = true; } } }); } $('#s4-workspace').scroll(function () { if ($('#s4-workspace').scrollTop() >= $('#s4-workspace')[0].scrollHeight - $('#s4-workspace').height() - 500) { if (action && !isLast) { if (!isLoading) { isLoading = true; videogalleryShow(); } } } }); videogalleryShow(); video.init(); folder.init(); $(".fancyboxlink").fancybox({ 'overlayColor': '#FFF', 'showCloseButton': true, 'openEffect': 'elastic', 'speedIn': 1000, 'width': 640, 'height': 480, 'type': 'iframe', 'padding': 0, 'margin': 0, 'beforeShow': function () { $('.fancybox-iframe').height(480); } }); })

Related: See More


Questions / Comments: