"clock widget"
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="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;

Related: See More


Questions / Comments: