Event Camle

helper library for allowing us to deal with events on the browser our any javascript enviroment

it is fast as the camel in the race.

Features:

Easy To use.
very portable.you can take it and use it in big projects.
very small.you can go and check how it works.
checking For Events strings(length less than 1 and spaces are not allowed ).
clear errors when they Occures.
dealing with single-events instances
browser friendly.

Installation

clone this repo

git clone https://github.com/Moonpoll2004/event_camel

Basic Usage

You can listen for any events and emit them like in nodejs

//require event_camel
const event_camel = require("event_camel")

//my camel object
const camel = new event_camel()

//Adding events and their handlers
camel.On("my-event",function(name) {
    console.log(name)
})

camel.On("calc",function(number,num2) {
    console.log(Math.pow(number,num2))
})

//over write an exsiting event
camel.On("my-event",function(name) {
    console.log("Hi we over write priviose event ",name)
})


//Emiting Events
camel.Emit("my-event","khattab")
camel.Emit("calc",12,2)


//error: "undefined event"
camel.Emit("some undefiend event",12)

listing for Dom Events

You can play with dom events and change them with your handlers

make sure that you are using the client side version on dist/event_camel.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EventCamel-browser example</title>
    <script src="./path/to/event_camel.js"></script>
</head>
<body>
    <div id="counter">0</div>
    <button class="btn" id="inc-btn">Increment</button>
    <button class="btn" id="dec-btn">Decrement</button>
    <script>
        const camel = new EventCamel()
        var counter = document.getElementById("counter")

        //get Increment and decremnt buttons
        var inc_btn = document.getElementById("inc-btn")
        var dec_btn = document.getElementById("dec-btn")


        //setting main events "decremnt" and "increment"
        camel.On("increment",function(payload){
            counter.innerText = parseInt(counter.innerText) + payload  
        })

        camel.On("decrement",function(payload){
            counter.innerText = parseInt(counter.innerText) - payload
        })


        //buttons listeners
        inc_btn.addEventListener("click",function(){
            camel.Emit("increment",1)
        })

        dec_btn.addEventListener("click",function(){
            camel.Emit("decrement",1)
        })
    </script>
</body>
</html>

It looks like the double work but in fact It can very help full at orgnize your code accross many javascript files

for the full styled example check dist folder.

Emit API

rich API that allows you to emit events easly in diffirent situtaions

const camel = new event_camel()

camel.On("more-than-100",function (event) {
    console.log("helle from event "+event)
})

camel.On("less-than-100",function(event){
    console.log("helle from event "+event)
})

camel.On("green",function(event){
    console.log("helle from event "+event)
})

camel.On("red",function(event){
    console.log("helle from event "+event)
})

camel.On("yellow",function(event){
    console.log("helle from event "+event)
})

//Emit single Event
camel.Emit("yellow")

//Emit Many Events
camel.EmitMany(["yellow","red","green"])

//Emit All Events
camel.EmitAll()

//Emit when the condition is equal to result
const num = 99
const condition = num < 100
const if_true = true
const if_false = false

camel.EmitIf("less-than-100",condition,if_true)
camel.EmitIf("more-than-100",condition,if_false)

Single-Events

Single Events are basicly one Event Generated by CamelEvent function

It is recomended to use EventCamel instance in large applications but you have the Choice

const MyEvent = CamelEvent("event1",function(event){
    console.log("hello from single event")
},{trace:true,trace_func:function(event){console.log("traking.."+event)}})

//trace function is going to run befor
MyEvent.Emit()

You might ask your self why I need to define event_name again? The answer is that in most times you are going to deal whith many events at the time.

There is a function called CamelEventsTree to help you deal with many single events

const order_car = CamelEvent("order-car",function(event){
    console.log("This is single event for ordering " + event)
})

const order_pizza = CamelEvent("order-pizza",function(event){
    console.log("this is single event for ordering " + event)
})

const order_halwa = CamelEvent("order-halwa",function(event){
    console.log("this is single event for ordering" + event)
})


const events_tree = CamelEventsTree([order_car,order_pizza])
//You Can Add The one by one if yu like

events_tree.addEvent(order_halwa)

events_tree.EmitOne("order-halwa")
events_tree.EmitOne("order-pizza")

moonpoll2004 / event_camel Goto Github PK

event_camel's Introduction

Event Camle

helper library for allowing us to deal with events on the browser our any javascript enviroment

it is fast as the camel in the race.

Features:

Installation

clone this repo

Basic Usage

You can listen for any events and emit them like in nodejs

listing for Dom Events

You can play with dom events and change them with your handlers

make sure that you are using the client side version on dist/event_camel.js

It looks like the double work but in fact It can very help full at orgnize your code accross many javascript files

for the full styled example check dist folder.

Emit API

rich API that allows you to emit events easly in diffirent situtaions

Single-Events

Single Events are basicly one Event Generated by CamelEvent function

It is recomended to use EventCamel instance in large applications but you have the Choice

You might ask your self why I need to define event_name again? The answer is that in most times you are going to deal whith many events at the time.

There is a function called CamelEventsTree to help you deal with many single events

The reason Why it is not recomended because events_tree.EmitOne() Find the frist match based one event name

so maybe if you duplicate events_names it going to case problmes in production

just use EventCamel instance and you are Fine with unique events handling

event_camel's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Jobs