@nebularstreams/statify 3.0.0

package/src/widgets.markdown/Document.js

@@ -0,0 +1,84 @@
+const
+
+	m = require("mithril"),
+	HASH_SEPARATOR = "#",
+	{ Empty } = require("../util/widgets/app.widgets"),
+	RightSide = require("../widgets/RightSide");
+
+module.exports = {
+	view: ({ attrs, state }) => {
+
+		const
+			{ pageMetadata, metadata, cdnModel, source } = attrs,
+			{ document, class: contentClass, icon, message } = pageMetadata,
+			{ index, html } = document;
+
+		return [
+			m(
+				"nav.shadow-2.flexrow.pad-h.d-md-none",
+				{ "aria-label": "Table Of Contents Selector" },
+				...index
+					? [
+						m(
+							"select.w-100.pad-2.pad-h.unitheightsmall",
+							{ id: "selector", style: { fontWeight: "bold" } },
+							index.map(({ level, text, id }) => m("option", {
+								class: "level" + level,
+								value: id
+							}, text))
+						)
+					] : []
+			),
+
+			m(
+				"article.widget.wiki.flexrow.grows.ohidden.markdown",
+				html
+					? [
+						m(
+							"nav.sidepane.flexcol.noshrink.scrolly.d-none.d-md-flex",
+							{
+								"aria-label": "Table Of Contents"
+							},
+							[
+								...index
+									? index
+										.map(({ level, text, id }) => m(
+											"a.pointer.pad-2",
+											{
+												id: "link-" + id,
+												href: `${HASH_SEPARATOR}${id}`,
+												class: "level" + level
+											},
+											m.trust(text)
+										))
+									: []
+							]
+						),
+						m(
+							"section.relative.content.scrolly.grows.pad-4.pad-h.flexcol",
+							{
+								"aria-label": "Main Article Body",
+								class: contentClass || ""
+							},
+							m.trust(html)
+						),
+						m(RightSide, {
+							cdnModel,
+							source,
+							class: "grows d-none d-xl-flex",
+							ncsdom: metadata.site.domain,
+							site: metadata.site
+						})
+					]
+					: [
+						m(Empty, {
+							role: "presentation",
+							size: 4,
+							icon: state.loading ? "sync.fa-spin" : (icon || "file"),
+							message: state.loading ? "" : (message || "No document loaded")
+						})
+					]
+			)
+		];
+	}
+};

package/src/widgets.market/MarketItem.js

@@ -0,0 +1,278 @@
+const
+	m = require("mithril"),
+	{ Button, Icon } = require("../util/widgets/app.widgets"),
+	defineWidget = require("../util/widgets/util.definewidget"),
+	{ YouTube } = require("../widgets.features/Youtube"),
+	StoryLicenseWidget = require("./StoryLicenseWIdget");
+
+const
+
+	Attributions = defineWidget(
+		({ attrs }) => {
+
+			const
+				{ attributions } = attrs,
+				sources = {};
+
+			attributions.reduce((all, item) => {
+				sources[item.source] = true;
+				return all;
+			});
+
+			return [
+				m(
+					".flexcol.attribution.pad-3.pad-v.bg-accent-hi",
+					m("h2", "Content Attribution"),
+					m("div", "Template references or includes resources from " + (Object.keys(sources)
+						.join(", ")))
+				),
+				m(StoryLicenseWidget, { attributions })
+			];
+		}
+	),
+
+	Strip = defineWidget(
+		({ attrs }) => {
+			const
+				{
+					entityPath, item, scenes, max, state, label, itemType = "Scene"
+				} = attrs,
+				{ id_channel, type, id } = item;
+
+			return m(
+				"ul.scenesel.flexrow" + (attrs.class || ""),
+				{
+					class: max > 5 ? "wrap" : "",
+					"aria-label": label || "List of Items"
+				},
+				scenes.map(
+					({ title, image }, index) => (
+						index < max
+							? m(
+								"li.thumbnail.flexcol",
+								{
+									title: title || (itemType + " " + index),
+									class: state.image === image ? "current" : "",
+									"data-type": itemType,
+									"data-title": title
+										? title.split("-")
+											.join(" ")
+										: (itemType + " " + index)
+								},
+								m("img", {
+									class: "errorimage",
+									src: entityPath(id_channel, type, id, image),
+									alt: itemType + " " + title
+								})
+							)
+							: m(".d-none", { role: "presentation" }))
+				)
+			);
+		}
+	),
+
+	TemplateItem = defineWidget(
+		({ attrs, state }) => {
+
+			const
+				ICONS = {
+					template: "star",
+					facekit: "theater-masks",
+					room: "border-all",
+					library: "cubes"
+				},
+				{ item, all, scenes, templates, maximized, featured, cdnModel } = attrs,
+				{ channel } = cdnModel,
+				{ entityPath, path } = channel,
+				{ ext, id_channel, type, id, creationTime, meta } = item,
+				{ title = id, description = "legacy story", ytref, image } = (meta || {}),
+				{ icon = ICONS[type] } = ext,
+				imageEntity = image || entityPath(id_channel, type, id, state.image || "logo.jpg");
+
+			return m(
+				"li.templateitem.flexcol.pointer.grows.ohidden",
+				{
+					class: attrs.class,
+					"aria-label": title
+				},
+				m(
+					".inner.flexcol.pointer.bg-window-hi.relative",
+					{ class: attrs.innerClass },
+					[
+						...ytref
+							? [
+								m(YouTube, { class: "", videoItem: { ref: ytref } })
+							]
+							: [
+								m(
+									".image.divimage.relative.img169.coverimage",
+									{
+										class: attrs.imageClass || "asp169",
+										style: {
+											backgroundImage: "url(" + imageEntity + ")"
+										}
+									}
+								)
+							],
+
+						m(".flexrow.pad-2.titlestrip", [
+							m(Icon, {
+								icon,
+								size: 2,
+								iconClass: "unitsize"
+							}),
+							m(".flexcol.grows.flex-place-center.ohidden", [
+								m(".title", title),
+								m("h6.diffdate", { "data-timems": creationTime }, `By ${id_channel}`)
+							]),
+
+							m(".unitsize.image.avatar.noshrink", {
+								style: { backgroundImage: "url(" + path(id_channel, "logo.jpg") + ")" },
+								title: id_channel
+							})
+						]),
+
+						...(maximized || featured) && description
+							? [
+								m(".descriptionstrip", description)
+							] : [],
+
+						(ext.scenes || state.has)
+							? [
+								m(".flexrow.marg-2", [
+									...ext.scenes
+										? [
+											m(
+												".unitheightsmall.metric.fa-object-ungroup.grows.al-center",
+												{
+													title: "Scenes contained in the template",
+													"data-metric": "scenes",
+													"data-num": String(ext.scenes.length)
+												}
+											)
+										] : [],
+
+									...state.has
+										? [
+											m(
+												".unitheightsmall.metric.fa-object-group.grows.al-center",
+												{
+													title: "Template Scenes contained in the template",
+													"data-metric": "templates",
+													"data-num": String(ext.templates.length)
+												}
+											)
+										] : []
+								]),
+
+								...(all || templates) && ext.templates && ext.templates.length >= 2
+									? [m(Strip, {
+										class: ".templates", entityPath, itemType: "Scene Template", item, scenes: ext.templates, max: 64, state, label: "List of Templates"
+									})]
+									: [],
+
+								...(all || scenes) && ext.scenes && ext.scenes.length >= 2
+									? [m(Strip, {
+										class: ".scenes", entityPath, itemType: "Scene", item,
+										scenes: ext.scenes, max: 64, state, label: "List of Scenes"
+									})]
+									: []
+							]
+							: []
+
+					]
+				)
+			);
+		},
+		({ attrs, state }) => {
+			const { templates = [] } = attrs.item.ext;
+			Object.assign(state, {
+				ytref: attrs.item.ytref || null,
+				images: templates.map((t) => t.image),
+				has: templates.length,
+				index: 0
+			});
+
+			if (state.images.length === 1) {
+				delete state.images;
+			}
+		}
+	),
+
+	TemplateInstall = defineWidget(
+		({ attrs, state }) => {
+
+			const
+				{ item, cdnModel, pageMetadata } = attrs,
+				{ ext } = item,
+				all = true;
+
+			return m(".marketdetail.flexrow.wrap.flex-lg-grows.h-100.fadein.flex-lg-row.scrolly", { role: "presentation" }, [
+
+				m(
+					".flexcol.maxcontainer.ohidden.col-12.col-lg-8.col-xl-6",
+					{ role: "presentation" },
+					m(TemplateItem, {
+						...all ? { templates: 10000, scenes: 10000 } : state.templates ? { templates: 10000 } : { scenes: 10000 },
+						item,
+						cdnModel,
+						class: "pad-2 w-100 max",
+						imageClass: "grows",
+						showattrib: false,
+						maximized: true,
+						onView: (what) => {
+							if (what === "templates" && !state.templates) {
+								state.templates = true;
+								m.redraw();
+							} else if (what === "scenes" && state.templates) {
+								state.templates = false;
+								m.redraw();
+							}
+						}
+					})
+				),
+				m(".flexcol.pad-2.col-lg-4.col-xl-6", { role: "presentation" }, [
+					m(".flexcol.col-12.howto", [
+
+						m(".flexrow.w-100.buttoncontainer.no-mobile", [
+							m(Button, {
+								link: ext.url,
+								target: "_blank",
+								download: ext.url.substring(ext.url.lastIndexOf("/") + 1),
+								icon: "download",
+								text: "Download Bundle",
+								class: "button-accent grows unitheight"
+							})
+						]),
+						m("h2", "How to install Obscene Studio " + pageMetadata.title + "?"),
+						m("ol", { "aria-label": "How to install Downloaded Obscene Studio  " + pageMetadata.title }, [
+							m("li.pad-2.pad-v.no-mobile", "Download the Bundle to your computer"),
+							m("li.pad-2.pad-v.no-desktop", "Visit this page from a computer and download the Package"),
+							m("li.pad-2.pad-v", "Drag and drop the file just downloaded from your Downloads folder into the running Obscene Studio Application"),
+							m("li.pad-2.pad-v", "The list of " + pageMetadata.title + " in Obscene Studio will show the new item. It is ready to use !")
+						]),
+
+						m(
+							"a",
+							{ class: "pad-2 pad-v", target: "manual", href: "/doc/manual/app-storyboard-create.html#installing-a-new-template" },
+							"Check out Obscene Studio Manual for further instructions"
+						)
+
+					]),
+					...(ext.attributions && ext.attributions.length)
+						? [
+							m(".flexcol.grows-col-12.attrib", [
+								m(Attributions, { attributions: ext.attributions })
+							])
+						] : []
+				])
+			]);
+		}
+	);
+
+const
+	TemplateInstallDynamic = defineWidget(
+		({ attrs }) => m(TemplateInstall, { cdnModel: attrs.cdnModel, item: attrs.dynamicData.item, pageMetadata: attrs.pageMetadata })
+	);
+
+module.exports = TemplateInstallDynamic;

package/src/widgets.market/MarketItem.orig.js

@@ -0,0 +1,268 @@
+const
+	m = require("mithril"),
+	{ Button, Icon } = require("../util/widgets/app.widgets"),
+	defineWidget = require("../util/widgets/util.definewidget"),
+	{ YouTube } = require("../widgets.features/Youtube"),
+	StoryLicenseWidget = require("./StoryLicenseWIdget");
+
+const
+
+	Attributions = defineWidget(
+		({ attrs }) => {
+
+			const
+				{ attributions } = attrs,
+				sources = {};
+
+			attributions.reduce((all, item) => {
+				sources[item.source] = true;
+				return all;
+			});
+
+			return [
+				m(
+					".flexcol.attribution.pad-3.pad-v.bg-accent-hi",
+					m("h2", "Content Attribution"),
+					m("div", "Template references or includes resources from " + (Object.keys(sources)
+						.join(", ")))
+				),
+				m(StoryLicenseWidget, { attributions })
+			];
+		}
+	),
+
+	Strip = defineWidget(
+		({ attrs }) => {
+			const
+				{
+					entityPath, item, scenes, max, state, label, itemType = "Scene"
+				} = attrs,
+				{ id_channel, type, id } = item;
+
+			return m(
+				"ul.scenesel.flexrow",
+				{
+					class: max > 5 ? "wrap" : "",
+					"aria-label": label || "List of Items"
+				},
+				scenes.map(
+					({ title, image }, index) => (
+						index < max
+							? m(
+								"li.thumbnail.flexcol",
+								{
+									title: title || (itemType + " " + index),
+									class: state.image === image ? "current" : "",
+									"data-type": itemType,
+									"data-title": title
+										? title.split("-")
+											.join(" ")
+										: (itemType + " " + index)
+								},
+								m("img", {
+									class: "errorimage",
+									src: entityPath(id_channel, type, id, image),
+									alt: itemType + " " + title
+								})
+							)
+							: m(".d-none", { role: "presentation" }))
+				)
+			);
+		}
+	),
+
+	TemplateItem = defineWidget(
+		({ attrs, state }) => {
+
+			const
+				ICONS = {
+					template: "star",
+					facekit: "theater-masks",
+					room: "border-all"
+				},
+				{ item, scenes, templates, maximized, featured, cdnModel } = attrs,
+				{ channel } = cdnModel,
+				{ entityPath, path } = channel,
+				{ ext, id_channel, type, id, creationTime, meta } = item,
+				{ title = id, description = "legacy story", ytref, image } = (meta || {}),
+				{ icon = ICONS[type] } = ext,
+				imageEntity = image || entityPath(id_channel, type, id, state.image || "logo.jpg");
+
+			return m(
+				"li.templateitem.flexcol.pointer.grows.ohidden",
+				{
+					class: attrs.class,
+					"aria-label": title
+				},
+				m(
+					".inner.flexcol.pointer.bg-window-hi.relative",
+					{ class: attrs.innerClass },
+					[
+						...ytref
+							? [
+								m(YouTube, { class: "", videoItem: { ref: ytref } })
+							]
+							: [
+								m(
+									".image.divimage.relative.img169.coverimage",
+									{
+										class: attrs.imageClass || "asp169",
+										style: {
+											backgroundImage: "url(" + imageEntity + ")"
+										}
+									}
+								)
+							],
+
+						m(".flexrow.pad-2.titlestrip", [
+							m(Icon, {
+								icon,
+								size: 2,
+								iconClass: "unitsize"
+							}),
+							m(".flexcol.grows.flex-place-center.ohidden", [
+								m(".title", title),
+								m("h6.diffdate", { "data-timems": creationTime }, `By ${id_channel}`)
+							]),
+
+							m(".unitsize.image.avatar.noshrink", {
+								style: { backgroundImage: "url(" + path(id_channel, "logo.jpg") + ")" },
+								title: id_channel
+							})
+						]),
+
+						...(maximized || featured) && description
+							? [
+								m(".descriptionstrip", description)
+							] : [],
+
+						(ext.scenes || state.has)
+							? [
+								m(".flexrow.marg-2", [
+									...ext.scenes
+										? [
+											m(
+												".unitheightsmall.metric.fa-object-ungroup.grows.al-center",
+												{
+													title: "Scenes contained in the template",
+													"data-metric": "scenes",
+													"data-num": String(ext.scenes.length)
+												}
+											)
+										] : [],
+
+									...state.has
+										? [
+											m(
+												".unitheightsmall.metric.fa-object-group.grows.al-center",
+												{
+													title: "Template Scenes contained in the template",
+													"data-metric": "templates",
+													"data-num": String(ext.templates.length)
+												}
+											)
+										] : []
+								]),
+								...templates && ext.templates && ext.templates.length >= 3
+									? [m(Strip, { entityPath, itemType: "Scene Template", item, scenes: ext.templates, max: 3, state, label: "List of Templates" })]
+									: scenes && ext.scenes && ext.scenes.length >= 3
+										? [m(Strip, { entityPath, itemType: "Scene", item, scenes: ext.scenes, max: 3, state, label: "List of Scenes" })]
+										: []
+							]
+							: []
+
+					]
+				)
+			);
+		},
+		({ attrs, state }) => {
+			const { templates = [] } = attrs.item.ext;
+			Object.assign(state, {
+				ytref: attrs.item.ytref || null,
+				images: templates.map((t) => t.image),
+				has: templates.length,
+				index: 0
+			});
+
+			if (state.images.length === 1) {
+				delete state.images;
+			}
+		}
+	),
+
+	TemplateInstall = defineWidget(
+		({ attrs, state }) => {
+
+			const
+				{ item, cdnModel, pageMetadata } = attrs,
+				{ ext } = item;
+
+			return m(".marketdetail.flexrow.wrap.flex-lg-grows.h-100.fadein.flex-lg-row.scrolly", { role: "presentation" }, [
+
+				m(
+					".flexcol.maxcontainer.ohidden.col-12.col-lg-8.col-xl-6",
+					{ role: "presentation" },
+					m(TemplateItem, {
+						...state.templates ? { templates: 10000 } : { scenes: 10000 },
+						item,
+						cdnModel,
+						class: "pad-2 w-100 max",
+						imageClass: "grows",
+						showattrib: false,
+						maximized: true,
+						onView: (what) => {
+							if (what === "templates" && !state.templates) {
+								state.templates = true;
+								m.redraw();
+							} else if (what === "scenes" && state.templates) {
+								state.templates = false;
+								m.redraw();
+							}
+						}
+					})
+				),
+				m(".flexcol.pad-2.col-lg-4.col-xl-6", { role: "presentation" }, [
+					m(".flexcol.col-12.howto", [
+
+						m(".flexrow.w-100.buttoncontainer.no-mobile", [
+							m(Button, {
+								link: ext.url,
+								target: "_blank",
+								download: ext.url.substring(ext.url.lastIndexOf("/") + 1),
+								icon: "download",
+								text: "Download Bundle",
+								class: "button-accent grows unitheight"
+							})
+						]),
+						m("h2", "How to install Obscene Studio " + pageMetadata.title + "?"),
+						m("ol", { "aria-label": "How to install Downloaded Obscene Studio  " + pageMetadata.title }, [
+							m("li.pad-2.pad-v.no-mobile", "Download the Bundle to your computer"),
+							m("li.pad-2.pad-v.no-desktop", "Visit this page from a computer and download the Package"),
+							m("li.pad-2.pad-v", "Drag and drop the file just downloaded from your Downloads folder into the running Obscene Studio Application"),
+							m("li.pad-2.pad-v", "The list of " + pageMetadata.title + " in Obscene Studio will show the new item. It is ready to use !")
+						]),
+
+						m(
+							"a",
+							{ class: "pad-2 pad-v", target: "manual", href: "/doc/manual/app-storyboard-create.html#installing-a-new-template" },
+							"Check out Obscene Studio Manual for further instructions"
+						)
+
+					]),
+					...(ext.attributions && ext.attributions.length)
+						? [
+							m(".flexcol.grows-col-12.attrib", [
+								m(Attributions, { attributions: ext.attributions })
+							])
+						] : []
+				])
+			]);
+		}
+	);
+
+const
+	TemplateInstallDynamic = defineWidget(
+		({ attrs }) => m(TemplateInstall, { cdnModel: attrs.cdnModel, item: attrs.dynamicData.item, pageMetadata: attrs.pageMetadata })
+	);
+
+module.exports = TemplateInstallDynamic;