<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="clock-widget" id="clockWidgetApp">
<h3 class="clock-widget__time"
@mouseenter="mouseEnter"
@mouseleave="mouseLeave"
@click="onClick">{{currentTime}}</h3>
<div class="clock-widget__timezones"
v-show="isVisible" >
<h3 class="clock-widget__timezones-title">Часовые пояса<i class="close-timezone"></i></h3>
<ul class="timezone-items">
<timezone-item v-for="item in timeZoneCities"
:timezonecity="item"
:currentcity="currentCity"
:key="item.ID"></timezone-item>
</ul>
</div>
</div>
<script type="text/x-template" id="timezone-item-template" style="display: none">
<li :class="{ timezone-item ,}">
<span class="timezone-item__title">{{timezonecity.Title}}</span>
<span class="timezone-item__time">{{cityTime}}</span>
<span class="timezone-item__gmt">MSK{{gmtDifference}} (UTC {{timezonecity.GMT}})</span>
</li>
</script>
<script>
(function (webPartId, initialState) {
new ClockWidget({
el: '#clockWidgetApp',
data: function () {
return {
timeZoneCities: initialState.TimeZoneCities || [],
currentCity: initialState.CurrentCity || "Москва"
}
}
});
})(__WebPartID__, __INITIAL_STATE__);
</script>
.clock-widget {
position: relative;
margin-left: 66px;
@media (max-width: (@screenTablet - 1) ) {
float: right;
padding-right: 46px;
}
}
.clock-widget__time {
display: inline-block;
font-family: 'HelveticaNeueCyrThin';
font-size: 30px;
line-height: 1;
color: @darkGray;
margin: 0;
padding-left: 39px;
background: @clockLgIcon 0 50%;
}
.clock-widget__timezones {
position: absolute;
top: 45px;
left: 0;
border-radius: 4px;
box-shadow: 0px 0px 19px 1px rgba(0, 0, 0, 0.2);
z-index: 1001;
width: 470px;
background-color: @white;
padding: 20px 35px 5px;
.box-sizing;
}
.clock-widget__timezones-title {
color: @darkGray;
font-size: 18px;
font-family: Arial, sans-serif;
font-weight: bold;
padding-bottom: 15px;
position: relative;
}
.timezone-items {
list-style-type: none;
margin: 0;
padding: 0;
}
.timezone-item {
padding: 10px 0;
font-size: 0;
border-bottom: 1px solid @lightGray;
&:first-child {
border-top: 1px solid @lightGray;
}
&:last-child {
border-bottom: 0;
}
}
.timezone-item__title,
.timezone-item__time,
.timezone-item__gmt {
display: inline-block;
}
.timezone-item__title {
width: 215px;
color: @black;
font-size: 14px;
font-weight: 100;
}
.timezone-item__time {
width: 65px;
color: @black;
font-size: 15px;
}
.timezone-item__gmt {
width: 115px;
color: @middleNeutralGray;
font-size: 13px;
font-weight: 100;
}
import Vue from 'Vue';
Vue.component('timezone-item', {
props: ['timezonecity', 'currentcity'],
template: '#timezone-item-template',
data: function () {
return {
cityTime: moment(new Date()).utc().add(this.timezonecity.GMT, 'h').format('HH:mm')
}
},
mounted() {
setInterval(this.updateDateTime, 1000);
},
methods: {
updateDateTime() {
this.cityTime = moment(new Date()).utc().add(this.timezonecity.GMT, 'h').format('HH:mm');
}
},
computed: {
gmtDifference: function () {
return this.timezonecity.GMT - 3 != 0 ? this.timezonecity.GMT - 3 > 0 ? "+" + (this.timezonecity.GMT - 3) : "" + (this.timezonecity.GMT - 3) : "";
}
}
})
ClockWidget = Vue.extend({
name: 'ClockWidget',
data() {
return {
timeZoneCities: [],
currentCity: "Москва",
currentTime: moment(new Date()).format('HH:mm'),
isVisible: false,
isClicked: false
}
},
mounted() {
setInterval(this.updateDateTime, 1000);
$(document).on('click', this.globalClickListener.bind(this));
},
methods: {
updateDateTime() {
this.currentTime = moment(new Date()).format('HH:mm');
},
mouseEnter() {
if (!this.isClicked) {
setTimeout(this.isVisible = true, 500);
}
},
mouseLeave() {
if (!this.isClicked) {
setTimeout(this.isVisible = false, 500);
}
},
onClick(e) {
this.isClicked = !this.isClicked;
if (this.isClicked) {
this.isVisible = true;
} else {
this.isVisible = false;
}
e.stopPropagation();
},
globalClickListener() {
if (this.isClicked) {
this.isVisible = false;
this.isClicked = false;
}
}
}
});
export default ClockWidget;
