Skip to content

Commit

Permalink
feat(html): added support for (#7)
Browse files Browse the repository at this point in the history
  • Loading branch information
@philippone
philippone committed Oct 14, 2020
1 parent bc7a664 commit db54cdb
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 29 deletions.
130 changes: 102 additions & 28 deletions src/html/html.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,19 +45,24 @@ function enablePseudoState(
return element;
}

// eslint-disable-next-line no-undef
function stringToNode(input: string): ChildNode | null {
const storyNode = new DOMParser().parseFromString(input, 'text/html');
if (storyNode.body.childNodes && storyNode.body.childNodes[0]) {
return storyNode.body.childNodes[0];
}
return null;
}

function enableAttributeState(
story: any,
attribute: AttributeStatesObj,
selector: string | Array<string> | null
) {
let tmpStroy = story;
if (typeof story === 'string') {
const storyNode = new DOMParser().parseFromString(story, 'text/html');
if (storyNode.body.childNodes && storyNode.body.childNodes[0]) {
tmpStroy = storyNode.body.childNodes[0];
}
tmpStroy = stringToNode(story);
}

const element = tmpStroy.cloneNode(true);

let stateHostElement: HTMLElement = element;
Expand All @@ -73,10 +78,23 @@ function enableAttributeState(
return element;
}

function getStoryContainer() {
function getStoryContainer(parameters: PseudoStatesParameters) {
const container = document.createElement('div');
// container.classList.add('pseudo-states__container');
Object.assign(container.style, styles.style);
const attrLength = parameters?.attributes?.length || 0;
const pseudoLength = parameters?.pseudos?.length || 0;
const permutationLenth = parameters?.permutations?.length || 0;

// compute grid template
// TODO support row orientation
const gridContainer = {
...styles.gridContainer,
gridTemplate: `repeat(${
1 + pseudoLength + attrLength
} , min-content) / repeat(${1 + permutationLenth}, 1fr)`,
};

Object.assign(container.style, gridContainer);
return container;
}

Expand All @@ -85,15 +103,23 @@ function wrapStoryInStateContainer(
state: AttributeStatesObj
) {
const stateContainer = document.createElement('div');
// TODO add orientation
stateContainer.classList.toggle('pseudo-states-addon__story', true);
stateContainer.classList.toggle(
`pseudo-states-addon__story--${state.attr}`,
true
);
const header = document.createElement('div');
header.classList.toggle('pseudo-states-addon__story__header', true);
header.innerHTML = state.attr;
stateContainer.appendChild(header);

const content = document.createElement('div');
content.classList.toggle('pseudo-states-addon__story__container', true);
if (typeof story === 'string') {
const storyNode = new DOMParser().parseFromString(story, 'text/html');
if (storyNode.body.childNodes && storyNode.body.childNodes[0]) {
content.appendChild(storyNode.body.childNodes[0]);
const tmpStory = stringToNode(story);
if (tmpStory) {
content.appendChild(tmpStory);
}
} else {
content.appendChild(story);
Expand All @@ -104,25 +130,38 @@ function wrapStoryInStateContainer(
return stateContainer;
}

function renderStates(
function renderStatePermuation(
story: HTMLElement,
container: Element,
params: PseudoStatesParameters,
attributes: Array<AttributeStatesObj>,
permutations: Array<PermutationStatsObj>
permutation: PermutationStatsObj | null
) {
let tmpStroy = story;
// enable permutation
if (permutation) {
tmpStroy = enableAttributeState(
tmpStroy,
permutation,
params.selector || null
);
}

// show default story at first
if (params?.pseudos && params?.pseudos.length > 0) {
container.appendChild(
wrapStoryInStateContainer(story, new AttributeStatesObj('Default'))
wrapStoryInStateContainer(
tmpStroy,
new AttributeStatesObj(permutation?.attr || 'Default')
)
);
}

if (params?.pseudos) {
// create pseudo states of story
for (const state of params?.pseudos) {
const elementWithPseudo = enablePseudoState(
story,
tmpStroy,
state,
params.selector || null,
params.prefix || PseudoStatesDefaultPrefix // TODO
Expand All @@ -136,24 +175,40 @@ function renderStates(
}
}

if (permutations) {
// TODO
console.log('permutations', 'not implemented');
}

if (attributes) {
// create attribute states of story
for (const state of attributes) {
const elementWithPseudo = enableAttributeState(
story,
const elementWithAttribute = enableAttributeState(
tmpStroy,
state,
params.selector || null
);
container.appendChild(
wrapStoryInStateContainer(elementWithPseudo, state)
wrapStoryInStateContainer(elementWithAttribute, state)
);
}
}

return container;
}

function renderStates(
story: HTMLElement,
container: Element,
params: PseudoStatesParameters,
attributes: Array<AttributeStatesObj>,
permutations: Array<PermutationStatsObj>
) {
// render default (not listed in permutations array)
renderStatePermuation(story, container, params, attributes, null);

// render permutations
if (permutations) {
for (const permutation of permutations) {
renderStatePermuation(story, container, params, attributes, permutation);
}
}

return container;
}

Expand All @@ -164,7 +219,6 @@ function pseudoStateFn(
) {
const channel = addons.getChannel();
const story = getStory(context);
const container = getStoryContainer();

// are options set by user
const options: OptionsParameter = settings?.options;
Expand All @@ -189,9 +243,14 @@ function pseudoStateFn(
...parameters?.attributes,
].map((item) => AttributeStatesObj.fromAttributeState(item));

const permuttionsAsObject: Array<PermutationStatsObj> = [
...parameters?.attributes,
].map((item) => AttributeStatesObj.fromAttributeState(item));
let permuttionsAsObject: Array<PermutationStatsObj> = [];
if (parameters.permutations) {
permuttionsAsObject = [...parameters?.permutations].map((item) =>
PermutationStatsObj.fromPermutationState(item)
);
}

const container = getStoryContainer(parameters);

// Use prefix without `:` because angular add component scope before each `:`
// Maybe not editable by user in angular context?
Expand All @@ -202,7 +261,15 @@ function pseudoStateFn(
addonDisabled = value;
if (value) {
container.innerHTML = '';
container.append(story);

if (typeof story === 'string') {
const tmpStory = stringToNode(story);
if (tmpStory) {
container.appendChild(tmpStory);
}
} else {
container.appendChild(story);
}
} else {
container.innerHTML = '';
renderStates(
Expand All @@ -218,7 +285,14 @@ function pseudoStateFn(
channel.emit(SAPS_INIT_PSEUDO_STATES, addonDisabled);
// when disabled return default story
if (addonDisabled) {
return story;
if (typeof story === 'string') {
const tmpStory = stringToNode(story);
if (tmpStory) {
return tmpStory;
}
} else {
return story;
}
}

return renderStates(
Expand Down
6 changes: 5 additions & 1 deletion src/share/styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ export const styles = {
display: 'inline-flex',
flexDirection: 'column',
},

gridContainer: {
display: 'grid',
gridAutoFlow: 'column',
'grid-gap': '15px',
},
addonContainer: {},
storyContainer: {
'margin-bottom': '10px',
Expand Down

0 comments on commit db54cdb

Please sign in to comment.