webpro / domtastic Goto Github PK
View Code? Open in Web Editor NEWSmall, fast, and modular DOM and event library for modern browsers.
Home Page: https://domtastic.js.org
Small, fast, and modular DOM and event library for modern browsers.
Home Page: https://domtastic.js.org
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 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.
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
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?
link to http://webpro.github.io/jquery-evergreen/mode.html is 404.
Hi, the benchmark page on the website has passed away :'(
How about implement .css() method like in jQuery?
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?
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.
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!
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.
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
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!
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! ๐
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.
(element, index, thisArg)
; forEach
instead of each
, maybe add the missing ones.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');
}
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.
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
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
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.
Hi,
how can we add a new DOMtastic instance to an existing one like .add() function do in jQuery ?
regards,
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
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 ?
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.
.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.
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,
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.
This line gives an error:
child.dispatchEvent(new CustomEvent('e', {bubbles: true}));
in trigger.js:169
Polyfill needed?
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,
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'
Adding $.fn = $.prototype
would let us use jQuery plugins with Evergreen.
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?
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.
thank you.
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,
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,
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, 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
DOMtastic doesn't support space-separated event lists in on
and off
methods, e.g.
$('input').on('focus blur', function(){/*...*/});
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).
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.
see here
http://cdn.jsdelivr.net/domtastic/0.7/domtastic.min.js
//# sourceMappingURL=domtastic.min.js.map
//# sourceMappingURL=domtastic.min.js.map
Hello, is there any way to set CSS property with important priority?
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.
(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.
push
!= append
), just to manipulate the elements in the $collection
at hand.Boolean
Number
this
) - chainableArray
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.
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);
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.