{"version":3,"sources":["webpack:///./widgets/readingTab.js"],"names":["WG","ReadingTab","$el","_classCallCheck","this","$elObj","$","$iconList","find","$iconItem","isIphone","hasClass","key","value","initUtilityBar","setReadingTab","showReadingTabIcon","setOpenReadingTabBtn","setPosition","classList","add","_this","$readingTabToggle","concat","$readingTabClose","$readingTabRevealBtn","$shareToggle","$overlay","on","modal","showReadingTab","revealMobileBtns","document","addEventListener","e","keyCode","percent","i","css","_this2","wg","maxY","body","scrollHeight","scroll","currentY","window","pageYOffset","innerHeight","Math","floor","text","each","index","item","updatePercentageCircle","trigger","doShow","$wg","addClass","removeClass","_this3","utils","checkBP","scrollTop","$content","readingTabHeight","height","availableHeight","outerHeight","length","totalWidth","contains","calculateWidth","icon","curStyle","getComputedStyle","offsetWidth","parseFloat","marginLeft","marginRight","$icon","iconWidth"],"mappings":"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","file":"59.js","sourcesContent":["// CONSTANTS are all caps.\nconst NS = \"ReadingTab\";\nconst CLS = \"readingTab\";\nconst WG = \".\" + CLS + \"-\";\nconst CLS_MOB_REVEALED = \"is-mobileBtnsRevealed\";\nconst CLS_ICON_SHOW = 'is-iconShow';\n\n// Import stuff here if you need to or even better to import them dynamically\n// for ex. of dynamic import check out src/scripts/loadWg/readingTab.js using Webpack dynamic imports as chunks.\n// import $ from 'jquery'\n\nimport utils from '../utils';\n\nexport class ReadingTab {\n\n\tconstructor($el) {\n\t\t// $el is the widget node return by the loadReadingTab function\n\t\tthis.$el = $el;\n\t\tthis.$elObj = $($el);\n\t\tthis.$iconList = this.$elObj.find(WG + 'icons');\n\t\tthis.$iconItem = this.$elObj.find(WG + 'icon');\n\n\t\tthis.isIphone = $('body').hasClass('is-iPhone');\n\t}\n\n\tinit() {\n\t\tthis.initUtilityBar();\n\t\tthis.setReadingTab();\n\t\tthis.showReadingTabIcon();\n\t\tthis.setOpenReadingTabBtn();\n\t\tthis.setPosition();\n\n\t\tthis.$el.classList.add(\"is-readingTabReady\");\n\t}\n\n\tinitUtilityBar() {\n\t\tconst _this = this;\n\t\tconst $el = $(this.$el);\n\t\tconst $readingTabToggle = $el.find(`${WG}icon--reading`);\n\t\tconst $readingTabClose = $el.find(`${WG}icon--close`);\n\t\tconst $readingTabRevealBtn = $el.find(`${WG}icon--revealBtn`);\n\t\tconst $shareToggle = $el.find(`${WG}icon--share`);\n\t\tconst $overlay = $el.find(`${WG}overlay`);\n\n\t\t$shareToggle.on('click', () => {\n\t\t\t$('#socialShareModal').modal('show');\n\t\t});\n\n\t\t$readingTabToggle.on('click', function () {\n\t\t\tif ($(this).hasClass('active')) {\n\t\t\t\t_this.showReadingTab(false);\n\t\t\t} else {\n\t\t\t\t_this.showReadingTab(true);\n\t\t\t}\n\t\t});\n\n\t\t$readingTabClose.on('click', function () {\n\t\t\t_this.showReadingTab(false);\n\t\t});\n\n\t\t$readingTabRevealBtn.on('click', function () {\n\t\t\t_this.revealMobileBtns(true);\n\t\t});\n\n\t\t$overlay.on('click', () => {\n\t\t\t_this.showReadingTab(false);\n\t\t});\n\n\t\tdocument.addEventListener('keyup', e =>\n\t\t\te.keyCode === 27 ? _this.showReadingTab(false) : ''\n\t\t);\n\t}\n\n    // CSS Percentage Circle\n    // @ref https://jsfiddle.net/ggj55sqo/\n    updatePercentageCircle($el, percent) {\n        let i = percent * 360 / 100;\n        if (i <= 180)\n            $el.css('background-image', 'linear-gradient(' + (90 + i) + 'deg, transparent 50%, #fff 50%),linear-gradient(90deg, #fff 50%, transparent 50%)');\n        else\n            $el.css('background-image', 'linear-gradient(' + (i - 90) + 'deg, transparent 50%, #000 50%),linear-gradient(90deg, #fff 50%, transparent 50%)');\n    }\n\n\tsetReadingTab() {\n        let wg = $(this.$el);\n        let maxY = document.body.scrollHeight;\n\n\t\t$(document).scroll((e) => {\n\t\t\tlet currentY = window.pageYOffset + window.innerHeight;\n\n\t\t\t// @ref https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript\n\t\t\tlet percent = Math.floor((currentY / maxY) * 100);\n\t\t\t// Limit percentage to 100 to prevent ridiculous things from happening\n\t\t\tpercent = percent > 100 ? 100 : percent;\n\t\t\twg.find(WG + 'percentText').text(percent + '%');\n\t\t\twg.find(WG + 'percent').each((index, item) => this.updatePercentageCircle($(item), percent));\n        });\n\t\t$(document).trigger('scroll');\n\t}\n\n\t/**\n\t * On iPhone the icons are collapsed by default because they get it the way.\n\t* They can't sit right at the bottom like originally intended because bottom 30px on iPhone is reserved for the action bar.\n\t */\n\trevealMobileBtns(doShow) {\n\t\tlet $wg = $(this.$el);\n\t\tif(doShow) \t$wg.addClass(CLS_MOB_REVEALED);\n\t\telse\t\t$wg.removeClass(CLS_MOB_REVEALED);\n\n\t\tthis.setPosition();\n\t}\n\n\tshowReadingTabIcon() {\n\t\tlet $wg = $(this.$el);\n\n\t\t$(window).on('scroll', () => {\n\t\t\tthis.revealMobileBtns(false);\n\t\t\tif(utils.checkBP('tp')) {\n\t\t\t\tif($(window).scrollTop() > 100) {\n\t\t\t\t\t$wg.addClass(CLS_ICON_SHOW);\n\t\t\t\t} else {\n\t\t\t\t\tif(!$wg.hasClass('is-expanded')) $wg.removeClass(CLS_ICON_SHOW);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\t$(window).on('resize', () => {\n\t\t\tthis.revealMobileBtns(false);\n\t\t\tif(!utils.checkBP('tp')) {\n\t\t\t\t$wg.removeClass(CLS_ICON_SHOW);\n\t\t\t}\n\t\t});\n\t}\n\n\tshowReadingTab(doShow) {\n\t\tconst $el = $(this.$el);\n\t\tconst $readingTabToggle = $el.find(`${WG}icon--reading`);\n\t\tconst $content = $el.find(`${WG}content`);\n\t\tlet readingTabHeight = $content.height();\n\t\tlet availableHeight = $(window).outerHeight() - $('.siteHeader').outerHeight() - $('.readingTab-icons').outerHeight() - 10;\n\n\t\tif(doShow) {\n\t\t\tthis.revealMobileBtns(true);\n\n\t\t\tif (readingTabHeight > availableHeight) {\n\t\t\t\treadingTabHeight = availableHeight;\n\t\t\t\t$content.css({\n\t\t\t\t\t'max-height': `${readingTabHeight}px`,\n\t\t\t\t\t'overflow-y': 'auto'\n\t\t\t\t});\n\t\t\t}\n\n\t\t\t// had to use 100vh (instead of 100%) because iPhone didn't work\n\t\t\t$el.css('top', `calc(100vh - ${readingTabHeight}px)`).addClass('is-expanded');\n\t\t\t$readingTabToggle.addClass('active');\n\t\t\t// $('body').addClass('no-scroll');\n\n\t\t} else {\n\t\t\t$el.css('top', '').removeClass('is-expanded');\n\t\t\t$readingTabToggle.removeClass('active');\n\t\t\t// $('body').removeClass('no-scroll');\n\t\t\t$content.css({\n\t\t\t\t'max-height': '',\n\t\t\t\t'overflow-y': ''\n\t\t\t});\n\t\t\tthis.revealMobileBtns(false);\n\t\t}\n\t}\n\n\tsetOpenReadingTabBtn() {\n\t\tvar _this = this;\n\t\t$('.openReadingTab').on('click', (e) => {\n\t\t\tlet $readingTabToggle = $('.siteFooter .readingTab').find(`.readingTab-icon--reading`);\n\n\t\t\tif ($readingTabToggle.hasClass('active')) {\n\t\t\t\t_this.showReadingTab(false);\n\t\t\t} else {\n\t\t\t\t_this.showReadingTab(true);\n\t\t\t}\n\t\t});\n\t}\n\n\t// set readingTab-icons position (translateX)\n\tsetPosition() {\n\t\tif (this.isIphone && this.$iconItem.length > 0) {\n\t\t\tlet totalWidth = 0;\n\n\t\t\tif (!this.$el.classList.contains(CLS_ICON_SHOW)) {\n\t\t\t\tthis.$iconList.css('transform', '');\n\t\t\t} else if (this.$el.classList.contains(CLS_MOB_REVEALED)) {\n\t\t\t\tthis.$iconList.css('transform', `translateY(-95px) translateX(0)`);\n\t\t\t} else {\n\t\t\t\tlet calculateWidth = (icon) => {\n\t\t\t\t\tlet curStyle = window.getComputedStyle(icon);\n\t\t\t\t\treturn icon.offsetWidth + parseFloat(curStyle.marginLeft) + parseFloat(curStyle.marginRight);\n\t\t\t\t};\n\n\t\t\t\tthis.$iconItem.each((i, icon) => {\n\t\t\t\t\ttotalWidth += calculateWidth(icon);\n\t\t\t\t});\n\n\t\t\t\t// get 1 icon as substraction to total width so, revealBtn willl appear\n\t\t\t\tlet $icon = this.$iconItem[0];\n\t\t\t\tlet iconWidth = calculateWidth($icon) + 4; // add offset padding\n\n\t\t\t\tthis.$iconList.css('transform', `translateY(-95px) translateX(${totalWidth - iconWidth}px)`);\n\t\t\t}\n\t\t}\n\t}\n}\n"],"sourceRoot":""}