"clc"
Bootstrap 3.0.0 Snippet by irinashuvalova

<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; } } } });

Related: See More


Questions / Comments: