Add wrap() and wrapAll()

[fabiospampinato]

Add wrap() and wrapAll()

[kenwheeler]

Fall back to jquery

[influxweb]

I had need for a wrapping function in a carousel I was creating. The goal was to use Cash and 'vanilla' JavaScript while allowing for a developer to swap out Cash for jQuery if they needed to for other functionality.

Here is the wrapping function I used in case it could be helpful to others.

$.fn.wrapElements = function (html) {
	if (jQuery.isFunction(html)) {
		return this.each(function (i) {
			jQuery(this).wrapElements(html.call(this, i));
		});
	}

	if (this[0]) {
		// The elements to wrap the target around
		var wrap = jQuery(html, this[0].ownerDocument).eq(0).clone(true);

		if (this[0].parentNode) {
			wrap.insertBefore(this[0]);
		}

		wrap.map(function () {
			var elem = this;

			while (elem.firstChild && elem.firstChild.nodeType === 1) {
				elem = elem.firstChild;
			}

			return elem;
		});
		wrap.append(this);
	}

	return this;
};

$.fn.groupEvery = function (cLen, wrapperEl, wrapperClass) {
	var wrapper = document.createElement(wrapperEl);

	wrapper.classList.add(wrapperClass);
	while (this.length) {
		$(this.splice(0, cLen)).wrapElements(wrapper);
	}
};


/**
 * groupCount = number of elements to wrap, i.e 3
 * groupWrapper = element to wrap the group(s) in, i.e. 'figure'
 * groupClass = class to apply to wrapping element, i.e. 'x-carousel__item'
 */

$('#ELEMENT').groupEvery(groupCount, groupWrapper, groupClass);

[MaikelGG]

@influxweb just wanted to share the solution:

Changed your function slightly and use the spread operator.
wrapper.classList.add(...wrapperClass);

The groupClass always needs to be an array, but this array can also contain one item.

let groupClass = ['datatables-header__colvis', 'datatables-toolbar__item'];
$('.buttons-colvis').groupEvery(1, 'div', groupClass);

[tommiehansen]

Quick Q (don't want to bloat your whole git with Q:s):
Is there an alternative to nextAll() and prevAll() ? Two really helpful, and short, functions that is really helpful when doing stuff such as:

// Set class .on to all next .child
var $t = $(this);
$t.parent().nextAll('.child').addClass('on');

...and will Cash work with jq as a fallback for ie8-9 so that one doesn't need to write two codebases for us that needs broader support but still want to serve something lighter and more performant where possible (like one can use jq 2 and serve jq1 as fallback).

[kenwheeler]

1. No but I've been thinking about adding them, along with wrap()
2. Cash supports ie9+

[tommiehansen]

1. So, just to be clear, no fallback alternative if one need ie8 support?

[tommiehansen]

Yeah... but what about code compatibility? One could fall back to anything but that doesn't mean the codebase would be compatible or not needed to be rewritten for something like jQuery. That's what i mean by having to support two codebases which would rule out the use of Cash in any situation where support for IE8 is needed (ie all sort of larger eCommerce sites/systems created today).

It's totally okay if Cash doesn't support every single function that jQuery support but being 100% compatible with the functions it do support would be really nice due to the simple fallback option one then get. You also could even make Cash IE10+ only and drop support for IE9 if that would be the case.

[kenwheeler]

I aim to make it as jQuery compatible as possible, however the way I see Cash, the focus is on the DOM utilities for the most part. In todays modern workflow, there are better modules for things like animation or promises or ajax that would just bloat Cash and there is no sense in trying to replicate.

[fabiospampinato]

If somebody wants to submit a PR for this I'll be happy to consider it.

[MaikelGG]

@influxweb Do you know why adding multiple classes as an argument throws an error? When I look at the documentation, classlist should work with comma separated classnames.

Uncaught DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('classone classtwo') contains HTML space characters, which are not valid in tokens.

[influxweb]

@MaikelGG I haven't tried passing multiple classes through the groupClass variable. You might try something like var groupClass = '"foo", "bar", "baz"';.

[influxweb]

@MaikelGG I like that idea. Could you post your updated function? I'd like to play around with it and see about making it work still in IE11.

[MaikelGG]

Good notice. I have not tested that yet. Will do today. I think (of what I read) you need to use the babel polyfill.

/**
 * groupCount = number of elements to wrap, i.e 3
 * groupWrapper = element to wrap the group(s) in, i.e. 'figure'
 * groupClass = class to apply to wrapping element, i.e. 'x-carousel__item'
 *
 * How to use:
 * $('#ELEMENT').groupEvery(groupCount, groupWrapper, groupClass);
 * 
 */

$.fn.wrapElements = function (html) {
	if (jQuery.isFunction(html)) {
		return this.each(function (i) {
			jQuery(this).wrapElements(html.call(this, i));
		});
	}

	if (this[0]) {
		// The elements to wrap the target around
		var wrap = jQuery(html, this[0].ownerDocument).eq(0).clone(true);

		if (this[0].parentNode) {
			wrap.insertBefore(this[0]);
		}

		wrap.map(function () {
			var elem = this;

			while (elem.firstChild && elem.firstChild.nodeType === 1) {
				elem = elem.firstChild;
			}

			return elem;
		});
		wrap.append(this);
	}

	return this;
};

$.fn.groupEvery = function (cLen, wrapperEl, wrapperClass) {
	var wrapper = document.createElement(wrapperEl);

	wrapper.classList.add(...wrapperClass);
	while (this.length) {
		$(this.splice(0, cLen)).wrapElements(wrapper);
	}
};

[fabiospampinato]

Just implemented unwrap, wrap, wrapAll and wrapInner.