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 Implementation

By Mads Stoumann

Made with Slides.com

OneBlock Technical Implementation

  • 53

More from Mads Stoumann