The $ variable is used in closest.js, but it's never explicitly imported. I get a TypeError when I use this in the commonjs format with Browserify.

Hello, is there any way to set CSS property with important priority?

Hi,

I'm trying to find and/or filter only visible elements.
I modify the existing matches function to this code. Do you thing this is enough ?

const reVisible = /.*:visible.*/;

export const isVisible = function() {
  const element = this.nodeType ? this : this[ 0 ];
  return !!( element.offsetWidth || element.offsetHeight || element.getClientRects().length );
};

export const matches = ( () => {
  const context = typeof Element !== 'undefined' ? Element.prototype : win;
  const _matches = context.matches || context.matchesSelector || context.mozMatchesSelector || context.msMatchesSelector || context.oMatchesSelector || context.webkitMatchesSelector;
  return ( element, selector ) => {
    if ( reVisible.test( selector ) ) {
      return hexadogJS( element ).isVisible();
    } else {
      _matches.call( element, selector );
    }
  };
} )();

Regards,

Just curious if this is intended behavior

Say i wish to extend a new Component using the $.BaseClass

class Component extends $.BaseClass {
    constructor(selector) {
        super(selector)
    }

    doA() {
        console.log('Do A')
    }

}

let component = new Component()

component.doA() // Do A
component.addClass('new-class') // Elements get added new-class

let secondComponent = component.eq(1)

console.log(component) // returns a Component collection
console.log(secondComponent) // returns a DOMtastic collection

secondComponent.doA() // doA is not a function

Hi,

I didnt find an easy way to get the index of an element in the parent with domtastic.

Here is the jquery way of doing this: var indexInParent = $('.parent .children.active').index();

Would you like domtastic to have this feature ?

Hi,

When using $.closest with an object whose the required grand parent is very far away, the javascript engine will stop the execution of the closest method.

This will not work

div(data-animal-type='dragon')

$('div').data('animal-type'); // undefined

This will work

div(data-animaltype='dragon')

$('div').data(animaltype); // dragon

I think animal-type should work since we see alot of hyphens in HTML documents and is in the spec as well

Hi,

how can we add a new DOMtastic instance to an existing one like .add() function do in jQuery ?

regards,

See my pen: http://codepen.io/matt3224/pen/KgJWaR?editors=1010

What is this mystery integer and why is it default? I have no use for such a thing and it means every time I use .on I need to account for this when creating my arguments and when calling the function.

If someone could clear that up for me it would be greatly appreciated, domtastic is pretty great so far!

Adding $.fn = $.prototype would let us use jQuery plugins with Evergreen.

I have an isomorphic application, and today I tried to replace Jquery by DOMtastic, but one of the files, most specific closest.js is breaking the application, because it is using the new Element dom API. See the attached image below.

Hello,
Using the latest version:

import { BaseClass } from 'domtastic'

class DropDown extends BaseClass {
	doSomething() {
		return this.addClass('.foo')
	}
}

error:

app.js?716f:15 Uncaught TypeError: Super expression must either be null or a function, not undefined

stack:

app.js?716f:15 Uncaught TypeError: Super expression must either be null or a function, not undefined
    at _inherits (app.js?716f:15)
    at eval (app.js?716f:16)
    at eval (20:50)
    at Object.<anonymous> (app.bundle.js:971)
    at __webpack_require__ (app.bundle.js:679)
    at fn (app.bundle.js:89)
    at Object.<anonymous> (app.bundle.js:809)
    at __webpack_require__ (app.bundle.js:679)
    at app.bundle.js:725
    at app.bundle.js:728
_inherits @ app.js?716f:15
(anonymous) @ app.js?716f:16
(anonymous) @ 20:50
(anonymous) @ app.bundle.js:971
__webpack_require__ @ app.bundle.js:679
fn @ app.bundle.js:89
(anonymous) @ app.bundle.js:809
__webpack_require__ @ app.bundle.js:679
(anonymous) @ app.bundle.js:725
(anonymous) @ app.bundle.js:728

any thoughts?

Is it possible to include $.isFunction to util module, or make a separate module for it? The code of this function is quite short (jQuery itself uses more complicated code, but IMHO this one is the fastest)

function isFunction(obj) {
    return (typeof obj === "function");
}

I've found it is used by many jQuery plugins (usually to check that the last argument is a callback).

bin/custom triggers following error on my side:

DOMtastic\node_modules\browserify\node_modules\resolve\lib\sync.js:33
    throw new Error("Cannot find module '" + x + "' from '" + y + "'");
          ^
Error: Cannot find module 'bundle-collapser/plugin' from 'src'
    at Function.module.exports [as sync] (DOMtastic\node_modules\browserify\node_modules\resolve\lib\sync.js:33:11)
    at Browserify.plugin (DOMtastic\node_modules\browserify\index.js:342:29)
    at bundle (DOMtastic\bin\custom:59:10)
    at DOMtastic\bin\custom:83:9
    at f (DOMtastic\node_modules\glob\node_modules\once\once.js:17:25)
    at Glob.<anonymous> (DOMtastic\node_modules\glob\glob.js:132:7)
    at Glob.EventEmitter.emit (events.js:95:17)
    at Glob._finish (DOMtastic\node_modules\glob\glob.js:171:8)
    at done (DOMtastic\node_modules\glob\glob.js:158:12)
    at Glob._processGlobStar2 (DOMtastic\node_modules\glob\glob.js:589:12)

I had to patch part of bin/custom to be

        .transform(require('redirectify'), redirectifyOptions)
        .transform(require('babelify'))
        .transform(require('browserify-versionify'), {
            placeholder: '__VERSION__',
            version: pkg.version
        })
        .plugin(require('bundle-collapser/plugin'))

to build it correctly.

PS. I built DOMTastic on Windows, maybe it's the reason of modules are not required automatically.

I am probably overlooking something here, but toArray doesn't seem to be chainable (eg. $(selector).toArray() doesn't work)? It's not in the API doc but used internally, not sure about your rationale to keep it from API?

Using native mode by default seem to be overkilling a bit, as we just want an Array of DOM elements instead of NodeList.

Hi,

How can I use $.baseclass to reproduce something like this:

(function (factory){
	"use strict";

	if( typeof define === "function" && define.amd ){
		define("Sortable", [], factory);
	}
	else {
		window["Sortable"] = factory();
	}
})(function (){
	"use strict";

	var
		win = window
		, document = win.document
		, parseInt = win.parseInt
		, noop = function (){}
		, touchDragOverListeners = []
	;

	/**
	 * @class  Sortable
	 * @param  {HTMLElement}  el
	 * @param  {Object}  [options]
	 * @constructor
	 */
	function Sortable(el, options){
		this.el = el; // root element
		this.options = options = (options || {});

		...
	}

	Sortable.prototype = {
		constructor: Sortable,

		_applyEffects: function (){
			...
		},

		...
	};


	function _bind(ctx, fn){
		var args = slice.call(arguments, 2);
		return	fn.bind ? fn.bind.apply(fn, [ctx].concat(args)) : function (){
			return fn.apply(ctx, args.concat(slice.call(arguments)));
		};
	}
	
	...

	// Export utils
	Sortable.utils = {
		bind: _bind,
		...
	};


	Sortable.version = '0.0.1';

	// Export
	return	Sortable;
});

Regards,

Hey Lars,

Sorry to bother you with more questions, I really appreciate your help and advise on this though!

I couldn't explain what I want to do in 140 characters so I am using the repo. I have a framework/library currently written all in es5 using standard iife's. I would like to modernise the framework/library by using es6 modules.

I want to use DOMtastic as the base for my framework components (things like modals, tabs etc.) and I would like to rebuild them so they can be chained `$('.myelem').modal(); I would like to use factory functions to achieve this rather than classes and for each one to be imported as an es6 module.

These would be globally callable without importing $ in non es6 scripts. I am using rollup and babel to bundle and transpile my code.

I'm finding it a little difficult to modernise my code as although there is plenty online about es6 modules, it feels like what i'm trying to do is too niche to be documented yet. Either that or i'm misunderstanding how to implement this stuff.

Many thanks for any insight on what i'm trying to do here.

Hi, the benchmark page on the website has passed away :'(

https://domtastic.js.org/benchmark/

Hi, that's a question before being an issue, but I couldnt find a best place to ask for it.

I'm trying to determine if an object is an instance of domtastic or not.

I ended up with this workaround:

typeof element == 'object' && element.constructor.name == 'Wrapper'

But Wrapper class name is not unique to domtastic, and, though the risk is really minor, it could lead to an error.
Is there a better way to do?

In jquery I would do this:

typeof element == 'object' && element instanceof jQuery

Thanks

I realise this is really a webpack configuration issue, but I thought you might be able to help ...

I'm using it to load domtastic automagically when $ or jQuery is used. Here's what I have in webpack.config.js under plugins:

new webpack.ProvidePlugin({
    $: path.join(__dirname, 'node_modules', 'domtastic'),
    jQuery: path.join(__dirname, 'node_modules', 'domtastic')
})

This works great on my main bundle.js file if I use $ or jQuery, it requires it as expected. However if I import any other .js as a partial in bundle.js which uses $ it fails to require domtastic. So for example:

bundle.js
import "./partials/script1.js";

partials/script1.js
console.log($);

This results in: Uncaught TypeError: $ is not a function

Any ideas on how I can get this working with partials without manually requiring domtastic on each partial that uses it?

The example for adding multiple attr is broken:

$('.item').attr({'attr1', 'value1'}, {'attr2', 'value2});

http://domtastic.js.org/doc/#dom/attr

Could be:

$('img').attr({
    width: 100,
    height: 100
});

The example for adding multiple css is similar:

$('.item').css({'border-width', '1px'}, {'display', 'inline-block});

http://domtastic.js.org/doc/#css

Could be:

$('div').css({
    width: 100+'px',
    height: 100+'px'
});

Been using DOMTastic a lot recently and it's been great. Thanks guys.

If I had one feature request it would be Jquery's one helper.

thank you.

Assuming I don't need jQuery's ajax, animate & deferred is this a drop in replacement for jQuery. That is does it provide all of the remaining jQuery functions?

see here

http://cdn.jsdelivr.net/domtastic/0.7/domtastic.min.js

//# sourceMappingURL=domtastic.min.js.map
//# sourceMappingURL=domtastic.min.js.map

Hello,

i load [email protected] with [email protected] and chrome. The following error occurs:

trigger.js:169 Uncaught TypeError: CustomEvent is not a constructor
 at isEventBubblingInDetachedTree (trigger.js:169)
 at Object.defineProperty.value (trigger.js:172)
 at __webpack_require__ (bootstrap 8917c05722c78281add6:678)
 at fn (bootstrap 8917c05722c78281add6:88)
 at Object.defineProperty.value (index.js:1)
 at __webpack_require__ (bootstrap 8917c05722c78281add6:678)
 at fn (bootstrap 8917c05722c78281add6:88)
 at Object.<anonymous> (_math-scale.js:18)
 at __webpack_require__ (bootstrap 8917c05722c78281add6:678)
 at __webpack_exports__.a (bootstrap 8917c05722c78281add6:724)

Is that a known issue at the moment? - With [email protected] is everything fine.

Thanks!

Seems like there's more to it than just making classList work: https://saucelabs.com/tests/2a7a38c75df246158fccca6e56b21e11

I have the classList patch on a branch but want to get your thoughts on actually supporting IE9. It sounds like it shouldn't be that bad.

(Continued from #6)

Array methods can be useful for any collection. Although the current implementation works (just fine for me), I'm not 100% sure on what is the right path to follow, with the least surprises.

• The array methods are not meant for DOM manipulation (e.g. push != append), just to manipulate the elements in the $collection at hand.
• The array methods have high diversity in their return value (and thus, chainability):
  • every/some: Boolean
  • indexOf/push/unshift: Number
  • forEach/reverse: collection (this) - chainable
  • filter: new collection - chainable
  • map: Array

Although this is similar to ES5 array methods (except some return a wrapped collection), this might confuse people. Especially the fact that map() just returns an array, not a wrapped collection. If it would do the latter:

var ids = $('div').map(function(el) { return el.id; });
> $(['id0', 'id1']); // not elements = problems
siblings.addClass('bar'); // error

var parents = $('div').map(function(el) { return el.nextSibling; });
> $([sibling0, sibling1]); // useful?
siblings.addClass('bar'); // ok

Also, I don't think it's a good idea to check the return values for the callback, and return a wrapped collection if they're all elements (otherwise an array). This gives "dynamic" return values, degrades performance, increases complexity.

On the other hand, some might like/expect high chainability, and e.g. be able to $(elements).push(element).attr(key, value).

What do you think? I think the current behavior is fine (i.e. stick to regular array methods behavior, not prioritizing on chainability), but I'm very open to your feedback.

.children()
.each()
.eq()
.filter()
.get() // rudimentary, but good for plugin support
.replaceWith()

Edit:
I had suggested .one(), but removed it because we can just do $(this).off("event", arguments.callee). It's not used very often either from my observation.

How about implement .css() method like in jQuery?

Not trying to make DOMtastic more like jQuery, but this seems like a good idea to me.

Imagine writing a simple plugin such as:

(function() {

    $.fn.toArray = function() {
        var length = this.length,
            result = Array(length);
        for (var i = 0; i < length; i++) {
            result[i] = this[i];
        }
        return result;
    }

})();

Without UMD, To be conflict free the author might want to do this:

(function($) {

// code

})(DOMtastic);

Hi,

A minor but life saver feature is missing (in my opinion) in domtastic.

It's $element.first() I know it's the same as .eq(0) however its implementation is very lightweight and it can fill a compatibility issue with jQuery.

What do you think ?

link to http://webpro.github.io/jquery-evergreen/mode.html is 404.

Hi,

How to simulate the .is() function of JQuery ?
I have the following code but how to manage the fact that the selector is already an instance of DOMtastic ?

export const is = function( selector ) {
  const nodes = [];
  each( this, element => {
    if ( ( !selector || ( selector && matches( element, selector ) ) ) ) {
      nodes.push( element );
    }
  } );
  return $( nodes );
};

Regards.

It would be great to be able to group/namespace events so they can be destroyed together, for example:

function init() {
    store.$main.html(require('./template.hbs'));
    store.$main.on('about.tab-click', tabClick);
    store.$main.on('about.img-click', imgClick);
}
function destroy() {
    store.$main.off('about');
}

Or moving away from the JQuery way:

function init() {
    store.$main.html(require('./template.hbs'));
    store.$main.onGroup('about', 'tab-click', tabClick);
    store.$main.onGroup('about', 'img-click', imgClick);
}
function destroy() {
    store.$main.offGroup('about');
}

The syntax seems to be an exact match to ki + ki.extend.js. If why is DOMtastic better?
I have asked the same question on ki.extend.js.

james2doyle/ki.extend.js#9

hi,

if i trigger an event test_click, a Mouseevent is fired and not a CustomEvent and params are empty in the listener.

// Not working
sp$('body').trigger('test_click', {'param1':'value1'});
window.addEventListener("test_click",function(event, toto, tata){
        console.log('param1 = '+event.detail.param1);
});

// Working
 sp$('body').trigger('test_clck', {'param1':'value1'});
window.addEventListener("test_clck",function(event, toto, tata){
       console.log('param1 = '+event.detail.param1);
});

version = '0.10.3'

Hi! Cool library. I love jQuery's syntax and model, no matter what people say about using the native DOM, but also would love something that contains just the essentials. This seems pretty much perfect, and I hope to use it on my next project.

I'm opening this issue to argue for a few tweaks to certain methods, based on my preferences. But I realize they might not align with your goals or use cases, and if so feel free to close.

• All Array methods: make sure they match ES5 semantics, e.g. (element, index, thisArg); forEach instead of each, maybe add the missing ones.
• delegate/undelegate: subsumed by on/off; kill these.
• noConflict: we should be using a module system

This line gives an error:
child.dispatchEvent(new CustomEvent('e', {bubbles: true})); in trigger.js:169

Polyfill needed?

I'm not sure if it does what it is intended to do but from what I've understood from the source code, .data(key) only returns values that have already been set a priori.

It is misleading since all the jQuery references made in the introduction of this toolbox. I was expecting .data(key) to return values from .dataset[] standard JS node property.

The solution might be as simple as changing the value of this var DATAKEYPROP = '__DOMTASTIC_DATA__'; to 'dataset'

Well, I'm sure you had some good thought at it when you wrote it. What was the reason?

Thank you

DOMtastic version 0.12.1
using the script: npm run bundle -- --include=selector,array,event

results in a file that doesn't export a selector properly. It seems something is going wrong with the rollup import transforms because eslint reports 'selector' being not defined in the following section:

// - the following 'selector' variables are not defined

// line 448
if (typeof selector !== 'undefined') {
  $ = selector.$;
  $.matches = selector.matches;
  api.find = selector.find;
}

It seems that selector.$ from above is supposed to be the exported $ from selector/index.js, which in the output should be $$2

// line 107
var $$2 = function (selector) {
  var context = arguments.length <= 1 || arguments[1] === undefined ? document : arguments[1];
// ...

I have only read about rollup and am new to webpack/babel so I don't want to spend much more time looking further into the issue in case you had any insight.

The library seems great - I'll use the full version in the meantime.

Hello,
I think it is very nice in jQuery to be able to pass second argument which determinates presence of class. See in .toggleClass() docs.
Could you add it to DOMtastic? thanks.

Hy!

MouseEnter MouseLeave etc. events target in on method is wrong, when add selector to the on method.
Don't run the handler.

Examples:
DOMtastic: http://jsbin.com/lufakigi/1/edit
jQuery: http://jsbin.com/zoqeloso/1/edit
Zepto: http://jsbin.com/hexopiso/1/edit

I'm start using DOMtastic but found my previous code have many .width()/.height, so is there any way to add these?
or, think, the way get w/ margin w/o margin, w/padding+border, w/o padding+border, etc
maybe plugins?

Hi,

first of all, very good work ;-)

I found an issue with the event on.
If I try to create this kind of event:

$('.div').on( 'click', '>', function() {
alert( 'BLIP' );
});

which is working well with JQuery (see JSFiddle here ), I get the following error with DOMtastic:

SyntaxError: '>' is not a valid selector
TypeError: node.closest is not a function

Same problem with selectors like $( '> .title' )

Do you have any idea how to fix that ?

Regards,

DOMtastic doesn't support space-separated event lists in on and off methods, e.g.

$('input').on('focus blur', function(){/*...*/});

Hi Lars,

The API documentation website stopped working correctly a few days ago. All link hashes invariably lead to the showing just the BaseClass page now:

Let me know if there's anything I can assist with to fix this.

P.S. Thanks for creating DOMtastic! ;-)

Hey Lars,

I just wondered how best to deal with such madness. We use WordPress a lot for client sites and quite often third-party plugins will use jQuery by default which as you can imagine is problematic when we are using DOMtastic for the theme.

Do you have any words of wisdom on this subject?

Thanks,
Matt

I have edited the initial question after I found this forEach (alias: each) however it seems to work differently to the implementation. I would like to do this for example:

$('.tabs').each(function(){
   $(this).find('.tab').text('hello'); 
});

It would be great to use DOMtastic as a super fast interchangeable dom library for all dom traversal tasks such as this. It seems like this is the goal afterall

Thanks

I am playing around with plugins and am wanting to create a few of these. A lot of the examples on how jQuery plugins are structured use $.data to save each instance of the plugin.

One of the best examples is that of John Dugan

If you simply switch jQuery for DOMtastic (using the DOMtastic jquery compat mode too) throws an error. I started to construct my own workaround but thought I would check in with you incase there was a way to do this?

Thanks! 👍