From 114234247f3567f701b19a56285fa4046096a6cc Mon Sep 17 00:00:00 2001 From: aeris Date: Thu, 12 Apr 2018 23:07:03 +0200 Subject: [PATCH] Moar transition, such animation --- source/javascripts/site.js.coffee | 110 +++++++++++++++++++++--------- source/stylesheets/site.css.scss | 24 ++++--- 2 files changed, 91 insertions(+), 43 deletions(-) diff --git a/source/javascripts/site.js.coffee b/source/javascripts/site.js.coffee index 22b996b..67fedfc 100644 --- a/source/javascripts/site.js.coffee +++ b/source/javascripts/site.js.coffee @@ -44,7 +44,7 @@ class TimeTable root = element.parentElement width = root.offsetWidth - element.style.top = "#{top}px" + element.style.top = "#{top + window.pageYOffset}px" element.style.height = "#{bottom - top}px" element.style.width = "#{width}px" element.style.position = 'absolute' @@ -77,12 +77,37 @@ class Modal constructor: (@modal) -> @header = @modal.querySelector '.header' @body = @modal.querySelector '.body' - close = => @modal.classList.add 'hidden' - @modal.querySelector('.close').addEventListener 'click', close - @modal.querySelector('.cover').addEventListener 'click', close + @modal.querySelector('.close').addEventListener 'click', @close + @modal.querySelector('.cover').addEventListener 'click', @close + + act: (events) -> + wrapper = => + next = events.shift() + return unless next? + [duration, callback] = next + setTimeout (=> + callback() + wrapper() + ), duration + wrapper() + + start: -> + start = @event.getBoundingClientRect() + scroll = { + top: window.pageYOffset, + left: window.pageXOffset + } + + @modal.style.top = "#{start.top + scroll.top}px" + @modal.style.left = "#{start.left + scroll.left}px" + @modal.style.width = "#{start.width}px" + @modal.style.height = "#{start.height}px" + @header.style.width = "#{start.width}px" + @header.style.height = "#{start.height}px" + @body.style.width = 0 + @body.style.height = "#{start.height}px" open: (@event) -> - start = @event.getBoundingClientRect() scroll = { top: window.pageYOffset, left: window.pageXOffset @@ -99,15 +124,6 @@ class Modal header_width = Math.round modal.width / 3 - @modal.style.top = "#{start.top + scroll.top}px" - @modal.style.left = "#{start.left + scroll.left}px" - @modal.style.width = "#{start.width}px" - @modal.style.height = "#{start.height}px" - @header.style.width = "#{start.width}px" - @header.style.height = "#{start.height}px" - @body.style.width = '0px' - @body.style.height = "#{start.height}px" - time = @event.querySelector('.time').textContent @header.querySelector('.time').textContent = time title = @event.querySelector('.title').textContent @@ -116,25 +132,53 @@ class Modal @header.querySelector('.author').textContent = author description = @event.querySelector('.description').textContent @body.textContent = '' - @header.classList = @event.classList - @header.classList.add 'header' - @modal.classList.remove 'hidden' - @modal.classList.add 'transition' - - @modal.style.top = "#{modal.top}px" - @modal.style.left = "#{modal.left}px" - @modal.style.width = "#{modal.width}px" - @modal.style.height = "#{modal.height}px" - @header.style.width = "#{header_width}px" - @header.style.height = "#{modal.height}px" - @body.style.width = "#{modal.height - header_width}px" - @body.style.height = "#{modal.height}px" - - @body.textContent = description - - @modal.addEventListener 'transitionend', => - @modal.removeEventListener 'transitionend', this - @modal.classList.remove 'transition' + + @modal.classList.remove 'transition' + @act [ + [20, => + @start() + @header.classList = @event.classList + @header.classList.add 'header' + @modal.style.opacity = 1 + @modal.classList.remove 'hidden' + ], + [20, => + @transition @modal, null, => + @body.textContent = description + + @modal.style.top = "#{modal.top}px" + @modal.style.left = "#{modal.left}px" + @modal.style.width = "#{modal.width}px" + @modal.style.height = "#{modal.height}px" + @header.style.width = "#{header_width}px" + @header.style.height = "#{modal.height}px" + @body.style.width = "#{modal.height - header_width}px" + @body.style.height = "#{modal.height}px" + ] + ] + + close: => + @act [ + [20, => + @transition @modal, null, => + @modal.classList.add 'hidden' + + @body.textContent = '' + @start() + ] + ] + + transition: (element, events, at_end) -> + element.classList.add 'transition' + + callback = -> + element.removeEventListener 'transitionend', callback + element.classList.remove 'transition' + at_end() if at_end? + + element.addEventListener 'transitionend', callback + @act events if events? + init = -> modal = new Modal document.querySelector '.modal' diff --git a/source/stylesheets/site.css.scss b/source/stylesheets/site.css.scss index 293bf79..5d0f625 100644 --- a/source/stylesheets/site.css.scss +++ b/source/stylesheets/site.css.scss @@ -6,10 +6,9 @@ $line-height: 150px; -$event-color-1: #577F92; // Smalt Blue -$event-color-2: #443453; // Martinique -$event-color-3: #A2B9B2; // Edward -$event-color-4: #f6b067; // Rajah +$event-color-1: #2980b9; // Smalt Blue +$event-color-2: #c0392b; // Martinique +$event-color-3: #27ae60; // Rajah @mixin event($color) { background-color: $color; @@ -53,7 +52,7 @@ table.timetable { li { height: $line-height; - &:not(:first-child) { + & { margin-top: 5px; } } @@ -119,7 +118,7 @@ table.timetable { } .town { - @include event($event-color-4); + @include event($event-color-3); } .modal { @@ -128,7 +127,7 @@ table.timetable { display: flex; &.hidden { - visibility: hidden; + display: none; } .header { @@ -139,14 +138,20 @@ table.timetable { .body { height: 100%; - padding: 30px; + padding: 30px 30px 30px 10px; flex-grow: 1; background-color: #fff; + + overflow-x: auto; } &.transition { &, .header, .body { - @include transition(width 500ms ease-in-out, height 500ms ease-in-out); + @include transition(all 500ms ease-in-out); + } + + .body { + padding: 0; } } @@ -194,6 +199,5 @@ table.timetable { width: 100%; height: 100%; background-color: rgba(0, 0, 0, .8); - transition: visibility 500ms; } }