<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);
}
});
})
