From: Alexander Ebert Date: Tue, 23 Aug 2016 13:26:09 +0000 (+0200) Subject: Added work-around for calculation bug in Firefox X-Git-Tag: 3.0.0_Beta_1~571 X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=adb94be6ff7b0088842fac3d2d048e96f2bcc2d1;p=GitHub%2FWoltLab%2FWCF.git Added work-around for calculation bug in Firefox --- diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Code.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Code.js index a521310142..e3c209a9e2 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Code.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Code.js @@ -6,7 +6,7 @@ * @license GNU Lesser General Public License * @module WoltLabSuite/Core/Ui/Redactor/Code */ -define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Dialog'], function (EventHandler, EventKey, Language, StringUtil, DomUtil, UiDialog) { +define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Dialog', './PseudoHeader'], function (EventHandler, EventKey, Language, StringUtil, DomUtil, UiDialog, UiRedactorPseudoHeader) { "use strict"; var _headerHeight = 0; @@ -82,12 +82,7 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di var pre = event.currentTarget; if (_headerHeight === 0) { - _headerHeight = ~~window.getComputedStyle(pre).paddingTop.replace(/px$/, ''); - - var styles = window.getComputedStyle(pre, '::before'); - _headerHeight += ~~styles.paddingTop.replace(/px$/, ''); - _headerHeight += ~~styles.height.replace(/px$/, ''); - _headerHeight += ~~styles.paddingBottom.replace(/px$/, ''); + _headerHeight = UiRedactorPseudoHeader.getHeight(pre); } // check if the click hit the header diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/PseudoHeader.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/PseudoHeader.js new file mode 100644 index 0000000000..c60a5e2fe3 --- /dev/null +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/PseudoHeader.js @@ -0,0 +1,46 @@ +/** + * Helper class to deal with clickable block headers using the pseudo + * `::before` element. + * + * @author Alexander Ebert + * @copyright 2001-2016 WoltLab GmbH + * @license GNU Lesser General Public License + * @module WoltLabSuite/Core/Ui/Redactor/PseudoHeader + */ +define([], function() { + "use strict"; + + return { + /** + * Returns the height within a click should be treated as a click + * within the block element's title. This method expects that the + * `::before` element is used and that removing the attribute + * `data-title` does cause the title to collapse. + * + * @param {Element} element block element + * @return {int} clickable height spanning from the top border down to the bottom of the title + */ + getHeight: function (element) { + var height = ~~window.getComputedStyle(element).paddingTop.replace(/px$/, ''); + + var styles = window.getComputedStyle(element, '::before'); + height += ~~styles.paddingTop.replace(/px$/, ''); + height += ~~styles.paddingBottom.replace(/px$/, ''); + + var titleHeight = ~~styles.height.replace(/px$/, ''); + if (titleHeight === 0) { + // firefox returns garbage for pseudo element height + // https://bugzilla.mozilla.org/show_bug.cgi?id=925694#c7 + + titleHeight = element.scrollHeight; + element.classList.add('redactorCalcHeight'); + titleHeight -= element.scrollHeight; + element.classList.remove('redactorCalcHeight'); + } + + height += titleHeight; + + return height; + } + } +}); diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Quote.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Quote.js index f5609ad0a3..6e3ed0e9a6 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Quote.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Quote.js @@ -6,7 +6,7 @@ * @license GNU Lesser General Public License * @module WoltLabSuite/Core/Ui/Redactor/Quote */ -define(['Core', 'EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Dialog'], function (Core, EventHandler, EventKey, Language, StringUtil, DomUtil, UiDialog) { +define(['Core', 'EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Dialog', './PseudoHeader'], function (Core, EventHandler, EventKey, Language, StringUtil, DomUtil, UiDialog, UiRedactorPseudoHeader) { "use strict"; var _headerHeight = 0; @@ -26,6 +26,7 @@ define(['Core', 'EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util' */ init: function(editor, button) { this._quote = null; + this._quotes = elByTag('woltlab-quote', editor.$editor[0]); this._editor = editor; this._elementId = this._editor.$element[0].id; @@ -77,7 +78,6 @@ define(['Core', 'EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util' this._editor.selection.restore(); var content = data.content; - console.debug(data); if (data.isText) { content = StringUtil.escapeHTML(content); content = '

' + content + '

'; @@ -118,10 +118,13 @@ define(['Core', 'EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util' * @protected */ _observeLoad: function() { - elBySelAll('woltlab-quote', this._editor.$editor[0], (function(quote) { + var quote; + for (var i = 0, length = this._quotes.length; i < length; i++) { + quote = this._quotes[i]; + quote.addEventListener(WCF_CLICK_EVENT, this._callbackEdit); this._setTitle(quote); - }).bind(this)); + } }, /** @@ -134,12 +137,7 @@ define(['Core', 'EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util' var quote = event.currentTarget; if (_headerHeight === 0) { - _headerHeight = ~~window.getComputedStyle(quote).paddingTop.replace(/px$/, ''); - - var styles = window.getComputedStyle(quote, '::before'); - _headerHeight += ~~styles.paddingTop.replace(/px$/, ''); - _headerHeight += ~~styles.height.replace(/px$/, ''); - _headerHeight += ~~styles.paddingBottom.replace(/px$/, ''); + _headerHeight = UiRedactorPseudoHeader.getHeight(quote); } // check if the click hit the header diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Spoiler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Spoiler.js index 5d6f9438e6..744f1d4c56 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Spoiler.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Redactor/Spoiler.js @@ -6,7 +6,7 @@ * @license GNU Lesser General Public License * @module WoltLabSuite/Core/Ui/Redactor/Spoiler */ -define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Dialog'], function (EventHandler, EventKey, Language, StringUtil, DomUtil, UiDialog) { +define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Dialog', './PseudoHeader'], function (EventHandler, EventKey, Language, StringUtil, DomUtil, UiDialog, UiRedactorPseudoHeader) { "use strict"; var _headerHeight = 0; @@ -80,12 +80,7 @@ define(['EventHandler', 'EventKey', 'Language', 'StringUtil', 'Dom/Util', 'Ui/Di var spoiler = event.currentTarget; if (_headerHeight === 0) { - _headerHeight = ~~window.getComputedStyle(spoiler).paddingTop.replace(/px$/, ''); - - var styles = window.getComputedStyle(spoiler, '::before'); - _headerHeight += ~~styles.paddingTop.replace(/px$/, ''); - _headerHeight += ~~styles.height.replace(/px$/, ''); - _headerHeight += ~~styles.paddingBottom.replace(/px$/, ''); + _headerHeight = UiRedactorPseudoHeader.getHeight(spoiler); } // check if the click hit the header diff --git a/wcfsetup/install/files/style/bbcode/code.scss b/wcfsetup/install/files/style/bbcode/code.scss index bc538c11a6..013cca6d77 100644 --- a/wcfsetup/install/files/style/bbcode/code.scss +++ b/wcfsetup/install/files/style/bbcode/code.scss @@ -9,7 +9,7 @@ position: relative; white-space: pre; - &::before { + &:not(.redactorCalcHeight)::before { content: attr(data-title); cursor: pointer; display: block; diff --git a/wcfsetup/install/files/style/bbcode/quote.scss b/wcfsetup/install/files/style/bbcode/quote.scss index b2067899fa..ecaca39238 100644 --- a/wcfsetup/install/files/style/bbcode/quote.scss +++ b/wcfsetup/install/files/style/bbcode/quote.scss @@ -21,7 +21,7 @@ woltlab-quote, } } -woltlab-quote::before { +woltlab-quote:not(.redactorCalcHeight)::before { content: attr(data-title); cursor: pointer; display: block; diff --git a/wcfsetup/install/files/style/bbcode/spoiler.scss b/wcfsetup/install/files/style/bbcode/spoiler.scss index 9792c1aaad..275ee9660b 100644 --- a/wcfsetup/install/files/style/bbcode/spoiler.scss +++ b/wcfsetup/install/files/style/bbcode/spoiler.scss @@ -7,7 +7,7 @@ padding: 10px 20px; position: relative; - &::before { + &:not(.redactorCalcHeight)::before { content: attr(data-title); cursor: pointer; display: block;