|
|
|
|
Issue #123 (event.detail, Git/CLI, SVG Tools, jQuery Plugins)11/26/15
The UIEvent interface lets you get the value of a detail property. You can read this property like so:
|
btn.addEventListener('click', function (e) {
console.log(e.detail);
}, false);
|
The value depends on the event, and of course requires that you pass the event object into the function.
- For click or dblclick events, the detail value is the current click count.
- For mousedown or mouseup events, MDN says the value is supposed to be 1 plus the current click count. But I don't see this behavior; seems to be the same as click/dblclick.
- For other UI events, the value is 0.
The problem with this property is that no two browsers seem to treat it the same way and the spec is pretty vague about what type of info it should provide. You can try it out using this JS Bin demo.
Here are my browser findings:
- WebKit browsers keep counting clicks unlimited, whereas Firefox only counts up to 3. Firefox seems to be limiting it to a "triple click" whereas WebKit leaves things open for a quintuple-click or whatever.
- IE11 has no idea what it's doing. In my demo, clicks don't get counted until you mouse over the "mouse over" button, which is just plain bizarre. mousedown and mouseup events do get counted though.
- Double click is the same everywhere except IE11 which doesn't seem to provide any info.
- Mouse over correctly produces 0 everywhere except IE11 which (as mentioned) just prints out the value of the clicks on other buttons. This happens even if the mouseover event is the only one on the page (i.e. you could click anywhere and the mouseover will produce the number of clicks).
There's a little more info in the spec, but not much. Your best bet is probably the Dottoro reference which discusses how the value appears for the different types of events.
Now on to this week's tools!
Buy My JavaScript/DOM E-Book:
70 JavaScript and DOM Tips for $5 (EPUB, MOBI, PDF) |
Git, GitHub, and Command Line Tools
commandcar
"A CLI tool that can easily communicate with any API. It simplifies unreadable and complicated curl commands, and has some nice features to make automation of API calls much simpler and bash scripts more streamlined."
mention-bot
"Do you have a GitHub project that is too big for people to subscribe to all the notifications? The mention bot will automatically mention potential reviewers on pull requests."
GitHub Corners
"'Fork me on GitHub' ribbons are 7 years old. This is a cleaner alternative."
GitBoard
"A simple and intuitive Kanban board for your Github issues. Easily manage to-dos, milestones and projects and keep up-to-date on your progress."
harvey
A command line legal expert who manages licensing for your open source project.
SCM Breeze
A set of shell scripts that enhance your interaction with Git. It integrates with your shell to give you numbered file shortcuts, a repository index with tab completion, and many other useful features.
git-fire
"A Git plugin that helps in the event of an emergency by switching to the repository's root directory, adding all current files, committing, and pushing to a new branch (to prevent merge conflicts)."
Comm(ent|it)
"Uses the GitHub API and Jekyll to help you store visitors comments directly in your repository."
HTTPie
"A command line HTTP client. Its goal is to make CLI interaction with web services as human-friendly as possible."
Zube
A virtual task board for your software development team. Your GitHub issues are automatically pulled into Zube, and your Zube data is synchronized with GitHub in real-time.
Steel
A command line password manager.
Image and SVG Tools
atvImg
"This lightweight (2kb) plug-in will automatically turn your layered Apple TV PNGs into 3D parallax icons, the same way the new Apple TV treats app icons."
FLIF
A free lossless image format that "outperforms PNG, FFV1, lossless WebP, lossless BPG and lossless JPEG2000 in terms of compression ratio."
Gear Generator
Customize and generate gear SVGs.
smartcrop.js
"Content aware image cropping."
Segment
"A little JavaScript class (without dependencies) to draw and animate SVG path strokes."
SVG Path Builder
"Build SVG paths easily using this intuitive interface."
flowchart.js
A library based on Raphael.js that "draws simple SVG flow chart diagrams from textual representation of the diagram."
svg-mesh-3d
"A high-level module to convert a SVG <path> string into a 3D triangulated mesh. Best suited for silhouettes, like font icon SVGs."
Pixel Map Generator
Create stunning interactive maps with a simple-to-use user interface. Save it as SVG, PNG, or HTML/JavaScript for easy embedding.
Vibrant.js
"Extract prominent colors from an image."
jQuery Plugins
Simple Lightbox
"Touch-friendly image lightbox for mobile and desktop."
Cropper
"A simple jQuery image cropping plugin."
TabDancer
A responsive tabs solution for jQuery.
Owl Carousel 2
"Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider."
jquery_lazyload
A jQuery-based image lazy loading plugin.
jQuery Backstretch
"Add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes."
Quttons
Buttons made of "Quantum Paper", part of Google's Material Design.
taggd
"A configurable jQuery plugin that allows you to tag images."
jQuery.Stacky
"Makes it easy to create UIs with panels that open horizontally using jQuery."
A Tweet for Thought
Derek Stutsman shares a Dilbert comic that I'm pretty sure we can all relate to.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
Windows Notepad plus HTML tables = Art.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
