<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<h3 class="module-title">@ViewBag.Title</h3>
<div class="module-breadcrumbs">
<a href="@Url.Action("MainAdmin")" class="breadcrumb-item">Страница администратора</a>
<i class="arrow-yellow-right-icon"></i>
<span class="breadcrumb-item">@ViewBag.Title</span>
</div>
<div id="app"></div>
<script id="bannerListTemplate" type="text/template">
<div class="banners-wrapper">
<a href="/tinymce/addeditimage/" class="add-button fancybox fancybox.iframe">Добавить новый баннер</a>
<ul class="banners-list js-banners-list">
<banner-item v-for="b in banners" v-bind:banner="b" v-on:edit="editBanner" v-on:remove="removeBanner"></banner-item>
</ul>
<banner-editor v-bind:banner="editedBanner" v-on:accept="onEditorAccept" v-on:cancel="editedBanner = null"></banner-editor>
<remove-dialog v-bind:banner="bannerToRemove" v-on:accept="onRemoveAccept" v-on:cancel="bannerToRemove = null"></remove-dialog>
</div>
</script>
<script id="bannerTemplate" type="text/template">
<li class="banner-item ui-sortable-default" v-bind:class="{ 'banner-acrhive': banner.IsArchive }" v-bind:data-id="banner.ID">
<img v-bind:src="banner.ImageUrl" />
<div class="banner-list-btn-group">
<button type="button" class="btn edit-squared-yellow-icon" v-on:click="$emit('edit', banner)"></button>
<button type="button" class="btn cancel-squared-yellow-icon" v-on:click="$emit('remove', banner)"></button>
</div>
</li>
</script>
<script id="bannerEditorTemplate" type="text/template">
<modal class="banner-editor" v-bind:show.sync="!!banner">
<img v-bind:src="ImageUrl" />
<div class="input-wrapper">
<label for="bannerTitle">Заголовок</label>
<input id="bannerTitle" type="text" v-model="Title" />
</div>
<div class="input-wrapper">
<label for="bannerAction">Ссылка</label>
<input id="bannerAction" type="text" v-model="ActionUrl" />
</div>
<div class="btn-group">
<button type="button" class="btn" v-on:click="$emit('accept', $data)">Сохранить</button>
<button type="button" class="btn btn-cancel" v-on:click="$emit('cancel')">Отмена</button>
</div>
</modal>
</script>
<script id="removeDialogTemplate" type="text/template">
<modal class="banner-editor" v-bind:show.sync="!!banner">
<p>
Вы действительно хотите удалить баннер?
</p>
<div class="btn-group">
<button type="button" class="btn" v-on:click="$emit('accept')">Удалить</button>
<button type="button" class="btn btn-cancel" v-on:click="$emit('cancel')">Отмена</button>
</div>
</modal>
</script>
<script id="modalTemplate" type="text/template">
<div class="modal-wrapper" v-if="show" transition="modal">
<div class="modal-container">
<button type="button" class="btn close-modal" v-on:click="cancel"></button>
<slot></slot>
</div>
</div>
</script>
@Scripts.Render("~/bundles/adminScripts")
<script>
bannersManager.init('@Html.Raw(HttpUtility.JavaScriptStringEncode(@Model.Banners))');
</script>
var bannersManager = (function () {
Vue.component('modal', {
template: '#modalTemplate',
props: ['show', 'onCancel'],
methods: {
cancel: function () {
if (typeof (this.onCancel) === 'function') {
this.onCancel();
} else {
this.$parent.$emit('cancel');
}
}
}
});
var BannerList = Vue.extend({
template: '#bannerListTemplate',
data: function () {
return {
banners: [],
editedBanner: null,
bannerToRemove: null
}
},
methods: {
changeOrder: function (data) {
var self = this;
$.postJSON('/admin/updateBannersOrder/', JSON.stringify(data)).then(function () {
data.forEach(function (item) {
var banner = self.getBanner(item.ID);
banner.Order = item.Order;
});
self.updateArchive();
});
},
updateArchive: function () {
this.banners.forEach(function (banner) {
if (banner.Order <= 5) {
banner.IsArchive = false;
} else {
banner.IsArchive = true;
}
});
},
getBanner: function (id) {
return this.banners.filter(function (item) {
return item.ID == id;
})[0];
},
orderComparer: function (l, r) {
return l.Order > r.Order ? 1 : -1;
},
editBanner: function (banner) {
this.editedBanner = JSON.parse(JSON.stringify(banner));
},
onEditorAccept: function (banner) {
if (banner.ID > 0) {
this.updateBanner(banner);
} else {
this.createBanner(banner);
}
},
createBanner: function (newBanner) {
var self = this;
$.postJSON('/admin/createBanner/', JSON.stringify(newBanner)).then(function (response) {
self.banners.forEach(function (item) {
item.Order += 1;
});
self.banners.unshift(response);
self.updateArchive();
self.editedBanner = null;
});
},
updateBanner: function (updated) {
var self = this;
$.postJSON('/admin/updateBanner/', JSON.stringify(updated)).then(function (response) {
var original = self.getBanner(response.ID);
self.original = Object.assign(original, response);
self.editedBanner = null;
});
},
removeBanner: function (toRemove) {
this.bannerToRemove = toRemove;
},
onRemoveAccept: function () {
var self = this;
$.postJSON('/admin/removeBanner/', JSON.stringify(this.bannerToRemove)).then(function () {
var index = self.banners.indexOf(self.bannerToRemove);
self.banners.splice(index, 1);
self.banners.forEach(function (b) {
if (b.Order > self.bannerToRemove.Order) {
b.Order -= 1;
}
});
self.updateArchive();
self.bannerToRemove = null;
});
}
},
mounted: function () {
var self = this;
$('.js-banners-list').sortable({
stop: function () {
var ordered = [];
$('.banner-item').each(function (i, item) {
ordered.push({
ID: $(item).data('id'),
Order: i + 1
});
});
self.changeOrder(ordered);
}
});
$('.js-banners-list').disableSelection();
$(document).on('TMCE:image:selected', function (e, url) {
$.fancybox.close();
var banner = {
ID: 0,
ImageUrl: url
};
self.editBanner(banner);
});
$('.fancybox').fancybox({
width: '1070px',
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
}
});
Vue.component('remove-dialog', {
template: '#removeDialogTemplate',
props: ['banner']
});
Vue.component('banner-item', {
template: '#bannerTemplate',
props: ['banner']
});
Vue.component('banner-editor', {
template: '#bannerEditorTemplate',
props: ['banner'],
data: function () {
return {
ID: null,
ImageUrl: null,
Title: null,
ActionUrl: null,
IsArchive: null
}
},
watch: {
banner: function (newVal) {
if (newVal === null)
return;
var clone = JSON.parse(JSON.stringify(newVal));
this.ID = clone.ID;
this.ImageUrl = clone.ImageUrl;
this.Title = clone.Title;
this.ActionUrl = clone.ActionUrl;
this.IsArchive = clone.IsArchive;
}
}
});
return {
init: function (data) {
new BannerList({
el: '#app',
data: {
banners: JSON.parse(data)
}
});
}
}
})();
