From e4fa9179a6c2cab6de5ca373809f53b9a5eb917c Mon Sep 17 00:00:00 2001 From: aksm Date: Wed, 1 Feb 2023 16:25:39 -0500 Subject: [PATCH] Override IA Bookreader buildShareDiv and add javascript and css to make everything funtion and look reasonable. --- css/iabookreader.css | 83 ++++++++++++++++ js/iiif-iabookreader_strawberry.js | 153 ++++++++++++++++++++++++++++- 2 files changed, 234 insertions(+), 2 deletions(-) diff --git a/css/iabookreader.css b/css/iabookreader.css index 330188c9..027d62ab 100644 --- a/css/iabookreader.css +++ b/css/iabookreader.css @@ -73,6 +73,7 @@ div.viewpLeft, div.viewpRight { display: inline-block; padding: 1%; } + /* jquery mmenu */ #BRmobileMenu.mm-menu { --mm-color-background: #b4b7c1; @@ -83,4 +84,86 @@ div.viewpLeft, div.viewpRight { } #BRmobileMenu.mm-menu_navbar_top-1 .mm-panels { top: calc(var(--mm-navbar-size) * 1.2); +} + +/* social share */ +.BRshare .share-social .form-check { + line-height: 1.5em; +} +.BRshare .form-check .form-check-input { + float: none; +} +.BRfloat label.sub.open-to-this-page.form-check-label { + padding: 0; + display: inline-block; + margin: 0 5px; +} +.BRshare .share-twitter, .BRshare a.btn.btn-primary.share-twitter, .BRmobileShare a.btn.share-twitter { + background-color: #429aff !important; + border-color: #429aff !important; + color: #fff !important; + white-space: nowrap; +} +.BRshare .share-facebook, .BRshare a.btn.share-facebook, .BRmobileShare a.btn.share-facebook { + background-color: #3a5998 !important; + border-color: #3a5998 !important; + color: #fff !important; + white-space: nowrap; +} +.BRshare .share-email, .BRshare a.btn.share-email, .BRmobileShare a.btn.share-email { + background-color: #c1c1c1 !important; + border-color: #c1c1c1 !important; + color: #fff !important; + white-space: nowrap; +} +.BRshare a.btn.btn-primary.share-twitter:hover, .BRmobileShare a.btn.share-twitter:hover { + border-color: #429aff !important; +} +.BRshare a.btn.share-facebook:hover, .BRmobileShare a.btn.share-facebook:hover { + border-color: #3a5998 !important; +} +.BRshare a.btn.share-email:hover, .BRmobileShare a.btn.share-email:hover { + border-color: #c1c1c1 !important; +} +.BRshare .row { + margin-top: 15px; +} +.BRshare a.btn.btn-primary, .BRmobileShare a.btn.btn-primary { + width: 125px; +} +.BRmobileShare .col-sm-12 { + margin-bottom: 15px; +} +.BRshare .share-social button { + background-color: #c1c1c1; + margin-top: 15px; +} +.BRshare .share-social button { + border-color: #c1c1c1; +} +.BRmobileMenu div.share-social button { + background-color: #8a8f9e; + margin-top: 15px; + margin-bottom: 20px; +} +.BRmobileMenu div.share-social button:hover { + border-color: #8a8f9e; +} +@media (max-width: 800px) { + .BRmobileShare i.BRicon.fb { + width: 34px; + height: 34px; + background-position: -1603px center; + } + .BRmobileShare i.BRicon.twitter { + width: 34px; + height: 34px; + background-position: -1643px center; + } + .BRmobileShare i.BRicon.email { + width: 34px; + height: 34px; + background-position: -1683px center; + } + } \ No newline at end of file diff --git a/js/iiif-iabookreader_strawberry.js b/js/iiif-iabookreader_strawberry.js index 8f877348..955116ee 100644 --- a/js/iiif-iabookreader_strawberry.js +++ b/js/iiif-iabookreader_strawberry.js @@ -4,7 +4,7 @@ Drupal.behaviors.format_strawberryfield_iabookreader_initiate = { attach: function(context, settings) { - $('.strawberry-iabook-item[data-iiif-infojson]').once('attache_iab').each(function (index, value) { + $('.strawberry-iabook-item[data-iiif-infojson]').once('attach_iab').each(function (index, value) { // Get the node uuid for this element var element_id = $(this).attr("id"); var strawberrySettings = drupalSettings.format_strawberryfield.iabookreader[element_id]; @@ -50,7 +50,9 @@ }); } - })}} + }); + } + } })(jQuery, Drupal, drupalSettings); // override setupTooltips() @@ -58,6 +60,153 @@ BookReader.prototype.setupTooltips = function() { }; +BookReader.prototype.buildShareDiv = function(e) { + var bookTitle = this.bookTitle; + var sharePageLocation = document.URL; + var shareBookLocation = sharePageLocation.replace(/#.*/, ""); + var mobileId = ''; + if (e[0].classList.contains('BRmobileShare')) { + mobileId = '-mm'; + } + var shareTitle = document.createElement('div'); + shareTitle.classList.add('share-title'); + shareTitle.textContent = 'Share this book'; + + var shareBody = document.createElement('div'); + shareBody.classList.add('share-social'); + + var shareCheck = document.createElement('div'); + shareCheck.classList.add('form-check'); + var shareCheckInput = document.createElement('input'); + shareCheckInput.type = 'checkbox'; + var shareCheckInputId = 'page-book-check' + mobileId; + shareCheckInput.id = shareCheckInputId; + shareCheckInput.classList.add('thispage-social', 'form-check-input'); + var shareUrl = shareBookLocation; + shareCheckInput.addEventListener('click', function () { + if (this.checked) { + shareUrl = sharePageLocation; + } else { + shareUrl = shareBookLocation; + } + var shareLinks = document.getElementsByClassName('page-book-update'); + for (var i = 0; i < shareLinks.length; i++) { + var shareLink = shareLinks[i]; + var shareLinkUrl = new URL(shareLink.href); + var shareLinksearchParams = shareLinkUrl.searchParams; + if (shareLink.classList.contains('share-twitter')) { + shareLinksearchParams.set('url', shareUrl); + } else if (shareLink.classList.contains('share-facebook')) { + shareLinksearchParams.set('u', shareUrl); + } else if (shareLink.classList.contains('share-email')) { + shareLinksearchParams.set('body', encodeURI(bookTitle + '\n\n' + shareUrl)); + } + shareLinkUrl.search = shareLinksearchParams.toString(); + shareLink.href = shareLinkUrl.toString(); + } + }); + var shareCheckLabel = document.createElement('label'); + shareCheckLabel.classList.add('sub', 'open-to-this-page', 'form-check-label'); + shareCheckLabel.htmlFor = shareCheckInputId; + shareCheckLabel.textContent = 'Open to this page?'; + shareCheck.append(shareCheckInput, shareCheckLabel); + + var shareButtonContainer = document.createElement('div'); + shareButtonContainer.classList.add('container', 'share-buttons'); + var shareButtonRow = document.createElement('div'); + shareButtonRow.classList.add('row'); + + var shareTwitterContainer = document.createElement('div'); + shareTwitterContainer.classList.add('col-sm-12', 'col-md-4'); + var shareTwitterButton = document.createElement('a') + shareTwitterButton.target = '_blank'; + shareTwitterButton.rel = 'noopener noreferrer'; + shareTwitterButton.classList.add('btn', 'btn-primary', 'btn-sm', 'share-twitter', 'page-book-update'); + var twitterShareUrl = 'https://twitter.com/intent/tweet?text=' + bookTitle + '&url='; + shareTwitterButton.href = encodeURI(twitterShareUrl + shareUrl); + var shareTwitterIcon = document.createElement('i'); + shareTwitterIcon.classList.add('BRicon', 'twitter'); + shareTwitterButton.append(shareTwitterIcon, 'Twitter'); + shareTwitterContainer.append(shareTwitterButton); + + var shareFacebookContainer = document.createElement('div'); + shareFacebookContainer.classList.add('col-sm-12', 'col-md-4'); + var shareFacebookButton = document.createElement('a') + shareFacebookButton.target = '_blank'; + shareFacebookButton.rel = 'noopener noreferrer'; + shareFacebookButton.classList.add('btn', 'btn-primary', 'btn-sm', 'share-facebook', 'page-book-update'); + var FacebookShareUrl = 'https://www.facebook.com/sharer.php?u='; + shareFacebookButton.href = FacebookShareUrl + shareUrl; + var shareFacebookIcon = document.createElement('i'); + shareFacebookIcon.classList.add('BRicon', 'fb'); + shareFacebookButton.append(shareFacebookIcon, 'Facebook'); + shareFacebookContainer.append(shareFacebookButton); + + var shareEmailContainer = document.createElement('div'); + shareEmailContainer.classList.add('col-sm-12', 'col-md-4'); + var shareEmailButton = document.createElement('a') + shareEmailButton.classList.add('btn', 'btn-primary', 'btn-sm', 'share-email', 'page-book-update'); + shareEmailButton.target = '_blank'; + shareEmailButton.rel = 'noopener noreferrer'; + var EmailShareUrl = 'mailto:?subject=' + encodeURI(bookTitle) + '&body=' + encodeURI(bookTitle + '\n\n' + shareUrl); + shareEmailButton.href = EmailShareUrl; + var shareEmailIcon = document.createElement('i'); + shareEmailIcon.classList.add('BRicon', 'email'); + shareEmailButton.append(shareEmailIcon, 'Email'); + shareEmailContainer.append(shareEmailButton); + + var sharePage = document.createElement('div'); + sharePage.id = 'share-social-page' + mobileId; + sharePage.classList.add('clipboard-copy-data', 'hidden'); + sharePage.dataset.clipboardCopyContent = 'copy-content-page' + mobileId; + sharePage.dataset.clipboardCopyButton = 'btn'; + sharePage.dataset.clipboardCopyButtonText = 'Copy Link to Page'; + + var sharePageInput = document.createElement('input'); + sharePageInput.id = 'share-social-page-copy' + mobileId; + sharePageInput.type = 'text'; + sharePageInput.name = 'pageview'; + sharePageInput.classList.add('BRpageviewValue', 'copy-content-page' + mobileId, 'form-control'); + sharePageInput.readOnly = true; + sharePageInput.value = sharePageLocation; + + var sharePageContainer = document.createElement('div'); + sharePageContainer.classList.add('col-12'); + sharePageContainer.append(sharePage, sharePageInput); + + var sharePageRow = document.createElement('div'); + sharePageRow.classList.add('row'); + sharePageRow.append(sharePageContainer); + + var shareBook = document.createElement('div'); + shareBook.id = 'share-social-book' + mobileId; + shareBook.classList.add('clipboard-copy-data', 'hidden'); + shareBook.dataset.clipboardCopyContent = 'copy-content-book' + mobileId; + shareBook.dataset.clipboardCopyButton = 'btn'; + shareBook.dataset.clipboardCopyButtonText = 'Copy Link to Book'; + + var shareBookInput = document.createElement('input'); + shareBookInput.id = 'share-social-book-copy' + mobileId; + shareBookInput.type = 'text'; + shareBookInput.name = 'booklink'; + shareBookInput.classList.add('BRbooklinkValue', 'copy-content-book' + mobileId, 'form-control'); + shareBookInput.readOnly = true; + shareBookInput.value = shareBookLocation; + + var shareBookContainer = document.createElement('div'); + shareBookContainer.classList.add('col-12'); + shareBookContainer.append(shareBook, shareBookInput); + + var shareBookRow = document.createElement('div'); + shareBookRow.classList.add('row'); + shareBookRow.append(shareBookContainer); + + shareButtonRow.append(shareTwitterContainer, shareFacebookContainer, shareEmailContainer); + shareButtonContainer.append(shareButtonRow, sharePageRow, shareBookRow); + shareBody.append(shareCheck, shareButtonContainer); + e.append(shareTitle, shareBody); +}; + // Extend buildToolbarElement: add ZoomPage button BookReader.prototype.buildToolbarElement = (function (super_) { return function () {