feat(shell): header multifunc + window._win + float cart/VIP
Multi-type publish/VIP CTA in nav, zibll-like _win runtime bridge for lightbox flags, and floating shop_cart/pay_vip commerce buttons.
This commit is contained in:
1 parent
09029116ae
commit
f929cc649c
9 files changed
+994
-441
No files matched your search
@@ -0,0 +1,114 @@
|
||||
/**
|
||||
* Header multi-function publish cluster + VIP CTA.
|
||||
*
|
||||
* @package AKSRT
|
||||
*/
|
||||
|
||||
.navbar-but-cluster {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .navbar-but,
|
||||
.navbar-but-cluster .navbar-vip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .btn-primary,
|
||||
.navbar-but-cluster .but.btn-primary,
|
||||
.navbar-but-cluster .navbar-newposts.but,
|
||||
.navbar-but-cluster a.but {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
background: var(--color-primary, #2f6df6);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border: 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.navbar-but-cluster .payvip-icon.but {
|
||||
background: linear-gradient(90deg, #ff6b6b, #f04494);
|
||||
color: #fff;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.newadd-btns.hover-show {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.newadd-btns .drop-newadd,
|
||||
.newadd-btns .hover-show-con {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
min-width: 140px;
|
||||
background: var(--main-bg-color, #fff);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
padding: 6px 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.newadd-btns.hover-show:hover .drop-newadd,
|
||||
.newadd-btns.hover-show:hover .hover-show-con,
|
||||
.newadd-btns.hover-show:focus-within .drop-newadd {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.newadd-btns__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 14px;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.newadd-btns__item:hover {
|
||||
background: var(--surface-2, rgba(0, 0, 0, 0.04));
|
||||
color: var(--focus-color, var(--color-primary));
|
||||
}
|
||||
|
||||
/* float commerce */
|
||||
.float-btn-shop-cart {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.float-btn-shop-cart badge,
|
||||
.float-btn-shop-cart [cart-count] {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 10px;
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.float-btn-shop-cart badge:empty,
|
||||
.float-btn-shop-cart [cart-count=""] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.float-btn.pay-vip {
|
||||
color: #f5a623;
|
||||
}
|
||||
@@ -112,6 +112,16 @@
|
||||
var MAX_ZOOM_DESKTOP = 2;
|
||||
var MAX_ZOOM_MOBILE = 3;
|
||||
|
||||
function lightboxFlag(key, fallback) {
|
||||
var w = window._win || (window.aksrtData && window.aksrtData.imgbox) || {};
|
||||
if (w[key] === undefined || w[key] === null || w[key] === '') return fallback;
|
||||
return w[key] === true || w[key] === 1 || w[key] === '1';
|
||||
}
|
||||
function lightboxEnabled() {
|
||||
return lightboxFlag('imgbox', true);
|
||||
}
|
||||
|
||||
|
||||
function resolveFullUrl(img) {
|
||||
var full = img.getAttribute('data-full-url') || img.getAttribute('data-src') || '';
|
||||
if (full) return full;
|
||||
@@ -134,6 +144,7 @@
|
||||
}
|
||||
|
||||
function createLightbox() {
|
||||
if (!lightboxEnabled()) return;
|
||||
if (lightboxEl) return;
|
||||
|
||||
lightboxEl = document.createElement('div');
|
||||
@@ -161,6 +172,18 @@
|
||||
lightboxCounter = lightboxEl.querySelector('.aksrt-lightbox__counter');
|
||||
lightboxThumbsWrap = lightboxEl.querySelector('.aksrt-lightbox__thumbs');
|
||||
|
||||
// Apply window._win imgbox feature flags
|
||||
var zoomBtn = lightboxEl.querySelector('.toggle-zoom');
|
||||
var thumbsBtn = lightboxEl.querySelector('.toggle-thumbs');
|
||||
var playBtn = lightboxEl.querySelector('.toggle-play');
|
||||
var fullBtn = lightboxEl.querySelector('.toggle-full');
|
||||
var downBtn = lightboxEl.querySelector('.aksrt-lightbox__download');
|
||||
if (zoomBtn) zoomBtn.hidden = !lightboxFlag('imgbox_zoom', true);
|
||||
if (thumbsBtn) thumbsBtn.hidden = !lightboxFlag('imgbox_thumbs', true);
|
||||
if (playBtn) playBtn.hidden = !lightboxFlag('imgbox_play', false);
|
||||
if (fullBtn) fullBtn.hidden = !lightboxFlag('imgbox_full', true);
|
||||
if (downBtn) downBtn.hidden = !lightboxFlag('imgbox_down', false);
|
||||
|
||||
// Close
|
||||
lightboxEl.querySelector('.aksrt-lightbox__close').addEventListener('click', function (e) { e.stopPropagation(); closeLightbox(); });
|
||||
lightboxEl.addEventListener('click', function (e) { if (e.target === lightboxEl || e.target.classList.contains('aksrt-lightbox__stage')) closeLightbox(); });
|
||||
@@ -435,7 +458,7 @@
|
||||
var img = e.target.closest(TRIGGER_SEL);
|
||||
if (!img) return;
|
||||
if (img.width < 100 || img.height < 100) return;
|
||||
if (isNoLightbox(img)) return;
|
||||
if (!lightboxEnabled() || isNoLightbox(img)) return;
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
Reference in new issue
Block a user