<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 ---------->
<div class="js-congratulation">
<h3 class="module-title admin-title">Поздравить с днем рождения</h3>
<div class="clearfix js-congratulation-tab js-congratulation-birthdays">
<div class="datepicker-left-container">
<div id="datepicker"></div>
</div>
<div id="birthdays-content"></div>
</div>
<div class="clearfix js-congratulation-tab js-congratulation-steps item-hidden">
<div class="steps-aside left">
<div id="selected-user"></div>
</div>
<div class="steps-main left">
<div class="js-steps js-steps-congratulation-text" data-steps="congratulation-text">
<div class="steps-header">
<h3>Шаг №1.</h3>
<h4>Поздравления и подпись</h4>
</div>
<div class="steps-body">
<i class="steps-nav arrow-yellow-left-bg-icon js-step" data-action="show-birthdays"></i>
<div class="steps-content">
<textarea id="congratulation-text" class="congratulation-textarea" maxlength="255" placeholder="Напишите ваше поздравление. Оно будет размещено на открытке."></textarea>
<textarea id="congratulation-signature" class="congratulation-textarea" maxlength="255" placeholder="Подпишитесь. Вы можете поздравить от себя лично или от имени целого подразделения."></textarea>
</div>
<i class="steps-nav arrow-yellow-right-bg-icon js-step" data-action="create-congratulation"></i>
</div>
</div>
<div class="js-steps js-steps-congratulation-created" data-steps="congratulation-created" style="display: none;">
<div class="steps-header">
<h3>Поздравление готово!</h3>
</div>
<div class="steps-body">
<i class="steps-nav arrow-yellow-left-bg-icon js-step" data-action="edit-congratulation"></i>
<div class="steps-content">
<div id="congratulation-preview-content"></div>
</div>
<i class="steps-nav accept-yellow-bg-icon js-step" data-action="send-congratulation"></i>
</div>
</div>
</div>
</div>
<div id="successfull-congratulation-send" style="display:none;">
<div class="modal-content modal-successfull-message js-modal">
<div id="congratulation-successfull-content"></div>
</div>
</div>
</div>
<script id="birthdays-template" type="text/x-handlebars-template">
<ul class="content-right-container birthday-items">
{{#if this}}
{{#each this}}
<li class="single-item birthday-item">
<div class="item-image">
<img src="{{Photo}}" alt="" />
<div class="item-hovered-info item-hidden js-item-info">
<button type="button" class="button-general action-button js-congratulate" data-id="{{ID}}" data-photo="{{Photo}}" data-name="{{Name}} {{Surname}}">Поздравить!</button>
<a href="{{url "profile" ID "#congratulation"}}" class="item-link">Читать поздравления</a>
</div>
</div>
<a href="{{url "profile" ID }}" class="item-name">{{Name}} {{Surname}}</a>
</li>
{{/each}}
{{/if}}
</ul>
</script>
<script id="selected-user-template" type="text/x-handlebars-template">
{{#if this}}
<div class="single-item selected-user-item">
<a href="{{url "profile" ID }}" class="item-image">
<img src="{{Photo}}" alt="" />
</a>
<a href="{{url "profile" ID }}" class="item-name">{{Name}} {{Surname}}</a>
</div>
{{/if}}
</script>
<script id="congratulation-preview-template" type="text/x-handlebars-template">
{{#if this}}
<div class="congratulation-preview-wrapper">
<p class="congatulation-created-text">{{text}}</p>
<p class="congatulation-created-signature">{{signature}}</p>
</div>
{{/if}}
</script>
<script id="congratulation-successfull-template" type="text/x-handlebars-template">
{{#if this}}
<i class="accept-yellow-bg-icon modal-successfull-icon"></i>
<h3>Спасибо!</h3>
<p>Спасибо! {{Name}} {{Surname}} будет очень рад(а). Он(а) получит письмо с вашей открыткой и увидит ее в своем <a href="{{url "profile" ID "#congratulation"}}">персональном профиле</a>.</p>
{{/if}}
</script>
<script>
congratulation.initCongratulations();
</script>
.datepicker-left-container {
width: 250px;
margin-right: 50px;
float: left;
}
.datepicker-left-container .ui-datepicker {
width: 250px;
}
.datepicker-left-container .ui-datepicker td {
padding: 5px;
}
.content-right-container {
width: 750px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
}
ul.content-right-container {
padding: 0;
margin: 0;
font-size: 0;
}
ul.content-right-container li {
list-style-type: none;
display: inline-block;
}
.content-right-container .birthday-item {
margin-right: 50px;
margin-bottom: 30px;
}
.single-item {
width: 150px;
display: inline-block;
font-size: 14px;
}
.single-item .item-image {
display: inline-block;
width: 150px;
height: 150px;
overflow: hidden;
margin-right: 0;
position: relative;
}
.single-item .item-image img {
width: 150px;
height: auto;
}
.single-item .item-image:hover .item-hovered-info {
display: block;
}
.single-item .item-image .item-hovered-info {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 150px;
background: rgba(0, 0, 0, 0.9);
}
.single-item .item-name {
font-size: 15px;
font-family: HelveticaNeueCyrRoman;
color: #2b3037;
display: block;
text-align: center;
padding-top: 10px;
text-decoration: none;
min-height: 32px;
max-height: 32px;
overflow: hidden;
word-break: break-word;
}
.single-item .item-link {
display: block;
color: rgba(255, 255, 255, 0.9);
text-align: center;
padding: 0 15px;
}
.single-item:nth-child(4n) {
margin-right: 0;
}
.action-button {
width: 130px;
height: 50px;
border: 2px solid #ffc11c;
border-radius: 25px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
font-family: HelveticaNeueCyrRoman;
line-height: 40px;
background-color: #ffffff;
cursor: pointer;
background: transparent;
color: rgba(255, 255, 255, 0.7);
margin: 33px auto 10px;
display: block;
}
.no-info {
color: #d50b09;
font-size: 14px;
}
.steps-aside {
width: 150px;
margin-right: 40px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.steps-main {
width: 860px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.steps-main .accept-yellow-bg-icon {
cursor: pointer;
margin-top: 135px;
}
.steps-header {
text-align: center;
padding-bottom: 15px;
border-bottom: 2px solid #e9edf0;
margin-bottom: 30px;
}
.steps-header h3,
.steps-header h4 {
font-size: 21px;
color: #2b3037;
margin-bottom: 3px;
font-weight: normal;
}
.steps-body {
text-align: center;
}
.steps-content {
width: 600px;
vertical-align: top;
display: inline-block;
}
.steps-nav {
margin-top: 140px;
display: inline-block;
vertical-align: top;
}
.congratulation-textarea {
display: inline-block;
border: 1px solid #9fa1a3;
margin-bottom: 15px;
width: 535px;
height: 143px;
outline-color: #ffc11c;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 15px;
color: #2b3037;
font-size: 14px;
font-family: HelveticaNeueCyrRoman;
resize: none;
}
.congratulation-textarea.not-valid {
border-color: #d50b09;
}
.congratulation-preview-wrapper {
padding: 40px;
border: 1px solid #d8dadb;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 40px 60px;
min-height: 264px;
border-radius: 4px;
background: #d8dadb;
background-image: radial-gradient(#e5e7e7 30%, transparent 0), radial-gradient(#e5e7e7 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;
}
.congratulation-preview-wrapper p {
font-family: HelveticaNeueCyrRoman;
margin: 0;
text-align: left;
}
.congratulation-preview-wrapper .congatulation-created-text {
font-size: 16px;
color: #2b3037;
margin-bottom: 30px;
}
.congratulation-preview-wrapper .congatulation-created-signature {
font-size: 15px;
color: #888f92;
text-align: right;
}
.congratulation-modal .modal-content {
width: 510px;
height: 405px;
}
.congratulation-modal .fancybox-inner {
overflow: hidden !important;
}
/*# sourceMappingURL=congratulations.css.map *
var congratulation = (function () {
var birthdaysTemplate = null,
selectedUserTemplate = null,
conratulationPreviewTemplate = null,
congratulationSuccessfullModalTemplate = null,
congratulationInformerTempalte = null,
today = getDateToday(),
congratulationSend = false,
congratulationFinal = {},
recipients = {},
recipient = {};
function initSteps(data) {
$('.js-congratulation-tab').hide();
$('.js-congratulation-steps').show();
if (!selectedUserTemplate) {
selectedUserTemplate = Handlebars.compile($('#selected-user-template').html());
}
clearCongratulationForm();
congratulateActionListener();
if (typeof data === 'string') {
if (parseInt(data) != 0) {
var id = parseInt(data);
getUser(id).then(function (response) {
renderSelectedUser(response);
recipient = response;
return;
})
} else {
showBirthdays();
}
} else {
renderSelectedUser(data);
}
}
function initBirthdays() {
if (!birthdaysTemplate) {
birthdaysTemplate = Handlebars.compile($('#birthdays-template').html());
}
initDatepickerRegional();
renderDatepicker();
$('.js-congratulation').on('click', '.js-congratulate', function (e) {
var selectedUser = getSelectedUser($(this).data('id'));
recipient = selectedUser[0];
initSteps(recipient);
})
renderBirthdays(today);
}
function getUser(id) {
return $.get('/congratulations/GetPerson', {
id: id
});
}
function initCongratulations() {
initBirthdays();
}
function initInformer() {
if (!congratulationInformerTempalte) {
congratulationInformerTempalte = Handlebars.compile($('#congatulation-informer-template').html());
}
getBirthdays(today).then(function (response) {
$("#congatulation-informer-content").html(congratulationInformerTempalte(response));
recipients = response;
sideblocksOverlayToggle('birthdays');
if (response.length > 1) {
$('.birthdays-user-to-info').owlCarousel({
loop: true,
margin: 0,
nav: true,
dots: false,
autoplay: true,
autoplayTimeout: 8000,
autoplayHoverPause: true,
items: 1
});
}
});
}
function getCongratulations() {
return $.get('/congratulations/AllCongratualtions');
}
function congratulateActionListener() {
$('.js-congratulation').off().on('click', '.js-step', function () {
var action = $(this).data("action");
switch (action) {
case 'show-birthdays':
showBirthdays();
break;
case 'create-congratulation':
congratulationCreated();
break;
case 'send-congratulation':
congratulateUser();
break;
case 'edit-congratulation':
congratulationEdit();
break;
default:
console.log("error in js steps");
}
})
}
function getSelectedUser(userID) {
return selectedUser = recipients.filter(function (obj) {
return obj.ID == userID;
});
}
function showBirthdays() {
$('.js-congratulation-tab').hide();
$('.js-congratulation-birthdays').show();
}
function switchStep(step) {
$('.js-steps').hide();
$('.js-steps-' + step).show();
}
function congratulationEdit() {
switchStep('congratulation-text');
}
function congratulationCreated() {
var text = $("#congratulation-text").val();
var signature = $("#congratulation-signature").val();
var errors = [];
if (text.trim() === '') {
errors.push('Напишите, пожалуйста, текст поздравления.');
$('#congratulation-text').addClass('not-valid');
}
if (signature.trim() === '') {
errors.push('Подпишитесь на открытке, пожалуйста');
$('#congratulation-signature').addClass('not-valid');
}
if (errors.length) {
alert(errors.join(' '));
return;
}
congratulationFinal = {
text: text,
signature: signature
};
if (!conratulationPreviewTemplate) {
conratulationPreviewTemplate = Handlebars.compile($('#congratulation-preview-template').html());
}
renderCongratulationPreview(congratulationFinal);
switchStep("congratulation-created");
}
function clearCongratulationForm() {
$("#congratulation-text").val('');
$("#congratulation-signature").val('');
}
function congratulateUser() {
$.post('/congratulations/congratulateUser', {
recipient: recipient.ID,
text: congratulationFinal.text,
signature: congratulationFinal.signature
}).then(function (response) {
congratulationSuccessfull();
});
}
function getBirthdays(birthdayDate) {
return $.get('/congratulations/getbirthdays', {
birthdayDate: birthdayDate
});
}
function congratulationSuccessfull() {
if (!congratulationSuccessfullModalTemplate) {
congratulationSuccessfullModalTemplate = Handlebars.compile($('#congratulation-successfull-template').html());
}
console.log('renderCongratilationSuccessModal');
if (!congratulationSend) {
renderCongratilationSuccessModal();
congratulationSend = true;
$.fancybox.open($('#successfull-congratulation-send .js-modal'), {
wrapCSS: 'congratulation-modal',
beforeClose: function () {
window.location.reload();
}
});
}
}
function renderCongratulationPreview(data) {
$("#congratulation-preview-content").html(conratulationPreviewTemplate(data));
}
function renderCongratilationSuccessModal() {
$('#congratulation-successfull-content').html(congratulationSuccessfullModalTemplate(recipient));
}
function renderBirthdays(dateText) {
getBirthdays(dateText).then(function (response) {
recipients = response;
$("#birthdays-content").html(birthdaysTemplate(response));
if (response.length < 1) {
$("<div class='no-info'>Нет дней рождений в выбранную дату</div>").insertBefore($('.birthday-items'));
}
});
}
function renderSelectedUser(data) {
$("#selected-user").html(selectedUserTemplate(data));
}
function initDatepickerRegional() {
$.datepicker.regional['ru'] = {
closeText: 'Закрыть',
prevText: '<Пред',
nextText: 'След>',
currentText: 'Сегодня',
monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
monthNamesShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн',
'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
dayNames: ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'],
dayNamesShort: ['вск', 'пнд', 'втр', 'срд', 'чтв', 'птн', 'сбт'],
dayNamesMin: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
dateFormat: 'dd.mm.yy',
firstDay: 1,
isRTL: false
};
$.datepicker.setDefaults($.datepicker.regional['ru']);
}
function renderDatepicker() {
var $datepicker = $("#datepicker");
$datepicker.datepicker({
todayHighlight: true,
onSelect: function (dateText) {
renderBirthdays(dateText);
}
});
$("#datepicker").datepicker('setDate', today);
}
function getDateToday() {
moment.locale("ru");
var today = moment().format("DD.MM.YYYY");
return today;
}
$(function () {
var hash = window.location.hash.substring(1);
if (hash.indexOf("directid") !== -1) {
initSteps(hash.substring(9));
window.location.hash = '';
}
})
return {
initCongratulations: initCongratulations,
initInformer: initInformer
}
})();
