this.cart = cart;
this.fluidbook = this.cart.fluidbook;
this.data = this.fluidbook.settings.basketReferences;
+ this.showAddToCartTooltips = false;
this.init();
}
},
addToCart: function (ref, quantity) {
+
let view = `<div id="kimplay-additem">
+ ${this.fluidbook.menu.getCaption("", 'small')}
<div class="content">
- <h3>${this.data[ref].name}</h3>
- <div>(réf. ${ref})</div>
- <br>
- Quantité souhaitée :<br>
- <input type="text" name="qty" value="${quantity}"><br>
- Commentaire (facultatif)
- <textarea name="commentaire"></textarea><br>
- <button>Ajouter à ma sélection</button>
+ <div class="image"><img src="${this.data[ref].image}" /></div>
+ <div class="form">
+ <h3>${this.data[ref].name}</h3>
+ <div>(réf. ${ref})</div>
+ <br>
+ Quantité souhaitée :<br>
+ <input type="text" name="qty" value="${quantity}"><br>
+ Commentaire (facultatif)
+ <textarea name="commentaire"></textarea><br>
+ <button>Ajouter à ma sélection</button>
+ </div>
</div>
</div>`;
- this.fluidbook.menu.viewWrap(view, 'cart');
+ this.fluidbook.menu.openCustomView(view, 'cart-kimplay-qty');
},
_addToCart: function (ref, quantity) {
$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) {
}
this.pdfform = false;
try {
this.pdfform = new FluidbookPDFForm(this.fluidbook);
- } catch(e) {}
+ } catch (e) {
+ }
var $this = this;
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();
ratio = pw / th;
} else {
w = 500;
- ratio=1;
+ ratio = 1;
}
fullscreen = (w === ww);
-#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
@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 {
--- /dev/null
+
+#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";
projects / fluidbook-html5.git / commitdiff