From 8fdaf04cf5ef42e18a72d528047c8a595dd3a306 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 13 Jan 2026 18:53:54 +0100 Subject: [PATCH] wait #7898 @2 --- .../fluidbook/cart/fluidbook.cart.kimplay.js | 24 +- js/libs/fluidbook/fluidbook.cart.js | 37 +- js/libs/fluidbook/fluidbook.menu.js | 11 +- style/cart/kimplay.less | 177 ++------ style/fluidbook.less | 392 +----------------- style/menu.less | 392 ++++++++++++++++++ 6 files changed, 481 insertions(+), 552 deletions(-) create mode 100644 style/menu.less diff --git a/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js b/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js index 82d2c9b9..56e78a91 100644 --- a/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js +++ b/js/libs/fluidbook/cart/fluidbook.cart.kimplay.js @@ -3,6 +3,7 @@ function FluidbookCartKimplay(cart) { this.cart = cart; this.fluidbook = this.cart.fluidbook; this.data = this.fluidbook.settings.basketReferences; + this.showAddToCartTooltips = false; this.init(); } @@ -17,19 +18,24 @@ FluidbookCartKimplay.prototype = { }, addToCart: function (ref, quantity) { + let view = `
+ ${this.fluidbook.menu.getCaption("", 'small')}
-

${this.data[ref].name}

-
(réf. ${ref})
-
- Quantité souhaitée :
-
- Commentaire (facultatif) -
- +
+
+

${this.data[ref].name}

+
(réf. ${ref})
+
+ Quantité souhaitée :
+
+ Commentaire (facultatif) +
+ +
`; - this.fluidbook.menu.viewWrap(view, 'cart'); + this.fluidbook.menu.openCustomView(view, 'cart-kimplay-qty'); }, _addToCart: function (ref, quantity) { diff --git a/js/libs/fluidbook/fluidbook.cart.js b/js/libs/fluidbook/fluidbook.cart.js index 404f30ee..b9376351 100644 --- a/js/libs/fluidbook/fluidbook.cart.js +++ b/js/libs/fluidbook/fluidbook.cart.js @@ -66,28 +66,31 @@ FluidbookCart.prototype = { $this.instance.addToCart(ref, qty, force); }); - if (refs.length > 1) { - if (force) { - tooltip = $this.fluidbook.l10n.__("the items have been added to your cart"); - } else { - tooltip = $this.fluidbook.l10n.__("the items have been removed from your cart"); - } - } else { - if (force) { - tooltip = $this.fluidbook.l10n.__("the item has been added to your cart"); + if ($this.instance.showAddToCartTooltips == undefined || $this.instance.showAddToCartTooltip) { + + if (refs.length > 1) { + if (force) { + tooltip = $this.fluidbook.l10n.__("the items have been added to your cart"); + } else { + tooltip = $this.fluidbook.l10n.__("the items have been removed from your cart"); + } } else { - tooltip = $this.fluidbook.l10n.__("the item has been removed from your cart"); + if (force) { + tooltip = $this.fluidbook.l10n.__("the item has been added to your cart"); + } else { + tooltip = $this.fluidbook.l10n.__("the item has been removed from your cart"); + } } - } - var tooltipStyle = ''; - try { - tooltipStyle = $this.instance.getTooltipStyle(); - } catch (e) { + var tooltipStyle = ''; + try { + tooltipStyle = $this.instance.getTooltipStyle(); + } catch (e) { - } + } - $this.fluidbook.tooltip.displayTooltipDuring(tooltip, 2500, tooltipStyle); + $this.fluidbook.tooltip.displayTooltipDuring(tooltip, 2500, tooltipStyle); + } } catch (e) { } diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js index 5e4adbb0..7ad6d250 100644 --- a/js/libs/fluidbook/fluidbook.menu.js +++ b/js/libs/fluidbook/fluidbook.menu.js @@ -11,7 +11,8 @@ FluidbookMenu.prototype = { this.pdfform = false; try { this.pdfform = new FluidbookPDFForm(this.fluidbook); - } catch(e) {} + } catch (e) { + } var $this = this; @@ -179,6 +180,12 @@ FluidbookMenu.prototype = { this.fluidbook.displayLoader(); }, + openCustomView: function (content, name) { + this.viewWrap(content, name); + this.openingView(function () { + }, name); + }, + openingView: function (callback, view) { var $this = this; this.fluidbook.resize.resizeView(); @@ -1197,7 +1204,7 @@ FluidbookMenu.prototype = { ratio = pw / th; } else { w = 500; - ratio=1; + ratio = 1; } fullscreen = (w === ww); diff --git a/style/cart/kimplay.less b/style/cart/kimplay.less index 96c2f88c..dd74e93d 100644 --- a/style/cart/kimplay.less +++ b/style/cart/kimplay.less @@ -1,157 +1,68 @@ -#flexipancart { +.mview[data-menu="cart-kimplay-qty"] { background-color: #fff; + color: #000; + width: 605px; + height: 364px; .caption { - color: #000; - margin-top: 0px; - position: relative; - top: 0px; - text-transform: uppercase; - - #mview-dialog-title{ - margin-top: 10px; - } - - a.button.back { - color: #fff; - } - } - - .cart-empty{ - color:#000; - } -} - -[data-type="7"] { - svg { - pointer-events: none; - - - } - - .on { - visibility: hidden; + height: 30px; + padding:0; } - .off { - visibility: visible; + .caption a.back { + background-color: #fff; } - &.active { - .off { - visibility: hidden; - } + .image { + float: left; + width: 250px; - .on { - visibility: visible; - } - } -} - - -#flexipancarttable { - [data-cart-delete], [data-cart-view] { - color: #fff; - background-color: @menu-button-background; - padding: 5px 6px 7px 6px; - width: 23px; - height: 23px; - display: block; - position: relative; - left: 20px; - } - - [data-cart-view] { - padding: 0; - } - - tr.print-header { - display: none; - font-size: 0; - - td { - padding: 0; - display: table-cell !important; - - img { - max-width: 100%; - } + img { + max-width: 250px; + max-height: 300px; } } - padding: 0; - border-collapse: collapse; - margin: 20px 30px 40px; - width: ~"calc(100% - 60px)"; - max-width: none; - - &.print { - tr.print-header { - display: table-row !important; - } - - span { - text-decoration: none; - } - - margin: 0; - font-size: 8px; - width: 100%; - - td, th { - vertical-align: top; - padding: 5px; - - &:last-child { - display: none; - } - } + .form { + width: 350px; + float: left; + text-align: left; + text-transform: uppercase; + padding: 0 50px; - [data-cart-delete], [data-cart-view] { - display: none; + h3 { + font-size: 16px; } - } - td, th { - padding: 20px 0 20px 30px; - font-size: 11px; - text-align: center; - - span { - display: block; - max-width: 120px; - white-space: normal; - margin: 0 auto; + input, textarea { + border: 2px solid #000; + margin-bottom: 30px; + padding: 2px; + font-size: 16px; } - img { - max-width: 80px; + textarea { + width: 100%; + max-width: 100%; + height: 58px; + max-height: 58px; } - &:last-child { - padding-right: 30px; - padding-left: 0px; + input { + width: 50px; + background-color: #fff; } - } - thead { - th { - text-transform: uppercase; + button { + border: 0; + background-color: #ad1057; color: #fff; - background-color: @menu-button-background; - font-weight: normal; - } - } - - tbody { - td { - //border-top: 1px solid #000; - } - - tr { - background-color: #fff; - color: #000 + text-transform: uppercase; + text-align: center; + padding: 10px 0; + display: block; + width: 100%; + font-weight: bold; } - } } \ No newline at end of file diff --git a/style/fluidbook.less b/style/fluidbook.less index 853bae21..456b5157 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -1351,398 +1351,8 @@ html.ios body.portrait #interface { @menu-padding: 30px; /* View */ +@import "menu"; -#viewOverlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 41; - cursor: pointer; // Needed or click events don't work on iOS (see: https://stackoverflow.com/a/16006333) - .overlayBackground(); -} - -#view, #viewOverlay { - visibility: hidden; -} - -.mview { - .menu-color(@menu-background, @menu-button-background); - color: @menu-text; - position: absolute; - top: 0; - left: 0; - z-index: 42; - display: none; - overflow: hidden; - background-repeat: no-repeat; - background-size: 100% 100%; - max-width: 600px; - width: 100%; - - @menutransition: 400ms; - - transition: opacity @menutransition, top @menutransition; - - &.fs + .mview { - box-shadow: 0 0 10000px 10000px @menu-overlay; - } - - &[data-menu="index"] { - .content { - overflow-x: hidden; - } - - .ps__rail-x { - display: none; - } - } - - &[data-menu="pdf"] { - iframe { - display: block; - width: 100%; - height: 100%; - } - } - - &[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"], &[data-menu="externalchapters"], &[data-menu="iframe"], &[data-menu="text"], &[data-menu="zoomhd"], &[data-menu="audio"], &[data-menu="o3d"] { - .caption { - height: 0; - padding: 0; - position: relative; - z-index: 4; - - a, div { - &.button.back { - width: 30px; - height: 30px; - padding: 10px; - font-size: 7px; - line-height: 10px; - } - } - } - - .ps__rail-x, .ps__rail-x { - z-index: 4; - } - } - - &[data-menu="o3d"] { - .o3dviewer { - color: transparent; - width: 100%; - height: 100%; - } - } - - &[data-menu="text"] { - > .content > .text { - li { - list-style-position: outside; - margin-left: 1em; - } - } - } - - &[data-menu="audio"] { - overflow: visible; - - a, div { - &.button.back { - top: -30px; - } - } - } - - // Popup with close button outside - &[data-menu="iframe"], &[data-menu="pdf"], &[data-menu="text"] { - overflow: visible; - - a, div { - &.button.back { - right: -30px; - } - } - - &[data-type="10doigts"] { - border-radius: 15px; - - a, div { - &.button.back { - right: 0; - border-radius: 0 15px 0 0; - } - } - } - - &.fs { - a, div { - &.button.back { - top: 0px; - right: 0px; - } - } - } - } - - &[data-type="10doigts"] { - border-radius: 15px; - } - - &[data-menu="iframe"] { - .iframeContainer, .iframeHolder { - height: 100%; - background-color: #fff; - - &[data-type="10doigts"] { - border-radius: 15px; - } - - .ios & { - overflow: auto; - } - } - - .content { - &[data-type="10doigts"] { - border-radius: 15px; - } - - overflow: hidden; - } - - - } - - &[data-menu="externalchapters"] { - .caption { - a, div { - &.button.back { - width: 60px; - height: 60px; - padding: 22px; - line-height: 1; - } - } - } - } - - audio { - display: block; - width: 100%; - } - - - .zoomhdHolder { - position: relative; - width: 100%; - height: 100%; - overflow: hidden; - - .zoomhdControls { - position: absolute; - bottom: 50px; - left: 50%; - width: 0; - - a { - position: absolute; - display: block; - top: -20px; - left: 10px; - width: 50px; - height: 50px; - border-radius: 50%; - .button-hover(); - color: @menu-text; - - &.minus { - left: -60px; - } - } - } - - .zoomhdMove { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - - .zoomhdRefScale { - pointer-events: none; - position: absolute; - top: 50%; - left: 50%; - - .zoomhdScale { - position: absolute; - top: 50%; - left: 50%; - - .zoomhdImage { - opacity: 0; - transition: opacity 500ms; - position: absolute; - } - - img { - display: block; - } - } - } - } - - } - - &[data-menu="webvideo"], &[data-menu="webvideo"] { - iframe { - width: 100%; - height: 100%; - } - } - - .fonctions { - padding: 0 @menu-padding @menu-padding 0; - text-align: right; - - a { - line-height: 12px; - border-radius: 2px; - text-transform: uppercase; - margin: 0 0 0 10px; - padding: 16px 25px; - display: inline-block; - height: 45px; - text-align: center; - position: relative; - - .svg-icon { - width: 20px; - position: absolute; - top: 11px; - left: -11px; - } - - &.noborder { - background-color: transparent; - text-transform: none; - - &:hover { - background-color: transparent; - } - } - } - - @media @medium { - padding: 0 @menu-padding @menu-padding @menu-padding; - - a { - display: block; - margin: 0 0 10px 0; - - .svg-icon { - width: 20px; - margin-right: 12px; - vertical-align: text-bottom; - position: static; - } - - &:last-child { - margin: 0; - } - } - } - } - - &[data-chapters] { - max-width: 320px; - } - - &.animate { - transition: transform 600ms ease-out; - } - - .caption { - padding: 20px @menu-padding; - width: 100%; - height: 60px; - - &.small { - padding: 5px @menu-padding; - height: 30px; - } - - &.nocaption { - padding: 0; - height: 0; - } - - &.h0 { - height: 0; - padding: 0; - } - - h2 { - font-size: 16px; - line-height: 16px; - font-weight: 400; - margin: 0 auto; - white-space: nowrap; - } - - div.button, a { - height: 27px; - font-weight: 600; - font-size: 14px; - line-height: 25px; - display: block; - cursor: pointer; - - &.back { - position: absolute; - top: 0; - right: 0; - width: 60px; - height: 60px; - padding: 22px; - line-height: 1; - z-index: 1; - - &.small, &.nocaption { - width: 30px; - height: 30px; - padding: 10px; - font-size: 7px; - line-height: 10px; - } - - .rtl & { - right: auto; - left: 0; - } - } - } - } - - .content { - text-align: center; - width: 100%; - overflow: hidden; - position: relative; - -webkit-overflow-scrolling: touch; - } -} - -form input[type="text"], form input[type="email"] { - background-color: @menu-field-background; - color: @menu-field-text; -} - -@import "menu-overview"; /* Share */ ul.chapters.shareList a.level0 .svg-icon { diff --git a/style/menu.less b/style/menu.less new file mode 100644 index 00000000..ef7a7ccf --- /dev/null +++ b/style/menu.less @@ -0,0 +1,392 @@ + +#viewOverlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 41; + cursor: pointer; // Needed or click events don't work on iOS (see: https://stackoverflow.com/a/16006333) + .overlayBackground(); +} + +#view, #viewOverlay { + visibility: hidden; +} + +.mview { + .menu-color(@menu-background, @menu-button-background); + color: @menu-text; + position: absolute; + top: 0; + left: 0; + z-index: 42; + display: none; + overflow: hidden; + background-repeat: no-repeat; + background-size: 100% 100%; + max-width: 600px; + width: 100%; + + @menutransition: 400ms; + + transition: opacity @menutransition, top @menutransition; + + &.fs + .mview { + box-shadow: 0 0 10000px 10000px @menu-overlay; + } + + &[data-menu="index"] { + .content { + overflow-x: hidden; + } + + .ps__rail-x { + display: none; + } + } + + &[data-menu="pdf"] { + iframe { + display: block; + width: 100%; + height: 100%; + } + } + + &[data-menu="multimedia"], &[data-menu="webvideo"], &[data-menu="video"], &[data-menu="externalchapters"], &[data-menu="iframe"], &[data-menu="text"], &[data-menu="zoomhd"], &[data-menu="audio"], &[data-menu="o3d"] { + .caption { + height: 0; + padding: 0; + position: relative; + z-index: 4; + + a, div { + &.button.back { + width: 30px; + height: 30px; + padding: 10px; + font-size: 7px; + line-height: 10px; + } + } + } + + .ps__rail-x, .ps__rail-x { + z-index: 4; + } + } + + &[data-menu="o3d"] { + .o3dviewer { + color: transparent; + width: 100%; + height: 100%; + } + } + + &[data-menu="text"] { + > .content > .text { + li { + list-style-position: outside; + margin-left: 1em; + } + } + } + + &[data-menu="audio"] { + overflow: visible; + + a, div { + &.button.back { + top: -30px; + } + } + } + + // Popup with close button outside + &[data-menu="iframe"], &[data-menu="pdf"], &[data-menu="text"] { + overflow: visible; + + a, div { + &.button.back { + right: -30px; + } + } + + &[data-type="10doigts"] { + border-radius: 15px; + + a, div { + &.button.back { + right: 0; + border-radius: 0 15px 0 0; + } + } + } + + &.fs { + a, div { + &.button.back { + top: 0px; + right: 0px; + } + } + } + } + + &[data-type="10doigts"] { + border-radius: 15px; + } + + &[data-menu="iframe"] { + .iframeContainer, .iframeHolder { + height: 100%; + background-color: #fff; + + &[data-type="10doigts"] { + border-radius: 15px; + } + + .ios & { + overflow: auto; + } + } + + .content { + &[data-type="10doigts"] { + border-radius: 15px; + } + + overflow: hidden; + } + + + } + + &[data-menu="externalchapters"] { + .caption { + a, div { + &.button.back { + width: 60px; + height: 60px; + padding: 22px; + line-height: 1; + } + } + } + } + + audio { + display: block; + width: 100%; + } + + + .zoomhdHolder { + position: relative; + width: 100%; + height: 100%; + overflow: hidden; + + .zoomhdControls { + position: absolute; + bottom: 50px; + left: 50%; + width: 0; + + a { + position: absolute; + display: block; + top: -20px; + left: 10px; + width: 50px; + height: 50px; + border-radius: 50%; + .button-hover(); + color: @menu-text; + + &.minus { + left: -60px; + } + } + } + + .zoomhdMove { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + + .zoomhdRefScale { + pointer-events: none; + position: absolute; + top: 50%; + left: 50%; + + .zoomhdScale { + position: absolute; + top: 50%; + left: 50%; + + .zoomhdImage { + opacity: 0; + transition: opacity 500ms; + position: absolute; + } + + img { + display: block; + } + } + } + } + + } + + &[data-menu="webvideo"], &[data-menu="webvideo"] { + iframe { + width: 100%; + height: 100%; + } + } + + .fonctions { + padding: 0 @menu-padding @menu-padding 0; + text-align: right; + + a { + line-height: 12px; + border-radius: 2px; + text-transform: uppercase; + margin: 0 0 0 10px; + padding: 16px 25px; + display: inline-block; + height: 45px; + text-align: center; + position: relative; + + .svg-icon { + width: 20px; + position: absolute; + top: 11px; + left: -11px; + } + + &.noborder { + background-color: transparent; + text-transform: none; + + &:hover { + background-color: transparent; + } + } + } + + @media @medium { + padding: 0 @menu-padding @menu-padding @menu-padding; + + a { + display: block; + margin: 0 0 10px 0; + + .svg-icon { + width: 20px; + margin-right: 12px; + vertical-align: text-bottom; + position: static; + } + + &:last-child { + margin: 0; + } + } + } + } + + &[data-chapters] { + max-width: 320px; + } + + &.animate { + transition: transform 600ms ease-out; + } + + .caption { + padding: 20px @menu-padding; + width: 100%; + height: 60px; + + &.small { + padding: 5px @menu-padding; + height: 30px; + } + + &.nocaption { + padding: 0; + height: 0; + } + + &.h0 { + height: 0; + padding: 0; + } + + h2 { + font-size: 16px; + line-height: 16px; + font-weight: 400; + margin: 0 auto; + white-space: nowrap; + } + + div.button, a { + height: 27px; + font-weight: 600; + font-size: 14px; + line-height: 25px; + display: block; + cursor: pointer; + + &.back { + position: absolute; + top: 0; + right: 0; + width: 60px; + height: 60px; + padding: 22px; + line-height: 1; + z-index: 1; + + &.small, &.nocaption { + width: 30px; + height: 30px; + padding: 10px; + font-size: 7px; + line-height: 10px; + } + + .rtl & { + right: auto; + left: 0; + } + } + } + } + + .content { + text-align: center; + width: 100%; + overflow: hidden; + position: relative; + -webkit-overflow-scrolling: touch; + } +} + +form input[type="text"], form input[type="email"] { + background-color: @menu-field-background; + color: @menu-field-text; +} + +@import "menu-overview"; -- 2.39.5