argyleink / blingblingjs Goto Github PK

View Code? Open in Web Editor NEW

223.0 5.0 15.0 442 KB

💲 Micro-library of shorthands for DOM selection, events, and attribute manipulation

License: MIT License

JavaScript 93.36% HTML 6.64%

javascript es6 commonjs dom-manipulation jquery-like tdd utility-function

blingblingjs's Introduction

blingblingjs's People

Contributors

Stargazers

Watchers

Forkers

banago tesnouf-drivy persianphilosopher markpalfreeman robmaple orcuntuna dinh yangxin1994 hchiam dkdnet zilveer hnfork deed76876 gingerchew

blingblingjs's Issues

Set window.$ = blingblingjs in UMD build

Excited to try out blingblingjs for quick prototyping without a build step. I dropped it into an HTML file via unpkg.com, and I was surprised that window.$ was undefined. Turns out that window.blingblingjs is what gets defined, so to use $ as seems to be the convention from the README, I have to do the following:

<!DOCTYPE html>
<script src="//unpkg.com/[email protected]/dist/index.js"></script>
<script>
  var $ = blingblingjs;
</script>

Proposal:

Continue setting window.blingblingjs
If window.$ is undefined, set it to point to blingblingjs

Add `$().data` for handling `data-*`

I coded up a mockup of the idea here. While there is overlap with .attr() I think there could still be a place for it. especially when handling data that can't be coerced to a string.

$('div').attr('data-user', {
  fname: 'argyle',
  lname: 'ink'
});

$('div').attr('user') // "[object Object]"

// data-user="{"fname":"ginger","lname":"chew"}"
$('div').data('user', {
  fname: 'ginger',
  lname: 'chew'
});

$('div').data('user') // { fname: 'ginger', lname: 'chew' }

// Needing to set `data-` like this on an object is frustrating
$('div').attr({
  'data-fname': 'argyle',
  'data-lname': 'ink'
  'data-user-id': 1
});

// the `data-` is assumed and don't need to wrap the keys in quotes
// and converting camelCase to kebab-case is handled automatically
$('div').data({
  fname: 'ginger',
  lname: 'chew',
  userId: 2
})

The mockup handles set/get/delete, so accepting an object as the first argument like in .attr() isn't there yet.

nodeList not iterable in older browsers causing error

I'm getting an error in Safari 9 (although presumably this applies to similarly old browsers) due to the use of the spread operator on line 37.

This issue appears after transpilation with Babel and seems to be due to nodeLists not being iterable in older browsers.

[...$nodes].map($el => Object.assign($el, sugar)),

A quick fix would be to wrap $nodes in Array.from(...) although I'm not sure at first glance if that would break anything.

Happy to submit a PR if that seems like a viable fix.

quieter failures

if the selector has no matches, nothing breaks, but the red in the console is annoying

Run tests on PRs

a bookmarklet for quick temporary use in the browser console with chrome keyboard shortcuts?

why

i can't always install blingblingjs or jQuery for certain projects, but i'd still like to avoid manually typing things like [...document.querySelectorAll('a')].map(x=>x.addEventListener( when i'm quickly debugging stuff in the devtools console. it's also a little wasteful to fetch all of jQuery when i usually only need to do a few things with selecting and .on.

Using a bookmarklet seems to address this nicely for my own personal use. just thought i'd share my bookmarklet here.

how

to try it out, create a bookmark (preferably in Chrome) and paste the following into the URL of that new bookmark:

javascript: fetch('https://cdn.jsdelivr.net/npm/blingblingjs@latest/dist/index.min.js')
  .then((x) => x.text())
  .then((x) => {
    eval(x);
    $ = $.default;
    console.log("💲 BlingBlingJS ready 💲");
  });

https://github.com/hchiam/learning-js/blob/main/bookmarklets/blingbling.js

you can now use the following keyboard shortcuts in Chrome to quickly "install" BlingBlingJS on almost any page:

mac: command + L, then type to search for the bookmark name, then hit enter --> $('...').on now works in the console!

pc: Ctrl + L, then type to search for the bookmark name, then hit enter --> $('...').on now works in the console!

Depending on how uniquely you name your bookmark, you can reach it in a few keystrokes. Note that these keyboard shortcuts may not work for you in Firefox. In Firefox, I give short names for the bookmarklets I use often, and place them within easy reach in the bookmark bar (not inside a folder).

Screen.Recording.2023-07-31.at.9.49.13.PM.mov

$.once()

one time event shorthand

Enhancement: Support for adding jquery type style operation

$("table").class("table", false) or style?

no way to pass capture param

shouldnt block users from having this option

Is it a way to replaceChildren within blingblingjs?

Now I'm doing:

  const node = document.createElement('span').innerText = JSON.stringify(variableName, 2, ' ')
  document.getElementById('idname').replaceChildren(node)

But is there a sipmpler way with blingblingjs syntax?

Nice library! Any way of sponsoring?

$(any svg) fails

Push to NPM when package.json version bumps

Is it possible to read a dynamic value from an input field?

I have an input field:

<input type="text" id="querytext" placeholder="some query words" value="some other words" />

I'm trying to read what is the present value of the input field. I tried this, but I only get the predefined value some other words:

import $ from './blingbling.js'
$('#querytext').on('keydown', e => querytext())

const querytext = function () {
  const [txt] = $(document.querySelector('input#querytext'))
  console.log(txt.attr('value'))
}

Add $(window).on alias

Currently $(window).on is not setup as an 'addEventListener' alias as per the original bling.js -- would be nice to have this in blingbling too.

$.rAF(()=>{})

sugarrrrrrrrrrrrr

pass "JQuery"-name as an parameter/options to give blingblingjs a "new name"

Hi,
some plugins are independent of the jquery name to be able to work, for example Bootstrap 4 or other plugins.

Is it perhaps possible to add the JQuery as an option to blingblingjs and make the other plugins which are dependent of JQuery to work? Of course I do know that those plugins are dependent of JQuery functions which perhaps may not be available in the current state of blingblingjs.

But this functionality would be pretty cool to have!

regards