🏗️ my-interaction

👨‍💻 About

Library to make HTML more declarative and make easy to interact with DOM....

. . .

🧩 How to use it

• Data Schema

  • Default schema

    • Controller - data-interaction-controller
    • Target element - data-[controllerName]-target
    • Event element - data-[controllerName]-event

  • But, you can also create your own schema

     import Interaction from "interaction";
    
     const CONTROLLER_NAME = "controller";
    
     const customDataSchema = {
     	controller: `data-${CONTROLLER_NAME}-controller`,
     	target: `data-${CONTROLLER_NAME}-target`,
     	event: `data-${CONTROLLER_NAME}-event`
     };
    
     class YourClassController {}
    
     new Interaction("controllerName", YourClassController, customDataSchema);

• Controller

  • Basically, controller is just container wrapper and element inside the controller can use the features

     <div data-interaction-controller="[controller name-]">
     </div>

  • You can access some data related to controller by accessing this inside your controller class

    • controllerName - property to get the controller name
    • controllerElement - property to get controller element

• Event listener
  • data-[controllerName]-event="[eventName]->listenerName"
  • <button data-[controllerName]-event="click->toggle">Click Me</button>
  • You can access elements that have event listener by accessing this inside your controller class
    • eventElement - property when just element
    • eventElements - proerty when elements more than one and store in array

• Multiple event listeners
  • Just seperate the events using space
  • <button data-[controllerName]-event="click->toggle keydown->keyboardNav">Click Me</button>

• Target elements
  • static targets = ["targetElement"]; - Use static property inside your controller class
  • data-accordion-target="dataContent" - Define the target element
  • You can access target elements by accessing this inside your controller class
    • [targetName]Element - property when just element
    • [targetName]Elements - proerty when elements more than one and store in array

• Event Parameters
  • data-[controllerName]-[parameter_name]-param="[parameter value]"
  • Example - <button data-alert-event="click->close" data-alert-alert_id-param="24">X</button>
  • You can access event parameter fron this inside your controller class
    • eventParams - property from event target

And finally you can see the examples inside `examples/` folder

. . .

📝 Some stuff

• Click here for more detail about data attribute case sensitive (regarding event parameter)

. . .

🧰 Tech Stack

— —

(⌐■_■)