juci.elem

juci wrapper on HTMLElement. juci.elem provides helper APIs for DOM manipulation such as
Add and remove CSS classes and styles
Modify attributes
Append, prepend, insert elements
Modify innerHTML, innerText, value of the element
Query selector APIs to search within the element
Get children, firstChild, lastChild
Helpers to attach listeners for events such as tap, change, load, etc.


  • Extends Observable

    • Methods

    • addClass(className)
      Adds a class(es) to element if it does not already have it.
      Parameters:
      • className{String}
        Name of the css class(es) to be added to the element. If multiple classes are to be added, className should be a String of class names separated with space.
      juci.findById("elem").addClass("awesome_class");
      juci.findById("elem").addClass("awesome_class another_awesome_class");
    • append(element)
      Appends html (String/juci.elem) to the element
      Parameters:
      See:
      juci.elem.appendTo
      juci.elem.prepend
      juci.elem.prependTo
    • appendTo(elem)
      Appends the current element to the passed element
      Parameters:
      See:
      juci.elem.append
      juci.elem.prepend
      juci.elem.prependTo
    • attr(name, value)
      Gets an attribute of the element. If value is passed, the method sets the value of the attribute.
      Parameters:
      • value{String} Optional
      • name{String} 
      var indexAttr = juci.findById("item").attr("data-index");
      juci.findById("another-item").attr("data-index", 20);
      Returns:
      {String} of the attribute if value is not passed.
    • blur()
      Calls DOM Blur on the element.
      See:
      MDN link link
    • children(selector)
      Returns the child nodes of the element.
      Parameters:
      • selector{String} Optional
        CSS selector to select matching children.
      Returns:
      {Array} of juci.elem children of the element matching the selector if passed.
    • clone()
      Clones the current element.
      Returns:
      {juci.elem} copy of the current element.
    • closest(selector)
      Find the closest matching parent for the CSS selector from the specified HTML element.
      Parameters:
      • selector{String}
        A string containing a selector expression. element
      juci.findById("").closest(".something", juci.findById("selement"));
      Returns:
      {juci.elem} juci.elem that matches the selector; null, otherwise.
    • css(css, value)
      Gets/Sets CSS property values to the element
      Parameters:
      juci.findById("item").css("zIndex");
      juci.findById("item").css("visibility", "hidden");
      juci.findById("item").css({"zIndex": 1, "visibility": "visible"});
      Returns:
      {String} the value of the CSS property if css is a String and value is undefined.
    • disable()
      Disables the element by setting the disabled attribute of the element
    • empty()
      Empties the content inside the html
    • enable()
      Enables the element by resetting the disabled attribute of the element.
    • find(selector, bUseCache)
      Find elements that match the specified CSS selector with the current element as the context.
      Parameters:
      • bUseCache
      • selector{String}
        A string containing a CSS selector expression.
      juci.findById("item").find("
      Returns:
      {Array} array of juci.elems that match the selector.
    • findByAttr(attribute, bUseCache)
      Find elements that have the specified attribute with the current element as the context.
      Parameters:
      • attribute{String}
        A string containing the name of the attribute.
      • bUseCache
      Returns:
      {Array} array of juci.elems.
    • findByAttrParam(param, bUseCache)
      Find elements that have the specified attributes and values with the current element as the context.
      Parameters:
      • bUseCache
      • param{Object}
        An object containing attribute names as keys and attribute values as values.
      Returns:
      {Array} array of juci.elems.
    • findByAttrVal(attribute, value, bUseCache)
      Find elements that have the specified attribute and value with the current element as the context.
      Parameters:
      • attribute{String}
        A string containing the name of the attribute.
      • bUseCache
      • value{String}
        A string containing the value of the attribute.
      Returns:
      {Array} array of juci.elems that match the selector.
    • findByClass(className, bUseCache)
      Find elements that have the specified class with the current element as the context.
      Parameters:
      • className{String}
        A string containing the name of the class.
      • bUseCache
      Returns:
      {Array} array of juci.elems.
    • findById(id)
      Finds an element that has the specified value in its 'id' attribute.
      Parameters:
      • id{String}
        A string containing the id of element.
      Returns:
      {juci.elem} juci.elem that has the specified id value; null, otherwise.
      See:
      juci.findById
    • findByTag(tag, bUseCache)
      Find elements that have the specified tag with the current element as the context.
      Parameters:
      • bUseCache
      • tag{String}
        A string containing the name of the tag.
      Returns:
      {Array} array of juci.elems.
    • firstChild()
      Gets the first child of the element
      Returns:
      {juci.elem}
    • focus()
      Calls DOM Focus on element
      See:
      MDN link link
      To open the keyboard on an input, focus should be called in a touch event or click callback.
    • hasClass(className)
      Returns true if the element has the className specified else false
      Parameters:
      • className{String}
        Name of the CSS class
      Returns:
      {Boolean}
    • height(val)
      Gets/Sets the height of the element.
      Parameters:
      • val{Number} Optional
        Height to be set for the element.
      Returns:
      {Number} of the element, if val is undefined
      elem.height() will always return the content height, regardless of the value of the CSS box-sizing property.
    • hide(delay)
      Hides the element.
      Parameters:
      • delay
    • html(htmlString)
      Gets/Sets inner HTML of the element.
      Parameters:
      • htmlString{String} Optional
        Inner html content to be set.
      Returns:
      {String} inner HTML content of the element if htmlString is undefined.
    • insertAfter(elem)
      Inserts the element after the specified element.
      Parameters:
      See:
      juci.elem.insertBefore
    • insertBefore(elem)
      Inserts the element before the specified element.
      Parameters:
      See:
      juci.elem.insertAfter
    • isChildOf(parent)
      Check if the juci.elem is a child of the parent.
      Parameters:
      • parent{juci.elem|HTMLElement}
        {juci.elem|HTMLElement}
      Returns:
      {Boolean} if juci.elem is a child.
    • isEmpty()
      Checks if the element has no inner HTML content.
      Returns:
      {Boolean} if empty, else false.
    • isParentOf(child)
      Check if the juci.elem is the parent of the child.
      Parameters:
      • child{juci.elem|HTMLElement}
        {juci.elem|HTMLElement}
      Returns:
      {Boolean} if juci.elem is the parent.
    • lastChild()
      Gets the last child of the element
      Returns:
      {juci.elem}
    • offset()
      Gets the offset of the element. 
      juci.findById("item").offset({"left" : leftVal, "top": topVal, "width": widthVal, "height": heightVal});
      Returns:
      • offset{Object}
        Offset configuration as given below
        • top{String}
          The top offset of the element from the beginning of the page
        • left{String}
          The left offset of the element from the beginning of the page
        • width{String}
          The width of the element
        • height{String}
          The height of the element
    • onClick(handler, context, delegateeSelector)
      Registers a handler function to call when the juci.elem#event:tap event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:tap event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
      • delegateeSelector
      See:
      juci.elem.onTap
      When the element is being tapped or clicked, a CSS class touch is added to the element to add visual changes on the element.
    • onClickOnce(handler, context, delegateeSelector)
      Registers a handler function to be called once when the juci.elem#event:tap event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:tap event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
      • delegateeSelector
      See:
      juci.elem.onClick
      This listener is automatically removed after the first instance of the tap fired.
    • onError(handler, context)
      Registers a handler function to call when the juci.elem#event:error event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:error event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
    • onInput(handler, context)
      Registers a handler function to call when the juci.elem#event:input event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:input event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
    • onKeyPress(handler, context)
      Registers a handler function to call when the juci.elem#event:keypress event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:keypress event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
    • onKeyUp(handler, context)
      Registers a handler function to call when the juci.elem#event:keyup event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:keyup event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
    • onLoad(handler, context)
      Registers a handler function to call when the juci.elem#event:load event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:load event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
    • onLongTap(handler, context, delegateeSelector)
      Registers a handler function to call when the juci.elem#event:longtap event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:longtap event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
      • delegateeSelector
      When the element is being tapped or clicked, a CSS class touch is added to the element to add visual changes on the element.
    • onTap(handler, context, delegateeSelector)
      Registers a handler function to call when the juci.elem#event:tap event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:tap event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
      • delegateeSelector
      See:
      juci.elem.onClick
      When the element is being tapped or clicked, a CSS class touch is added to the element to add visual changes on the element.
    • onTouchCancel(handler, context, delegateeSelector)
      Registers a handler function to call when the juci.elem#event:touchcancel event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:touchcancel event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
      • delegateeSelector
    • onTouchEnd(handler, context, delegateeSelector)
      Registers a handler function to call when the juci.elem#event:touchend event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:touchend event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
      • delegateeSelector
    • onTouchMove(handler, context, delegateeSelector)
      Registers a handler function to call when the juci.elem#event:touchmove event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:touchmove event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
      • delegateeSelector
    • onTouchStart(handler, context, delegateeSelector)
      Registers a handler function to call when the juci.elem#event:touchstart event fires.
      Parameters:
      • handler{Function}
        A handler function to execute when the juci.elem#event:touchstart event fires.
      • context{Object} Optional
        Context in which the handler function should execute.
      • delegateeSelector
    • outerHeight(bUseMargin)
      Gets the outer height of the element.
      Parameters:
      • bUseMargin
      Returns:
      {Number}
    • outerWidth(bUseMargin)
      Gets the outer width of the element.
      Parameters:
      • bUseMargin
      Returns:
      {Number}
    • parent()
      Returns parent of the current node.
      Returns:
      {juci.elem}
    • prepend(html)
      Prepends html content(String/juci.elem) to the element
      Parameters:
      • html
      See:
      juci.elem.append
      juci.elem.appendTo
      juci.elem.prependTo
    • prependTo(elem)
      Prepends the element to the passed element
      Parameters:
      See:
      juci.elem.append
      juci.elem.appendTo
      juci.elem.prepend
    • remove(bClear)
      Removes the element from the DOM.
      Parameters:
      • bClear{Boolean} Optional
        If true, empties the node after removal.
    • removeAttr(attr)
      Remove attribute for the given name on the element.
      Parameters:
      • attr{String}
        Name of the attribute.
    • removeClass(className)
      Remove class from element, if it is presented.
      Parameters:
      • className 
      juci.findById("item").removeClass("awesome_class");
      juci.findById("another-item").removeClass(); // Removes all classes
      To remove all classes, call removeClass with no parameters.
    • show(delayed)
      Shows the element. If hidden using juci.elem#hide, reverts to the previous display state of the element.
      Parameters:
      • delayed
    • text(text)
      Gets/Sets inner text content of the element.
      Parameters:
      • text{String}
        Text content to be set on the element.
      Returns:
      {String} the inner text content if text is undefined.
    • toggle()
      Toggles the element from hidden to shown and viceversa.
      Returns:
      {Boolean} if shown, else false.
    • toggleClass(className)
      Toggles class on element by adding or removing the className specified.
      Parameters:
      • className{String}
        Name of the CSS class to be toggled.
      Returns:
      {Boolean} if added, else false.
    • val(val)
      Gets/Sets value on the element.
      Parameters:
      • val{String|Number|Boolean} Optional
        Value to be set on the element
      Returns:
      {String|Number|Boolean} value of the element if val is undefined.
      val becomes src attribute for image elements, val becomes innerHTML property for other elements.
    • width(val)
      Gets/Sets the width of the element.
      Parameters:
      • val{Number} Optional
        Width to be set for the element.
      Returns:
      {Number} of the element, if val is undefined
      elem.width() will always return the content width, regardless of the value of the CSS box-sizing property.

    Events

    • change(eventObj)
      Fires when the value of the control is changed through user input.
      Parameters:
      See:
      MDN link link
      Applicable for INPUT, TEXTAREA and SELECT.
    • error(eventObj)
      Fires when the content for the element has finished loading with errors.
      Parameters:
      Applicable for IMG
    • keypress(eventObj)
      Fires when user has
      Parameters:
    • keyup(eventObj) Cancellable
      Fires while the user is entering a value. This event is delayed to capture all key events within a time period and fires one event at the end of the period.
      Parameters:
      Applicable for INPUT and TEXTAREA.
    • load(eventObj)
      Fires when the content for the element has finished loading successfully.
      Parameters:
      Applicable for IMG
    • longtap(eventObj)
      Fires when the element is held for a longer duration and released.
      Parameters:
    • tap(eventObj)
      Fires after the element has been touched, and after juci.elem#event:touchend.
      Parameters:
    • touchend(eventObj)
      Fires after the element has been touched, but before being tapped.
      Parameters:
    • touchmove(eventObj)
      Fires when the touched element is moved around within the element's bounds.
      Parameters:
    • touchstart() Cancellable
      Fires when the element has been touched.