From adc4ee2d74980f6d48df60ad071ed789538bdce3 Mon Sep 17 00:00:00 2001 From: Eric Schultz Date: Fri, 27 Apr 2018 15:40:33 -0500 Subject: [PATCH] Even better fix for IOS11 bug! --- .../js/campaigns/show/gift-option-button.js | 31 ++++++++----------- client/js/campaigns/show/page.js | 22 ++++++++----- client/js/common/application_view.js | 17 +++------- client/js/events/show/page.js | 25 ++++++++++++++- package-lock.json | 6 ++++ package.json | 1 + 6 files changed, 63 insertions(+), 39 deletions(-) diff --git a/client/js/campaigns/show/gift-option-button.js b/client/js/campaigns/show/gift-option-button.js index 8fe78384..b4c67a9d 100644 --- a/client/js/campaigns/show/gift-option-button.js +++ b/client/js/campaigns/show/gift-option-button.js @@ -3,18 +3,18 @@ const h = require('snabbdom/h') const branding = require('../../components/nonprofit-branding') const format = require('../../common/format') const soldOut = require('./is-sold-out') -const on_ios11 = require('../../common/on-ios11') -function prepareForIOS11() -{ - bad_elements = $('.ff-modalBackdrop') - for(var i = 0; i < bad_elements.length; i++) - { - bad_elements[i].classList.add('ios-force-absolute-positioning') - } - - $('body').scrollTop(195) // so incredibly hacky -} +// function prepareForIOS11() +// { +// bad_elements = $('.ff-modalBackdrop') +// for(var i = 0; i < bad_elements.length; i++) +// { +// bad_elements[i].classList.add('ios-force-absolute-positioning') +// } +// +// +// $('body').scrollTop(195) // so incredibly hacky +// } module.exports = (state, gift) => { @@ -26,10 +26,7 @@ module.exports = (state, gift) => { gift.amount_one_time ? h('td', [ h('button.button--small.button--gift', { - on: {click: ev => { if (on_ios11()) { - prepareForIOS11() - } - + on: {click: ev => { state.clickOption$([gift, gift.amount_one_time, 'one-time'])} @@ -45,9 +42,7 @@ module.exports = (state, gift) => { , gift.amount_recurring ? h('td', [ h('button.button--small.button--gift', { - on: {click: ev => { if (on_ios11()) { - prepareForIOS11() - } + on: {click: ev => { state.clickOption$([gift, gift.amount_recurring, 'recurring'])} } diff --git a/client/js/campaigns/show/page.js b/client/js/campaigns/show/page.js index 0a19889c..43c11c25 100755 --- a/client/js/campaigns/show/page.js +++ b/client/js/campaigns/show/page.js @@ -25,16 +25,11 @@ require('../../common/fundraiser_metrics') require('../../components/fundraising/add_header_image') require('../../common/restful_resource') require('../../gift_options/index') +const on_ios11 = require('../../common/on-ios11') +const noScroll = require('no-scroll') appl.ajax_gift_options.index() -function calculateIOS() -{ - var userAgent = window.navigator.userAgent; - var hasVersion11 = userAgent.search("Version/11.0") > 0 - var has11_or_later = userAgent.search("OS 11_0_\d{1,2} like Mac OS X") > 0 - return hasVersion11 && has11_or_later; -} // Campaign editor only functionality if(app.current_campaign_editor) { @@ -50,7 +45,6 @@ if(app.current_campaign_editor) { function init() { var state = { timeRemaining$: timeRemaining(app.end_date_time, app.timezone), - onIOS11: calculateIOS() } console.error(window.navigator.userAgent) @@ -97,6 +91,18 @@ function init() { flyd.map(R.always('chooseGiftOptionsModal'), clickContributeGifts$) , flyd.map(R.always('donationModal'), startWiz$)) + flyd.on((id) => { + if (on_ios11() && id === null) { + noScroll.off() + } + }, state.modalID$) + + flyd.on((id) => { + if (on_ios11() && id !== null) { + noScroll.on() + } + }, state.modalID$) + // Stream of which gift option you have selected const giftOption$ = flyd.map(setGiftParams, state.giftOptions.clickOption$) const donateParam$ = flyd.scanMerge([ diff --git a/client/js/common/application_view.js b/client/js/common/application_view.js index 3d23d3c7..bf8c362d 100644 --- a/client/js/common/application_view.js +++ b/client/js/common/application_view.js @@ -6,17 +6,7 @@ var moment = require('moment-timezone') var client = require('./client') var appl = require('view-script') const on_ios11 = require('./on-ios11') -function prepareForIOS11(id) -{ - let bad_elements = $("#" + id) - for(var i = 0; i < bad_elements.length; i++) - { - bad_elements[i].classList.add('ios-force-absolute-positioning') - } - - - document.body.scrollTop = 0 // so incredibly hacky -} +const noScroll = require('no-scroll') module.exports = appl @@ -42,7 +32,7 @@ appl.def('open_modal', function(modalId) { $('body').addClass('is-showingModal') if (on_ios11()){ - prepareForIOS11(modalId) + noScroll.on() } return appl }) @@ -51,6 +41,9 @@ appl.def('open_modal', function(modalId) { appl.def('close_modal', function() { $('.modal').removeClass('inView') $('body').removeClass('is-showingModal') + if (on_ios11()) { + noScroll.off() + } return appl }) diff --git a/client/js/events/show/page.js b/client/js/events/show/page.js index d75847af..29c44ac7 100644 --- a/client/js/events/show/page.js +++ b/client/js/events/show/page.js @@ -13,14 +13,37 @@ const flyd = require('flyd') const R = require('ramda') const render = require('ff-core/render') const modal = require('ff-core/modal') +const noScroll = require('no-scroll') + +const on_ios11 = require('../../common/on-ios11') + +function createClickListener(startWiz$){ + return (...props) => { + if (on_ios11()) + { + noScroll.on() + } + startWiz$(...props) + } + + +} // -- Flim flam root component for event pages function init() { var state = { } const startWiz$ = flyd.stream() const donateButtons = document.querySelectorAll('.js-openDonationModal') - R.map(x => x.addEventListener('click', startWiz$), donateButtons) + R.map(x => x.addEventListener('click', createClickListener(startWiz$)), donateButtons) state.modalID$ = flyd.map(R.always('donationModal'), startWiz$) + flyd.on((id) => { + if (on_ios11() && id ===null ){ + noScroll.off() + }}, state.modalID$) + flyd.on((id) => { + if (on_ios11() && id !==null){ + noScroll.on() + }}, state.modalID$) state.donateWiz = donateWiz.init(flyd.stream({event_id: app.event_id})) return state } diff --git a/package-lock.json b/package-lock.json index f4d4ce53..29e5a2d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10811,6 +10811,12 @@ "lower-case": "1.1.4" } }, + "no-scroll": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/no-scroll/-/no-scroll-2.1.1.tgz", + "integrity": "sha512-YTzGAJOo/B6hkodeT5SKKHpOhAzjMfkUCCXjLJwjWk2F4/InIg+HbdH9kmT7bKpleDuqLZDTRy2OdNtAj0IVyQ==", + "dev": true + }, "node-fetch": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", diff --git a/package.json b/package.json index b961bb20..efb3416e 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "mobx-react": "^5.0.0", "mobx-react-devtools": "^5.0.1", "mobx-react-form": "^1.34.0", + "no-scroll": "^2.1.0", "phantomjs-prebuilt": "2.1.12", "postcss-cssnext": "^2.9.0", "postcss-import": "^9.1.0",