kiltjs / jqlite Goto Github PK

I'm trying to remove an event handler given with one() to 2 different elements, i'm basically trying to get both elements to unbind when either one of them gets called:

my code looks like this:

$('.elem1 , .elem2').one('click' ,function(){
// some code...
});

but when elem1 is clicked and gets unbind, elem2 does not, and clicking elem2 will fire the event. Same goes if i click elem2 first.

p.s. i don't want to remove all the previous click events from them, just this event.
any idea what would be the best solution here?

seeing this error thrown in my app around these lines

// IE9-11 has no method "contains" in SVG element and in Node.prototype. Bug #10259.
var jqLiteContains = window.Node.prototype.contains || /** @this */ function(arg) {
  // eslint-disable-next-line no-bitwise
  return !!(this.compareDocumentPosition(arg) & 16);
};

happens with this user agent Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727)

Hi,
is it possible to add the .hide() and .show() functions to jqlite?

Thanks in advance.

While I attempted to use jqLite in a project, I encountered the following error on Google Chrome 44.0.2403.157 on MacOS X (Yosemite):

Uncaught TypeError: Cannot assign to read only property 'find' of [object Array](anonymous function)

Unfortunately, I am not able to reproduce the error on similar machines.

My guess is that current browsers which are implementing the the upcoming ECMAScript2015 specification might throw new errors when over-/re-writing certain properties.

For example, the new language version will add couple of new methods to Array.prototype:

• Array.prototype.copyWithin (target, start [ , end ] )
• Array.prototype.fill (value [ , start [ , end ] ] )
• Array.prototype.find ( predicate [ , thisArg ] )
• Array.prototype.findIndex ( predicate [ , thisArg ] )

The collision with Array.prototype.find() might be the reason behind the aforementioned error. ListDOM is being implemented in jqlite.js:273.

  // ListDOM

  function ListDOM(){}

  ListDOM.prototype = [];

  // ...
  ListDOM.prototype.last = function() {
      var list = new ListDOM();

      if( this.length ) {
        list[0] = this[this.length - 1];
        list.length = 1;
      }
      return list;
    };

  ListDOM.prototype.find = function(selector) {
     // ...
  };

Hi @jgermade ,

I'm trying to use the same event handler for multiple jquery objects and from what i've found jquery uses the .add() function like so:

$(obj1).add(obj2).on('click', some_function);

is there another way to do so in jqlite? or is it possible to add the .add() function?

note: i'm not talking about css selectors like '.class1'

thanks in advance!

Hi @jgermade,

i'm having some issues with a 3rd party code overriding the HTML5 Media API 'ended' event and i want to remove all listeners from that element, then, either restore them to default or add my own with the .on() function.

I've seen that with jQuery i could have used video.unbind('ended').
Do you think it is possible to add this to jqlite? or can you think of an alternative ?

Возможно ошибка в строке 810
if( !classListMethods.has(el, className) ) { el.className += ' ' + className; }

classListMethods - нигде не объявлена

live listeners

signature: $.on(eventName, selector, handler)

nested option

signature: $.fn.on(eventName, [selector,] handler)

Hi @jgermade,
I want to use dotdotdot library with your fantastic library, and it seems that the only thing missing is support for extend method in jqlite.
Is it possible to add it?

Hi @jgermade ,

is it possible to add the adding the .offset() and the .position() functions to jqlite?

Thanks in advance!

Hello,
I am having problems with the .hasClass method.
If a node elem has a class attribute defined, then it will no matter what the contents of that class attribute are, the method hasClass will always return true no matter which class name you pass it to.
I don't know if someone else is experiencing the same problem.
I am using the latest version of this lib.

Hi @jgermade ,
i have this code where i want to be able to drag a button on the X axis and for some reason when i try to off() the 'mousemove' event on the 'mouseup' event it wont work, any i idea why?

Here is my code:

  $(progress-button).on('mousedown', function(e){
        $(this).on("mousemove",function(e){
            $(this).css('left', e.pageX + 'px');
        });
    }).on('mouseup', function(){
      $(this).off('mousemove');
  });

Hi,
if you guys could add the .first() method that would be awsome!
https://api.jquery.com/first/

Thanks!

Hi, i've recently updated from version 2.19 to 2.24 (latest), and am now getting the following error:

Uncaught (in promise) TypeError: Cannot assign to read only property '___found___' of 0(…)
on line jqLite.js:949

the stack trace and devtools look like this:

Any idea why does this happens?
P.S. i'm using promise-polyfill

o(∩_∩)o Hello~

I use this light weight these days, and I found a small logic that seems need to be adjusted.
In the newest source code of "jqlite.js", the part of the function of [ListDOM.prototype.toggleClass] as below:

if (add === undefined) {
    for (i = 0, len = this.length; i < len; i++) {
          if (this[i].classList.item(className)) {
              this[i].classList.remove(className);
          } else {
              this[i].classList.add(className);
          }
    }
}

this[i].classList.item(className)

When I call toggleClass function many times,I found the result is not expected.
Therefore,I saw the function of hasClass function, and see the check logic is:
this[i].classList.contains(className)

So, I modify code use contains instead of item, then the result is correct now.

Thank you for your reading.

dataset polyfill:
https://gist.github.com/brettz9/4093766

classList polyfill:
https://github.com/eligrey/classList.js

Code:

$('.myNode').data('myData', {myPro: 'my value'});
console.log($('.myNode').data());

output:
DOMStringMap {myData: "[object Object]"}

expect:
Object {myData: Object}

Hi,

I'm trying to bind a function to when a user presses ESC on his keyboard and then unbind it right after he pressed.

How should i bind when using jqlite? i see that the .on() function dosn't support namespaces but there is no bind/unbind of .keypress() functions.... any other way?

Thanks in advance!

Hi @jgermade.

I have an element with a width in %, i'm trying to get a listener on that element that would fire when it gets re-sized.

I thought about using MutationObserver but i need to keep it IE9 supported.

I saw this question, and what he answered in the question.
I was wandering, won't it screw-up the css function all togather?

This is what he wrote:

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        $(this).trigger(ev);
        return orig.apply(this, arguments);
    }
})();

This will temporary override the internal prototype.css method and the redefine it with a trigger at the end.

But i'm not sure that's what i need.... any idea?

Methods to be implemented

• get()
• eq()
• addClass()
• after()
• append()
• attr()
• children()
• closest()
• clone() - clone events not yet supported
• contents()
• css()
• data()
• detach()
• empty()
• find()
• hasClass()
• html()
• next() - Does not support selectors
• on() - Does not support namespaces, selectors or eventData
• off() - Does not support namespaces or selectors
• one() - Does not support namespaces or selectors
• parent()
• prepend()
• prop()
• ready()
• remove()
• removeAttr()
• removeClass()
• removeData()
• replaceWith()
• text()
• toggleClass()
• triggerHandler()
• trigger() - Does not support selectors
• val()
• wrap()

I have a snippet code but got error:

var $ = require('jqlite');

var $myNode = $('.my-class');

Uncaught ReferenceError: $ is not defined

Expecting your help.

Best.

Hi,
is it possible to add the ..prev() , .prevAll() , .siblings() functions to jqlite?

Will help a lot with DOM manipulation...

Thanks in advance.

Is it possible to please add the WrapAll() and unWrap() function just like in jQuery?

Thanks in advance

Hi,
would be awesome to have the .hover() function just like in jquery

thanks in advance

http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery

// Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", function(){
            document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
            jQuery.ready();
        }, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", arguments.callee );
                jQuery.ready();
            }
        });
    }

Hi,

i'm trying to use the .on() function to take 2 events for the same function, but for some reason it doesn't work, for example (the jquery way to do this):

  $(volumeBar).on('change input', function() {
    playerObj.updateVolume(mediaVideo, volumeBar);
  });

won't work, I insted have to split it to 2 different event handlers like this:

  //volume change with drag for all except chrome
  $(volumeBar).on('change', function() {
    playerObj.updateVolume(mediaVideo, volumeBar);
  });
  //volume change with drag on chrome
  $(volumeBar).on('input', function() {
    playerObj.updateVolume(mediaVideo, volumeBar);
  });

thanks in advance!

HI,
I'm trying to add css through the js with the .css() function and i have alot of css code to use, only thing is that the format where you could write:

$('.myClass').css({"background-color":"yellow","font-weight": "bolder"});

doesn't work... i insted have to do it like this:

$('.myClass').css("background-color","yellow");
$('.myClass').css("font-weight", "bolder");

which take alot of code and time, what can i do?

Thanks in advance

Hi,
What would be the best way to implement the .getJSON() function from jQuery?

the jQuery docs say it's basicly a shorthand Ajax function, which is equivalent to:

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});

would that work with jqlite ? is there anything that i should change?

Thanks in advance!

Hi,
is it possible to add the .height() and .width() functions to jqlite?

Thanks in advance.

The minified version runs code like this (pretty printed):

!function(t, e) {
    var n = e(t);
    "object" == ("undefined" == typeof module ? "undefined" : _typeof(module)) && "object" == ("undefined" == typeof exports ? "undefined" : _typeof(exports)) ? module.exports = n : ("function" == typeof define ? define("jqlite", function() {
        return n
    }) : "function" == typeof angular ? angular.module("jqlite", []).constant("jqlite", n) : t.jqlite = n,
    t.$ || (t.$ = n))
}(void 0, function(t) {

So, to explain a bit, the function's t parameter is void 0 a.k.a undefined. Near the end of the function, assuming we're not using Angular, the code that is executed is t.jqlite = n and that throws an exception.

Uncaught TypeError: Cannot set property 'jqlite' of undefined

The unminified code is passing this instead of void 0, so the minification process is breaking the code.

Hi,
I'm trying to add this jquery-injectCSS: https://github.com/kajic/jquery-injectCSS

but when i load them in my js file i get:

Uncaught ReferenceError: jQuery is not defined

is there any way around this?

thanks in advance!

I wrote a component with jqLite and now when others try to implement it in a webapp that uses JQuery a lot of things work differently or don't work at all.

Any idea how i can avoid it in my code? and if that's not possible then in their code?

Hi @jgermade ,

I'm trying to use the .css() function as the jquery docs describe here: http://api.jquery.com/css/
as follows:

<script>
$( "#box" ).one( "click", function() {
  $( this ).css( "width", "+=200" );
});
</script>

What i'm basically trying to achieve is to change the background-position of a button so i'm going like this:

  $('.Btn').hover(function(){
    $(this).css('backgroundPosition', '-=49');
  },function(){
    $(this).css('backgroundPosition', '+=49');
  });

but it's not working, is this option available and i'm making a mistake? or do you need to add it?

Thanks in advance!