This commit is contained in:
Philippe Torrel
2026-10-14 11:09:17 +02:00
parent 69655e8ef6
commit 7964b5e15c
13 changed files with 1422 additions and 649 deletions
@@ -12844,6 +12844,20 @@ blockquote {
flex-direction: row;
align-items: center;
justify-content: center;
}
.header-main .content-box {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
width: auto;
margin: 0 auto;
height: 100%;
max-width: 360px;
max-height: 380px;
}
.header-main {
position: relative;
}
.header-main .splide {
@@ -12854,6 +12868,19 @@ blockquote {
top: 0;
overflow: hidden;
}
.header-main .splide .splide__track {
height: 100%;
}
.header-main .splide .splide__track .splide__slide {
background-size: cover;
background-position: center;
}
.header-main .splide .splide__track .splide__slide img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
}
.logo-main img,
.logo-main svg {
@@ -1,4 +1,4 @@
(function () {
(function (uuid) {
'use strict';
// Helper
@@ -17,14 +17,14 @@
if(typeof ShadowRoot==='undefined'){return false;}var OwnElement=getWindow(node).ShadowRoot;return node instanceof OwnElement||node instanceof ShadowRoot;}
// and applies them to the HTMLElements such as popper and arrow
function applyStyles$1(_ref){var state=_ref.state;Object.keys(state.elements).forEach(function(name){var style=state.styles[name]||{};var attributes=state.attributes[name]||{};var element=state.elements[name];// arrow is optional + virtual elements
function applyStyles(_ref){var state=_ref.state;Object.keys(state.elements).forEach(function(name){var style=state.styles[name]||{};var attributes=state.attributes[name]||{};var element=state.elements[name];// arrow is optional + virtual elements
if(!isHTMLElement$1(element)||!getNodeName(element)){return;}// Flow doesn't support to extend this property, but it's the most
// effective way to apply styles to an HTMLElement
// $FlowFixMe[cannot-write]
Object.assign(element.style,style);Object.keys(attributes).forEach(function(name){var value=attributes[name];if(value===false){element.removeAttribute(name);}else {element.setAttribute(name,value===true?'':value);}});});}function effect$2(_ref2){var state=_ref2.state;var initialStyles={popper:{position:state.options.strategy,left:'0',top:'0',margin:'0'},arrow:{position:'absolute'},reference:{}};Object.assign(state.elements.popper.style,initialStyles.popper);state.styles=initialStyles;if(state.elements.arrow){Object.assign(state.elements.arrow.style,initialStyles.arrow);}return function(){Object.keys(state.elements).forEach(function(name){var element=state.elements[name];var attributes=state.attributes[name]||{};var styleProperties=Object.keys(state.styles.hasOwnProperty(name)?state.styles[name]:initialStyles[name]);// Set all values to an empty string to unset them
var style=styleProperties.reduce(function(style,property){style[property]='';return style;},{});// arrow is optional + virtual elements
if(!isHTMLElement$1(element)||!getNodeName(element)){return;}Object.assign(element.style,style);Object.keys(attributes).forEach(function(attribute){element.removeAttribute(attribute);});});};}// eslint-disable-next-line import/no-unused-modules
var applyStyles = {name:'applyStyles',enabled:true,phase:'write',fn:applyStyles$1,effect:effect$2,requires:['computeStyles']};
var applyStyles$1 = {name:'applyStyles',enabled:true,phase:'write',fn:applyStyles,effect:effect$2,requires:['computeStyles']};
function getBasePlacement(placement){return placement.split('-')[0];}
@@ -86,12 +86,12 @@
function expandToHashMap(value,keys){return keys.reduce(function(hashMap,key){hashMap[key]=value;return hashMap;},{});}
var toPaddingObject=function toPaddingObject(padding,state){padding=typeof padding==='function'?padding(Object.assign({},state.rects,{placement:state.placement})):padding;return mergePaddingObject(typeof padding!=='number'?padding:expandToHashMap(padding,basePlacements));};function arrow$1(_ref){var _state$modifiersData$;var state=_ref.state,name=_ref.name,options=_ref.options;var arrowElement=state.elements.arrow;var popperOffsets=state.modifiersData.popperOffsets;var basePlacement=getBasePlacement(state.placement);var axis=getMainAxisFromPlacement(basePlacement);var isVertical=[left,right].indexOf(basePlacement)>=0;var len=isVertical?'height':'width';if(!arrowElement||!popperOffsets){return;}var paddingObject=toPaddingObject(options.padding,state);var arrowRect=getLayoutRect(arrowElement);var minProp=axis==='y'?top:left;var maxProp=axis==='y'?bottom:right;var endDiff=state.rects.reference[len]+state.rects.reference[axis]-popperOffsets[axis]-state.rects.popper[len];var startDiff=popperOffsets[axis]-state.rects.reference[axis];var arrowOffsetParent=getOffsetParent(arrowElement);var clientSize=arrowOffsetParent?axis==='y'?arrowOffsetParent.clientHeight||0:arrowOffsetParent.clientWidth||0:0;var centerToReference=endDiff/2-startDiff/2;// Make sure the arrow doesn't overflow the popper if the center point is
var toPaddingObject=function toPaddingObject(padding,state){padding=typeof padding==='function'?padding(Object.assign({},state.rects,{placement:state.placement})):padding;return mergePaddingObject(typeof padding!=='number'?padding:expandToHashMap(padding,basePlacements));};function arrow(_ref){var _state$modifiersData$;var state=_ref.state,name=_ref.name,options=_ref.options;var arrowElement=state.elements.arrow;var popperOffsets=state.modifiersData.popperOffsets;var basePlacement=getBasePlacement(state.placement);var axis=getMainAxisFromPlacement(basePlacement);var isVertical=[left,right].indexOf(basePlacement)>=0;var len=isVertical?'height':'width';if(!arrowElement||!popperOffsets){return;}var paddingObject=toPaddingObject(options.padding,state);var arrowRect=getLayoutRect(arrowElement);var minProp=axis==='y'?top:left;var maxProp=axis==='y'?bottom:right;var endDiff=state.rects.reference[len]+state.rects.reference[axis]-popperOffsets[axis]-state.rects.popper[len];var startDiff=popperOffsets[axis]-state.rects.reference[axis];var arrowOffsetParent=getOffsetParent(arrowElement);var clientSize=arrowOffsetParent?axis==='y'?arrowOffsetParent.clientHeight||0:arrowOffsetParent.clientWidth||0:0;var centerToReference=endDiff/2-startDiff/2;// Make sure the arrow doesn't overflow the popper if the center point is
// outside of the popper bounds
var min=paddingObject[minProp];var max=clientSize-arrowRect[len]-paddingObject[maxProp];var center=clientSize/2-arrowRect[len]/2+centerToReference;var offset=within(min,center,max);// Prevents breaking syntax highlighting...
var axisProp=axis;state.modifiersData[name]=(_state$modifiersData$={},_state$modifiersData$[axisProp]=offset,_state$modifiersData$.centerOffset=offset-center,_state$modifiersData$);}function effect$1(_ref2){var state=_ref2.state,options=_ref2.options;var _options$element=options.element,arrowElement=_options$element===void 0?'[data-popper-arrow]':_options$element;if(arrowElement==null){return;}// CSS selector
if(typeof arrowElement==='string'){arrowElement=state.elements.popper.querySelector(arrowElement);if(!arrowElement){return;}}if(!contains(state.elements.popper,arrowElement)){return;}state.elements.arrow=arrowElement;}// eslint-disable-next-line import/no-unused-modules
var arrow = {name:'arrow',enabled:true,phase:'main',fn:arrow$1,effect:effect$1,requires:['popperOffsets'],requiresIfExists:['preventOverflow']};
var arrow$1 = {name:'arrow',enabled:true,phase:'main',fn:arrow,effect:effect$1,requires:['popperOffsets'],requiresIfExists:['preventOverflow']};
function getVariation(placement){return placement.split('-')[1];}
@@ -101,8 +101,8 @@
function roundOffsetsByDPR(_ref,win){var x=_ref.x,y=_ref.y;var dpr=win.devicePixelRatio||1;return {x:round(x*dpr)/dpr||0,y:round(y*dpr)/dpr||0};}function mapToStyles(_ref2){var _Object$assign2;var popper=_ref2.popper,popperRect=_ref2.popperRect,placement=_ref2.placement,variation=_ref2.variation,offsets=_ref2.offsets,position=_ref2.position,gpuAcceleration=_ref2.gpuAcceleration,adaptive=_ref2.adaptive,roundOffsets=_ref2.roundOffsets,isFixed=_ref2.isFixed;var _offsets$x=offsets.x,x=_offsets$x===void 0?0:_offsets$x,_offsets$y=offsets.y,y=_offsets$y===void 0?0:_offsets$y;var _ref3=typeof roundOffsets==='function'?roundOffsets({x:x,y:y}):{x:x,y:y};x=_ref3.x;y=_ref3.y;var hasX=offsets.hasOwnProperty('x');var hasY=offsets.hasOwnProperty('y');var sideX=left;var sideY=top;var win=window;if(adaptive){var offsetParent=getOffsetParent(popper);var heightProp='clientHeight';var widthProp='clientWidth';if(offsetParent===getWindow(popper)){offsetParent=getDocumentElement(popper);if(getComputedStyle$1(offsetParent).position!=='static'&&position==='absolute'){heightProp='scrollHeight';widthProp='scrollWidth';}}// $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it
offsetParent=offsetParent;if(placement===top||(placement===left||placement===right)&&variation===end){sideY=bottom;var offsetY=isFixed&&offsetParent===win&&win.visualViewport?win.visualViewport.height:// $FlowFixMe[prop-missing]
offsetParent[heightProp];y-=offsetY-popperRect.height;y*=gpuAcceleration?1:-1;}if(placement===left||(placement===top||placement===bottom)&&variation===end){sideX=right;var offsetX=isFixed&&offsetParent===win&&win.visualViewport?win.visualViewport.width:// $FlowFixMe[prop-missing]
offsetParent[widthProp];x-=offsetX-popperRect.width;x*=gpuAcceleration?1:-1;}}var commonStyles=Object.assign({position:position},adaptive&&unsetSides);var _ref4=roundOffsets===true?roundOffsetsByDPR({x:x,y:y},getWindow(popper)):{x:x,y:y};x=_ref4.x;y=_ref4.y;if(gpuAcceleration){var _Object$assign;return Object.assign({},commonStyles,(_Object$assign={},_Object$assign[sideY]=hasY?'0':'',_Object$assign[sideX]=hasX?'0':'',_Object$assign.transform=(win.devicePixelRatio||1)<=1?"translate("+x+"px, "+y+"px)":"translate3d("+x+"px, "+y+"px, 0)",_Object$assign));}return Object.assign({},commonStyles,(_Object$assign2={},_Object$assign2[sideY]=hasY?y+"px":'',_Object$assign2[sideX]=hasX?x+"px":'',_Object$assign2.transform='',_Object$assign2));}function computeStyles$1(_ref5){var state=_ref5.state,options=_ref5.options;var _options$gpuAccelerat=options.gpuAcceleration,gpuAcceleration=_options$gpuAccelerat===void 0?true:_options$gpuAccelerat,_options$adaptive=options.adaptive,adaptive=_options$adaptive===void 0?true:_options$adaptive,_options$roundOffsets=options.roundOffsets,roundOffsets=_options$roundOffsets===void 0?true:_options$roundOffsets;var commonStyles={placement:getBasePlacement(state.placement),variation:getVariation(state.placement),popper:state.elements.popper,popperRect:state.rects.popper,gpuAcceleration:gpuAcceleration,isFixed:state.options.strategy==='fixed'};if(state.modifiersData.popperOffsets!=null){state.styles.popper=Object.assign({},state.styles.popper,mapToStyles(Object.assign({},commonStyles,{offsets:state.modifiersData.popperOffsets,position:state.options.strategy,adaptive:adaptive,roundOffsets:roundOffsets})));}if(state.modifiersData.arrow!=null){state.styles.arrow=Object.assign({},state.styles.arrow,mapToStyles(Object.assign({},commonStyles,{offsets:state.modifiersData.arrow,position:'absolute',adaptive:false,roundOffsets:roundOffsets})));}state.attributes.popper=Object.assign({},state.attributes.popper,{'data-popper-placement':state.placement});}// eslint-disable-next-line import/no-unused-modules
var computeStyles = {name:'computeStyles',enabled:true,phase:'beforeWrite',fn:computeStyles$1,data:{}};
offsetParent[widthProp];x-=offsetX-popperRect.width;x*=gpuAcceleration?1:-1;}}var commonStyles=Object.assign({position:position},adaptive&&unsetSides);var _ref4=roundOffsets===true?roundOffsetsByDPR({x:x,y:y},getWindow(popper)):{x:x,y:y};x=_ref4.x;y=_ref4.y;if(gpuAcceleration){var _Object$assign;return Object.assign({},commonStyles,(_Object$assign={},_Object$assign[sideY]=hasY?'0':'',_Object$assign[sideX]=hasX?'0':'',_Object$assign.transform=(win.devicePixelRatio||1)<=1?"translate("+x+"px, "+y+"px)":"translate3d("+x+"px, "+y+"px, 0)",_Object$assign));}return Object.assign({},commonStyles,(_Object$assign2={},_Object$assign2[sideY]=hasY?y+"px":'',_Object$assign2[sideX]=hasX?x+"px":'',_Object$assign2.transform='',_Object$assign2));}function computeStyles(_ref5){var state=_ref5.state,options=_ref5.options;var _options$gpuAccelerat=options.gpuAcceleration,gpuAcceleration=_options$gpuAccelerat===void 0?true:_options$gpuAccelerat,_options$adaptive=options.adaptive,adaptive=_options$adaptive===void 0?true:_options$adaptive,_options$roundOffsets=options.roundOffsets,roundOffsets=_options$roundOffsets===void 0?true:_options$roundOffsets;var commonStyles={placement:getBasePlacement(state.placement),variation:getVariation(state.placement),popper:state.elements.popper,popperRect:state.rects.popper,gpuAcceleration:gpuAcceleration,isFixed:state.options.strategy==='fixed'};if(state.modifiersData.popperOffsets!=null){state.styles.popper=Object.assign({},state.styles.popper,mapToStyles(Object.assign({},commonStyles,{offsets:state.modifiersData.popperOffsets,position:state.options.strategy,adaptive:adaptive,roundOffsets:roundOffsets})));}if(state.modifiersData.arrow!=null){state.styles.arrow=Object.assign({},state.styles.arrow,mapToStyles(Object.assign({},commonStyles,{offsets:state.modifiersData.arrow,position:'absolute',adaptive:false,roundOffsets:roundOffsets})));}state.attributes.popper=Object.assign({},state.attributes.popper,{'data-popper-placement':state.placement});}// eslint-disable-next-line import/no-unused-modules
var computeStyles$1 = {name:'computeStyles',enabled:true,phase:'beforeWrite',fn:computeStyles,data:{}};
var passive={passive:true};function effect(_ref){var state=_ref.state,instance=_ref.instance,options=_ref.options;var _options$scroll=options.scroll,scroll=_options$scroll===void 0?true:_options$scroll,_options$resize=options.resize,resize=_options$resize===void 0?true:_options$resize;var window=getWindow(state.elements.popper);var scrollParents=[].concat(state.scrollParents.reference,state.scrollParents.popper);if(scroll){scrollParents.forEach(function(scrollParent){scrollParent.addEventListener('scroll',instance.update,passive);});}if(resize){window.addEventListener('resize',instance.update,passive);}return function(){if(scroll){scrollParents.forEach(function(scrollParent){scrollParent.removeEventListener('scroll',instance.update,passive);});}if(resize){window.removeEventListener('resize',instance.update,passive);}};}// eslint-disable-next-line import/no-unused-modules
var eventListeners = {name:'eventListeners',enabled:true,phase:'write',fn:function fn(){},effect:effect,data:{}};
@@ -161,26 +161,26 @@
function computeAutoPlacement(state,options){if(options===void 0){options={};}var _options=options,placement=_options.placement,boundary=_options.boundary,rootBoundary=_options.rootBoundary,padding=_options.padding,flipVariations=_options.flipVariations,_options$allowedAutoP=_options.allowedAutoPlacements,allowedAutoPlacements=_options$allowedAutoP===void 0?placements:_options$allowedAutoP;var variation=getVariation(placement);var placements$1=variation?flipVariations?variationPlacements:variationPlacements.filter(function(placement){return getVariation(placement)===variation;}):basePlacements;var allowedPlacements=placements$1.filter(function(placement){return allowedAutoPlacements.indexOf(placement)>=0;});if(allowedPlacements.length===0){allowedPlacements=placements$1;}// $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions...
var overflows=allowedPlacements.reduce(function(acc,placement){acc[placement]=detectOverflow(state,{placement:placement,boundary:boundary,rootBoundary:rootBoundary,padding:padding})[getBasePlacement(placement)];return acc;},{});return Object.keys(overflows).sort(function(a,b){return overflows[a]-overflows[b];});}
function getExpandedFallbackPlacements(placement){if(getBasePlacement(placement)===auto){return [];}var oppositePlacement=getOppositePlacement(placement);return [getOppositeVariationPlacement(placement),oppositePlacement,getOppositeVariationPlacement(oppositePlacement)];}function flip$1(_ref){var state=_ref.state,options=_ref.options,name=_ref.name;if(state.modifiersData[name]._skip){return;}var _options$mainAxis=options.mainAxis,checkMainAxis=_options$mainAxis===void 0?true:_options$mainAxis,_options$altAxis=options.altAxis,checkAltAxis=_options$altAxis===void 0?true:_options$altAxis,specifiedFallbackPlacements=options.fallbackPlacements,padding=options.padding,boundary=options.boundary,rootBoundary=options.rootBoundary,altBoundary=options.altBoundary,_options$flipVariatio=options.flipVariations,flipVariations=_options$flipVariatio===void 0?true:_options$flipVariatio,allowedAutoPlacements=options.allowedAutoPlacements;var preferredPlacement=state.options.placement;var basePlacement=getBasePlacement(preferredPlacement);var isBasePlacement=basePlacement===preferredPlacement;var fallbackPlacements=specifiedFallbackPlacements||(isBasePlacement||!flipVariations?[getOppositePlacement(preferredPlacement)]:getExpandedFallbackPlacements(preferredPlacement));var placements=[preferredPlacement].concat(fallbackPlacements).reduce(function(acc,placement){return acc.concat(getBasePlacement(placement)===auto?computeAutoPlacement(state,{placement:placement,boundary:boundary,rootBoundary:rootBoundary,padding:padding,flipVariations:flipVariations,allowedAutoPlacements:allowedAutoPlacements}):placement);},[]);var referenceRect=state.rects.reference;var popperRect=state.rects.popper;var checksMap=new Map();var makeFallbackChecks=true;var firstFittingPlacement=placements[0];for(var i=0;i<placements.length;i++){var placement=placements[i];var _basePlacement=getBasePlacement(placement);var isStartVariation=getVariation(placement)===start;var isVertical=[top,bottom].indexOf(_basePlacement)>=0;var len=isVertical?'width':'height';var overflow=detectOverflow(state,{placement:placement,boundary:boundary,rootBoundary:rootBoundary,altBoundary:altBoundary,padding:padding});var mainVariationSide=isVertical?isStartVariation?right:left:isStartVariation?bottom:top;if(referenceRect[len]>popperRect[len]){mainVariationSide=getOppositePlacement(mainVariationSide);}var altVariationSide=getOppositePlacement(mainVariationSide);var checks=[];if(checkMainAxis){checks.push(overflow[_basePlacement]<=0);}if(checkAltAxis){checks.push(overflow[mainVariationSide]<=0,overflow[altVariationSide]<=0);}if(checks.every(function(check){return check;})){firstFittingPlacement=placement;makeFallbackChecks=false;break;}checksMap.set(placement,checks);}if(makeFallbackChecks){// `2` may be desired in some cases – research later
function getExpandedFallbackPlacements(placement){if(getBasePlacement(placement)===auto){return [];}var oppositePlacement=getOppositePlacement(placement);return [getOppositeVariationPlacement(placement),oppositePlacement,getOppositeVariationPlacement(oppositePlacement)];}function flip(_ref){var state=_ref.state,options=_ref.options,name=_ref.name;if(state.modifiersData[name]._skip){return;}var _options$mainAxis=options.mainAxis,checkMainAxis=_options$mainAxis===void 0?true:_options$mainAxis,_options$altAxis=options.altAxis,checkAltAxis=_options$altAxis===void 0?true:_options$altAxis,specifiedFallbackPlacements=options.fallbackPlacements,padding=options.padding,boundary=options.boundary,rootBoundary=options.rootBoundary,altBoundary=options.altBoundary,_options$flipVariatio=options.flipVariations,flipVariations=_options$flipVariatio===void 0?true:_options$flipVariatio,allowedAutoPlacements=options.allowedAutoPlacements;var preferredPlacement=state.options.placement;var basePlacement=getBasePlacement(preferredPlacement);var isBasePlacement=basePlacement===preferredPlacement;var fallbackPlacements=specifiedFallbackPlacements||(isBasePlacement||!flipVariations?[getOppositePlacement(preferredPlacement)]:getExpandedFallbackPlacements(preferredPlacement));var placements=[preferredPlacement].concat(fallbackPlacements).reduce(function(acc,placement){return acc.concat(getBasePlacement(placement)===auto?computeAutoPlacement(state,{placement:placement,boundary:boundary,rootBoundary:rootBoundary,padding:padding,flipVariations:flipVariations,allowedAutoPlacements:allowedAutoPlacements}):placement);},[]);var referenceRect=state.rects.reference;var popperRect=state.rects.popper;var checksMap=new Map();var makeFallbackChecks=true;var firstFittingPlacement=placements[0];for(var i=0;i<placements.length;i++){var placement=placements[i];var _basePlacement=getBasePlacement(placement);var isStartVariation=getVariation(placement)===start;var isVertical=[top,bottom].indexOf(_basePlacement)>=0;var len=isVertical?'width':'height';var overflow=detectOverflow(state,{placement:placement,boundary:boundary,rootBoundary:rootBoundary,altBoundary:altBoundary,padding:padding});var mainVariationSide=isVertical?isStartVariation?right:left:isStartVariation?bottom:top;if(referenceRect[len]>popperRect[len]){mainVariationSide=getOppositePlacement(mainVariationSide);}var altVariationSide=getOppositePlacement(mainVariationSide);var checks=[];if(checkMainAxis){checks.push(overflow[_basePlacement]<=0);}if(checkAltAxis){checks.push(overflow[mainVariationSide]<=0,overflow[altVariationSide]<=0);}if(checks.every(function(check){return check;})){firstFittingPlacement=placement;makeFallbackChecks=false;break;}checksMap.set(placement,checks);}if(makeFallbackChecks){// `2` may be desired in some cases – research later
var numberOfChecks=flipVariations?3:1;var _loop=function _loop(_i){var fittingPlacement=placements.find(function(placement){var checks=checksMap.get(placement);if(checks){return checks.slice(0,_i).every(function(check){return check;});}});if(fittingPlacement){firstFittingPlacement=fittingPlacement;return "break";}};for(var _i=numberOfChecks;_i>0;_i--){var _ret=_loop(_i);if(_ret==="break")break;}}if(state.placement!==firstFittingPlacement){state.modifiersData[name]._skip=true;state.placement=firstFittingPlacement;state.reset=true;}}// eslint-disable-next-line import/no-unused-modules
var flip = {name:'flip',enabled:true,phase:'main',fn:flip$1,requiresIfExists:['offset'],data:{_skip:false}};
var flip$1 = {name:'flip',enabled:true,phase:'main',fn:flip,requiresIfExists:['offset'],data:{_skip:false}};
function getSideOffsets(overflow,rect,preventedOffsets){if(preventedOffsets===void 0){preventedOffsets={x:0,y:0};}return {top:overflow.top-rect.height-preventedOffsets.y,right:overflow.right-rect.width+preventedOffsets.x,bottom:overflow.bottom-rect.height+preventedOffsets.y,left:overflow.left-rect.width-preventedOffsets.x};}function isAnySideFullyClipped(overflow){return [top,right,bottom,left].some(function(side){return overflow[side]>=0;});}function hide$1(_ref){var state=_ref.state,name=_ref.name;var referenceRect=state.rects.reference;var popperRect=state.rects.popper;var preventedOffsets=state.modifiersData.preventOverflow;var referenceOverflow=detectOverflow(state,{elementContext:'reference'});var popperAltOverflow=detectOverflow(state,{altBoundary:true});var referenceClippingOffsets=getSideOffsets(referenceOverflow,referenceRect);var popperEscapeOffsets=getSideOffsets(popperAltOverflow,popperRect,preventedOffsets);var isReferenceHidden=isAnySideFullyClipped(referenceClippingOffsets);var hasPopperEscaped=isAnySideFullyClipped(popperEscapeOffsets);state.modifiersData[name]={referenceClippingOffsets:referenceClippingOffsets,popperEscapeOffsets:popperEscapeOffsets,isReferenceHidden:isReferenceHidden,hasPopperEscaped:hasPopperEscaped};state.attributes.popper=Object.assign({},state.attributes.popper,{'data-popper-reference-hidden':isReferenceHidden,'data-popper-escaped':hasPopperEscaped});}// eslint-disable-next-line import/no-unused-modules
var hide = {name:'hide',enabled:true,phase:'main',requiresIfExists:['preventOverflow'],fn:hide$1};
function getSideOffsets(overflow,rect,preventedOffsets){if(preventedOffsets===void 0){preventedOffsets={x:0,y:0};}return {top:overflow.top-rect.height-preventedOffsets.y,right:overflow.right-rect.width+preventedOffsets.x,bottom:overflow.bottom-rect.height+preventedOffsets.y,left:overflow.left-rect.width-preventedOffsets.x};}function isAnySideFullyClipped(overflow){return [top,right,bottom,left].some(function(side){return overflow[side]>=0;});}function hide(_ref){var state=_ref.state,name=_ref.name;var referenceRect=state.rects.reference;var popperRect=state.rects.popper;var preventedOffsets=state.modifiersData.preventOverflow;var referenceOverflow=detectOverflow(state,{elementContext:'reference'});var popperAltOverflow=detectOverflow(state,{altBoundary:true});var referenceClippingOffsets=getSideOffsets(referenceOverflow,referenceRect);var popperEscapeOffsets=getSideOffsets(popperAltOverflow,popperRect,preventedOffsets);var isReferenceHidden=isAnySideFullyClipped(referenceClippingOffsets);var hasPopperEscaped=isAnySideFullyClipped(popperEscapeOffsets);state.modifiersData[name]={referenceClippingOffsets:referenceClippingOffsets,popperEscapeOffsets:popperEscapeOffsets,isReferenceHidden:isReferenceHidden,hasPopperEscaped:hasPopperEscaped};state.attributes.popper=Object.assign({},state.attributes.popper,{'data-popper-reference-hidden':isReferenceHidden,'data-popper-escaped':hasPopperEscaped});}// eslint-disable-next-line import/no-unused-modules
var hide$1 = {name:'hide',enabled:true,phase:'main',requiresIfExists:['preventOverflow'],fn:hide};
function distanceAndSkiddingToXY(placement,rects,offset){var basePlacement=getBasePlacement(placement);var invertDistance=[left,top].indexOf(basePlacement)>=0?-1:1;var _ref=typeof offset==='function'?offset(Object.assign({},rects,{placement:placement})):offset,skidding=_ref[0],distance=_ref[1];skidding=skidding||0;distance=(distance||0)*invertDistance;return [left,right].indexOf(basePlacement)>=0?{x:distance,y:skidding}:{x:skidding,y:distance};}function offset$1(_ref2){var state=_ref2.state,options=_ref2.options,name=_ref2.name;var _options$offset=options.offset,offset=_options$offset===void 0?[0,0]:_options$offset;var data=placements.reduce(function(acc,placement){acc[placement]=distanceAndSkiddingToXY(placement,state.rects,offset);return acc;},{});var _data$state$placement=data[state.placement],x=_data$state$placement.x,y=_data$state$placement.y;if(state.modifiersData.popperOffsets!=null){state.modifiersData.popperOffsets.x+=x;state.modifiersData.popperOffsets.y+=y;}state.modifiersData[name]=data;}// eslint-disable-next-line import/no-unused-modules
var offset = {name:'offset',enabled:true,phase:'main',requires:['popperOffsets'],fn:offset$1};
function distanceAndSkiddingToXY(placement,rects,offset){var basePlacement=getBasePlacement(placement);var invertDistance=[left,top].indexOf(basePlacement)>=0?-1:1;var _ref=typeof offset==='function'?offset(Object.assign({},rects,{placement:placement})):offset,skidding=_ref[0],distance=_ref[1];skidding=skidding||0;distance=(distance||0)*invertDistance;return [left,right].indexOf(basePlacement)>=0?{x:distance,y:skidding}:{x:skidding,y:distance};}function offset(_ref2){var state=_ref2.state,options=_ref2.options,name=_ref2.name;var _options$offset=options.offset,offset=_options$offset===void 0?[0,0]:_options$offset;var data=placements.reduce(function(acc,placement){acc[placement]=distanceAndSkiddingToXY(placement,state.rects,offset);return acc;},{});var _data$state$placement=data[state.placement],x=_data$state$placement.x,y=_data$state$placement.y;if(state.modifiersData.popperOffsets!=null){state.modifiersData.popperOffsets.x+=x;state.modifiersData.popperOffsets.y+=y;}state.modifiersData[name]=data;}// eslint-disable-next-line import/no-unused-modules
var offset$1 = {name:'offset',enabled:true,phase:'main',requires:['popperOffsets'],fn:offset};
function popperOffsets$1(_ref){var state=_ref.state,name=_ref.name;// Offsets are the actual position the popper needs to have to be
function popperOffsets(_ref){var state=_ref.state,name=_ref.name;// Offsets are the actual position the popper needs to have to be
// properly positioned near its reference element
// This is the most basic placement, and will be adjusted by
// the modifiers in the next step
state.modifiersData[name]=computeOffsets({reference:state.rects.reference,element:state.rects.popper,placement:state.placement});}// eslint-disable-next-line import/no-unused-modules
var popperOffsets = {name:'popperOffsets',enabled:true,phase:'read',fn:popperOffsets$1,data:{}};
var popperOffsets$1 = {name:'popperOffsets',enabled:true,phase:'read',fn:popperOffsets,data:{}};
function getAltAxis(axis){return axis==='x'?'y':'x';}
function preventOverflow$1(_ref){var state=_ref.state,options=_ref.options,name=_ref.name;var _options$mainAxis=options.mainAxis,checkMainAxis=_options$mainAxis===void 0?true:_options$mainAxis,_options$altAxis=options.altAxis,checkAltAxis=_options$altAxis===void 0?false:_options$altAxis,boundary=options.boundary,rootBoundary=options.rootBoundary,altBoundary=options.altBoundary,padding=options.padding,_options$tether=options.tether,tether=_options$tether===void 0?true:_options$tether,_options$tetherOffset=options.tetherOffset,tetherOffset=_options$tetherOffset===void 0?0:_options$tetherOffset;var overflow=detectOverflow(state,{boundary:boundary,rootBoundary:rootBoundary,padding:padding,altBoundary:altBoundary});var basePlacement=getBasePlacement(state.placement);var variation=getVariation(state.placement);var isBasePlacement=!variation;var mainAxis=getMainAxisFromPlacement(basePlacement);var altAxis=getAltAxis(mainAxis);var popperOffsets=state.modifiersData.popperOffsets;var referenceRect=state.rects.reference;var popperRect=state.rects.popper;var tetherOffsetValue=typeof tetherOffset==='function'?tetherOffset(Object.assign({},state.rects,{placement:state.placement})):tetherOffset;var normalizedTetherOffsetValue=typeof tetherOffsetValue==='number'?{mainAxis:tetherOffsetValue,altAxis:tetherOffsetValue}:Object.assign({mainAxis:0,altAxis:0},tetherOffsetValue);var offsetModifierState=state.modifiersData.offset?state.modifiersData.offset[state.placement]:null;var data={x:0,y:0};if(!popperOffsets){return;}if(checkMainAxis){var _offsetModifierState$;var mainSide=mainAxis==='y'?top:left;var altSide=mainAxis==='y'?bottom:right;var len=mainAxis==='y'?'height':'width';var offset=popperOffsets[mainAxis];var min=offset+overflow[mainSide];var max=offset-overflow[altSide];var additive=tether?-popperRect[len]/2:0;var minLen=variation===start?referenceRect[len]:popperRect[len];var maxLen=variation===start?-popperRect[len]:-referenceRect[len];// We need to include the arrow in the calculation so the arrow doesn't go
function preventOverflow(_ref){var state=_ref.state,options=_ref.options,name=_ref.name;var _options$mainAxis=options.mainAxis,checkMainAxis=_options$mainAxis===void 0?true:_options$mainAxis,_options$altAxis=options.altAxis,checkAltAxis=_options$altAxis===void 0?false:_options$altAxis,boundary=options.boundary,rootBoundary=options.rootBoundary,altBoundary=options.altBoundary,padding=options.padding,_options$tether=options.tether,tether=_options$tether===void 0?true:_options$tether,_options$tetherOffset=options.tetherOffset,tetherOffset=_options$tetherOffset===void 0?0:_options$tetherOffset;var overflow=detectOverflow(state,{boundary:boundary,rootBoundary:rootBoundary,padding:padding,altBoundary:altBoundary});var basePlacement=getBasePlacement(state.placement);var variation=getVariation(state.placement);var isBasePlacement=!variation;var mainAxis=getMainAxisFromPlacement(basePlacement);var altAxis=getAltAxis(mainAxis);var popperOffsets=state.modifiersData.popperOffsets;var referenceRect=state.rects.reference;var popperRect=state.rects.popper;var tetherOffsetValue=typeof tetherOffset==='function'?tetherOffset(Object.assign({},state.rects,{placement:state.placement})):tetherOffset;var normalizedTetherOffsetValue=typeof tetherOffsetValue==='number'?{mainAxis:tetherOffsetValue,altAxis:tetherOffsetValue}:Object.assign({mainAxis:0,altAxis:0},tetherOffsetValue);var offsetModifierState=state.modifiersData.offset?state.modifiersData.offset[state.placement]:null;var data={x:0,y:0};if(!popperOffsets){return;}if(checkMainAxis){var _offsetModifierState$;var mainSide=mainAxis==='y'?top:left;var altSide=mainAxis==='y'?bottom:right;var len=mainAxis==='y'?'height':'width';var offset=popperOffsets[mainAxis];var min=offset+overflow[mainSide];var max=offset-overflow[altSide];var additive=tether?-popperRect[len]/2:0;var minLen=variation===start?referenceRect[len]:popperRect[len];var maxLen=variation===start?-popperRect[len]:-referenceRect[len];// We need to include the arrow in the calculation so the arrow doesn't go
// outside the reference bounds
var arrowElement=state.elements.arrow;var arrowRect=tether&&arrowElement?getLayoutRect(arrowElement):{width:0,height:0};var arrowPaddingObject=state.modifiersData['arrow#persistent']?state.modifiersData['arrow#persistent'].padding:getFreshSideObject();var arrowPaddingMin=arrowPaddingObject[mainSide];var arrowPaddingMax=arrowPaddingObject[altSide];// If the reference length is smaller than the arrow length, we don't want
// to include its full size in the calculation. If the reference is small
@@ -188,7 +188,7 @@
// reference is not overflowing as well (e.g. virtual elements with no
// width or height)
var arrowLen=within(0,referenceRect[len],arrowRect[len]);var minOffset=isBasePlacement?referenceRect[len]/2-additive-arrowLen-arrowPaddingMin-normalizedTetherOffsetValue.mainAxis:minLen-arrowLen-arrowPaddingMin-normalizedTetherOffsetValue.mainAxis;var maxOffset=isBasePlacement?-referenceRect[len]/2+additive+arrowLen+arrowPaddingMax+normalizedTetherOffsetValue.mainAxis:maxLen+arrowLen+arrowPaddingMax+normalizedTetherOffsetValue.mainAxis;var arrowOffsetParent=state.elements.arrow&&getOffsetParent(state.elements.arrow);var clientOffset=arrowOffsetParent?mainAxis==='y'?arrowOffsetParent.clientTop||0:arrowOffsetParent.clientLeft||0:0;var offsetModifierValue=(_offsetModifierState$=offsetModifierState==null?void 0:offsetModifierState[mainAxis])!=null?_offsetModifierState$:0;var tetherMin=offset+minOffset-offsetModifierValue-clientOffset;var tetherMax=offset+maxOffset-offsetModifierValue;var preventedOffset=within(tether?min$1(min,tetherMin):min,offset,tether?max$1(max,tetherMax):max);popperOffsets[mainAxis]=preventedOffset;data[mainAxis]=preventedOffset-offset;}if(checkAltAxis){var _offsetModifierState$2;var _mainSide=mainAxis==='x'?top:left;var _altSide=mainAxis==='x'?bottom:right;var _offset=popperOffsets[altAxis];var _len=altAxis==='y'?'height':'width';var _min=_offset+overflow[_mainSide];var _max=_offset-overflow[_altSide];var isOriginSide=[top,left].indexOf(basePlacement)!==-1;var _offsetModifierValue=(_offsetModifierState$2=offsetModifierState==null?void 0:offsetModifierState[altAxis])!=null?_offsetModifierState$2:0;var _tetherMin=isOriginSide?_min:_offset-referenceRect[_len]-popperRect[_len]-_offsetModifierValue+normalizedTetherOffsetValue.altAxis;var _tetherMax=isOriginSide?_offset+referenceRect[_len]+popperRect[_len]-_offsetModifierValue-normalizedTetherOffsetValue.altAxis:_max;var _preventedOffset=tether&&isOriginSide?withinMaxClamp(_tetherMin,_offset,_tetherMax):within(tether?_tetherMin:_min,_offset,tether?_tetherMax:_max);popperOffsets[altAxis]=_preventedOffset;data[altAxis]=_preventedOffset-_offset;}state.modifiersData[name]=data;}// eslint-disable-next-line import/no-unused-modules
var preventOverflow = {name:'preventOverflow',enabled:true,phase:'main',fn:preventOverflow$1,requiresIfExists:['offset']};
var preventOverflow$1 = {name:'preventOverflow',enabled:true,phase:'main',fn:preventOverflow,requiresIfExists:['offset']};
function getHTMLElementScroll(element){return {scrollLeft:element.scrollLeft,scrollTop:element.scrollTop};}
@@ -239,15 +239,15 @@
// one.
function runModifierEffects(){state.orderedModifiers.forEach(function(_ref){var name=_ref.name,_ref$options=_ref.options,options=_ref$options===void 0?{}:_ref$options,effect=_ref.effect;if(typeof effect==='function'){var cleanupFn=effect({state:state,name:name,instance:instance,options:options});var noopFn=function noopFn(){};effectCleanupFns.push(cleanupFn||noopFn);}});}function cleanupModifierEffects(){effectCleanupFns.forEach(function(fn){return fn();});effectCleanupFns=[];}return instance;};}
var defaultModifiers=[eventListeners,popperOffsets,computeStyles,applyStyles,offset,flip,preventOverflow,arrow,hide];var createPopper=/*#__PURE__*/popperGenerator({defaultModifiers:defaultModifiers});// eslint-disable-next-line import/no-unused-modules
var defaultModifiers=[eventListeners,popperOffsets$1,computeStyles$1,applyStyles$1,offset$1,flip$1,preventOverflow$1,arrow$1,hide$1];var createPopper=/*#__PURE__*/popperGenerator({defaultModifiers:defaultModifiers});// eslint-disable-next-line import/no-unused-modules
var Popper = /*#__PURE__*/Object.freeze({
__proto__: null,
afterMain: afterMain,
afterRead: afterRead,
afterWrite: afterWrite,
applyStyles: applyStyles,
arrow: arrow,
applyStyles: applyStyles$1,
arrow: arrow$1,
auto: auto,
basePlacements: basePlacements,
beforeMain: beforeMain,
@@ -255,22 +255,22 @@
beforeWrite: beforeWrite,
bottom: bottom,
clippingParents: clippingParents,
computeStyles: computeStyles,
computeStyles: computeStyles$1,
createPopper: createPopper,
detectOverflow: detectOverflow,
end: end,
eventListeners: eventListeners,
flip: flip,
hide: hide,
flip: flip$1,
hide: hide$1,
left: left,
main: main,
modifierPhases: modifierPhases,
offset: offset,
offset: offset$1,
placements: placements,
popper: popper,
popperGenerator: popperGenerator,
popperOffsets: popperOffsets,
preventOverflow: preventOverflow,
popperOffsets: popperOffsets$1,
preventOverflow: preventOverflow$1,
read: read,
reference: reference,
right: right,
@@ -884,19 +884,13 @@
:{...variantOrOptions};const defaultOptions={variant:'primary',duration:2000,gravity:'top',position:'center',stopOnFocus:true};const options={...defaultOptions,...userOptions};const getColorByName=(variant='')=>{let color;switch(variant.trim().toLowerCase()){case 'primary':color='#0d6efd';break;case 'secondary':color='#6c757d';break;case 'warning':color='#ffc720';break;case 'success':color='#13653f';break;case 'info':color='#25cff2';break;case 'error':case 'danger':color='#a52834';break;case 'light':color='#babbbc';break;case 'dark':color='#373b3e';break;default:console.warn('variant not found');color='white';}return color;};const show=()=>{const{variant,style,...restProps}=options;Toastify({text,className:variant,...restProps,style:{background:getColorByName(variant),...style// Ermöglicht bei Bedarf auch individuelle CSS-Overrides
}}).showToast();};return {show};};
const byteToHex=[];for(let i=0;i<256;++i){byteToHex.push((i+0x100).toString(16).slice(1));}function unsafeStringify(arr,offset=0){return (byteToHex[arr[offset+0]]+byteToHex[arr[offset+1]]+byteToHex[arr[offset+2]]+byteToHex[arr[offset+3]]+'-'+byteToHex[arr[offset+4]]+byteToHex[arr[offset+5]]+'-'+byteToHex[arr[offset+6]]+byteToHex[arr[offset+7]]+'-'+byteToHex[arr[offset+8]]+byteToHex[arr[offset+9]]+'-'+byteToHex[arr[offset+10]]+byteToHex[arr[offset+11]]+byteToHex[arr[offset+12]]+byteToHex[arr[offset+13]]+byteToHex[arr[offset+14]]+byteToHex[arr[offset+15]]).toLowerCase();}
const rnds8=new Uint8Array(16);function rng(){return crypto.getRandomValues(rnds8);}
function v4(options,buf,offset){if(crypto.randomUUID){return crypto.randomUUID();}return _v4(options);}function _v4(options,buf,offset){options=options||{};const rnds=options.random??options.rng?.()??rng();if(rnds.length<16){throw new Error('Random bytes length must be >= 16');}rnds[6]=rnds[6]&0x0f|0x40;rnds[8]=rnds[8]&0x3f|0x80;return unsafeStringify(rnds);}
// import 'bootstrap';
// Factory Function
const ProductManager=(target='.product-manager',options={})=>{// === Selektor or Element ===
if(typeof target==='string'){const elements=document.querySelectorAll(target);if(elements.length===0){console.warn('Product Manager not found',target);return null;}if(elements.length>1){return [...elements].map(el=>ProductManager(el,options));// Rekursion
}target=elements[0];}else if(target instanceof NodeList||Array.isArray(target)){if(target.length===0)return null;if(target.length===1){target=target[0];}else {return [...target].map(el=>ProductManager(el,options));// Rekursion
}}// === DOM & VARS =======
const uId=v4();const module=target;if(!module)return;const DOM={module,table:module.querySelector('.table-products'),tbody:module.querySelector('tbody'),inputName:module.querySelector('.input-product-name'),inputPrice:module.querySelector('.input-product-price'),btnAdd:module.querySelector('.button-product-add'),templateRow:module.querySelector('.template-row'),// Nav Actions
const uId=uuid.v4();const module=target;if(!module)return;const DOM={module,table:module.querySelector('.table-products'),tbody:module.querySelector('tbody'),inputName:module.querySelector('.input-product-name'),inputPrice:module.querySelector('.input-product-price'),btnAdd:module.querySelector('.button-product-add'),templateRow:module.querySelector('.template-row'),// Nav Actions
navActions:module.querySelector('.nav-products-actions'),btnReset:module.querySelector('.button-products-reset'),btnSave:module.querySelector('.button-products-save'),// Modal Edit
modalEdit:module.querySelector('.modal-edit'),formEdit:module.querySelector('.form-product-edit'),inputEditName:module.querySelector('.input-edit-name'),inputEditPrice:module.querySelector('.input-edit-price'),inputEditId:module.querySelector('.input-edit-id'),inputEditPosition:module.querySelector('.input-edit-position'),btnUpdate:module.querySelector('.button-product-update'),// Modal Delete
modalDelete:module.querySelector('.modal-delete'),productName:module.querySelector('strong.product-name'),btnConfirmDelete:module.querySelector('.button-confirm-delete')};const SERVER_BASE_URL='http://127.0.0.1:8000';const bsModalEdit=new Modal(DOM.modalEdit,{backdrop:'static',keyboard:true});const bsModalDelete=new Modal(DOM.modalDelete,{backdrop:true,keyboard:true});// console.log(DOM);
@@ -1009,8 +1003,7 @@
router();};// === EVENTHANDLER =====
// === XHR/FETCH ========
// === FUNCTIONS ========
const router=()=>{const path=window.location.pathname;console.log(path);switch(path){case '/':case '/index.html':console.log('HOME');new Splide('.splide',{cover:true,autoHeight:true,height:'100%',fixedHeight:'100%'}).mount();break;case '/projects/02_product-manager.html':console.log('PRODUCT_MANAGER');ProductManager();break;default:console.log('no scripts found');}};init();})();
})();
const router=()=>{const path=window.location.pathname;console.log(path);switch(path){case '/':case '/index.html':console.log('HOME');new Splide('.splide',{cover:false,autoHeight:true,height:'100%',fixedHeight:'100%'}).mount();break;case '/projects/02_product-manager.html':console.log('PRODUCT_MANAGER');ProductManager();break;default:console.log('no scripts found');}};init();})();
})(uuid);
//# sourceMappingURL=../map/build.js.map
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -27,20 +27,13 @@
<figcaption>JS course</figcaption>
</figure>
</div>
<!-- ▼ Slider Splide ▼ -->
<section class="splide my-slider" aria-label="Header Slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://dummyimage.com/1920x600/f90/333.jpg" alt="slide 01" />
</li>
<li class="splide__slide">
<img src="https://dummyimage.com/1920x600/c40/333.jpg" alt="slide 02" />
</li>
<li class="splide__slide">
<img src="https://dummyimage.com/1920x600/fc0/333.jpg" alt="slide 03" />
</li>
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/f90/333.jpg')"></li>
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/c40/333.jpg')"></li>
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/fc0/333.jpg')"></li>
</ul>
</div>
</section>
@@ -6,6 +6,5 @@
<figcaption>JS course</figcaption>
</figure>
</div>
@@include('slider-splide.html')
</header>
@@ -2,15 +2,9 @@
<section class="splide my-slider" aria-label="Header Slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://dummyimage.com/1920x600/f90/333.jpg" alt="slide 01" />
</li>
<li class="splide__slide">
<img src="https://dummyimage.com/1920x600/c40/333.jpg" alt="slide 02" />
</li>
<li class="splide__slide">
<img src="https://dummyimage.com/1920x600/fc0/333.jpg" alt="slide 03" />
</li>
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/f90/333.jpg')"></li>
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/c40/333.jpg')"></li>
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/fc0/333.jpg')"></li>
</ul>
</div>
</section>
@@ -25,7 +25,7 @@ import Splide from '@splidejs/splide';
case '/index.html':
console.log('HOME');
new Splide('.splide', {
cover: true,
cover: false,
autoHeight: true,
height: '100%',
fixedHeight: '100%',
@@ -14,7 +14,18 @@
justify-content: center;
// border: 20px solid rgba(white, 0.25);
.content-box {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
width: auto;
margin: 0 auto;
height: 100%;
max-width: 360px;
max-height: 380px;
}
position: relative;
.splide {
position: absolute;
@@ -23,5 +34,17 @@
width: 100%;
top: 0;
overflow: hidden;
.splide__track {
height: 100%;
.splide__slide {
background-size: cover;
background-position: center;
img {
object-fit: cover;
width: 100%;
height: 100%;
}
}
}
}
}
@@ -1,5 +1,10 @@
import { task, src, dest, watch, series, parallel } from 'gulp';
// Allgemeine Module für Gulp
// npm install gulp-plumber gulp-rename -D
import plumber from 'gulp-plumber';
import rename from 'gulp-rename';
// Server =====
// npm install browser-sync -D
@@ -24,11 +29,12 @@ task('reload', (done) => {
// HTML ========
import fileInclude from 'gulp-file-include';
task('html', (done) => {
task('html', () => {
const sourceFiles = ['./dev/html/pages/**/*.html', './dev/html/pages/*.html'];
const targetFolder = './';
src(sourceFiles)
return src(sourceFiles)
.pipe(plumber())
.pipe(
fileInclude({
prefix: '@@',
@@ -36,16 +42,15 @@ task('html', (done) => {
}),
)
.pipe(dest(targetFolder));
done();
});
// JS ===========
// npm install rollup @rollup/stream @rollup/plugin-replace @rollup/plugin-node-resolve @rollup/plugin-commonjs vinyl-source-stream vinyl-buffer -D
// npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime gulp-sourcemaps -D
// npm install @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
import { Transform } from 'node:stream';
import rollupStream from '@rollup/stream';
import { nodeResolve } from '@rollup/plugin-node-resolve'; // import Kurzschreibweise (suche Module im node_modules Ordner)
import commonJs from '@rollup/plugin-commonjs'; // commonjs module werden module (ES6) kompatibel gemacht
@@ -53,7 +58,6 @@ import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import rollupReplace from '@rollup/plugin-replace'; // Umbenennung von Variablen in den Modulen möglich
import sourcemaps from 'gulp-sourcemaps';
import { transformAsync } from '@babel/core'; // Babel 8 direkt: @rollup/plugin-babel peer-dependet noch auf @babel/core 7
const babelOptions = {
babelrc: false,
@@ -109,6 +113,25 @@ const babel = ({ extensions }) => {
};
};
// @rollup/stream hängt die Sourcemap immer inline an. Hier wird sie nach file.sourceMap verschoben,
// damit gulp sie über dest(..., { sourcemaps }) als externe Datei schreibt (ersetzt gulp-sourcemaps)
const inlineMapToFile = ({ sourceRoot }) =>
new Transform({
objectMode: true,
transform(file, _encoding, callback) {
const code = file.contents.toString();
const pattern = /\n\/\/# sourceMappingURL=data:application\/json;[^,]*base64,([A-Za-z0-9+/=]+)/g;
const match = [...code.matchAll(pattern)].at(-1); // rollup (inline) und @rollup/stream hängen je eine identische Map an
if (match) {
file.contents = Buffer.from(code.replace(pattern, '').trimEnd() + '\n');
file.sourceMap = { ...JSON.parse(Buffer.from(match[1], 'base64').toString()), file: file.relative, sourceRoot };
}
callback(null, file);
},
});
let jsCache;
task('js', () => {
@@ -119,7 +142,7 @@ task('js', () => {
input: sourceFile,
output: {
format: 'iife',
sourcemap: 'inline',
sourcemap: 'inline', // inlineMapToFile schreibt sie als externe Datei nach assets/map
},
cache: jsCache,
plugins: [
@@ -139,13 +162,8 @@ task('js', () => {
})
.pipe(source('build.js'))
.pipe(buffer())
.pipe(sourcemaps.init({ loadMaps: true }))
.pipe(
sourcemaps.write('../map', {
sourceRoot: '../dev/scripts',
}),
)
.pipe(dest(targetFolder));
.pipe(inlineMapToFile({ sourceRoot: '../../' })) // Quellpfade sind relativ zum Projekt, Map liegt in assets/map
.pipe(dest(targetFolder, { sourcemaps: '../map' }));
});
// CSS ============
@@ -154,15 +172,13 @@ import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
import autoPrefixer from 'gulp-autoprefixer';
// import plumber from 'gulp-plumber';
const sass = gulpSass(dartSass);
task('css', (done) => {
task('css', () => {
const sourceFile = './dev/scss/main.scss';
const targetFolder = './assets/css';
src(sourceFile, { allowEmpty: true, sourcemaps: true })
// .pipe(plumber()) // Prevent pipe breaking caused by errors from gulp plugins
return src(sourceFile, { allowEmpty: true, sourcemaps: true })
.pipe(plumber()) // Prevent pipe breaking caused by errors from gulp plugins
.pipe(
sass({
outputStyle: 'expanded',
@@ -176,13 +192,11 @@ task('css', (done) => {
],
sourceMap: false,
debug: true,
quieDeps: true, //Unix
quietDeps: true, //Unix
}).on('error', sass.logError),
) //
.pipe(autoPrefixer()) // fehlende prefixe in css werden gesetzt. (-webkit-, -moz- usw.)
.pipe(dest(targetFolder, { sourcemaps: '../map' }));
done();
});
task('watcher', () => {
@@ -201,10 +215,115 @@ task('test', (done) => {
done();
});
task('copy', (done) => {
src('package.json')
// .pipe(MODULE)
.pipe(dest('./docs'));
// ======================================
// Build Mode
// ======================================
// CLEANER ==============================
// npm install del -D
import { deleteSync } from 'del';
task('clean', (done) => {
deleteSync(['./dist']);
done();
});
// COPY =================================
task('copy', () => {
const sourceFiles = [
'./**',
'.htaccess',
'!./MATERIAL',
'!./MATERIAL/**',
'!./dev',
'!./dev/**',
'!./node_modules',
'!./node_modules/**',
'!./dist',
'!./dist/**',
'!.browserslistrc',
'!package-lock.json',
'!package.json',
'!.gitignore',
'!README.md',
'!.DS_Store',
'!gulpfile.js',
'!gulpfile-to-migrate.js',
'!composer.json',
'!composer.lock',
];
const targetFolder = './dist';
return src(sourceFiles, { allowEmpty: true, encoding: false }).pipe(dest(targetFolder));
});
// COMPRESS JS ==========================
// npm install gulp-terser -D
import terser from 'gulp-terser';
task('compress:js', () => {
const sourceFile = './dist/assets/js/build.js';
const targetFolder = './dist/assets/js';
return src(sourceFile)
.pipe(terser())
.pipe(rename({ suffix: '.min' }))
.pipe(dest(targetFolder));
});
// COMPRESS CSS =========================
// npm install gulp-clean-css -D
import cleanCss from 'gulp-clean-css';
task('compress:css', () => {
const sourceFile = './dist/assets/css/main.css';
const targetFolder = './dist/assets/css';
return src(sourceFile)
.pipe(cleanCss({ compatibility: 'ie11' }))
.pipe(rename({ suffix: '.min' }))
.pipe(dest(targetFolder));
});
// REPLACE IN FILES =====================
// npm install gulp-replace -D
import replace from 'gulp-replace';
import crypto from 'node:crypto';
task('replaceString', () => {
const id = crypto.randomBytes(12).toString('base64url'); // Cache-Busting
return src(['./dist/**/*.html'], { base: './dist' })
.pipe(replace('js/build.js', 'js/build.min.js?r=' + id))
.pipe(replace('css/main.css', 'css/main.min.css?r=' + id))
.pipe(dest('./dist'));
});
// COMPRESS HTML ========================
// npm install gulp-html-minifier-terser -D
import htmlmin from 'gulp-html-minifier-terser';
task('compress:html', () => {
const sourceFiles = ['./dist/**/*.html'];
const targetFolder = './dist';
return src(sourceFiles, { base: './dist' })
.pipe(plumber())
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(dest(targetFolder));
});
// SIZE REPORT ==========================
// npm install gulp-sizereport -D
import sizeReport from 'gulp-sizereport';
task('size', () => {
const sourceFiles = ['./dist/**/*.html', './dist/**/*.min.js', './dist/**/*.min.css'];
return src(sourceFiles, { allowEmpty: true }).pipe(sizeReport());
});
// Main BUILD Task ======
task(
'build',
series('css', 'js', 'html', 'clean', 'copy', 'compress:js', 'compress:css', 'replaceString', 'compress:html', 'size'),
);
@@ -27,20 +27,13 @@
<figcaption>JS course</figcaption>
</figure>
</div>
<!-- ▼ Slider Splide ▼ -->
<section class="splide my-slider" aria-label="Header Slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://dummyimage.com/1920x600/f90/333.jpg" alt="slide 01" />
</li>
<li class="splide__slide">
<img src="https://dummyimage.com/1920x600/c40/333.jpg" alt="slide 02" />
</li>
<li class="splide__slide">
<img src="https://dummyimage.com/1920x600/fc0/333.jpg" alt="slide 03" />
</li>
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/f90/333.jpg')"></li>
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/c40/333.jpg')"></li>
<li class="splide__slide" style="background-image: url('https://dummyimage.com/1920x600/fc0/333.jpg')"></li>
</ul>
</div>
</section>
File diff suppressed because it is too large Load Diff
@@ -1,7 +1,7 @@
{
"name": "website-frontend",
"version": "0.0.1",
"description": "webseite mit sas, rollup, gulp, module",
"version": "1.0.0",
"description": "webseite mit sass, rollup, gulp, module",
"keywords": [],
"license": "ISC",
"author": "",
@@ -21,14 +21,21 @@
"@rollup/plugin-replace": "^6.0.3",
"@rollup/stream": "^3.0.1",
"browser-sync": "^3.0.4",
"del": "^9.0.1",
"esbuild": "^0.28.2",
"gulp": "^5.0.1",
"gulp-autoprefixer": "^10.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-file-include": "^2.3.0",
"gulp-html-minifier-terser": "^8.0.0",
"gulp-plumber": "^1.2.1",
"gulp-rename": "^2.1.0",
"gulp-replace": "^1.1.4",
"gulp-sass": "^6.0.1",
"gulp-sourcemaps": "^3.0.0",
"gulp-sizereport": "^1.2.1",
"gulp-terser": "^2.1.0",
"npm-run-all": "^4.1.5",
"rollup": "^4.64.5",
"rollup": "^4.64.6",
"sass": "^1.105.1",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
@@ -36,7 +43,6 @@
"dependencies": {
"@splidejs/splide": "^4.1.4",
"bootstrap": "^5.3.8",
"toastify-js": "^1.12.0",
"uuid": "^14.0.3"
"toastify-js": "^1.12.0"
}
}