1.0.620 • Published 4 months ago

rasher v1.0.620

Weekly downloads
25
License
ISC
Repository
github
Last release
4 months ago

Rasher

Rasher is a small set of utilities for managing browser DOM event listeners and delegates.

It's written in ES6 for projects which don't warrant React or Angular but may have lots of forms with user interactions.

Wherever possible, Rasher queries the DOM using the browser's native DOM methods; otherwise, it uses Sizzle.

Rasher's components are exposed as ES6 classes, too, so if you want to you can use them directly.

Rasher

Listeners and Delegates

Listeners are event handlers bound to the element raising an event. You might attach a listener to each <li /> in a <ul />, for example, or perhaps more appropriately it would be bound to a specific element inviting a particular action, like a button or a link.

Delegates are event handlers bound to a container as though they were bound to the contained element. You might attach a delegate to the <ul /> for events raised by any of its <li /> children. Perhaps it would be bound to a form, listening for changes to some radio inputs.

With Rasher, listeners and delegates are indistinguishable, and have only a simple difference in how they are applied.

Listeners

import Rasher from 'rasher'

const rasher = new Rasher()

rasher
  .find('form input[type="submit"]')
  .then((r) => {
    r.on('click').do((e) => { e.stop() })
  })

First, we use find to query the DOM for elements, using a selector.

Second, we use then to interact with the DOM elements which have been found.

Delegates

import Rasher from 'rasher'

const rasher = new Rasher()

rasher
  .find('form input[type="radio"]')
  .delegateTo('form')
  .then((r) => {
    r.on('click').do((e) => { e.stop() })
  })

Here, there is an additional method call between find and then: it is delegateTo.

We use delegateTo to query the DOM for an element, using a selector, exactly as we do with find.

Attaching handlers

In either case, whether we want to attach a listener or a delegate, we do the work with the function given to then.

The function given to then is the callOut.

The callOut is called once for each DOM element matching the query. It receives three arguments:

  1. A plain object
  2. An index
  3. A length

So:

rasher
  .find('form input[type="radio"]')
  .then((r, index, length) => {
    /* */
  })

The plain object is named r. The index identifies the position of the current element as though iterating through an array, while length is the total number of elements to iterate over.

Or:

rasher
  .find('form input[type="radio"]')
  .delegateTo('form')
  .then((r, index, length) => {
    /* */
  })

The plain object is named r. Here, the index identifies the position of the current delegate element as though iterating through an array, while length is the total number of delegate elements to iterate over.

In either case, the plain object is the entry point for attaching handlers. It follows the pattern on ... do.

r.on('click').do((event) => { /* */ })

Detaching handlers

Similarly, whether we want to detach a listener or a delegate, we do the work with the return value from then.

const R = rasher
  .find('form input[type="radio"]')
  .then((r, index, length) => {
    /* */
  })

R.stopAll()

The return value of then is a plain object, named R.

Invoking stopAll will detach handlers from all listener and delegate elements in the collection, R.

Individual handlers are identified by index, and invoking listAll will return a plain object with methods for accessing the items in the collection.

{
  size () { },
  node (index) { },
  type (index) { },
  stop (index) { },
  indexOf (element) { }
}
  1. size returns the length of the whole collection
  2. node returns the DOM element at this position
  3. type returns the DOM event type at this position
  4. stop removes the handler, as well as the object at this position in the collection

If size() returns 1 then we can call stop(0) to remove both the handler from the DOM and the item from the collection. In this case, the return value from stop(0) will be true.

Another invocation of size() will return 0, and another invocation of stop(0) will return false.

We can find the position of a specific DOM element in the collection by giving it as an argument to indexOf. Since the collection is a dynamically resizing array, the position of each element in the collection might change whenever stop is called.

1.0.620

4 months ago

1.0.617

4 months ago

1.0.616

4 months ago

1.0.619

4 months ago

1.0.618

4 months ago

1.0.613

4 months ago

1.0.612

5 months ago

1.0.615

4 months ago

1.0.614

4 months ago

1.0.611

5 months ago

1.0.610

5 months ago

1.0.609

5 months ago

1.0.606

5 months ago

1.0.605

5 months ago

1.0.608

5 months ago

1.0.607

5 months ago

1.0.583

7 months ago

1.0.582

7 months ago

1.0.585

7 months ago

1.0.584

7 months ago

1.0.581

7 months ago

1.0.580

7 months ago

1.0.587

7 months ago

1.0.586

7 months ago

1.0.589

7 months ago

1.0.588

7 months ago

1.0.572

8 months ago

1.0.571

8 months ago

1.0.574

8 months ago

1.0.573

8 months ago

1.0.579

7 months ago

1.0.576

8 months ago

1.0.575

8 months ago

1.0.578

7 months ago

1.0.577

8 months ago

1.0.594

6 months ago

1.0.593

6 months ago

1.0.596

6 months ago

1.0.595

6 months ago

1.0.590

6 months ago

1.0.592

6 months ago

1.0.591

6 months ago

1.0.598

6 months ago

1.0.597

6 months ago

1.0.599

5 months ago

1.0.602

5 months ago

1.0.601

5 months ago

1.0.604

5 months ago

1.0.603

5 months ago

1.0.600

5 months ago

1.0.570

8 months ago

1.0.569

8 months ago

1.0.568

9 months ago

1.0.567

9 months ago

1.0.566

9 months ago

1.0.541

10 months ago

1.0.540

10 months ago

1.0.547

10 months ago

1.0.546

10 months ago

1.0.549

10 months ago

1.0.548

10 months ago

1.0.543

10 months ago

1.0.542

10 months ago

1.0.545

10 months ago

1.0.544

10 months ago

1.0.539

10 months ago

1.0.536

11 months ago

1.0.538

11 months ago

1.0.537

11 months ago

1.0.561

9 months ago

1.0.560

9 months ago

1.0.563

9 months ago

1.0.562

9 months ago

1.0.565

9 months ago

1.0.564

9 months ago

1.0.550

10 months ago

1.0.552

10 months ago

1.0.551

10 months ago

1.0.558

10 months ago

1.0.557

10 months ago

1.0.559

9 months ago

1.0.554

10 months ago

1.0.553

10 months ago

1.0.556

10 months ago

1.0.555

10 months ago

1.0.530

11 months ago

1.0.535

11 months ago

1.0.532

11 months ago

1.0.531

11 months ago

1.0.534

11 months ago

1.0.533

11 months ago

1.0.529

11 months ago

1.0.528

11 months ago

1.0.503

12 months ago

1.0.502

12 months ago

1.0.505

12 months ago

1.0.504

12 months ago

1.0.501

12 months ago

1.0.500

12 months ago

1.0.525

11 months ago

1.0.524

11 months ago

1.0.527

11 months ago

1.0.526

11 months ago

1.0.521

11 months ago

1.0.520

11 months ago

1.0.523

11 months ago

1.0.522

11 months ago

1.0.518

11 months ago

1.0.517

11 months ago

1.0.519

11 months ago

1.0.514

11 months ago

1.0.513

11 months ago

1.0.516

11 months ago

1.0.515

11 months ago

1.0.510

11 months ago

1.0.512

11 months ago

1.0.511

11 months ago

1.0.507

12 months ago

1.0.506

12 months ago

1.0.509

11 months ago

1.0.508

12 months ago

1.0.495

1 year ago

1.0.494

1 year ago

1.0.497

1 year ago

1.0.496

1 year ago

1.0.491

1 year ago

1.0.490

1 year ago

1.0.493

1 year ago

1.0.492

1 year ago

1.0.499

12 months ago

1.0.498

1 year ago

1.0.489

1 year ago

1.0.488

1 year ago

1.0.487

1 year ago

1.0.486

1 year ago

1.0.485

1 year ago

1.0.484

1 year ago

1.0.483

1 year ago

1.0.482

1 year ago

1.0.481

1 year ago

1.0.480

1 year ago

1.0.479

1 year ago

1.0.478

1 year ago

1.0.477

1 year ago

1.0.476

1 year ago

1.0.475

1 year ago

1.0.474

1 year ago

1.0.473

1 year ago

1.0.472

1 year ago

1.0.471

1 year ago

1.0.470

1 year ago

1.0.469

1 year ago

1.0.468

1 year ago

1.0.467

1 year ago

1.0.466

1 year ago

1.0.465

2 years ago

1.0.464

2 years ago

1.0.463

2 years ago

1.0.462

2 years ago

1.0.448

2 years ago

1.0.449

2 years ago

1.0.461

2 years ago

1.0.460

2 years ago

1.0.451

2 years ago

1.0.450

2 years ago

1.0.453

2 years ago

1.0.452

2 years ago

1.0.459

2 years ago

1.0.458

2 years ago

1.0.455

2 years ago

1.0.454

2 years ago

1.0.457

2 years ago

1.0.456

2 years ago

1.0.447

2 years ago

1.0.444

2 years ago

1.0.446

2 years ago

1.0.445

2 years ago

1.0.420

2 years ago

1.0.426

2 years ago

1.0.425

2 years ago

1.0.428

2 years ago

1.0.427

2 years ago

1.0.422

2 years ago

1.0.421

2 years ago

1.0.424

2 years ago

1.0.423

2 years ago

1.0.419

2 years ago

1.0.418

2 years ago

1.0.415

2 years ago

1.0.414

2 years ago

1.0.417

2 years ago

1.0.416

2 years ago

1.0.411

2 years ago

1.0.413

2 years ago

1.0.412

2 years ago

1.0.440

2 years ago

1.0.442

2 years ago

1.0.441

2 years ago

1.0.443

2 years ago

1.0.431

2 years ago

1.0.430

2 years ago

1.0.437

2 years ago

1.0.436

2 years ago

1.0.439

2 years ago

1.0.438

2 years ago

1.0.433

2 years ago

1.0.432

2 years ago

1.0.435

2 years ago

1.0.434

2 years ago

1.0.429

2 years ago

1.0.410

2 years ago

1.0.408

2 years ago

1.0.407

2 years ago

1.0.409

2 years ago

1.0.404

2 years ago

1.0.403

2 years ago

1.0.406

2 years ago

1.0.405

2 years ago

1.0.400

2 years ago

1.0.402

2 years ago

1.0.401

2 years ago

1.0.387

2 years ago

1.0.381

2 years ago

1.0.380

2 years ago

1.0.383

2 years ago

1.0.382

2 years ago

1.0.389

2 years ago

1.0.388

2 years ago

1.0.374

2 years ago

1.0.373

2 years ago

1.0.376

2 years ago

1.0.375

2 years ago

1.0.372

2 years ago

1.0.371

2 years ago

1.0.378

2 years ago

1.0.377

2 years ago

1.0.379

2 years ago

1.0.396

2 years ago

1.0.395

2 years ago

1.0.398

2 years ago

1.0.397

2 years ago

1.0.392

2 years ago

1.0.391

2 years ago

1.0.394

2 years ago

1.0.393

2 years ago

1.0.399

2 years ago

1.0.390

2 years ago

1.0.305

2 years ago

1.0.304

2 years ago

1.0.307

2 years ago

1.0.306

2 years ago

1.0.301

2 years ago

1.0.300

2 years ago

1.0.303

2 years ago

1.0.302

2 years ago

1.0.321

2 years ago

1.0.320

2 years ago

1.0.327

2 years ago

1.0.326

2 years ago

1.0.329

2 years ago

1.0.328

2 years ago

1.0.323

2 years ago

1.0.322

2 years ago

1.0.325

2 years ago

1.0.324

2 years ago

1.0.319

2 years ago

1.0.310

2 years ago

1.0.316

2 years ago

1.0.315

2 years ago

1.0.318

2 years ago

1.0.317

2 years ago

1.0.312

2 years ago

1.0.311

2 years ago

1.0.314

2 years ago

1.0.313

2 years ago

1.0.309

2 years ago

1.0.308

2 years ago

1.0.370

2 years ago

1.0.341

2 years ago

1.0.340

2 years ago

1.0.343

2 years ago

1.0.342

2 years ago

1.0.349

2 years ago

1.0.348

2 years ago

1.0.345

2 years ago

1.0.344

2 years ago

1.0.347

2 years ago

1.0.346

2 years ago

1.0.330

2 years ago

1.0.332

2 years ago

1.0.331

2 years ago

1.0.338

2 years ago

1.0.337

2 years ago

1.0.339

2 years ago

1.0.334

2 years ago

1.0.333

2 years ago

1.0.336

2 years ago

1.0.335

2 years ago

1.0.363

2 years ago

1.0.365

2 years ago

1.0.364

2 years ago

1.0.361

2 years ago

1.0.360

2 years ago

1.0.367

2 years ago

1.0.366

2 years ago

1.0.369

2 years ago

1.0.368

2 years ago

1.0.352

2 years ago

1.0.351

2 years ago

1.0.354

2 years ago

1.0.353

2 years ago

1.0.350

2 years ago

1.0.359

2 years ago

1.0.356

2 years ago

1.0.355

2 years ago

1.0.358

2 years ago

1.0.357

2 years ago

1.0.299

2 years ago

1.0.298

3 years ago

1.0.297

3 years ago

1.0.296

3 years ago

1.0.293

3 years ago

1.0.292

3 years ago

1.0.295

3 years ago

1.0.294

3 years ago

1.0.291

3 years ago

1.0.290

3 years ago

1.0.264

3 years ago

1.0.263

3 years ago

1.0.266

3 years ago

1.0.265

3 years ago

1.0.260

3 years ago

1.0.262

3 years ago

1.0.261

3 years ago

1.0.268

3 years ago

1.0.267

3 years ago

1.0.269

3 years ago

1.0.253

3 years ago

1.0.252

3 years ago

1.0.255

3 years ago

1.0.254

3 years ago

1.0.251

3 years ago

1.0.250

3 years ago

1.0.257

3 years ago

1.0.256

3 years ago

1.0.259

3 years ago

1.0.258

3 years ago

1.0.286

3 years ago

1.0.285

3 years ago

1.0.288

3 years ago

1.0.287

3 years ago

1.0.282

3 years ago

1.0.281

3 years ago

1.0.284

3 years ago

1.0.283

3 years ago

1.0.289

3 years ago

1.0.280

3 years ago

1.0.275

3 years ago

1.0.274

3 years ago

1.0.277

3 years ago

1.0.276

3 years ago

1.0.271

3 years ago

1.0.270

3 years ago

1.0.273

3 years ago

1.0.272

3 years ago

1.0.279

3 years ago

1.0.278

3 years ago

1.0.249

3 years ago

1.0.220

3 years ago

1.0.222

3 years ago

1.0.221

3 years ago

1.0.228

3 years ago

1.0.227

3 years ago

1.0.229

3 years ago

1.0.224

3 years ago

1.0.223

3 years ago

1.0.226

3 years ago

1.0.225

3 years ago

1.0.217

3 years ago

1.0.216

3 years ago

1.0.219

3 years ago

1.0.218

3 years ago

1.0.242

3 years ago

1.0.241

3 years ago

1.0.244

3 years ago

1.0.243

3 years ago

1.0.240

3 years ago

1.0.246

3 years ago

1.0.245

3 years ago

1.0.248

3 years ago

1.0.247

3 years ago

1.0.231

3 years ago

1.0.230

3 years ago

1.0.233

3 years ago

1.0.232

3 years ago

1.0.239

3 years ago

1.0.238

3 years ago

1.0.235

3 years ago

1.0.234

3 years ago

1.0.237

3 years ago

1.0.236

3 years ago

1.0.200

3 years ago

1.0.206

3 years ago

1.0.205

3 years ago

1.0.208

3 years ago

1.0.207

3 years ago

1.0.202

3 years ago

1.0.201

3 years ago

1.0.204

3 years ago

1.0.203

3 years ago

1.0.187

3 years ago

1.0.186

3 years ago

1.0.189

3 years ago

1.0.188

3 years ago

1.0.183

3 years ago

1.0.182

3 years ago

1.0.185

3 years ago

1.0.184

3 years ago

1.0.181

3 years ago

1.0.180

3 years ago

1.0.176

3 years ago

1.0.175

3 years ago

1.0.178

3 years ago

1.0.177

3 years ago

1.0.172

3 years ago

1.0.171

3 years ago

1.0.174

3 years ago

1.0.173

3 years ago

1.0.179

3 years ago

1.0.170

3 years ago

1.0.198

3 years ago

1.0.197

3 years ago

1.0.199

3 years ago

1.0.194

3 years ago

1.0.193

3 years ago

1.0.196

3 years ago

1.0.195

3 years ago

1.0.190

3 years ago

1.0.192

3 years ago

1.0.191

3 years ago

1.0.169

3 years ago

1.0.168

3 years ago

1.0.211

3 years ago

1.0.210

3 years ago

1.0.213

3 years ago

1.0.212

3 years ago

1.0.215

3 years ago

1.0.214

3 years ago

1.0.209

3 years ago

1.0.165

3 years ago

1.0.164

3 years ago

1.0.167

3 years ago

1.0.161

3 years ago

1.0.163

3 years ago

1.0.162

3 years ago

1.0.143

3 years ago

1.0.142

3 years ago

1.0.145

3 years ago

1.0.144

3 years ago

1.0.141

3 years ago

1.0.140

3 years ago

1.0.147

3 years ago

1.0.146

3 years ago

1.0.149

3 years ago

1.0.148

3 years ago

1.0.132

3 years ago

1.0.131

3 years ago

1.0.134

3 years ago

1.0.133

3 years ago

1.0.130

3 years ago

1.0.139

3 years ago

1.0.136

3 years ago

1.0.135

3 years ago

1.0.138

3 years ago

1.0.137

3 years ago

1.0.160

3 years ago

1.0.154

3 years ago

1.0.153

3 years ago

1.0.156

3 years ago

1.0.155

3 years ago

1.0.150

3 years ago

1.0.152

3 years ago

1.0.151

3 years ago

1.0.158

3 years ago

1.0.157

3 years ago

1.0.159

3 years ago

1.0.129

3 years ago

1.0.128

3 years ago

1.0.127

3 years ago

1.0.125

3 years ago

1.0.124

3 years ago

1.0.126

3 years ago

1.0.62

4 years ago

1.0.61

4 years ago

1.0.60

4 years ago

1.0.66

4 years ago

1.0.65

4 years ago

1.0.64

4 years ago

1.0.63

4 years ago

1.0.69

4 years ago

1.0.68

4 years ago

1.0.67

4 years ago

1.0.73

4 years ago

1.0.72

4 years ago

1.0.71

4 years ago

1.0.70

4 years ago

1.0.76

4 years ago

1.0.75

4 years ago

1.0.74

4 years ago

1.0.79

4 years ago

1.0.78

4 years ago

1.0.55

4 years ago

1.0.54

4 years ago

1.0.59

4 years ago

1.0.58

4 years ago

1.0.57

4 years ago

1.0.56

4 years ago

1.0.101

3 years ago

1.0.100

3 years ago

1.0.107

3 years ago

1.0.106

3 years ago

1.0.109

3 years ago

1.0.108

3 years ago

1.0.103

3 years ago

1.0.102

3 years ago

1.0.105

3 years ago

1.0.104

3 years ago

1.0.121

3 years ago

1.0.120

3 years ago

1.0.123

3 years ago

1.0.122

3 years ago

1.0.80

4 years ago

1.0.84

4 years ago

1.0.83

4 years ago

1.0.82

4 years ago

1.0.81

4 years ago

1.0.88

4 years ago

1.0.87

4 years ago

1.0.86

4 years ago

1.0.85

4 years ago

1.0.89

4 years ago

1.0.110

3 years ago

1.0.112

3 years ago

1.0.111

3 years ago

1.0.118

3 years ago

1.0.117

3 years ago

1.0.119

3 years ago

1.0.114

3 years ago

1.0.113

3 years ago

1.0.116

3 years ago

1.0.115

3 years ago

1.0.91

3 years ago

1.0.90

3 years ago

1.0.95

3 years ago

1.0.94

3 years ago

1.0.93

3 years ago

1.0.92

3 years ago

1.0.99

3 years ago

1.0.98

3 years ago

1.0.97

3 years ago

1.0.96

3 years ago

1.0.33

4 years ago

1.0.32

4 years ago

1.0.37

4 years ago

1.0.36

4 years ago

1.0.35

4 years ago

1.0.34

4 years ago

1.0.39

4 years ago

1.0.38

4 years ago

1.0.40

4 years ago

1.0.44

4 years ago

1.0.43

4 years ago

1.0.42

4 years ago

1.0.41

4 years ago

1.0.48

4 years ago

1.0.47

4 years ago

1.0.46

4 years ago

1.0.45

4 years ago

1.0.49

4 years ago

1.0.51

4 years ago

1.0.50

4 years ago

1.0.53

4 years ago

1.0.52

4 years ago

1.0.22

4 years ago

1.0.21

4 years ago

1.0.26

4 years ago

1.0.25

4 years ago

1.0.24

4 years ago

1.0.23

4 years ago

1.0.29

4 years ago

1.0.28

4 years ago

1.0.27

4 years ago

1.0.31

4 years ago

1.0.30

4 years ago

1.0.19

4 years ago

1.0.20

4 years ago

1.0.18

4 years ago

1.0.17

4 years ago

1.0.16

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.15

4 years ago

1.0.14

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.2

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.1

4 years ago

0.0.17

5 years ago

0.0.16

5 years ago

0.0.15

5 years ago

0.0.14

5 years ago

0.0.13

5 years ago

0.0.12

5 years ago

0.0.11

6 years ago

0.0.10

6 years ago

0.0.9

8 years ago

0.0.8

8 years ago

0.0.7

8 years ago

0.0.6

8 years ago

0.0.5

8 years ago

0.0.4

8 years ago

0.0.3

8 years ago

0.0.2

8 years ago

0.0.1

8 years ago