From 24520937aa40cd2ad4358c03630f91769daba513 Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 15 Sep 2015 13:09:12 +1000 Subject: [PATCH] FEATURE: improve safari editor hack --- .../discourse/lib/safari-hacks.js.es6 | 50 +++++++++---------- app/assets/stylesheets/desktop/compose.scss | 5 ++ 2 files changed, 29 insertions(+), 26 deletions(-) diff --git a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 index a73d8802077..647f9a6e060 100644 --- a/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 +++ b/app/assets/javascripts/discourse/lib/safari-hacks.js.es6 @@ -1,11 +1,8 @@ function applicable() { - // CriOS is Chrome on iPad / iPhone, OPiOS is Opera (they need no patching) - // Dolphin has a wierd user agent, rest seem a bit nitch + // This will apply hack on all iDevices return navigator.userAgent.match(/(iPad|iPhone|iPod)/g) && - navigator.userAgent.match(/Safari/g) && - !navigator.userAgent.match(/CriOS/g) && - !navigator.userAgent.match(/OPiOS/g); + navigator.userAgent.match(/Safari/g); } // per http://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus/29064810 @@ -17,6 +14,7 @@ function positioningWorkaround($fixedElement) { const fixedElement = $fixedElement[0]; var done = false; + var originalScrollTop = 0; var blurredNow = function(evt) { if (!done && _.include($(document.activeElement).parents(), fixedElement)) { @@ -25,8 +23,16 @@ function positioningWorkaround($fixedElement) { } done = true; + + fixedElement.parentElement.style.height = ''; + $('#main-outlet').show(); + $('header').show(); + fixedElement.style.position = ''; fixedElement.style.top = ''; + fixedElement.style.height = ''; + $(window).scrollTop(originalScrollTop); + if (evt) { evt.target.removeEventListener('blur', blurred); } @@ -50,31 +56,23 @@ function positioningWorkaround($fixedElement) { return; } + originalScrollTop = $(window).scrollTop(); + + // take care of body + $('#main-outlet').hide(); + $('header').hide(); + + fixedElement.style.position = 'absolute'; // get out of the way while opening keyboard fixedElement.style.top = '0px'; + fixedElement.style.height = parseInt(window.innerHeight*0.6) + "px"; + fixedElement.parentElement.style.height = window.innerHeight + "px"; + $(window).scrollTop(0); + // great ... iOS positions this yet again + // so lets take over if this happens + setTimeout(()=>$(window).scrollTop(0),500); - var iPadOffset = 0; - if (window.innerHeight > window.innerWidth && navigator.userAgent.match(/iPad/)) { - // there is no way to get virtual keyboard height - iPadOffset = 640 - $(fixedElement).height(); - } - - var oldScrollY = 0; - - var positionElement = function(){ - if (done) { - return; - } - if (Math.abs(oldScrollY - window.scrollY) < 20) { - return; - } - oldScrollY = window.scrollY; - fixedElement.style.top = window.scrollY + iPadOffset + 'px'; - }; - - // position once, correctly, after keyboard is shown - setTimeout(positionElement, 500); evt.preventDefault(); self.focus(); diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss index ca821824dee..5fc774c7ac4 100644 --- a/app/assets/stylesheets/desktop/compose.scss +++ b/app/assets/stylesheets/desktop/compose.scss @@ -94,6 +94,11 @@ // hide cancel upload link on IE9 (not supported) .ie9 #cancel-file-upload { display: none; } +// todo, enable if we ever implement touch grippie... I question the value though (Sam) +.touch #reply-control.open .grippie { + display: none; +} + #reply-control { .toggle-preview, #draft-status, #file-uploading { position: absolute;