Giter Club home page Giter Club logo

domodule's Introduction

domodule

Test Status Lint Status NPM Version

Domodule is a helper that allows you to create JavaScript modules with minimal effort while keeping code size down. It automatically binds to elements using the data-module attribute.

Installation

npm install domodule

or

yarn add domodule

Example usage

<div data-module="ExampleModule" data-module-title="Example Module">
  <div data-name="title"></div>
  <button type="button" data-action="click">Show Title</button>
</div>
class ExampleModule extends Domodule {
  click() {
    this.els.title.textContent = this.options.title;
  }
}

Inherited methods

Each module has access to these helper methods.

  • find(<selector>) - Returns an array of matched elements inside of the module.
  • findOne(<selector>) - Returns the first matched element inside of the module.
  • findByName(<element name>) - Alternative to this.els[name].
  • getOption(<option>) - Returns value of an option (data-module-*).
  • setupActions() - Used to bind actions. Useful if the module adds elements in after Domodule inits. Note: Called by default. Calling again wont re-process elements.
  • setupNamed() - Same as setupActions() but binds to named elements. Note: Called by default. Calling again wont re-process elements.

Static Methods

  • Domodule.getInstance(<element>) - Returns an instance of the module.
  • Domodule.discover(<dom node, array of nodes, selector>) - Looks for data-module inside of matched elements. Will skip elements already processed. Calling just Domodule.discover() will search for all modules in the body.

Named elements

Adding data-name=<name> to an element will bind it to this.els.<name>. Adding the same data-name to multiple elements will change this.els.<name> to an Array<HTMLElement>, sorted in DOM order.

Actions

Adding data-action=<name> to an element binds it to click (or optionally data-action-type=<touch|mouseover|etc>). Values can be passed through the event by adding data attributes starting with data-action-.

Create a method in the class matching the name given in the data attribute. Method will be passed: (the element, event object, values)

Properties

  • this.el - References the module element.
  • this.els - Object containing all data-name elements
  • this.options - Object containing anything passed in after data-module- (similar to action values).

constructor

A constructor method can be used but you will need to call super(el). Constructor method gets el as it's only (and required) parameter. super(el) should be called before your code unless you need to modify core behavior. Element binding happens only when super is called.

Required options

A module can pass an array of required options to the super() method. Module will fail to init if any number of the required options are not present. Example: super(el, ['someOption', 'anotherOption'])


A First + Third Project

domodule's People

Contributors

jgallen23 avatar dawnerd avatar antonio-laguna avatar alejandroperezmartin avatar greenkeeper[bot] avatar josetrendix avatar appliancejohn avatar orthagonal avatar

Stargazers

Marco Roth avatar Wout avatar  avatar Adam Daniels avatar Vicente Benavent Valenzuela avatar Max Kerp avatar

Watchers

 avatar  avatar Lucian avatar Michael Turnwall avatar Eric Willis avatar James Cloos avatar Danny Vink avatar  avatar

domodule's Issues

An in-range update of eslint is breaking the build 🚨

Version 3.13.1 of eslint just got published.

Branch Build failing 🚨
Dependency eslint
Current Version 3.13.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint is β€œonly” a devDependency of this project it might not break production or downstream projects, but β€œonly” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this πŸ’ͺ


Status Details
  • ❌ continuous-integration/travis-ci/push The Travis CI build failed Details
Release Notes v3.13.1
  • 3fc4e3f Fix: prefer-destructuring reporting compound assignments (fixes #7881) (#7882) (Teddy Katz)
  • f90462e Fix: no-extra-label autofix should not remove labels used elsewhere (#7885) (Teddy Katz)
Commits

The new version differs by 4 commits .

  • 7f8393c 3.13.1
  • 91883bf Build: package.json and changelog update for 3.13.1
  • 3fc4e3f Fix: prefer-destructuring reporting compound assignments (fixes #7881) (#7882)
  • f90462e Fix: no-extra-label autofix should not remove labels used elsewhere (#7885)

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Some way to link external actions?

Say you have a button that is not part of the module but you want it to trigger an action in the module, like opening a modal (where the modal is the module). Would this be something that would be useful to put into Domodule core? Not exactly sure the best way it can be implemented. Maybe something the modules themselves setup like so:

class Test extends Domodule {
  constructor(el) {
    super(el);
    this.bindExternal('data-action-modal', this.open, 'click');
  }
}

idea

modernized fidel + data-attrs....

html:

<div data-module="Widget" data-module-id="123">
  <input type="text" data-el="textBox"/>
  <button data-action="save"></button>
</div>

js:

class Widget extends Domodule {
   //this is optional 
  constructor(el, options, els) {
   this.super(el, options, els);
   //some stuff here
  }
  actions: {
    save: (el) => {
     const val = this.els.textBox.val();
     const id = this.options.id; //123
    }
  }

}

Features

  • on dom ready class automatically gets instantiated for each data-module.
  • auto bind actions, els, options from dom
  • no jquery needed
  • this.find('.blah') does a this.el.querySelector('.blah')

//cc @dawnerd

An in-range update of browserify is breaking the build 🚨

Version 13.2.0 of browserify just got published.

Branch Build failing 🚨
Dependency browserify
Current Version 13.1.1
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As browserify is β€œonly” a devDependency of this project it might not break production or downstream projects, but β€œonly” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this πŸ’ͺ


Status Details
  • ❌ continuous-integration/travis-ci/push The Travis CI build failed Details
Commits

The new version differs by 6 commits .

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

find(selector, convertToArray)

Sometimes its nice to have an array to work with. What do you think about having a second param on the find call that will convert the NodeList to an array?

Basically run this before returning:
var nodesArray = [].slice.call(document.querySelectorAll("div"));

Support for plugins

Proposing adding support for a function that will allow a plugin to add/override methods without having to use a long extends chain.

It could look something like this:

ajax.js

export default class Ajax {
  get(url, data) {
    //...
  }

  post(url, data) {
    //...
  }
}

app.js

import Ajax from './Plugins/ajax.js';
Domodule.registerPlugin(Ajax);

Not sure how we'd handle constructors though.

You think this would be helpful?

An in-range update of eslint-config-firstandthird is breaking the build 🚨

Version 3.2.0 of eslint-config-firstandthird just got published.

Branch Build failing 🚨
Dependency eslint-config-firstandthird
Current Version 3.1.0
Type devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As eslint-config-firstandthird is β€œonly” a devDependency of this project it might not break production or downstream projects, but β€œonly” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this πŸ’ͺ


Status Details
  • ❌ continuous-integration/travis-ci/push The Travis CI build failed Details
Commits

The new version differs by 2 commits .

See the full diff.

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.


Your Greenkeeper Bot 🌴

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.