atom-utils v0.9.2
atom-utils
A bunch of general purpose utilities for Atom packages.
requirePackages(packageNames...)
Returns a promise that is only resolved when all the requested packages have been activated.
{requirePackages} = require 'atom-utils'
requirePackages('tree-view', 'find-and-replace', 'snippets')
.then ([treeView, findAndReplace, snippets]) ->
# Do something with the required packages
registerOrUpdateElement(elementName, prototype)
Registers or updates a custom element whose name is elementName
.
{registerOrUpdateElement} = require 'atom-utils'
class MyElement
createdCallback: ->
console.log 'element created'
registerOrUpdateElement('my-element', MyElement.prototype)
The update is performed by copying the properties from the passed-in prototype in the registered element prototype. As a node's callback methods can't be overriden once the element have been registered, a generic version is created that will invoke the concrete callback when called, that way even the node's callback methods can be updated.
Ancestors (previously AncestorsMethods)
A mixin that provides jQuery a like method to retrieve a node's parents:
{Ancestors} = require 'atom-utils'
class DummyNode extends HTMLElement
Ancestors.includeInto(this)
attachedCallback: ->
# Returns all the ancestors to the html element
parents = @parents()
# Returns all the ancestors that matches the selector
filteredParents = @parents('selector')
# It creates the custom element and register it as the `dummy-node` tag.
DummyNode = document.registerElement 'dummy-node', prototype: DummyNode.prototype
::parents(selector)
Can be called with or without the selector argument.
If called without argument, the method will return every parents of the current node.
If called with an argument, the method will return only the parent elements that match the passed-in selector.
Parents in the returned array are sorted by their distance from the node.
::queryParentSelectorAll(selector)
An alias of ::parents
except it throw an error if called without a selector.
::queryParentSelector(selector)
Returns only the first parent element that matches the passed-in selector.
Throws an error when called without a selector.
::eachParent(iterator)
Iterates over each parent the node and calls iterator
with the current parent node.
DisposableEvents
A mixin that provides a addDisposableEventListener
method that registers an event listener on an element and returns a Disposable
to unregister it:
{DisposableEvents} = require 'atom-utils'
{CompositeDisposable} = require 'event-kit'
class DummyNode extends HTMLElement
DisposableEvents.includeInto(this)
createdCallback: ->
@subscriptions = new CompositeDisposable
@subscriptions.add @addDisposableEventListener this, 'click', (e) =>
# ...
# It creates the custom element and register it as the `dummy-node` tag.
DummyNode = document.registerElement 'dummy-node', prototype: DummyNode.prototype
EventsDelegation
A mixin that provides events delegation ala jQuery without jQuery. Use it by including it into your custom element:
{EventsDelegation} = require 'atom-utils'
{CompositeDisposable} = require 'event-kit'
class DummyNode extends HTMLElement
# It includes the mixin on the class prototype.
EventsDelegation.includeInto(this)
# Custom element's callback on creation.
createdCallback: ->
@subscriptions = new CompositeDisposable
@appendChild(document.createElement('div'))
@firstChild.appendChild(document.createElement('span'))
# Without a target and a selector, it registers to the event on the
# element itself.
# The `subscribeTo` method returns a disposable that unsubscribe from
# all the events that was added by this call.
@subscriptions.add @subscribeTo
click: (e) ->
console.log("won't be called if the click is done on the child div")
# With just a selector, it registers to the event on the elements children
# matching the passed-in selector.
@subscriptions.add @subscribeTo 'div',
click: (e) ->
console.log("won't be called if the click is done on the child span")
# Events propagation can be used to prevents the delegated handlers
# to catch the events in continuation.
e.stopPropagation()
# By passing a node and a selector, it registers to the event on the
# elements children matching the passed-in selector.
@subscriptions.add @subscribeTo @firstChild, 'span',
click: (e) ->
e.stopPropagation()
# It creates the custom element and register it as the `dummy-node` tag.
DummyNode = document.registerElement 'dummy-node', prototype: DummyNode.prototype
ResizeDetection
As there is no standard way to detect when an element size changed this mixin provides a DOM polling mechanism to custom element whose display and logic may rely on the element size:
{ResizeDetection} = require 'atom-utils'
class DummyNode extends HTMLElement
ResizeDetection.includeInto(this)
# Starts the DOM poll when the element is attached
attachedCallback: -> @initializeDOMPolling()
# Stops the DOM poll when the element is detached
detachedCallback: -> @disposeDOMPolling()
# Callback called when the poll routine has detected a size change.
# The callback receive the new width and height as arguments.
resizeDetected: (width, height) ->
# If you need to prevent the poll routine to check the element size,
# redefine this method with your own conditions. The function should return
# false when the polling can occurs.
# isDOMPollingPrevented: -> @domPollingPaused
If you need to suspend the polling while keeping the interval active you can use the pauseDOMPolling
to pause the polling routine and resumeDOMPolling
to resume it.
SpacePenDSL
A mixin that provides the same content creation mechanism as space-pen
but for custom elements:
{SpacePenDSL} = require 'atom-utils'
class DummyNode extends HTMLElement
SpacePenDSL.includeInto(this)
@content: ->
@div outlet: 'container', class: 'container', =>
@span outlet: 'label', class: 'label'
createdCallback: ->
# Content is available in the created callback
# It creates the custom element and register it as the `dummy-node` tag.
DummyNode = document.registerElement 'dummy-node', prototype: DummyNode.prototype
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago