From 5a0f6a45e94fde3726021b146f4e9bb3058679f7 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 21 Mar 2017 18:06:04 +0100 Subject: [PATCH] Atlantic popups. WIP #1112 --- js/libs/fluidbook/special/atlanticdownload.js | 190 ++++++++++++++++++ style/special/atlanticdownload.css | 138 +++++++++++++ style/special/atlanticdownload.less | 164 +++++++++++++++ 3 files changed, 492 insertions(+) diff --git a/js/libs/fluidbook/special/atlanticdownload.js b/js/libs/fluidbook/special/atlanticdownload.js index e69de29b..f0a378e1 100644 --- a/js/libs/fluidbook/special/atlanticdownload.js +++ b/js/libs/fluidbook/special/atlanticdownload.js @@ -0,0 +1,190 @@ +var AtlanticDL = { + popupID: 'AtlanticDownloadPopup', + currentProduct: '', + data: [], + languages: [], + currentLanguage: '', + + init: function() { + var self = AtlanticDL; + + $(document).on('click', '[data-atlanticdownload-ref]', function (e) { + self.filterData($(this).data('atlanticdownload-ref')); + self.openPopup(); + return false; + }); + + $(document).on('click touchend', '#' + self.popupID + ' .close', function () { + $(this).closest('#' + self.popupID).remove(); + return false; + }); + + $(document).on('click', '.language-link', function () { + + self.currentLanguage = $(this).data('language'); + $('#AtlanticDownloads').html(self.generateRows()); + + return false; + }); + }, + + filterData: function(product) { + + // Normalise reference + product = String(product).toLowerCase(); + //fb('Current Product: ' + product); + + // Reset data each time + AtlanticDL.data = []; + AtlanticDL.languages = []; + AtlanticDL.currentProduct = product; + + $.each(DATAS.basketReferences.Feuil1, function (k, v) { + if (product === $.trim(String(v[0])).toLowerCase()) { + AtlanticDL.data.push({ + 'product': v[0], + 'title': v[1], + 'reference': v[2], + 'language': v[3], + 'download_low': v[4], + 'download_high': v[5] + }); + + AtlanticDL.languages.addUnique(v[3]); + } + }); + + //console.info('DATA: ' + AtlanticDL.data.length + ' items'); + //console.table(AtlanticDL.data); + + // //var languages = data.map(function(el) { return el.language; }); + // console.info('LANGUAGES: ' + AtlanticDL.languages.length); + // console.info(AtlanticDL.languages.map(function(l) { + // return AtlanticDL.getLanguage(l); + // })); + }, + + openPopup: function() { + + var self = this, + html = ''; + + // Close icon + html += ''; + + html += '
'; + html += '

Language

'; + html += ''; + html += '
'; + + html += '
'; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += ''; + html += this.generateRows(); + html += ''; + html += '
File ExplorerReferencesDownload
LowHigh
'; + html += '
'; // .atlantic-downloads + + // Remove any existing popup + $('#' + this.popupID).remove(); + + $('body').append('
' + html + '
'); + }, + + generateRows: function(language) { + + language = language || this.getCurrentLanguage(); + + // Highlight current language in the menu + $('.language-link') + .removeClass('active') + .filter('[data-language="'+ language +'"]') + .addClass('active'); + + // console.info('Generating rows for language: ' + language); + + return this.data.filter(function(d) { + return d.language === language; + }).map(function(d) { + + var res = '', + dl_low = '-', + dl_high = '-', + reference = d.reference || '-'; + + if (d.download_low) dl_low = ''; + if (d.download_high) dl_high = ''; + + res += ''; + res += ''+ d.title +''; + res += ''+ reference +''; + res += ''+ dl_low +''; + res += ''+ dl_high +''; + res += ''; + + return res; + + }).join(''); + + }, + + getLanguage: function(code) { + + // Language lookup map + var languages = { + 'EN': 'English', + 'ES': 'Spanish', + 'FR': 'French', + 'RU': 'Russian', + 'GE': 'German', + 'BG': 'Bulgarian', + 'UK': 'Ukrainian', + 'SL': 'Slovenian', + 'HR': 'Croatian', + 'LT': 'Lithuanian', + 'ET': 'Estonian', + 'MK': 'Macedonian', + 'EE': 'Greek' + } + + return languages[code] || code; // Return the original code if it's not found in the lookup + }, + + getCurrentLanguage: function() { + // Ensure that we have a valid current language (must exist in the current data list) + if (this.languages.indexOf(this.currentLanguage) == -1) { + this.currentLanguage = this.languages[0]; + } + return this.currentLanguage; + } +}; + +//console.table(DATAS.basketReferences.Feuil1); + +$(function () { + $(fluidbook).on('fluidbookready', AtlanticDL.init); + // $(window).on('fluidbookresize', AtlanticDL.resize); +}); + +// Allow adding of elements to an array without duplicate values +Array.prototype.addUnique = function(elem) { + if (this.indexOf(elem) == -1) { + this.push(elem); + } +} \ No newline at end of file diff --git a/style/special/atlanticdownload.css b/style/special/atlanticdownload.css index e69de29b..0cac0c31 100644 --- a/style/special/atlanticdownload.css +++ b/style/special/atlanticdownload.css @@ -0,0 +1,138 @@ +#AtlanticDownloadPopup { + position: absolute; + top: 50%; + left: 50%; + width: 80%; + max-width: 1000px; + max-height: 70%; + transform: translateX(-50%) translateY(-50%); + z-index: 1000; + background: #bab4a7; + box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.25); + font-family: 'Open Sans', sans-serif; + font-size: 15px; + font-weight: 300; + color: #5d5c58; +} +#AtlanticDownloadPopup .close { + display: inline-block; + width: 16px; + height: 16px; + position: absolute; + top: 5px; + right: 5px; +} +#AtlanticDownloadPopup .close:hover { + opacity: 0.7; +} +#AtlanticDownloadPopup .close:before, +#AtlanticDownloadPopup .close:after { + content: ''; + position: absolute; + height: 1px; + width: 100%; + top: 50%; + left: 0; + margin-top: -1px; + background: #fff; +} +#AtlanticDownloadPopup .close:before { + transform: rotate(45deg); +} +#AtlanticDownloadPopup .close:after { + transform: rotate(-45deg); +} +.language-wrapper { + width: 210px; + float: left; + padding-bottom: 10px; +} +.language-heading { + text-transform: uppercase; + color: #fff; + font-size: 14px; + padding-left: 20px; + line-height: 89px; +} +.language-list { + list-style-type: none; +} +.language-link { + display: block; + line-height: 40px; + padding-left: 20px; +} +.language-link.active { + position: relative; +} +.language-link.active:after { + content: ''; + display: inline-block; + width: 10px; + height: 10px; + border-width: 1px 1px 0 0; + border-style: solid; + border-color: #5d5c58; + transform: rotate(45deg) translateY(-50%); + position: absolute; + right: 18px; + top: 50%; + margin-top: -1px; +} +.language-link:hover, +.language-link.active { + background-color: #dddad3; +} +.atlantic-downloads { + overflow: hidden; +} +.atlantic-downloads table { + border-collapse: collapse; + border-spacing: 0; + border: none; + width: 100%; +} +.atlantic-downloads tr.main-heading th { + vertical-align: top; + padding-top: 35px; + padding-bottom: 5px; + background: #a9a191; + font-size: 14px; + text-align: left; +} +.atlantic-downloads tr.sub-heading th { + font-weight: 300; + font-size: 11px; + padding-top: 5px; + padding-bottom: 10px; +} +.atlantic-downloads tr th:last-of-type, +.atlantic-downloads tr.sub-heading th { + background-color: #7d776b; + text-align: center; +} +.atlantic-downloads th { + color: #fff; + text-transform: uppercase; + padding-left: 15px; + padding-right: 15px; +} +.atlantic-downloads tbody tr { + background-color: #fff; +} +.atlantic-downloads tbody tr:nth-of-type(odd) { + background-color: #f2f1ef; +} +.atlantic-downloads tbody td { + padding: 10px; +} +.atlantic-download { + text-align: center; +} +.atlantic-download-icon { + display: inline-block; + width: 18px; + height: 17px; + background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTggMTYuNyI+PHN0eWxlPi5zdDB7ZmlsbDojNUQ1QzU4O308L3N0eWxlPjxnIGlkPSJYTUxJRF81OV8iPjxnIGlkPSJYTUxJRF82M18iPjxwYXRoIGlkPSJYTUxJRF82NF8iIGNsYXNzPSJzdDAiIGQ9Ik0xNy41IDguMWMtLjMgMC0uNS4yLS41LjV2NC43YzAgMS4zLTEgMi4zLTIuMyAyLjNIMy4zYy0xLjMgMC0yLjMtMS0yLjMtMi4zVjguNmMwLS4zLS4yLS41LS41LS41cy0uNS4yLS41LjV2NC44YzAgMS44IDEuNSAzLjMgMy4zIDMuM2gxMS4zYzEuOCAwIDMuMy0xLjUgMy4zLTMuM1Y4LjZjLjEtLjItLjEtLjUtLjQtLjV6bTAgMCIvPjwvZz48cGF0aCBpZD0iWE1MSURfNjBfIiBjbGFzcz0ic3QwIiBkPSJNOC42IDEyLjZjLjEuMS4yLjIuNC4yLjEgMCAuMyAwIC40LS4ybDMuMy0zLjNjLjItLjIuMi0uNSAwLS43LS4yLS4yLS41LS4yLS43IDBMOS41IDExVi41QzkuNS4yIDkuMyAwIDkgMHMtLjUuMi0uNS41VjExTDYuMSA4LjZjLS4yLS4yLS41LS4yLS43IDAtLjIuMi0uMi41IDAgLjdsMy4yIDMuM3ptMCAwIi8+PC9nPjwvc3ZnPg==') center no-repeat; + background-size: contain; +} diff --git a/style/special/atlanticdownload.less b/style/special/atlanticdownload.less index e69de29b..a3d0e531 100644 --- a/style/special/atlanticdownload.less +++ b/style/special/atlanticdownload.less @@ -0,0 +1,164 @@ +#AtlanticDownloadPopup { + position: absolute; + top: 50%; + left: 50%; + width: 80%; + max-width: 1000px; + max-height: 70%; + transform: translateX(-50%) translateY(-50%); + z-index: 1000; + background: #bab4a7; + box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.25); + font-family: 'Open Sans', sans-serif; + font-size: 15px; + font-weight: 300; + color: #5d5c58; + + .close { + display: inline-block; + width: 16px; // Width and height must be an even number or X doesn't align properly + height: 16px; + position: absolute; + top: 5px; + right: 5px; + + &:hover { + opacity: 0.7; + } + + &:before, &:after { + content: ''; + position: absolute; + height: 1px; + width: 100%; + top: 50%; + left: 0; + margin-top: -1px; + background: #fff; + } + &:before { + transform: rotate(45deg); + } + &:after { + transform: rotate(-45deg); + } + } +} + +.language { + &-wrapper { + width: 210px; + float: left; + padding-bottom: 10px; + } + + &-heading { + text-transform: uppercase; + color: #fff; + font-size: 14px; + padding-left: 20px; + line-height: 89px; // Needs to match height of in table + } + + &-list { + list-style-type: none; + } + + &-link { + display: block; + line-height: 40px; // Needs to match row height of table + padding-left: 20px; + + &.active { + position: relative; + + // Right > arrow. Just an invisible square with top and right borders, rotated 45deg + &:after { + content: ''; + display: inline-block; + width: 10px; + height: 10px; + border-width: 1px 1px 0 0; + border-style: solid; + border-color: #5d5c58; + transform: rotate(45deg) translateY(-50%); + position: absolute; + right: 18px; + top: 50%; + margin-top: -1px; // Slightly better centering visually + } + } + + &:hover, &.active { + background-color: #dddad3; + } + } +} + +.atlantic-downloads { + overflow: hidden; + + table { + border-collapse: collapse; + border-spacing: 0; + border: none; + width: 100%; + } + + tr { + &.main-heading th { + vertical-align: top; + padding-top: 35px; + padding-bottom: 5px; + background: #a9a191; + font-size: 14px; + text-align: left; + } + + &.sub-heading th { + font-weight: 300; + font-size: 11px; + padding-top: 5px; + padding-bottom: 10px; + } + + th:last-of-type, &.sub-heading th { + background-color: #7d776b; + text-align: center; + } + } + + th { + color: #fff; + text-transform: uppercase; + padding-left: 15px; + padding-right: 15px; + } + + tbody { + tr { + background-color: #fff; + + &:nth-of-type(odd) { + background-color: #f2f1ef; + } + } + + td { + padding: 10px; + } + } + +} + +.atlantic-download { + text-align: center; +} + +.atlantic-download-icon { + display: inline-block; + width: 18px; + height: 17px; + background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTggMTYuNyI+PHN0eWxlPi5zdDB7ZmlsbDojNUQ1QzU4O308L3N0eWxlPjxnIGlkPSJYTUxJRF81OV8iPjxnIGlkPSJYTUxJRF82M18iPjxwYXRoIGlkPSJYTUxJRF82NF8iIGNsYXNzPSJzdDAiIGQ9Ik0xNy41IDguMWMtLjMgMC0uNS4yLS41LjV2NC43YzAgMS4zLTEgMi4zLTIuMyAyLjNIMy4zYy0xLjMgMC0yLjMtMS0yLjMtMi4zVjguNmMwLS4zLS4yLS41LS41LS41cy0uNS4yLS41LjV2NC44YzAgMS44IDEuNSAzLjMgMy4zIDMuM2gxMS4zYzEuOCAwIDMuMy0xLjUgMy4zLTMuM1Y4LjZjLjEtLjItLjEtLjUtLjQtLjV6bTAgMCIvPjwvZz48cGF0aCBpZD0iWE1MSURfNjBfIiBjbGFzcz0ic3QwIiBkPSJNOC42IDEyLjZjLjEuMS4yLjIuNC4yLjEgMCAuMyAwIC40LS4ybDMuMy0zLjNjLjItLjIuMi0uNSAwLS43LS4yLS4yLS41LS4yLS43IDBMOS41IDExVi41QzkuNS4yIDkuMyAwIDkgMHMtLjUuMi0uNS41VjExTDYuMSA4LjZjLS4yLS4yLS41LS4yLS43IDAtLjIuMi0uMi41IDAgLjdsMy4yIDMuM3ptMCAwIi8+PC9nPjwvc3ZnPg==') center no-repeat; + background-size: contain; +} \ No newline at end of file -- 2.39.5