<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>
window.Event = new Vue();
Vue.component('timezone-item', {
props: ['timezonecity', 'currentcity', 'isvisible'],
template: '#timezone-item-template',
data: function () {
return {
cityTime: moment(new Date()).utc().add(this.timezonecity.GMT, 'h').format('HH:mm:ss'),
interv: null
}
},
mounted() {
//const interval = setInterval(this.updateDateTime, 1000);
// Event.$on('applied', () => alert('Hanling it!'));
},
methods: {
updateDateTime() {
this.cityTime = moment(new Date()).utc().add(this.timezonecity.GMT, 'h').format('HH:mm:ss');
}
},
computed: {
gmtDifference: function () {
return this.timezonecity.GMT - 3 != 0 ? this.timezonecity.GMT - 3 > 0 ? "+" + (this.timezonecity.GMT - 3) : "" + (this.timezonecity.GMT - 3) : "";
},
isCurrentCity: function() {
return this.currentcity.toLowerCase() == this.timezonecity.Title.toLowerCase();
}
},
watch: {
isvisible: function(value) {
if (value == true) {
if (this.interv == null) {
this.interv = setInterval(this.updateDateTime, 1000);
}
} else {
clearInterval(this.interv);
this.interv = null;
}
}
}
})
var data = [ { "TimeZoneCities" : [
{"ID": 0, "Title": "Moscow", "GMT": 3},
{"ID": 1, "Title": "Penza", "GMT": 3},
]
},
{"CurrentCity": "Moscow"}
];
var vm = new Vue({
el: '#clockWidgetApp',
data() {
return {
timeZoneCities: data[0].TimeZoneCities || [],
currentCity: "Moscow",
currentTime: moment(new Date()).format('HH:mm:ss'),
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:ss');
},
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;
}
// Event.$emit('applied');
e.stopPropagation();
},
globalClickListener() {
if (this.isClicked) {
this.isVisible = false;
this.isClicked = false;
}
}
}
});
