https://github.com/webfruits/toolbox
Additional features like SVGComponent, GridLayout and a lot of utilities based on webfruits/core
https://github.com/webfruits/toolbox
library toolbox typescript webfruit
Last synced: 5 months ago
JSON representation
Additional features like SVGComponent, GridLayout and a lot of utilities based on webfruits/core
- Host: GitHub
- URL: https://github.com/webfruits/toolbox
- Owner: webfruits
- License: mit
- Created: 2019-03-27T21:23:27.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-05-12T10:42:01.000Z (about 4 years ago)
- Last Synced: 2025-01-17T18:56:35.101Z (over 1 year ago)
- Topics: library, toolbox, typescript, webfruit
- Language: TypeScript
- Homepage: https://webfruits.io
- Size: 171 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# webfruits/toolbox [](https://www.typescriptlang.org) [](./LICENSE)  [](https://www.npmjs.com/package/@webfruits/toolbox)
... depends on [webfruits/core](https://github.com/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](src).
### Components
#### GridLayout
.. creates a simple grid of columns. Column gap und number of columns can be set anytime.
```typescript
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.
```typescript
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`.
```typescript
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`
```typescript
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
- **[webfruits/core](https://github.com/webfruits/core)**
a TypeScript library for building user interfaces using the real DOM.
- **[webfruits/best-practice](https://github.com/webfruits/best-practice)**
our recommondation of how to structure an application using webfruits.
- **[webfruits/webpack-starterkit](https://github.com/webfruits/webpack-starterkit)**
is a basic webpack setup and skeleton for an webfruits application.
## Licence
webfruits/toolbox is [MIT licensed](./LICENSE).