unit.gl 0.0.35 → 0.0.39

package/scss/variables/_view.scss

@@ -1,66 +1,162 @@
-// Copyright 2024 Scape Agency BV
-
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-
-// http://www.apache.org/licenses/LICENSE-2.0
-
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
+// ============================================================================
+// Poster
+// ============================================================================
 
+////
+/// 
+/// View Variables Module
+/// ===========================================================================
+/// 
+/// This module defines the breakpoints for responsive design, categorized by
+/// device types. It leverages a base unit to calculate breakpoint values for
+/// consistency across various screen sizes.
+///
+/// Breakpoint Categories:
+/// - xs: Extra small devices (e.g., Mobile phones)
+/// - sm: Small devices (e.g., Tablets)
+/// - md: Medium devices (e.g., Laptops)
+/// - lg: Large devices (e.g., Desktops)
+/// - xl: Extra large devices (e.g., TVs)
+/// - sl: Super large devices (e.g., Large TVs)
+///
+/// Base Unit:
+/// - The base screen unit is set to 16px, which serves as the foundation for
+///   calculating breakpoints.
+///
+/// Example Usage:
+///   @media (min-width: map-get($breakpoints, md)) {
+///       // Styles for medium devices and up
+///   }
+/// 
+/// @group View
+/// @author Scape Agency
+/// @link https://unit.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @access public
+/// 
+////
 
 
 // ============================================================================
-// Media | Screen
+// Use
 // ============================================================================
 
-// 320px — 480px: Mobile devices
-// 481px — 768px: iPads, Tablets
-// 769px — 1024px: Small screens, laptops
-// 1025px — 1200px: Desktops, large screens
-// 1201px and more —  Extra large screens, TV
-
-
-$base_screen_unit: 16px !default; // Base unit size (16px)
 
+// ============================================================================
+// Variables
+// ============================================================================
 
-@function calc_breakpoint($multiplier) {
-    @return $base_screen_unit * $multiplier;
-}
 
+/// 
+/// Base unit size used for calculating breakpoints. Defaults to 16px.
+/// 
+/// @name $base_screen_unit
+/// @type Length
+/// 
+$base_screen_unit: 16px !default;
+
+
+
+/// 
+/// A map defining the breakpoints for responsive design. Each key represents
+/// a different device category, with the value calculated using the base
+/// screen unit.
+/// 
+/// - **xs**: 320px (Extra small devices like mobile phones)
+/// - **sm**: 480px (Small devices like tablets)
+/// - **md**: 768px (Medium devices like laptops)
+/// - **lg**: 1024px (Large devices like desktops)
+/// - **xl**: 1280px (Extra large devices like TVs)
+/// - **sl**: 1440px (Super large devices like large TVs)
+/// 
+/// @name $breakpoints
+/// @type Map
+/// 
+// $breakpoints: (
+//      xs: calc_breakpoint($base_screen_unit, 20),   //  320px - Extra small devices (Mobile)
+//      sm: calc_breakpoint($base_screen_unit, 30),   //  480px - Small devices (Tablets)
+//      md: calc_breakpoint($base_screen_unit, 48),   //  768px - Medium devices (Laptops)
+//      lg: calc_breakpoint($base_screen_unit, 64),   // 1024px - Large devices (Desktops)
+//      xl: calc_breakpoint($base_screen_unit, 80),   // 1280px - Extra large devices (TV)
+//      sl: calc_breakpoint($base_screen_unit, 90),   // 1440px - Super large devices (Large TV)
+// ) !default;
 
-// Define breakpoints using the function
 $breakpoints: (
-    xs: calc_breakpoint(20),   //  320px - Extra small devices (Mobile)
-    sm: calc_breakpoint(30),   //  480px - Small devices (Tablets)
-    md: calc_breakpoint(48),   //  768px - Medium devices (Laptops)
-    lg: calc_breakpoint(64),   // 1024px - Large devices (Desktops)
-    xl: calc_breakpoint(80),   // 1280px - Extra large devices (TV)
-    sl: calc_breakpoint(90),   // 1440px - Super large devices (Large TV)
+     xs: 320px,   //  320px - Extra small devices (Mobile)
+     sm: 480px,   //  480px - Small devices (Tablets)
+     md: 768px,   //  768px - Medium devices (Laptops)
+     lg: 1024px,   // 1024px - Large devices (Desktops)
+     xl: 1280px,   // 1280px - Extra large devices (TV)
+     sl: 1440px,   // 1440px - Super large devices (Large TV)
 ) !default;
 
 
-// Expose individual breakpoints for easier direct access
+/// 
+/// Exposes the value of the `xs` breakpoint for direct access.
+/// 
+/// @name $media_xs
+/// @type Length
+/// 
 $media_xs: map-get($breakpoints, xs) !default;
+
+
+/// 
+/// Exposes the value of the `sm` breakpoint for direct access.
+/// 
+/// @name $media_sm
+/// @type Length
+/// 
 $media_sm: map-get($breakpoints, sm) !default;
+
+
+/// 
+/// Exposes the value of the `md` breakpoint for direct access.
+/// 
+/// @name $media_md
+/// @type Length
+/// 
 $media_md: map-get($breakpoints, md) !default;
+
+
+/// 
+/// Exposes the value of the `lg` breakpoint for direct access.
+/// 
+/// @name $media_lg
+/// @type Length
+/// 
 $media_lg: map-get($breakpoints, lg) !default;
+
+
+/// 
+/// Exposes the value of the `xl` breakpoint for direct access.
+/// 
+/// @name $media_xl
+/// @type Length
+/// 
 $media_xl: map-get($breakpoints, xl) !default;
+
+
+/// 
+/// Exposes the value of the `sl` breakpoint for direct access.
+/// 
+/// @name $media_sl
+/// @type Length
+/// 
 $media_sl: map-get($breakpoints, sl) !default;
 
-// $media_xs: 320px !default;
-// $media_sm: 480px !default;
-// $media_md: 768px !default;
-// $media_lg: 1024px !default;
-// $media_xl: 1280px !default;
-// $media_sl: 1440px !default;
 
+/// 
+/// Calculates the difference between the `sl` and `xs` breakpoints.
+/// 
+/// @name $media_dif
+/// @type Length
+/// 
 $media_dif: calc($media_sl - $media_xs);
 
+
+// Uncomment below if you want to use the following predefined breakpoints for various devices:
+
 // $media_min: 320px !default;  // Mobile
 // $media_med: 640px !default;  // Tablet
 // $media_max: 960px !default;  // Screen

package/ts/AspectRatio.ts

@@ -0,0 +1,29 @@
+class AspectRatio {
+    width: Unit;
+    height: Unit;
+
+    constructor(width: Unit, height: Unit) {
+        this.width = width;
+        this.height = height;
+    }
+
+    calculateRatio(): number {
+        return this.width.value / this.height.value;
+    }
+
+    scaleToWidth(newWidth: Unit): Unit {
+        const ratio = this.calculateRatio();
+        const newHeightValue = newWidth.value / ratio;
+        return new Unit(newHeightValue, newWidth.unit);
+    }
+
+    scaleToHeight(newHeight: Unit): Unit {
+        const ratio = this.calculateRatio();
+        const newWidthValue = newHeight.value * ratio;
+        return new Unit(newWidthValue, newHeight.unit);
+    }
+
+    toString(): string {
+        return `AspectRatio: width ${this.width.toString()}, height ${this.height.toString()}, ratio ${this.calculateRatio()}`;
+    }
+}

package/ts/Border.ts

@@ -0,0 +1,29 @@
+type BorderStyle = 'solid' | 'dashed' | 'dotted' | 'double' | 'none';
+
+class Border {
+    width: Unit;
+    style: BorderStyle;
+    color: string;
+
+    constructor(width: Unit, style: BorderStyle, color: string) {
+        this.width = width;
+        this.style = style;
+        this.color = color;
+    }
+
+    setWidth(newWidth: Unit): void {
+        this.width = newWidth;
+    }
+
+    setStyle(newStyle: BorderStyle): void {
+        this.style = newStyle;
+    }
+
+    setColor(newColor: string): void {
+        this.color = newColor;
+    }
+
+    toString(): string {
+        return `Border: ${this.width.toString()} ${this.style} ${this.color}`;
+    }
+}

package/ts/BoxModel.ts

@@ -0,0 +1,40 @@
+class BoxModel {
+    margin: Margin;
+    padding: Padding;
+    border: Border;
+    size: Size;
+
+    constructor(margin: Margin, padding: Padding, border: Border, size: Size) {
+        if (
+            margin.top.unit !== size.width.unit ||
+            padding.top.unit !== size.width.unit ||
+            border.width.unit !== size.width.unit
+        ) {
+            throw new Error('All units in BoxModel must match');
+        }
+        this.margin = margin;
+        this.padding = padding;
+        this.border = border;
+        this.size = size;
+    }
+
+    setMargin(margin: Margin): void {
+        this.margin = margin;
+    }
+
+    setPadding(padding: Padding): void {
+        this.padding = padding;
+    }
+
+    setBorder(border: Border): void {
+        this.border = border;
+    }
+
+    setSize(size: Size): void {
+        this.size = size;
+    }
+
+    toString(): string {
+        return `BoxModel:\n  Size: ${this.size.toString()}\n  Margin: ${this.margin.toString()}\n  Padding: ${this.padding.toString()}\n  Border: ${this.border.toString()}`;
+    }
+}

package/ts/FlexContainer.ts

@@ -0,0 +1,48 @@
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+
+class FlexContainer {
+    flexDirection: FlexDirection;
+    flexWrap: FlexWrap;
+    justifyContent: Justify;
+    alignItems: Align;
+    alignContent: Align;
+
+    constructor(
+        flexDirection: FlexDirection = 'row',
+        flexWrap: FlexWrap = 'nowrap',
+        justifyContent: Justify = 'start',
+        alignItems: Align = 'stretch',
+        alignContent: Align = 'stretch'
+    ) {
+        this.flexDirection = flexDirection;
+        this.flexWrap = flexWrap;
+        this.justifyContent = justifyContent;
+        this.alignItems = alignItems;
+        this.alignContent = alignContent;
+    }
+
+    setDirection(direction: FlexDirection): void {
+        this.flexDirection = direction;
+    }
+
+    setWrap(wrap: FlexWrap): void {
+        this.flexWrap = wrap;
+    }
+
+    setJustifyContent(justify: Justify): void {
+        this.justifyContent = justify;
+    }
+
+    setAlignItems(align: Align): void {
+        this.alignItems = align;
+    }
+
+    setAlignContent(align: Align): void {
+        this.alignContent = align;
+    }
+
+    toString(): string {
+        return `FlexContainer: direction ${this.flexDirection}, wrap ${this.flexWrap}, justify ${this.justifyContent}, align-items ${this.alignItems}, align-content ${this.alignContent}`;
+    }
+}

package/ts/Grid.ts

@@ -0,0 +1,21 @@
+class Grid {
+    columns: number;
+    gutter: Unit;
+    rowHeight: Unit;
+
+    constructor(columns: number, gutter: Unit, rowHeight: Unit) {
+        this.columns = columns;
+        this.gutter = gutter;
+        this.rowHeight = rowHeight;
+    }
+
+    getColumnWidth(containerWidth: Unit): Unit {
+        const totalGutterWidth = this.gutter.value * (this.columns - 1);
+        const columnWidth = (containerWidth.value - totalGutterWidth) / this.columns;
+        return new Unit(columnWidth, containerWidth.unit);
+    }
+
+    toString(): string {
+        return `Grid: ${this.columns} columns, gutter ${this.gutter.toString()}, row height ${this.rowHeight.toString()}`;
+    }
+}

package/ts/GridContainer.ts

@@ -0,0 +1,33 @@
+class GridContainer {
+    rows: number;
+    columns: number;
+    rowGap: Unit;
+    columnGap: Unit;
+
+    constructor(rows: number, columns: number, rowGap: Unit, columnGap: Unit) {
+        this.rows = rows;
+        this.columns = columns;
+        this.rowGap = rowGap;
+        this.columnGap = columnGap;
+    }
+
+    setRows(rows: number): void {
+        this.rows = rows;
+    }
+
+    setColumns(columns: number): void {
+        this.columns = columns;
+    }
+
+    setRowGap(rowGap: Unit): void {
+        this.rowGap = rowGap;
+    }
+
+    setColumnGap(columnGap: Unit): void {
+        this.columnGap = columnGap;
+    }
+
+    toString(): string {
+        return `GridContainer: ${this.rows} rows, ${this.columns} columns, row-gap ${this.rowGap.toString()}, column-gap ${this.columnGap.toString()}`;
+    }
+}

package/ts/Layout.ts

@@ -0,0 +1,34 @@
+type Align = 'start' | 'center' | 'end' | 'stretch';
+type Justify = 'start' | 'center' | 'end' | 'space-between' | 'space-around';
+
+class Layout {
+    width: Unit;
+    height: Unit;
+    align: Align;
+    justify: Justify;
+    direction: 'row' | 'column';
+
+    constructor(width: Unit, height: Unit, align: Align = 'stretch', justify: Justify = 'start', direction: 'row' | 'column' = 'row') {
+        this.width = width;
+        this.height = height;
+        this.align = align;
+        this.justify = justify;
+        this.direction = direction;
+    }
+
+    setAlign(align: Align): void {
+        this.align = align;
+    }
+
+    setJustify(justify: Justify): void {
+        this.justify = justify;
+    }
+
+    setDirection(direction: 'row' | 'column'): void {
+        this.direction = direction;
+    }
+
+    toString(): string {
+        return `Layout: ${this.direction}, width ${this.width.toString()}, height ${this.height.toString()}, align ${this.align}, justify ${this.justify}`;
+    }
+}

package/ts/Position.ts

@@ -0,0 +1,28 @@
+class Position {
+    x: Unit;
+    y: Unit;
+
+    constructor(x: Unit, y: Unit) {
+        if (x.unit !== y.unit) {
+            throw new Error('X and Y must have the same unit');
+        }
+        this.x = x;
+        this.y = y;
+    }
+
+    add(other: Position): Position {
+        return new Position(this.x.add(other.x), this.y.add(other.y));
+    }
+
+    subtract(other: Position): Position {
+        return new Position(this.x.subtract(other.x), this.y.subtract(other.y));
+    }
+
+    convert(toUnit: UnitType): Position {
+        return new Position(this.x.convert(toUnit), this.y.convert(toUnit));
+    }
+
+    toString(): string {
+        return `Position: (${this.x.toString()}, ${this.y.toString()})`;
+    }
+}

package/ts/Rectangle.ts

@@ -0,0 +1,28 @@
+class Rectangle {
+    position: Position;
+    size: Size;
+
+    constructor(position: Position, size: Size) {
+        if (position.x.unit !== size.width.unit || position.y.unit !== size.height.unit) {
+            throw new Error('Position and Size units must match');
+        }
+        this.position = position;
+        this.size = size;
+    }
+
+    move(newPosition: Position): Rectangle {
+        return new Rectangle(newPosition, this.size);
+    }
+
+    resize(newSize: Size): Rectangle {
+        return new Rectangle(this.position, newSize);
+    }
+
+    scale(factor: number): Rectangle {
+        return new Rectangle(this.position, this.size.scale(factor));
+    }
+
+    toString(): string {
+        return `Rectangle: Position(${this.position.toString()}), Size(${this.size.toString()})`;
+    }
+}

package/ts/ResponsiveImage.ts

@@ -0,0 +1,28 @@
+class ResponsiveImage {
+    sources: Map<number, string>; // Map of breakpoint to image URL
+    altText: string;
+
+    constructor(altText: string) {
+        this.sources = new Map<number, string>();
+        this.altText = altText;
+    }
+
+    addSource(breakpoint: number, url: string): void {
+        this.sources.set(breakpoint, url);
+    }
+
+    getSource(viewportWidth: number): string {
+        let selectedSource = '';
+        this.sources.forEach((url, breakpoint) => {
+            if (viewportWidth >= breakpoint) {
+                selectedSource = url;
+            }
+        });
+        return selectedSource;
+    }
+
+    toString(viewportWidth: number): string {
+        const source = this.getSource(viewportWidth);
+        return `<img src="${source}" alt="${this.altText}" />`;
+    }
+}

package/ts/ResponsiveScale.ts

@@ -0,0 +1,21 @@
+class ResponsiveScale {
+    viewport: Viewport;
+    baseSize: Unit;
+    scaleFactor: number;
+
+    constructor(viewport: Viewport, baseSize: Unit, scaleFactor: number) {
+        this.viewport = viewport;
+        this.baseSize = baseSize;
+        this.scaleFactor = scaleFactor;
+    }
+
+    calculateResponsiveSize(): Unit {
+        const ratio = this.viewport.width.value / 1920; // Assuming 1920px is the base
+        const scaledValue = this.baseSize.value * Math.pow(this.scaleFactor, ratio);
+        return new Unit(scaledValue, this.baseSize.unit);
+    }
+
+    toString(): string {
+        return `ResponsiveScale: Base(${this.baseSize.toString()}) ScaleFactor(${this.scaleFactor}) Viewport(${this.viewport.toString()})`;
+    }
+}

package/ts/Size.ts

@@ -0,0 +1,32 @@
+class Size {
+    width: Unit;
+    height: Unit;
+
+    constructor(width: Unit, height: Unit) {
+        if (width.unit !== height.unit) {
+            throw new Error('Width and height must have the same unit');
+        }
+        this.width = width;
+        this.height = height;
+    }
+
+    add(other: Size): Size {
+        return new Size(this.width.add(other.width), this.height.add(other.height));
+    }
+
+    subtract(other: Size): Size {
+        return new Size(this.width.subtract(other.width), this.height.subtract(other.height));
+    }
+
+    scale(factor: number): Size {
+        return new Size(this.width.multiply(factor), this.height.multiply(factor));
+    }
+
+    convert(toUnit: UnitType): Size {
+        return new Size(this.width.convert(toUnit), this.height.convert(toUnit));
+    }
+
+    toString(): string {
+        return `Size: ${this.width.toString()} x ${this.height.toString()}`;
+    }
+}

package/ts/Spacing.ts

@@ -0,0 +1,68 @@
+class Spacing {
+    top: Unit;
+    right: Unit;
+    bottom: Unit;
+    left: Unit;
+
+    constructor(top: Unit, right: Unit, bottom: Unit, left: Unit) {
+        if (top.unit !== right.unit || top.unit !== bottom.unit || top.unit !== left.unit) {
+            throw new Error('All sides must have the same unit');
+        }
+        this.top = top;
+        this.right = right;
+        this.bottom = bottom;
+        this.left = left;
+    }
+
+    add(other: Spacing): Spacing {
+        return new Spacing(
+            this.top.add(other.top),
+            this.right.add(other.right),
+            this.bottom.add(other.bottom),
+            this.left.add(other.left)
+        );
+    }
+
+    subtract(other: Spacing): Spacing {
+        return new Spacing(
+            this.top.subtract(other.top),
+            this.right.subtract(other.right),
+            this.bottom.subtract(other.bottom),
+            this.left.subtract(other.left)
+        );
+    }
+
+    scale(factor: number): Spacing {
+        return new Spacing(
+            this.top.multiply(factor),
+            this.right.multiply(factor),
+            this.bottom.multiply(factor),
+            this.left.multiply(factor)
+        );
+    }
+
+    convert(toUnit: UnitType): Spacing {
+        return new Spacing(
+            this.top.convert(toUnit),
+            this.right.convert(toUnit),
+            this.bottom.convert(toUnit),
+            this.left.convert(toUnit)
+        );
+    }
+
+    toString(): string {
+        return `Spacing: ${this.top.toString()} ${this.right.toString()} ${this.bottom.toString()} ${this.left.toString()}`;
+    }
+}
+
+class Margin extends Spacing {
+    constructor(top: Unit, right: Unit, bottom: Unit, left: Unit) {
+        super(top, right, bottom, left);
+    }
+}
+
+class Padding extends Spacing {
+    constructor(top: Unit, right: Unit, bottom: Unit, left: Unit) {
+        super(top, right, bottom, left);
+    }
+}

package/ts/Transform.ts

@@ -0,0 +1,38 @@
+type AngleUnit = 'deg' | 'rad';
+
+class Transform {
+    translateX: Unit;
+    translateY: Unit;
+    rotate: number;
+    rotateUnit: AngleUnit;
+    scaleX: number;
+    scaleY: number;
+
+    constructor(translateX: Unit, translateY: Unit, rotate: number, rotateUnit: AngleUnit, scaleX: number, scaleY: number) {
+        this.translateX = translateX;
+        this.translateY = translateY;
+        this.rotate = rotate;
+        this.rotateUnit = rotateUnit;
+        this.scaleX = scaleX;
+        this.scaleY = scaleY;
+    }
+
+    setTranslation(translateX: Unit, translateY: Unit): void {
+        this.translateX = translateX;
+        this.translateY = translateY;
+    }
+
+    setRotation(angle: number, unit: AngleUnit): void {
+        this.rotate = angle;
+        this.rotateUnit = unit;
+    }
+
+    setScale(scaleX: number, scaleY: number): void {
+        this.scaleX = scaleX;
+        this.scaleY = scaleY;
+    }
+
+    toString(): string {
+        return `Transform: translate(${this.translateX.toString()}, ${this.translateY.toString()}) rotate(${this.rotate}${this.rotateUnit}) scale(${this.scaleX}, ${this.scaleY})`;
+    }
+}