OneBlock
Technical
Implmentation

FOLDERS

src/oneblock
areas/oneblock/views
clientresources/editors/oneblock

src/oneblock/assets/css

oneblock.css
- oneblock-animations.css
- oneblock-aspect.css
- oneblock-borderradius.css
- etc.
styles.css
- oneblock.css
- oneblock-config-BRAND.css

CSS CUSTOM PROPS,
EXAMPLE:

.c-ob__bg-caption {
  background: var(--ob-C-bg0);
  color: var(--ob-C-c0);
  font-family: var(--ob-C-ff0);
  font-size: var(--ob-C-fz0);
  font-weight: var(--ob-C-fw0);
  grid-area: caption;
  line-height: var(--ob-C-lh0);
  padding: var(--ob-C-pt0) var(--ob-C-pl0);
  position: absolute;
  text-transform: var(--ob-C-tt0);
  top: var(--ob-distance-tb);
}

NOTE: When IE dies, it's not nessecary to toggle micro-classes, but simply updating CSS Custom Props.

prefixes to target specific ob elements:

/* Prefixes for modifier classes
=================================
-B Background Image/Video
-C Image Caption
-E Content Wrapper
-H Headline
-I Image
-K Secondary Link
-L Primary Link
-M Meta
-N Tagline
-O OneBlock
-S Splash
-T Text
-W Background Image/Video Wrapper
-X Section / Wrapper
*/

emett abbreviations:
https://docs.emmet.io/cheat-sheet/

/* EMETT
=================================
bgc : background-color
c: color
ff: font-family
fz: font-size
etc.
*/

works in VS CODE
OUT-Of-the-box

brand-specific files:

oneblock-config-callme.css
oneblock-config-telia.css

src/oneblock/assets/editor-config

editor-callme.json
editor-telia.json

{
  "header": "Border Radius",
  "group": "-O-br",
  "items": [
  {
    "name": "none",
    "type": "text",
    "value": "-O-br00",
    "checked": true
  },
  {
    "name": "2px",
    "type": "text",
    "value": "-O-br1"
  },
  {
    "name": "3px",
    "type": "text",
    "value": "-O-br2"
  }
  ]
}

NOTE: The OB-editor will replace any CSS-key matching a pattern. A key ending with double zeroes (00) is considered "default", and the key will be removed.

src/oneblock/ASSETS/js

common.mjs
dialog.mjs
oneblock-client.mjs
oneblock-custom.mjs
oneblock-editor.mjs
oneblock-init.mjs
oneblock-load.js (webpack entry)
oneblock-sections.mjs
oneblock-templates.mjs
oneblock-templates-sections.mjs
oneblock-widgets.mjs

oneblock-client.mjs

observeIntersections => animations
observeResize => main method
renderSplash
setCustom (oneblock-custom.mjs)
setJSHooks (oneblock-widgets.mjs)
setVideoPlay

oneblock-init.mjs

imports and runs methods from oneblock-client.mjs
runs polyfills for IE:
- details/summary
- objectFit fallback
- svguse (issue with svg4everybody)

src/oneblock/ASSETS/svg

oneblock-editor.svg
splash.svg

src/oneblock/docs

oneblock-guide.md

areas/oneblock/views

index.cshtml

clienresources/editors/oneblock

"assets"-folder-structure similar to "src/oneblock", files are copied here when webpack task "oneblock" is triggered.
epi-styles.css
OneBlockEditor.js
tools.mjs

oneblockeditor.js

oneblock-editor.mjs

DoJo-widget-code, wrapping the OB-editor in a container, triggering changes, pushing changes to Epi.
oneblock:clientsideupdate (OB changed)
oneblock:serversideupdate (Change OB)

editor-brand.json

"eventPresetLoad": "oneblock:serverside",
"eventPresetChange": "oneblock:clientside",

this.app.dispatchEvent(
  new CustomEvent(this.settings.eventPresetChange, {
    detail: JSON.stringify(preset)
  })
)

OneBlock Technical Implmentation