@ -4,116 +4,605 @@
* @ copyright by its creator Christian Martin
* /
/ * *
* A chainable HTMLElement builder .
* Represents the most basic and simple form of a Component .
* It is mainly a collection of wrapper methods
* around the HTMLElement methods to make them chainable .
* It serves as base for further functionallity extensions .
* @ property { Map < string , SStoreDefinition > } _ style
* /
class Component extends ScriptStoringComponent {
class Component extends StyleAndScriptStoringComponent {
/ * *
* @ type { boolean }
* /
# isCompel ;
/ * *
* @ type { WebTrinity }
* /
_ wenity ;
/ * *
* @ type { Array < any > }
* /
_ toRegister ;
/ * *
* @ type { boolean }
* /
_ isContextMenu ;
/ * *
* Initializes the component
* @ param { HTMLElement } element the base element
* @ param { Map < string , string > } attr Specific already known attributes
* /
constructor ( element , attr = { } ) {
super ( element , attr ) ;
this . _ modifier = new Modifier ( ) . margin ( new Sides ( ) . all ( 0 ) ) ;
var akeys = Object . keys ( attr ) ;
for ( let i = 0 ; i < akeys . length ; i ++ ) {
element . setAttribute ( akeys [ i ] , attr [ akeys [ i ] ] ) ;
}
this . _ element = element ;
this . # isCompel = false ;
this . _ isContextMenu = false ;
this . _ modifier = new Modifier ( )
. margin ( new Sides ( ) . all ( 0 ) ) ;
this . _ modifier . _ modifications [ 'display' ] = "flex" ;
this . _ toRegister = [ ] ;
}
/ * *
* Adds a class to classList via HTMLElement . classList . add ( ) method .
* Further collects rules in a property until generate is called .
*
* @ CAUGHTION implementation is not safe to use , ignoring extStore is recommended ;
*
* @ todo difference between stylings and classes , extStore logic in combination with the Page . register ... logic
*
* @ override
*
* @ param { string } styleClass ( without the '.' in the front )
* @ param { string | Modifier | map < string , string > } styling
* @ param { ExtStorage | ExtStoreType | ExtStorePosition | OverwriteBehaviour | EXPosConfer | ESOverwriteConfer } extStore
* if a unique definition is desired , all constants or configurator objects are allowed - they will be processed accordingly
* @ returns { Component } this component object
* /
addStyleClass ( styleClass , styling = null , extStore = null ) {
if ( ! extStore ) {
extStore = this . _ styleClassesExtStore ;
} else if ( extStore . isMissing ( ) ) {
extStore = extStore . fillBy ( this . _ styleClassesExtStore ) ;
}
if ( styling ) {
if ( styling instanceof Modifier ) {
styling = styling . _ modifications ;
}
Page . registerStyling ( '.' + styleClass , styling ) ;
}
this . _ element . classList . add ( styleClass ) ;
return this ;
}
/ * *
*
* @ param { boolean } vertical Defines if the Component should overflow vertically ( default : true )
* @ param { boolean } horizontal Defines if the Component should overflow horizontally ( default : false )
* @ returns { Component }
* /
overflow ( vertical = true , horizontal = false ) {
if ( vertical ) {
this . _ modifier . _ modifications [ "overflow-y" ] = "auto" ;
}
if ( horizontal ) {
this . _ modifier . _ modifications [ "overflow-x" ] = "auto" ;
}
return this ;
}
/ * *
*
* @ param { boolean } untilFound
* @ returns { Component }
* /
hidden ( untilFound = false ) {
Page . registerStyling ( ".compel-mech-hidden" , { "hidden" : "hidden" } ) ;
this . _ modifier . removeStyleRule ( "display" ) ;
this . setAttribute (
"hidden" ,
( untilFound ? "until-found" : "hidden" )
) ;
return this ;
}
/ * *
*
* @ returns { Component }
* /
isHigherComponent ( ) {
this . # isCompel = true ;
return this . setAttribute ( "data-compel-isHCompel" , "true" )
}
/ * *
* Collects the given List in the _ toRegister attribute .
* When generate ( ) is called ,
* the created Element will be registered ( added ) in every list
* within the list .
* @ param { Array } listName
* @ param { * | string | Array < * > } listName
* /
subscribeOnGenerate ( listName ) {
this . _ toRegister . push ( listName ) ;
return this ;
}
dragable ( ) {
this . setAttribute ( "draggable" , "true" ) ;
this . setAttribute ( "dropEffect" , "none" ) ;
this . addStyleClass ( "comp-el-mech-draggable" ) ;
/ * *
*
* @ returns { Component }
* /
registerAsContextMenu ( ) {
this . _ isContextMenu = true ;
this . addStyleClass ( 'contextmenu' )
. hidden ( ) ;
return this ;
}
return this . addEventListener (
CommonEvents . DRAG_START ,
( e ) => {
console . log ( "DragEvent" , e ) ;
console . log ( "Attr" , this . _ element . getAttribute ( "data-autocompel" ) ) ;
e . dataTransfer
. setData (
"text/plain" ,
this . _ element . getAttribute ( "data-autocompel" )
) ;
/ * *
* @ todo Positioning of the contextmenu element
* @ todo extract into an extra function ( allity ) provider
*
* @ param { Component } component
* @ param { Function < HTMLElement | Event > => Sides } getRefPos
* @ param { null | ExtStorage } [ extStore = null ]
* @ returns { Component }
* /
contextMenu ( component , getRefPos = null , extStore = null ) {
if ( ! component . _ isContextMenu ) {
component . registerAsContextMenu ( ) ;
}
if ( ! getRefPos ) {
getRefPos = function ( cmEvent ) {
return new Sides ( )
. left ( cmEvent . pageX )
. top ( cmEvent . pageY ) ;
}
}
let cMenuWenity = component . generate ( ) ;
let identifier = cMenuWenity . html . getAttribute ( "data-autocompel" ) ;
function hideCMenu ( el ) {
el . setAttribute ( "hidden" , "hidden" ) ;
el . style . display = "none" ;
}
function hideOnEscape ( event ) {
if ( event . key === "Escape" ) {
let menu = document . querySelector ( ` [data-autocompel=" ${ identifier } " ` ) ;
hideCMenu ( menu ) ;
document . removeEventListener ( "keyup" )
}
}
function hideOnClickOutsideOfBounds ( event ) {
let menu = document . querySelector ( ` [data-autocompel=" ${ identifier } " ` ) ;
let area = getEnclosingBounds ( menu ) ;
if ( ! areXYInArea ( area , event . clientX , event . clientY ) ) {
//if (event.target.offsetParent != menu) {
hideCMenu ( menu ) ;
document . removeEventListener ( "click" )
}
}
this . addEventListener (
"contextmenu" ,
function ( event ) {
event . preventDefault ( ) ;
/ * *
* @ type { Sides }
* /
const pos = getRefPos ( event ) ;
let menu = document . querySelector ( ` [data-autocompel=" ${ identifier } " ` ) ;
menu . style . left = ` ${ pos . getByIndex ( SideDirections . LEFT ) } px ` ;
menu . style . top = ` ${ pos . getByIndex ( SideDirections . TOP ) } px ` ;
menu . style [ "display" ] = "block" ;
menu . removeAttribute ( "hidden" ) ;
document . addEventListener ( "click" , hideOnClickOutsideOfBounds ) ;
document . addEventListener ( "keyup" , hideOnEscape ) ;
}
) ;
return this ;
}
onDrop ( ) {
this . onDragOver ( ) ;
this . addStyleClass ( "comp-el-mech-drop" ) ;
return this . addEventListener (
CommonEvents . DROP ,
( e ) => {
e . preventDefault ( ) ;
let draggedKey = e . dataTransfer . getData ( "text" ) ;
let draggedElement = document . querySelector ( ` [data-autocompel=" ${ draggedKey } "] ` ) ;
let target = e . target
. closest ( '.comp-el-mech-drop' ) ;
if ( ! [ ... target . childNodes ] . includes ( draggedElement ) ) {
target
. appendChild ( draggedElement ) ;
/ * *
*
* @ param { * } dndGroup
* @ returns { Component }
* /
draggable ( dndGroup = null ) {
let selector = this . _ element . getAttribute ( "data-autocompel" ) ;
Page . registerStyling ( ".grabbin-cursor" , { "cursor" : "grab" } ) ;
return this . addStyleClass ( "comp-el-mech-draggable" )
. setAttribute ( "draggable" , "true" )
. setAttribute ( "dropEffect" , "none" )
. addEventListener (
CommonEvents . DRAG_START ,
function ( event ) {
console . log ( "DragEvent" , event , "on" , selector ) ;
event . target . classList . toggle ( "grabbin-cursor" ) ;
event . dataTransfer
. setData (
"text/html" ,
selector
) ;
}
}
) ;
) ;
}
onDragOver ( ) {
this . addStyleClass ( "comp-el-mech-dragover" ) ;
/ * *
*
* @ param { EventDrag } dragEvent
* @ param { Function } action
* /
onDrag ( dragEvent , action = ( e ) => { e . preventDefault ( ) ; } ) {
let selector = ` comp-el-mech-drag ${ dragEvent } ` ;
return this . addEventListener (
CommonEvents . DRAG_OVER ,
( e ) => {
e . preventDefault ( ) ;
}
'drag' + dragEvent ,
action
) ;
}
overflow ( vertical = true , horizontal = false ) {
if ( vertical ) {
this . modifier (
new Modifier ( )
. setStyleRule ( "overflow-y" , "auto" )
/ * *
*
* @ param { * } dndGroup
* @ returns { Component }
* /
dropTarget ( dndGroup = null ) {
let selector = "comp-el-mech-droptarget" ;
function dropEventCall ( event ) {
return dropEventHandler ( event , selector ) ;
}
this . addStyleClass ( selector )
. onDrag ( EventDrag . OVER ) ;
this . _ element . addEventListener (
"drop" ,
dropEventCall
) ;
return this ;
}
/ * *
* Defines how a child Component is to be appended .
* @ param { Component } component the child component to add it .
* @ returns { HTMLElement }
* /
_ appendChildComponent ( component ) {
let child = new WebTrinity ( ) ;
if ( component instanceof Component ) {
child = component . generate ( ) ;
}
if ( component instanceof WebTrinity ) {
child = component ;
}
if ( component instanceof HTMLElement ) {
console . log ( "No wenity set - htmlEl was given" ) ;
child . html = component ;
}
this . _ element . append ( child . html ) ;
return child ;
}
_ processStyles ( extStore = null ) {
if ( ! extStore ) {
extStore = this . _ stylesExtStore . updateForGeneralStyling ( ) ;
} else {
extStore . updateForGeneralStyling ( ) ;
}
/ * *
* @ todo very likely code dupplication - but kept for the time being
* for error tracking .
* /
if ( extStore . _ type === ExtStoreType . INTERNALIZED_WITHIN ) {
let sizings = Object . keys ( this . _ modifier . _ modifications )
. filter ( e => e . includes ( "width" ) || e . includes ( "height" ) )
. filter ( e => this . _ modifier . _ modifications [ e ] . includes ( "calc" ) )
. reduce ( ( a , c ) => a . add (
c ,
this . _ modifier
. _ modifications [ c ]
. split ( '(' ) [ 1 ]
. split ( ' - ' ) [ 0 ]
) , new ObjectAccessObject ( ) ) ;
fillAttrsInContainerByCb (
this . _ modifier . _ modifications ,
this . _ element ,
( key , val , el ) => { el . style [ key ] = val ; }
) ;
let hasElSizing = sizings . keys . some ( k => Object . keys ( this . _ element . style ) . includes ( k ) ) ;
if ( sizings . keys . length > 0 && ! hasElSizing ) {
console . log ( "Fixing sizing - because not supported 'calc'" , sizings ) ;
fillAttrsInContainerByCb (
sizings ,
this . _ element ,
( key , val , el ) => { el . style [ key ] = val ; }
) ;
}
} else {
/* ADDS ELEMENT MODIFIER TO this._styles list for styles processing */
let modifierSSD = new SStoreDefinition ( ) ;
modifierSSD . _ identifier = "." + this . _ compName ;
modifierSSD . _ definition = this . _ modifier . _ modifications ;
modifierSSD . _ extStore = extStore ;
this . _ styles . unshift ( modifierSSD ) ;
}
if ( horizontal ) {
this . modifier (
new Modifier ( )
. setStyleRule ( "overflow-x" , "auto" )
let forCollection = [ ] ;
let counter = 0 ;
for ( let i = 0 ; i < this . _ styles . length ; i ++ ) {
const ssd = this . _ styles [ i ] ;
/* Make sure that the type is unified for later processing */
if ( ssd . _ definition instanceof Modifier ) {
ssd . _ definition = ssd . _ definition . _ modifications ;
}
/* Check/Ensure proper ExtStorageType for following comparison */
let refESType = (
ssd . _ extStore && ssd . _ extStore . _ type
? ssd . _ extStore . updateForGeneralStyling ( ) . _ type
: extStore . _ type
) ;
switch ( refESType ) {
case ExtStoreType . INTERNALIZED_WITHIN :
fillAttrsInContainerByCb (
ssd . _ definition ,
this . _ element ,
( key , val , el ) => { el . style [ key ] = val ; }
)
break ;
case ExtStoreType . INDIVIDUALLY_DOC_HEAD :
let container = generateAndFillStyleTag ( [ ssd ] ) ;
container . setAttribute ( "data-compel-individually-nr" , counter ++ ) ;
Page . addElementToPage ( container , refESType ) ;
break ;
case ExtStoreType . COLLECTED_DOC_HEAD :
forCollection . push ( ssd ) ;
break ;
case ExtStoreType . CENTRALIZED_DOC_HEAD :
Page . registerStyling ( ssd . _ identifier , ssd . _ definition ) ;
break ;
}
}
return this ;
return forCollection ;
}
_ processFunctions ( extStore = null ) {
if ( ! extStore ) {
extStore = this . _ functionsExtStore . updateForFunctions ( ) ;
} else {
extStore . updateForFunctions ( ) ;
}
const forCollection = new Map ( ) ;
const collectForBefore = [ ] ;
let counter = 0 ;
for ( let i = 0 ; i < this . _ functions . length ; i ++ ) {
const ssd = this . _ functions [ i ] ;
/* Make sure that the type is unified for later processing */
let refESType = (
ssd . _ extStore && ssd . _ extStore . _ type
? ssd . _ extStore . updateForFunctions ( ) . _ type
: extStore . _ type
) ;
switch ( refESType ) {
case ExtStoreType . CENTRALIZED_DOC_HEAD :
case ExtStoreType . CENTRALIZED_SEGMENT_BEGIN :
case ExtStoreType . CENTRALIZED_DOC_FOOTER :
Page . registerPageFunction ( ssd . _ identifier , ssd . _ definition ) ;
break ;
case ExtStoreType . INDIVIDUALLY_WITHIN :
case ExtStoreType . INDIVIDUALLY_BEFORE :
case ExtStoreType . INDIVIDUALLY_SEGMENT_BEGIN :
case ExtStoreType . INDIVIDUALLY_DOC_FOOTER :
case ExtStoreType . INDIVIDUALLY_DOC_HEAD :
let container = document . createElement ( "script" ) ;
container . setAttribute ( "data-compel-individually-nr" , counter ++ ) ;
container . innerText += getScriptTagInjectionText (
clearFunctionDeclarationText ( ssd . _ definition ) ,
ssd . _ identifier
) ;
Page . addElementToPage ( container , refESType , this . _ element ) ;
break ;
case ExtStoreType . COLLECTED_BEFORE :
collectForBefore . push ( ssd ) ;
break ;
case ExtStoreType . COLLECTED_SEGMENT_BEGIN :
case ExtStoreType . COLLECTED_DOC_FOOTER :
case ExtStoreType . COLLECTED_DOC_HEAD :
if ( ! forCollection . has ( refESType ) ) {
forCollection . set ( refESType , [ ] ) ;
}
forCollection . get ( refESType ) . push ( ssd ) ;
break ;
}
}
return forCollection ;
}
/ * *
* @ override
* @ class Component
* @ inheritdoc
* Ends chain .
* Applies all modifications on the element .
* Processes alls stored additions .
* Returns the constructed HTMLElement of this Component .
*
*
*
* @ param { ExtStorage }
* @ returns { WebTrinity } the constructed HTMLElement of this Component .
* /
generate ( styleStoreInternal = null , cssStore = null , funcStore = null ) {
let wenity = super . generate ( styleStoreInternal , cssStore , funcStore ) ;
generate ( styleStore = null , functionStore = null ) {
this . _ wenity = new WebTrinity ( ) ;
/* DEAL WITH COMPONENT MODIFICATION FIRST */
this . _ modifier . _ modifications [ "box-sizing" ] = "border-box" ;
this . _ modifier . _ modifications [ "justify-content" ] = this . _ arrangement ;
this . _ modifier . _ modifications [ "align-content" ] = this . _ alignment ;
this . _ modifier . _ modifications [ "align-items" ] = this . _ alignment ;
this . _ modifier . _ modifications [ "text-align" ] = this . _ alignment ;
let collectedWenities = [ ] ;
for ( let i = 0 ; i < this . _ children . length ; i ++ ) {
/ * *
* @ type { Component }
* /
let child = this . _ children [ i ] ;
if ( child instanceof ChainableModifier ) {
child = child . toComponent ( ) ;
}
if ( Page . _ useCssCalc ) {
child . _ modifier . _ updateDimensionsBy ( this . _ modifier . _ paddingValues ) ;
}
child = child . generate ( ) ;
let wenity = this . _ appendChildComponent ( child ) ;
if ( ! wenity . isSSEmpty ( ) ) {
collectedWenities . push ( wenity ) ;
}
}
/ * *
* @ type { Array < SStoreDefinition > }
* /
let styleCollection = this . _ processStyles ( styleStore ) ;
/ * *
* @ type { Map < ExtStoreType , Array < SStoreDefinition >> }
* /
const funcCollections = this . _ processFunctions ( functionStore ) ;
/ * *
*
* @ param { Map < ExtStoreType , Array < SStoreDefinition >> } source
* @ param { Map < ExtStoreType , Array < SStoreDefinition >> } target
* @ param { ExtStoreType } extStoreType
* @ returns
* /
function transferCollectedFunctions ( source , target , extStoreType ) {
if ( source ) {
if ( source . has ( extStoreType ) ) {
if ( funcCollections . has ( extStoreType ) ) {
target . get ( extStoreType )
. push ( source . get ( extStoreType ) )
} else {
target . set (
extStoreType ,
source . get ( extStoreType )
) ;
}
}
}
return target ;
}
function executeOnExtStoreTypeCollectedTriple ( func ) {
return new Map ( [
{ [ ExtStoreType . COLLECTED_SEGMENT_BEGIN ] : func ( ExtStoreType . COLLECTED_SEGMENT_BEGIN ) } ,
{ [ ExtStoreType . COLLECTED_DOC_HEAD ] : func ( ExtStoreType . COLLECTED_DOC_HEAD ) } ,
{ [ ExtStoreType . COLLECTED_DOC_FOOTER ] : func ( ExtStoreType . COLLECTED_DOC_FOOTER ) }
] ) ;
}
for ( let i = 0 ; i < collectedWenities . length ; i ++ ) {
const child = collectedWenities [ i ] ;
if ( child . js ) {
executeOnExtStoreTypeCollectedTriple (
( extstoretype ) => transferCollectedFunctions ( child . js , funcCollections , extstoretype )
) ;
}
}
if ( this . # isCompel ) {
function dealCollected ( map , extStoreType ) {
if ( map . has ( extStoreType ) ) {
let collectionScriptTag = generateAndFillScriptTag ( map . get ( extStoreType ) ) ;
if ( extStoreType === ExtStoreType . COLLECTED_SEGMENT_BEGIN ) {
this . _ element . insertAdjacentElement (
"afterbegin" ,
generateAndFillScriptTag ( segment )
) ;
} else {
Page . addElementToPage (
collectionScriptTag ,
extStoreType
) ;
}
}
}
executeOnExtStoreTypeCollectedTriple ( ( est ) => dealCollected ( funcCollections , est ) ) ;
} else {
this . _ wenity . js = funcCollections ;
this . _ wenity . css = styleCollection ;
}
this . _ wenity . html = this . _ element ;
for ( let i = 0 ; i < this . _ toRegister . length ; i ++ ) {
this . _ toRegister [ i ] . push ( wenity . html ) ;
const group = this . _ toRegister [ i ] ;
Page . subscribeComponentToGroup ( group , this . _ compName )
}
return wenity . html ;
return this . _ wenity ;
}
}
chris