https://github.com/becklyn/mojave

A library of commonly used JavaScript tools and helpers by Becklyn
https://github.com/becklyn/mojave

frontend integration javascript preact rad typescript ui utils

Last synced: about 1 month ago
JSON representation

A library of commonly used JavaScript tools and helpers by Becklyn

• Host: GitHub
• URL: https://github.com/becklyn/mojave
• Owner: Becklyn
• License: bsd-3-clause
• Created: 2015-05-28T15:14:03.000Z (over 9 years ago)
• Default Branch: 5.x
• Last Pushed: 2024-07-09T00:46:19.000Z (4 months ago)
• Last Synced: 2024-09-26T14:04:29.134Z (about 2 months ago)
• Topics: frontend, integration, javascript, preact, rad, typescript, ui, utils
• Language: TypeScript
• Size: 943 KB
• Stars: 5
• Watchers: 8
• Forks: 3
• Open Issues: 34
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
mojave

======

A library of commonly used JavaScript tools and helpers by Becklyn Studios.

UI Components

-------------

### Overlay Loader

A global loader, that adds an overlay to your app until the loading is finished.

#### Usage

1.  import the SCSS via `@import("~mojave/scss/overlay-loader/component")` into your project

2.  add the positioning SCSS into your default theme:

    ```scss

    @import "~mojave/scss/overlay-loader/positioning";

    

    .my-app {

        @include position-overlay-loader(10 /* <- this is the z-index */);

    }

    ```

    

3.  Use the JS component:

    ```js

    import {OverlayLoader} from "mojave/ui/OverlayLoader";

    

    export class FrontendLoader extends OverlayLoader

    {

        public constructor () {

            super(`
My SVG
`);

        }

    }

    ```


 

Contributing / Development

--------------------------

To run the tests, first install all dependencies:

```js

npm install

```

Then run the [kaba](https://github.com/Becklyn/kaba) default task:

```bash

npx kaba

```

You need to run this task after every change in the library.

You can also start a watcher to continuously build the library:

```bash

npx kaba -d

```

Now open the file in `tests/index.html` in a web browser.

### Test case files

Place all test case files under `tests/cases/` as regular `.js` files.

The tests files are built using `tests/build/all-tests.js`, so if you add a new test case file, you must add an import there.

This build is compiled using kaba, so you can use regular modern JS.

### Working on the project

1. Make your changes in the library

2. If you added a new file, update the bundle build in `tests/build/all-tests.js`

3. Bundle the library via `kaba`

4. Write your tests in `tests/cases/`

5. Open the QUnit page in your browser and check whether all tests work correctly.