@webfruits/toolbox

Additional features like SVGComponent, GridLayout and a lot of utilities based on webfruits/core

Usage no npm install needed!

<script type="module">
  import webfruitsToolbox from 'https://cdn.skypack.dev/@webfruits/toolbox';
</script>

README

wf core logo

webfruits/toolbox   Language TypeScript GitHub license GitHub package.json version npm version

... depends on webfruits/core, a library to create highly customized, fast and interactive user interfaces using the real DOM and not a virtual one. It is super slim, modular and has no dependencies. All declarations and coding can be done with TypeScript. There is no need to learn any proprietary template language.

What is inside this toolbox

You'll find generic components, controllers and many utility classes, which will grow over time.
Below you'll find some examples. For further details please have a look at the source code.

Components

GridLayout

.. creates a simple grid of columns. Column gap und number of columns can be set anytime.

import {GridLayout} from "./components/layout/GridLayout";
import {UIComponent} from "@webfruits/core";

let gridLayout = new GridLayout();

gridLayout.numColumns = 2;
gridLayout.gapWidth = 20;

gridLayout.addChild(new UIComponent("grid-item-1"));
gridLayout.addChild(new UIComponent("grid-item-2"));

SVGComponent

... parses a svg string to a SVGElement which then can be modified in any way.

import {RequestUtils} from "./utils/RequestUtils";
import {SVGComponent} from "./components/svg/SVGComponent";

RequestUtils.getURL("assets/logo.svg", (svg: string) => {
     let svgComponent = new SVGComponent(svg);
     let logoBackground: SVGElement = svgComponent.getElementByID("background");
    logoBackground.style.backgroundColor = "red"
});

Controller

SwipeController

... dispatches Signals when swipe gestures were recognized on an HTMLElement.

import {SwipeController} from "./controller/input/SwipeController";

let swipeController = new SwipeController(htmlElement);
swipeController.onRightSwipeSignal.add(() => console.log("onSwipedToTheRight"));
swipeController.onLeftSwipeSignal.add(() => console.log("onSwipedToTheLeft"));

WheelController

... dispatches Signals when scroll or vertical swipe gestures were regonized on an HTMLElement

import {WheelController} from "./controller/input/WheelController";

let wheelController = new WheelController(htmlElement);
wheelController.onUpSignal.add(() => console.log("onScrolledUp or onSwipedUp"));
wheelController.onDownSignal.add(() => console.log("onScrolledDown or onSwipedDown"));

more webfruits

Licence

webfruits/toolbox is MIT licensed.