doodleui v1.0.0

⚙️ Installation

Run the following command in your project directory :-

npm install doodleui

Also, you can download the zip file & then keep the dist folder in your project directory. You can also rename the folder as you wish. For example we use doodleui.

Download the zip file

📦 Importing

JavaScript: ES Module

Recommended and modern way to import the library in your project (eg. react).

import $ from "doodleui";

For HTML, import the library as follows:

<script type="module">
 import $ from "./doodleui/doodleui.js";
</script>

Or, use import map:

<script type="importmap">
 {
  "imports": {
   "doodleui": "/doodleui/doodleui.js"
  }
 }
</script>
<script type="module">
 import $ from "doodleui";
</script>

JavaScript: Universal Module Definition

UMD (Universal Module Definition) patterns for JavaScript modules that work everywhere.

<script src="/doodleui/doodleui.umd.js" type="text/javascript">
 <script>
      DoodleUI("#abc")...
</script>

CSS: Importing

<link rel="stylesheet" href="/doodleui/doodleui.css" />
...
<button class="m-5 button_red"></button>

📖 Documentation Guide

1.0. Selectors

// String for Element(s)
DoodleUI("#abc").
DoodleUI(".abc").
DoodleUI("body > img")[0].

// Array for NodeList
DoodleUI([".abc"]).

// Custom
DoodleUI(document.getElementById("abc")).

1.1. Options

// for 'dragging'
DoodleUI("#abc", {
 highlight: true,
}).dragging(["#box1", "#box2"]);

1.2. Using Method

 import $, {DoodleUI} from "doodleui"; // You can change $ to any name

 $(). // User Interface
 DoodleUI. // Utility

2.1. $().zoom

Creates a zoom effect for images.

$("#abc").zoom();

2.2. $().observer

Creates an intersection observer for elements.

$("#abc").observer(
 (element) => {
  // When observer is intersecting
 },
 (element) => {
  // When observer is not intersecting
 }
);

2.3. $().dragging

Drag and drop an element.

DoodleUI("#abc").dragging(["#box1", "#box2"]);

DoodleUI("#abc", {
 highlight: true,
}).dragging(["#box1", "#box2"]);

3.1. DoodleUI.keypress

Creates a keypress event for the user.

DoodleUI.keypress((keyName, keyEvent) => {
 if (keyName === "Ctrl+M") {
  // When user presses control & m key
 }
});

3.2. DoodleUI.location

Gets the location of the user.

DoodleUI.location((position, object) => {
 console.log(position.lat, position.long);
});

3.3. DoodleUI.accessible (beta)

Accessibility tool integration!

DoodleUI.accessible({});

License

Released under the MIT License Copyright © 2024 Mohammad Sefatullah

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Support

Follow Me