diff options
Diffstat (limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts')
-rw-r--r-- | src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts | 769 |
1 files changed, 769 insertions, 0 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts new file mode 100644 index 000000000..26fd3a8fc --- /dev/null +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.ts @@ -0,0 +1,769 @@ +import { FieldSettings, ViewType } from './TemplateFieldTypes/TemplateField'; + +export enum TemplateFieldType { + TEXT = 'text', + VISUAL = 'visual', + UNSET = 'unset', + DATA = 'data', +} + +export enum TemplateFieldSize { + TINY = 'tiny', + SMALL = 'small', + MEDIUM = 'medium', + LARGE = 'large', + HUGE = 'huge', +} + +export class TemplateLayouts { + public static get allTemplates(): FieldSettings[] { + return Object.values(TemplateLayouts); + } + + public static BasicSettings: FieldSettings = { + title: 'template_framework', + tl: [0, 0], + br: [400, 700], + viewType: ViewType.FREEFORM, + opts: {}, + }; + + public static FourField001: FieldSettings = { + title: 'fourfield001', + tl: [0, 0], + br: [416, 700], + viewType: ViewType.FREEFORM, + opts: { + backgroundColor: '#C0B887', + _layout_borderRounding: '.05', + //borderColor: '#6B461F', + //borderWidth: '12', + }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-0.95, -1], + br: [0.95, -0.85], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY], + description: 'A title field for very short text that contextualizes the content.', + opts: { + backgroundColor: 'transparent', + text_fontColor: '#F1F0E9', + hCentering: 'h-center', + contentBold: true, + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.87, -0.83], + br: [0.87, 0.2], + types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'The main focus of the template; could be an image, long text, etc.', + opts: { + _layout_borderRounding: '.05', + borderColor: '#8F5B25', + borderWidth: 6, + backgroundColor: '#CECAB9', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.8, 0.2], + br: [0.8, 0.3], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + description: 'A caption for field #2, very short text.', + opts: { + backgroundColor: 'transparent', + hCentering: 'h-center', + text_fontColor: '#F1F0E9', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.87, 0.37], + br: [0.87, 0.96], + types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A medium-sized field for medium/long text.', + opts: { + _layout_borderRounding: '.05', + borderColor: '#8F5B25', + borderWidth: 6, + backgroundColor: '#CECAB9', + }, + }, + ], + }; + + public static FourField002: FieldSettings = { + title: 'fourfield002', + viewType: ViewType.FREEFORM, + tl: [0, 0], + br: [425, 778], + opts: { + backgroundColor: '#242425', + }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-0.83, -0.95], + br: [0.83, -0.2], + types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], + description: 'A medium to large-sized field suitable for an image or longer text that should be the main focus.', + opts: { + borderWidth: 8, + borderColor: '#F8E71C', + backgroundColor: '#242425', + text_fontColor: 'white', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.65, -0.2], + br: [0.65, -0.02], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY], + description: 'A tiny field for just a word or two of plain text.', + opts: { + backgroundColor: 'transparent', + text_fontColor: 'white', + hCentering: 'h-center', + text_transform: 'uppercase', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.65, 0], + br: [0.65, 0.18], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY], + description: 'A tiny field for just a word or two of plain text.', + opts: { + backgroundColor: 'transparent', + text_fontColor: 'white', + hCentering: 'h-center', + text_transform: 'uppercase', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.83, 0.2], + br: [0.83, 0.95], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A medium to large-sized field suitable for longer text that should contextualize field 1.', + opts: { + borderWidth: 8, + borderColor: '#F8E71C', + text_fontColor: 'white', + backgroundColor: '#242425', + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.8, -0.075], + br: [-0.525, 0.075], + opts: { + backgroundColor: '#F8E71C', + _rotation: 45, + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.3075, -0.0245], + br: [-0.2175, 0.0245], + opts: { + backgroundColor: '#F8E71C', + _rotation: 45, + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.045, -0.0245], + br: [0.045, 0.0245], + opts: { + backgroundColor: '#F8E71C', + _rotation: 45, + }, + }, + { + viewType: ViewType.DEC, + tl: [0.2175, -0.0245], + br: [0.3075, 0.0245], + opts: { + backgroundColor: '#F8E71C', + _rotation: 45, + }, + }, + { + viewType: ViewType.DEC, + tl: [0.525, -0.075], + br: [0.8, 0.075], + opts: { + backgroundColor: '#F8E71C', + _rotation: 45, + }, + }, + ], + }; + + // public static FourField003: TemplateDocInfos = { + // title: 'fourfield3', + // width: 477, + // height: 662, + // opts: { + // backgroundColor: '#9E9C95' + // }, + // fields: [{ + // tl: [-.875, -.9], + // br: [.875, .7], + // types: [TemplateFieldType.VISUAL], + // sizes: [TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + // description: '', + // opts: { + // borderWidth: '15', + // borderColor: '#E0E0DA', + // } + // }, { + // tl: [-.95, .8], + // br: [-.1, .95], + // types: [TemplateFieldType.TEXT], + // sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + // description: '', + // opts: { + // backgroundColor: 'transparent', + // color: 'white', + // contentXCentering: 'h-right', + // } + // }, { + // tl: [.1, .8], + // br: [.95, .95], + // types: [TemplateFieldType.TEXT], + // sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + // description: '', + // opts: { + // backgroundColor: 'transparent', + // color: 'red', + // fontTransform: 'uppercase', + // contentXCentering: 'h-left' + // } + // }, { + // tl: [0, -.9], + // br: [.85, -.66], + // types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL], + // sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + // description: '', + // opts: { + // backgroundColor: 'transparent', + // contentXCentering: 'h-right' + // } + // }], + // decorations: [{ + // tl: [-.025, .8], + // br: [.025, .95], + // opts: { + // backgroundColor: '#E0E0DA', + // } + // }] + // }; + + public static FourField004: FieldSettings = { + title: 'fourfield04', + viewType: ViewType.FREEFORM, + tl: [0, 0], + br: [414, 583], + opts: { + backgroundColor: '#6CCAF0', + //borderColor: '#1088C3', + //borderWidth: '10', + }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-0.86, -0.92], + br: [-0.075, -0.77], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY], + description: 'A tiny field for just a word or two of plain text.', + opts: { + backgroundColor: '#E2B4F5', + borderWidth: 9, + borderColor: '#9222F1', + hCentering: 'h-center', + }, + }, + { + viewType: ViewType.STATIC, + tl: [0.075, -0.92], + br: [0.86, -0.77], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY], + description: 'A tiny field for just a word or two of plain text.', + opts: { + backgroundColor: '#F5B4DD', + borderWidth: 9, + borderColor: '#E260F3', + hCentering: 'h-center', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.81, -0.64], + br: [0.81, 0.48], + types: [TemplateFieldType.VISUAL], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A large to huge field for visual content that is the main content of the template.', + opts: { + borderWidth: 16, + borderColor: '#A2BD77', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.86, 0.6], + br: [0.86, 0.92], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], + description: 'A medium to large field for text that describes the visual content above', + opts: { + borderWidth: 9, + borderColor: '#F0D601', + backgroundColor: '#F3F57D', + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.852, -0.67], + br: [0.852, 0.51], + opts: { + backgroundColor: 'transparent', + borderColor: '#007C0C', + borderWidth: 10, + }, + }, + ], + }; + + public static FourField005: FieldSettings = { + title: 'fourfield05', + viewType: ViewType.FREEFORM, + tl: [0, 0], + br: [400, 514], + opts: { + backgroundColor: '#95A575', + }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-0.9, -0.925], + br: [-0.075, -0.775], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + description: 'A small text field for a title or word(s) that categorize the rest of the content.', + opts: { + borderColor: '#3B4A2C', + borderWidth: 8, + hCentering: 'h-center', + backgroundColor: '#B8DC90', + }, + }, + { + viewType: ViewType.STATIC, + tl: [0.075, -0.925], + br: [0.9, -0.775], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + description: 'A small text field for a title that categorizes the rest of the content.', + opts: { + borderColor: '#3B4A2C', + borderWidth: 8, + hCentering: 'h-center', + backgroundColor: '#B8DC90', + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.82, -0.4], + br: [-0.5, -0.2], + opts: { + backgroundColor: '#94B058', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.66, -0.65], + br: [0.66, 0.25], + types: [TemplateFieldType.VISUAL], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], + description: 'A medium to large field in the center of the template, for the main visual content.', + opts: { + borderColor: '#3B4A2C', + borderWidth: 8, + backgroundColor: '#B8DC90', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.875, 0.425], + br: [0.875, 0.925], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], + description: 'A medium to large field at the bottom of the template, for the main text content.', + opts: { + borderColor: '#3B4A2C', + borderWidth: 8, + hCentering: 'h-center', + backgroundColor: '#B8DC90', + }, + }, + { + viewType: ViewType.DEC, + tl: [-1.1, -0.62], + br: [-0.9, -0.5], + opts: { + backgroundColor: '#7A9D31', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + { + viewType: ViewType.DEC, + tl: [-1.1, 0], + br: [-0.9, 0.15], + opts: { + backgroundColor: '#94B058', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.93, -0.265], + br: [-0.715, -0.125], + opts: { + backgroundColor: '#728745', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + { + viewType: ViewType.DEC, + tl: [0.7, -0.45], + br: [0.85, -0.3], + opts: { + backgroundColor: '#7A9D31', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + { + viewType: ViewType.DEC, + tl: [0.8, 0.03], + br: [1.2, 0.33], + opts: { + backgroundColor: '#728745', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + { + viewType: ViewType.DEC, + tl: [0.875, -0.13], + br: [1.2, 0.12], + opts: { + backgroundColor: '#94B058', + borderColor: '#3B4A2C', + borderWidth: 8, + }, + }, + ], + }; + + public static FourFieldCarousel: FieldSettings = { + title: 'title_fourfieldcarousel', + viewType: ViewType.FREEFORM, + tl: [0, 0], + br: [500, 600], + opts: { + backgroundColor: '#D7CBAB', + }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-0.8, -0.9], + br: [0.8, -0.5], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + description: 'A small text field for a title that categorizes the rest of the content.', + opts: { + hCentering: 'h-center', + backgroundColor: 'transparent', + text_transform: 'uppercase', + }, + }, + { + viewType: ViewType.CAROUSEL3D, + tl: [-0.9, -0.5], + br: [0.9, 0.25], + opts: { + borderColor: '#847F69', + borderWidth: 8, + backgroundColor: '#C8BA94', + }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-0.4, -0.6], + br: [0.4, 0.6], + types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A medium to large field for content that will share central focus with other content in the carousel.', + opts: { + //borderColor: 'yellow', + //borderWidth: '8', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.4, -0.6], + br: [0.4, 0.6], + types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A medium to large field for content that will share central focus with other content in the carousel.', + opts: { + //borderColor: 'black', + //borderWidth: '8', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.4, -0.6], + br: [0.4, 0.6], + types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A medium to large field for content that will share central focus with other content in the carousel.', + opts: { + //borderColor: 'yellow', + //borderWidth: '8', + }, + }, + ], + }, + { + viewType: ViewType.STATIC, + tl: [-0.9, 0.35], + br: [0.9, 0.9], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], + description: 'A medium text field for a description of the content in the carousel.', + opts: { + hCentering: 'h-center', + backgroundColor: 'transparent', + }, + }, + ], + }; + + public static ThreeField001: FieldSettings = { + title: 'threefield001', + viewType: ViewType.FREEFORM, + tl: [0, 0], + br: [575, 770], + opts: { + backgroundColor: '#DDD3A9', + }, + subfields: [ + { + viewType: ViewType.FREEFORM, + tl: [-0.66, -0.747], + br: [0.66, 0.247], + description: 'A medium to large field for visual content that is the central focus.', + opts: { + borderColor: 'yellow', + borderWidth: 8, + backgroundColor: '#DDD3A9', + _rotation: 45, + }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-1.25, -1.25], + br: [1.25, 1.25], + types: [TemplateFieldType.VISUAL], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A medium to large field for visual content that is the central focus.', + opts: { + _rotation: -45, + }, + }, + ], + }, + { + viewType: ViewType.STATIC, + tl: [-0.7, 0.2], + br: [0.7, 0.46], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + description: 'A very small text field for one to a few words. A good caption for the image.', + opts: { + backgroundColor: 'transparent', + hCentering: 'h-center', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.95, 0.5], + br: [0.95, 0.95], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE], + description: 'A medium to large text field for a thorough description of the image. ', + opts: { + backgroundColor: 'transparent', + text_fontColor: 'white', + }, + }, + { + viewType: ViewType.FREEFORM, + tl: [0.2, -1.32], + br: [1.8, -0.66], + opts: { + backgroundColor: '#CEB155', + _rotation: 45, + }, + subfields: [ + { + viewType: ViewType.DEC, + tl: [-1, -0.7], + br: [1, -0.625], + opts: { + backgroundColor: 'yellow', + }, + }, + ], + }, + { + viewType: ViewType.FREEFORM, + tl: [-1.8, -1.32], + br: [-0.2, -0.66], + opts: { + backgroundColor: '#CEB155', + _rotation: 135, + }, + subfields: [ + { + viewType: ViewType.DEC, + tl: [-1, -0.7], + br: [1, -0.625], + opts: { + backgroundColor: 'yellow', + }, + }, + ], + }, + { + viewType: ViewType.FREEFORM, + tl: [0.33, 0.75], + br: [1.66, 1.25], + opts: { + backgroundColor: '#CEB155', + _rotation: 135, + }, + subfields: [ + { + viewType: ViewType.DEC, + tl: [-1, -0.7], + br: [1, -0.625], + opts: { + backgroundColor: 'yellow', + }, + }, + ], + }, + { + viewType: ViewType.FREEFORM, + tl: [-1.66, 0.75], + br: [-0.33, 1.25], + opts: { + backgroundColor: '#CEB155', + _rotation: 45, + }, + subfields: [ + { + viewType: ViewType.DEC, + tl: [-1, -0.7], + br: [1, -0.625], + opts: { + backgroundColor: 'yellow', + }, + }, + ], + }, + ], + }; + + public static ThreeField002: FieldSettings = { + title: 'threefield002', + viewType: ViewType.FREEFORM, + tl: [0, 0], + br: [477, 662], + opts: { + backgroundColor: '#9E9C95', + }, + subfields: [ + { + viewType: ViewType.STATIC, + tl: [-0.875, -0.9], + br: [0.875, 0.7], + types: [TemplateFieldType.VISUAL], + sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE], + description: 'A medium to large visual field for the main content of the template', + opts: { + borderWidth: 15, + borderColor: '#E0E0DA', + }, + }, + { + viewType: ViewType.STATIC, + tl: [0.1, 0.775], + br: [0.95, 0.975], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + description: 'A very small text field for one to a few words. The content should represent a general categorization of the image.', + opts: { + backgroundColor: 'transparent', + text_fontColor: '#AF0D0D', + text_transform: 'uppercase', + contentBold: true, + hCentering: 'h-left', + }, + }, + { + viewType: ViewType.STATIC, + tl: [-0.95, 0.775], + br: [-0.1, 0.975], + types: [TemplateFieldType.TEXT], + sizes: [TemplateFieldSize.TINY, TemplateFieldSize.SMALL], + description: 'A very small text field for one to a few words. The content should contextualize field 2.', + opts: { + backgroundColor: 'transparent', + text_fontColor: 'black', + hCentering: 'h-right', + }, + }, + { + viewType: ViewType.DEC, + tl: [-0.025, 0.8], + br: [0.025, 0.95], + opts: { + backgroundColor: '#E0E0DA', + }, + }, + ], + }; +}
\ No newline at end of file |