Live CockpitCMS+Svelte Projects:

4. Svelte Files Explanations

Parts

Directly imported into App.svelte and nowhere else.

Since the rule is not sufficiently followed, this folder may be restructured. Also, graphical and non-graphical elements are quite mixed in it.

Head - Changes the page's , description and robots

Header,Footer - Always at the top / bottom of the page

Layout - receives an object with the page layout and breaks it down into individual components from sections

Loading - loading, used in {#await} blocks

Modal - modal iframe (replacement for lity to avoid having to import jQuery), uses "writable() store", can only be defined once, is also imported in sections as a module (should be in a different folder than Parts because of the rule) to change its content and activate it via writable

Theme - simple implementation for quick theme switching

LangSelector - currently implemented only in the header = imported outside App.svelte

GlobalScripts - loads external scripts using JSLoaderModule that are always available on the page (e.g. nextSection)

Routes

Everything related to background navigation (slug management)

Router - Creates an eventListener on window for all anchor elements, causes internal navigation instead of refresh if the anchor meets conditions (poorly defined, e.g. modal=true, besides it doesn't use writable() store but binding via props, which prevents easy access from any Svelte component)
RouterModule - Function for causing internal navigation, imported besides the router where internal navigation is needed outside anchor elements (i.e. on elements that Router ignores). Is in a separate file
Preview - cockpitcms live preview support. Caching uses a silly trick in App.svelte
LanguageStore - Stores the current language and supported languages for all components that need it (currently only App, Router, Nav, LangSelector, Header and Footer). Initialization of supported languages in App via .setSupported

Scripts

All files in this folder are scripts with only context="module", i.e. they only export functions and are not graphical.

Slideshow - Slideshow in the header for mottos, possibly this might become a full-fledged separate component
YTurlToEmbed - Converts YouTube URL to embed format, if it receives a non-YouTube URL it returns an empty string
LangDetectModule - Imported into App.svelte and Router.svelte, detects what language the user prefers according to window.navigator.language(s), sets the initial language of the page accordingly via Router.svelte.
JSLoaderModule - Function for importing external JS files on-the-fly with callback, currently only in GlobalScripts
isOffScreen - Detection whether an element is off screen, used for animations and auto-pausing video (in Video,Bar,Header,Titulka,Ranking)

Sections

All values (here some main ones are listed in parentheses in simplified form) should be optional (WIP: so that the user cannot kill the Svelte process e.g. if {#each} accidentally receives null)

Bar
- Simple row
- (logo, text, nav)
Floaters
- Floating boxes, any number, wrap
- (heading, subheading, text, corner text)
Ranking
- Large numbers with small subheadings next to each other, any number, wrap
- (heading, span)
Ref
- Autoscroll (at small resolutions) for logos (= references)
- (logo array)
Slide
- Complex solution for two full explanations side by side
- (left/right: heading, text, nav, bg, bg color)
Titulka
- Clear heading in stylish design, with optional text and navigation
- Left or centered display, special double background layer
- (heading, text, nav, bg img, bg texture, bg color)
Video
- YouTube or local video
- Options: Autoplay Loop/Controls and immersive stylish iPhone theme
- (ytlink/src, options)
Bubbles
- Slideshow "bubbles", i.e. Reviews
- Automatic slideshow, automatic pause on mouseover, resume on mouseout, buttons for navigating between slides
- (text array)


Sections find their use as components in CockpitCMS from which the entire page is composed via `Layout.svelte`

CSS z-index index

All elements that use z-index and their value, sorted in descending order. For easy identification of what is at which level.

1005 Modal (iframe) - because behind the iframe is a background with on:click close
1000 Modal (#modal) - modal (and thus also the background on it)
999 Header (header) - fixed header always at the top of the page
998 Header (nav) - navigation in nav-wrapper (only on mobile)
997 Header (bg-close) - for navigation in nav-wrapper (only on mobile)
250 App (section.fullscreen) - used only in Loading, would be useful in modal too
150 Flies (.overlay) - freely floating graphic elements with pointer-events:none;
99 Titulka (.content) - so that text content is above .pic
99 Video (.immersivescreen:before) - iPhone overlay
10 Slide (.left) - clip-path
9, -1 Slide (.right) - so that the background behind the clip-path is higher
9 Floaters (.floaters) - don't know why it's defined here

Previous: 3. Backend parts of CockpitCMS
Next: 5. Process On Page Load