<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="wallOfFameSingle clearfix">
<h3 class="WOFSingleTitle">Моя история. Моя работа. Моя жизнь.</h3>
{{#if this}}
<div class="WOFSingleLeftCol left-float">
<a href="#" class="WOFImageWrapper">
{{#each this}}
<img class="js-period-img" data-photo="img{{@index}}" src="{{Photo}}" alt="" style="display: none;">
{{/each}}
</a>
</div>
<div class="WOFSingleRightCol right-float">
<div class="WOFSingleYear"></div>
<div class="WOFSingleDescription clearfix">
<div class="WOFSingleDescriptionBody">
{{#each this}}
<div class="singleDescr" data-descr="descr{{@index}}" data-descr-time="{{Date}}" style="display: none;">
<p class="js-descr-date">{{Date}}</p>
<p class="js-descr-long">{{Description}}</p>
</div>
{{/each}}
</div>
</div>
<div class="timeline">
{{#each this}}
<span class="period" data-timestamp="{{Date}}" data-descr="descr{{@index}}" data-photo="img{{@index}}">{{Date}}</span>
{{/each}}
</div>
</div>
{{/if}}
</div>
@import '../../../../WSSC.PRT.AVG/Layouts/WSSC.PRT.AVG/styles/props';
p {
margin: 0;
}
.wallOfFameSingle {
width: 100%;
.box-sizing;
background-color: @blue_dark_bg;
font-family: @font_narrow;
padding-bottom: 20px;
}
.WOFSingleLeftCol {
width: 180px;
margin: 0 50px 20px 20px;
}
.WOFSingleRightCol {
width: 606px;
margin-right: 50px;
margin-bottom: 20px;
color: @white;
}
.WOFSingleTitle {
font-size: 18px !important;
font-weight: 400 !important;
text-transform: uppercase;
color: @white;
padding: 20px;
margin-bottom: 25px !important;
border-bottom: 1px solid @white;
}
.WOFImageWrapper {
width: 170px;
height: 230px;
overflow: hidden;
display: inline-block;
img {
width: 170px;
height: auto;
overflow: hidden;
}
}
.WOFSingleYear {
font-size: 110px;
line-height: 85px;
}
.WOFSingleDescription {
margin-top: 40px;
.WOFSingleIcon {
width: 58px;
margin-right: 17px;
}
.WOFSingleDescriptionBody {
width: 100%;
-ms-word-wrap: break-word;
word-wrap: break-word;
.WOFSingleDescriptionTitle {
text-transform: uppercase;
margin: 0;
padding-bottom: 5px;
font-size: 18px;
}
.singleDescr {
padding-top: 10px;
.js-descr-date {
font-size: 24px;
padding-bottom: 0;
}
}
}
}
.timeline {
margin-top: 74px;
background-color: #425c7f;
width: 606px;
height: 18px;
border-radius: 10px;
color: #fff;
font-size: 0;
}
.period {
border-radius: 10px;
width: 100px;
margin-top: 0;
.box-sizing;
display: inline-block;
height: 18px;
font-size: 14px;
text-align: center;
cursor: pointer;
}
.period-active {
background-color: #afb4ba;
}
var $wallItem = $('#wall-item');
var wallItemTemplate = Handlebars.compile($('#wall-item-template').html());
var $wallOfFame = $('#wall-of-fame');
var hashChanged = function (e) {
var hash = window.location.hash;
if (hash && hash !== '#') {
var id = hash.substring(1);
getWallItem(id)
.then(renderWallItem)
.then(function (data) {
$wallOfFame.hide();
$wallItem.show();
})
.then(renderDate);
}
else {
$wallItem.hide();
$wallOfFame.show();
}
};
var revertDescrDates = function () {
var containerBody = $('.WOFSingleDescriptionBody');
containerBody.children().each(function (i, oneDescr) { containerBody.prepend(oneDescr) });
}
var changeTimestampWidth = function () {
var visibleTimeline = [];
var timelineChildren = $('.timeline').children();
var timelineWidth = $('.timeline').width();
for (var i = 0; i < timelineChildren.length; i++) {
if ($(timelineChildren[i]).is(':visible')) {
visibleTimeline.push(timelineChildren[i]);
};
};
var newTimelineWidth = (timelineWidth - visibleTimeline.length) / visibleTimeline.length;
if (newTimelineWidth < 100) {
$('.timeline').height('36px');
$('.timeline').css('border-radius', '20px');
newTimelineWidth = 100;
};
$.each(visibleTimeline, function (key, value) {
$(visibleTimeline[key]).css('width', newTimelineWidth);
});
}
var renderDate = function () {
moment.locale('ru');
revertDescrDates();
var allDates = $('.period');
for (var i = 0; i < allDates.length; i++) {
var parsedDate = new Date(parseInt($(allDates[i]).text().substr(6)));
$(allDates[i]).text(parsedDate.getFullYear());
};
var dateDescrArr = $('.js-descr-date');
for (var i = 0; i < dateDescrArr.length; i++) {
var d = moment($(dateDescrArr[i]).text()).format('D MMMM');
$(dateDescrArr[i]).text(d);
}
//var timelineLen = $('.timeline .period').length;
//timelineLen = timelineLen * 100 + timelineLen;
//$('.timeline').css('width', timelineLen);
var t = $('.timeline').children();
var descrArrSt = $('.singleDescr .js-descr-long');
for (var i = 0; i < t.length; i++) {
if ($(t[i]).text() === $(t[i - 1]).text()) {
$(t[i - 1]).hide();
}
}
var dateStartTimeline = $(t[t.length - 1]).text();
var arrDateStartTimeline = [];
for (var j = 0; j < t.length; j++) {
if ($(t[j]).text() === dateStartTimeline) {
arrDateStartTimeline.push($(t[j]).data('descr'));
}
}
$.each(arrDateStartTimeline, function (key, value) {
$('.WOFSingleDescriptionBody').find('[data-descr=' + value + ']').show();
});
$(t[t.length - 1]).addClass('period-active');
var firstDate = $(t[t.length - 1]).attr('data-timestamp');
var dateParsed = new Date(parseInt(firstDate.substring(6)));
$('.WOFSingleYear').text(dateParsed.getFullYear());
$('.WOFImageWrapper').length;
// $('[data-descr=descr0]').show();
var imgErr = $('.WOFImageWrapper').children();
var imgLastIndex = $(imgErr).length - 1;
$(imgErr[imgLastIndex]).show();
$('.timeline').on('click', '.period', function () {
$('.period').removeClass('period-active');
$(this).addClass('period-active');
var timestamp = $(this).attr('data-timestamp');
var dateParsed = new Date(parseInt(timestamp.substring(6)));
$('.WOFSingleYear').text(dateParsed.getFullYear());
var descrArr = $('.singleDescr');
var tempDescr = $(this).attr('data-descr');
for (var i = 0; i < descrArr.length; i++) {
if ($(descrArr[i]).attr('data-descr') === tempDescr) {
$('.singleDescr').hide();
$(descrArr[i]).show();
var arrDateStartTimelineTemp = [];
var timelineTemp = $('.timeline').children();
var timestampTemp = $('.timeline').find('[data-descr=' + tempDescr + ']').data('timestamp');
var timestampTempParsed = new Date(parseInt(timestampTemp.substring(6)));
timestampTempParsed = timestampTempParsed.getFullYear();
for (var j = 0; j < timelineTemp.length; j++) {
if ($(timelineTemp[j]).text() === timestampTempParsed.toString()) {
arrDateStartTimelineTemp.push($(timelineTemp[j]).data('descr'));
}
}
$.each(arrDateStartTimelineTemp, function (key, value) {
$('.WOFSingleDescriptionBody').find('[data-descr=' + value + ']').show();
});
}
}
var imgArr = $('.js-period-img');
var tempImg = $(this).attr('data-photo');
for (var i = 0; i < imgArr.length; i++) {
if ($(imgArr[i]).attr('data-photo') === tempImg) {
$('.js-period-img').hide();
$(imgArr[i]).show();
}
}
});
if ($('.timeline').width() > 606) {
//$('.timeline').css('max-width', '606px');
//$('.timeline').css('border-radius', '20px');
//$('.timeline').css('background', 'linear-gradient(to bottom, #425c7f 0, #425c7f 17px, #fff 17px,#425c7f 19px, #425c7f 36px)');
$('.timeline').css('height', '36px');
}
changeTimestampWidth();
}
var renderWallItem = function (data) {
if (!data.Error) {
var html = wallItemTemplate(data);
$wallItem.html(html);
return data;
}
else
console.log(data);
}
var getWallItem = function (id) {
var data = {
method: 'GetWallItem',
id: id
};
return $.getJSON('/_layouts/Handlers/ajax.ashx', data);
};
Vue.component('search', {
template: '#search-bar',
props: ['query'],
data: function () {
return {
timeoutId: 0
}
},
methods: {
search: function () {
clearTimeout(this.timeoutId);
this.$dispatch('query-changed', this.query);
}
},
watch: {
query: function () {
clearTimeout(this.timeoutId);
var self = this;
this.timeoutId = setTimeout(function () {
self.$dispatch('query-changed', self.query);
}, 1000);
}
}
});
Vue.component('employee', {
template: '#employee',
props: ['employee'],
computed: {
Fullname: function () {
var fn = [];
if (this.employee.Lastname)
fn.push(this.employee.Lastname);
if (this.employee.Firstname)
fn.push(this.employee.Firstname);
if (this.employee.Patronymic)
fn.push(this.employee.Patronymic);
return fn.join(' ');
}
}
})
var masonryRender = function () {
var elem = $('.wallOfFameBoxesWrapper');
if (elem.data().masonry) {
elem.masonry('destroy');
}
elem.masonry({
itemSelector: '.wallOfFameBox',
singleMode: true,
isResizable: true
});
}
var vm = new Vue({
el: '#wall-of-fame',
data: {
search: '',
employees: [],
timeoutId: 0
},
watch: {
search: function () {
this.getEmployees();
}
},
methods: {
searchHandler: function (query) {
this.search = query;
},
getEmployees: function () {
if (this.timeoutId)
clearTimeout(this.timeoutId);
var self = this;
this.timeoutId = setTimeout(function () {
self.getSuccessStories(self.search)
.then(function (response) {
this.employees = response.data;
})
.then(masonryRender)
.then(window.onhashchange = hashChanged)
.then(hashChanged)
}, 50);
},
getSuccessStories: function (search) {
var options = {
url: '/_layouts/Handlers/ajax.ashx',
data: {
query: search,
method: 'GetSuccessStories'
}
}
return this.$http.get(options);
},
},
ready: function () {
this.getEmployees();
}
});
