737 lines
23 KiB
JavaScript
737 lines
23 KiB
JavaScript
|
||
|
||
window.cpMedia = window.cpMedia || (function (global, documentElement) {
|
||
|
||
var DEBUG = false;
|
||
var matchMedia = global.matchMedia;
|
||
|
||
function each(collection, fn) {
|
||
var i = 0,
|
||
length = collection.length,
|
||
cont;
|
||
|
||
for (i; i < length; i++) {
|
||
cont = fn(collection[i], i);
|
||
if (cont === false) {
|
||
break; //allow early exit
|
||
}
|
||
}
|
||
}
|
||
|
||
function isArray(target) {
|
||
return Object.prototype.toString.apply(target) === '[object Array]';
|
||
}
|
||
|
||
function isFunction(target) {
|
||
return typeof target === 'function';
|
||
}
|
||
|
||
function evalMediaQueryOnElement(query, element) {
|
||
var media = { all: true, screen: true, print: false };
|
||
var coordinates;
|
||
try {
|
||
coordinates = element.getBoundingClientRect();
|
||
} catch (e) {
|
||
coordinates = {
|
||
width: element.offsetWidth,
|
||
height: element.offsetHeight
|
||
};
|
||
}
|
||
|
||
media.thisWidth = coordinates.width || coordinates.right - coordinates.left;
|
||
media.thisHeight = coordinates.height || coordinates.bottom - coordinates.top;
|
||
media.thisAspectRatio = media.thisWidth / media.thisHeight,
|
||
media.thisOrientation = media.thisWidth > media.thisHeight ? "landscape" : "portrait";
|
||
|
||
var qReplaced = query
|
||
.replace(/\(|\)/g, "")
|
||
.replace(/\s*,\s*/g, ") || (")
|
||
.replace(/\s+and\s+/gi, " && ")
|
||
.replace(/min-(.*?):/gi, "$1>=")
|
||
.replace(/max-(.*?):/gi, "$1<=")
|
||
.replace(/above-(.*?):/gi, "$1>")
|
||
.replace(/below-(.*?):/gi, "$1<")
|
||
.replace(/min-|max-/gi, "")
|
||
.replace(/(all|screen|print)/, "d.$1")
|
||
.replace(/:/g, "==")
|
||
.replace(/([\w-]+)\s*([<>=]+)\s*(\w+)/g, function ($0, $1, $2, $3) {
|
||
return "d." + toCamelCase($1) + $2 + parseCSSNumber($3);
|
||
})
|
||
.replace(/([<>=]+)([A-z][\w-]*)/g, '$1"$2"');
|
||
var a = Function("d", "return(" + qReplaced + ")")(media);
|
||
return a;
|
||
}
|
||
|
||
function toCamelCase(value) {
|
||
return value.toLowerCase().replace(/-[a-z]/g, function ($0) {
|
||
return $0[1].toUpperCase();
|
||
});
|
||
}
|
||
|
||
function parseCSSNumber(value) {
|
||
return value.replace(/([\d\.]+)(%|em|in|pt|px)/, function ($0, $1, $2) {
|
||
return ($2 == "em") ? $1 * 16 : ($2 == "in") ? $1 * 96 : ($2 == "pt") ? $1 * 96 / 72 : ($2 == "%") ? $1 / (scope.innerWidth || documentElement.clientWidth) : $1;
|
||
});
|
||
}
|
||
|
||
function diag(message) {
|
||
if (DEBUG) {
|
||
console.log(message);
|
||
}
|
||
}
|
||
|
||
function QueryHandler(options, elements) {
|
||
this.options = options;
|
||
!options.deferSetup && this.setup(elements);
|
||
}
|
||
QueryHandler.prototype = {
|
||
|
||
setup: function (elements) {
|
||
if (this.options.setup) {
|
||
this.options.setup(elements);
|
||
}
|
||
this.initialised = true;
|
||
},
|
||
|
||
on: function (e, element) {
|
||
!this.initialised && this.setup();
|
||
this.options.match && this.options.match(e, element);
|
||
},
|
||
|
||
off: function (e, element) {
|
||
this.options.unmatch && this.options.unmatch(e, element);
|
||
},
|
||
|
||
destroy: function () {
|
||
this.options.destroy ? this.options.destroy() : this.off();
|
||
},
|
||
|
||
equals: function (target) {
|
||
return this.options === target || this.options.match === target;
|
||
}
|
||
};
|
||
|
||
function MediaQuery(query, isUnconditional) {
|
||
this.query = query;
|
||
this.isUnconditional = isUnconditional;
|
||
this.handlers = [];
|
||
this.mql = matchMedia(query);
|
||
|
||
if (this.mql.media != query) {
|
||
diag("Media query might be invalid=" + query + "\nParsed as=" + this.mql.media);
|
||
}
|
||
|
||
var self = this;
|
||
this.listener = function (mql) {
|
||
self.mql = mql;
|
||
self.assess();
|
||
};
|
||
this.mql.addListener(this.listener);
|
||
}
|
||
MediaQuery.prototype = {
|
||
addHandler: function (handler) {
|
||
var qh = new QueryHandler(handler);
|
||
this.handlers.push(qh);
|
||
|
||
this.matches() && qh.on();
|
||
},
|
||
|
||
removeHandler: function (handler) {
|
||
var handlers = this.handlers;
|
||
each(handlers, function (h, i) {
|
||
if (h.equals(handler)) {
|
||
h.destroy();
|
||
return !handlers.splice(i, 1); //remove from array and exit each early
|
||
}
|
||
});
|
||
},
|
||
|
||
matches: function () {
|
||
return this.mql.matches || this.isUnconditional;
|
||
},
|
||
|
||
clear: function () {
|
||
each(this.handlers, function (handler) {
|
||
handler.destroy();
|
||
});
|
||
this.mql.removeListener(this.listener);
|
||
this.handlers.length = 0; //clear array
|
||
},
|
||
|
||
assess: function () {
|
||
var action = this.matches() ? 'on' : 'off';
|
||
|
||
each(this.handlers, function (handler) {
|
||
handler[action]();
|
||
});
|
||
}
|
||
};
|
||
|
||
function ElementWrapper (element, query, rawQuery) {
|
||
this.element = element;
|
||
this.matched = false;
|
||
this.query = query;
|
||
this.rawQuery = rawQuery;
|
||
var rwdinfo = $(element).data('rwdinfo');
|
||
if (rwdinfo == null) {
|
||
rwdinfo = [];
|
||
}
|
||
rwdinfo.push(this);
|
||
$(element).data('rwdinfo', rwdinfo);
|
||
}
|
||
|
||
function MediaElement(query, isUnconditional) {
|
||
this.query = query;
|
||
this.isUnconditional = isUnconditional;
|
||
this.handlers = [];
|
||
this.isMediaElement = true;
|
||
this.elementWrappers = [];
|
||
this.initElements();
|
||
}
|
||
MediaElement.prototype = {
|
||
|
||
initElements : function () {
|
||
var all,
|
||
element,
|
||
match = this.query.match(/(.+?):media\((.+?)\)/);
|
||
this.elementWrappers = [];
|
||
if (match && /this/.test(match[2])) {
|
||
if (documentElement.querySelectorAll) {
|
||
all = documentElement.querySelectorAll(match[1]);
|
||
|
||
for (var index = 0; element = all[index]; ++index) {
|
||
this.elementWrappers.push(new ElementWrapper(element, match[2], this.query));
|
||
}
|
||
}
|
||
}
|
||
},
|
||
addHandler: function (handler) {
|
||
var elementWrappers = this.elementWrappers,
|
||
index,
|
||
elements = [];
|
||
for (index = 0; index < elementWrappers.length; ++index) {
|
||
elements.push(elementWrappers[index].element);
|
||
}
|
||
var qh = new QueryHandler(handler, elements);
|
||
this.handlers.push(qh);
|
||
|
||
this.assessOneHandler(null, qh);//this.matched && qh.on();
|
||
//this.assessForce(null, qh); //performance decrease, but not cached elements
|
||
},
|
||
|
||
removeHandler: function (handler) {
|
||
var handlers = this.handlers;
|
||
each(handlers, function (h, i) {
|
||
if (h.equals(handler)) {
|
||
h.destroy();
|
||
return !handlers.splice(i, 1); //remove from array and exit each early
|
||
}
|
||
});
|
||
},
|
||
|
||
clear: function () {
|
||
each(this.handlers, function (handler) {
|
||
handler.destroy();
|
||
});
|
||
//this.mql.removeListener(this.listener);
|
||
this.handlers.length = 0; //clear array
|
||
},
|
||
|
||
/// Access and execute specific handler if matches media query on current elements
|
||
assessOneHandler: function (e, handler) {
|
||
var elementWrappers = this.elementWrappers,
|
||
elementWrapper,
|
||
index;
|
||
|
||
for (index = 0; index < elementWrappers.length; ++index) {
|
||
elementWrapper = elementWrappers[index];
|
||
|
||
if (evalMediaQueryOnElement(elementWrapper.query, elementWrapper.element) || this.isUnconditional) {
|
||
handler.on(e, elementWrapper.element);
|
||
elementWrapper.matched = true;
|
||
}
|
||
}
|
||
},
|
||
|
||
/// Access and execute current handlers if matches or unmatched media query on current elements
|
||
assess: function (e) {
|
||
var elementWrappers = this.elementWrappers,
|
||
elementWrapper,
|
||
index;
|
||
|
||
for (index = 0; index < elementWrappers.length; ++index) {
|
||
elementWrapper = elementWrappers[index];
|
||
|
||
if (evalMediaQueryOnElement(elementWrapper.query, elementWrapper.element) || this.isUnconditional) {
|
||
this.match(e, elementWrapper);
|
||
} else {
|
||
this.unmatch(e, elementWrapper);
|
||
}
|
||
}
|
||
},
|
||
|
||
match: function (e, elementWrapper) {
|
||
if (elementWrapper.matched) {
|
||
return; //already on
|
||
}
|
||
|
||
each(this.handlers, function (handler) {
|
||
handler.on(e, elementWrapper.element);
|
||
});
|
||
elementWrapper.matched = true;
|
||
},
|
||
|
||
unmatch: function (e, elementWrapper) {
|
||
if (!elementWrapper.matched) {
|
||
return; //already off
|
||
}
|
||
|
||
each(this.handlers, function (handler) {
|
||
handler.off(e, elementWrapper.element);
|
||
});
|
||
elementWrapper.matched = false;
|
||
},
|
||
/// Access and execute current handlers if matches or unmatched media query on all elements (no cached)
|
||
/// If handler provided, access and execute only that handler if matches media query on all elements (no cached)
|
||
assessForce: function (e, handler) {
|
||
var all,
|
||
element,
|
||
match = this.query.match(/(.+?):media\((.+?)\)/);
|
||
if (match && /this/.test(match[2])) {
|
||
if (documentElement.querySelectorAll) {
|
||
all = documentElement.querySelectorAll(match[1]);
|
||
|
||
for (var index = 0; element = all[index]; ++index) {
|
||
var action = (evalMediaQueryOnElement(match[2], element) || this.isUnconditional) ? 'on' : 'off';
|
||
if (!handler) {
|
||
each(this.handlers, function (handler) {
|
||
handler[action](e, element);
|
||
});
|
||
} else if (action === 'on') {
|
||
handler[action](e, element);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
function MediaQueryDispatch() {
|
||
if (!matchMedia) {
|
||
throw new Error('matchMedia not present, legacy browsers require a polyfill');
|
||
}
|
||
this.queries = {};
|
||
this.listening = false;
|
||
this.browserIsIncapable = !matchMedia('only all').matches;
|
||
|
||
this.fire = function (e) {
|
||
var queries = this.queries,
|
||
mediaQuery;
|
||
|
||
for (mediaQuery in queries) {
|
||
if (queries.hasOwnProperty(mediaQuery)) {
|
||
queries[mediaQuery].isMediaElement && queries[mediaQuery].assess(e);
|
||
//queries[mediaQuery].isMediaElement && queries[mediaQuery].assessForce(e, null); //performance decrease, but not cached elements
|
||
}
|
||
}
|
||
return this;
|
||
};
|
||
|
||
this.fireQuery = function (mediaQuery, e) {
|
||
var queries = this.queries;
|
||
|
||
if (queries.hasOwnProperty(mediaQuery)) {
|
||
queries[mediaQuery].isMediaElement && queries[mediaQuery].assess(e);
|
||
}
|
||
return this;
|
||
};
|
||
|
||
this.listen = function (timeout) {
|
||
var self = this;
|
||
|
||
timeout = timeout || 160;
|
||
|
||
//creates closure for separate timed events
|
||
function wireFire(event) {
|
||
var timer;
|
||
|
||
window.addEventListener(event, function (e) {
|
||
timer && clearTimeout(timer);
|
||
|
||
timer = setTimeout(function () {
|
||
self.fire(e);
|
||
}, timeout);
|
||
}, false);
|
||
}
|
||
|
||
//prevent multiple event handlers
|
||
if (this.listening) {
|
||
return this;
|
||
}
|
||
|
||
// any browser that doesn't implement this
|
||
// will not have media query support
|
||
if (window.addEventListener) {
|
||
wireFire('resize');
|
||
wireFire('orientationChange');
|
||
}
|
||
|
||
self.fire();
|
||
this.listening = true;
|
||
|
||
return this;
|
||
};
|
||
}
|
||
MediaQueryDispatch.prototype = {
|
||
|
||
register: function (q, options, shouldDegrade) {
|
||
var queries = this.queries,
|
||
isUnconditional = shouldDegrade && this.browserIsIncapable;
|
||
|
||
if (!queries[q]) {
|
||
if (/this/.test(q)) {
|
||
queries[q] = new MediaElement(q, isUnconditional);
|
||
this.listen();
|
||
} else {
|
||
queries[q] = new MediaQuery(q, isUnconditional);
|
||
}
|
||
}
|
||
|
||
//normalize to object in an array
|
||
if (isFunction(options)) {
|
||
options = { match: options };
|
||
}
|
||
if (!isArray(options)) {
|
||
options = [options];
|
||
}
|
||
each(options, function (handler) {
|
||
queries[q].addHandler(handler);
|
||
});
|
||
|
||
return this;
|
||
},
|
||
|
||
unregister: function (q, handler) {
|
||
var query = this.queries[q];
|
||
|
||
if (query) {
|
||
if (handler) {
|
||
query.removeHandler(handler);
|
||
}
|
||
else {
|
||
query.clear();
|
||
delete this.queries[q];
|
||
}
|
||
}
|
||
|
||
return this;
|
||
},
|
||
diag: function (message) {
|
||
diag(message);
|
||
}
|
||
};
|
||
|
||
return new MediaQueryDispatch();
|
||
}(this, document.documentElement));
|
||
|
||
function toggleClassMedia(className, mediaQueryElement, opts) {
|
||
//Extending toggleClass with options.
|
||
var defaults = {
|
||
match: null, // [function] code to execute when media query match on element
|
||
unmatch: null // [function] code to execute when media query unmatch on element
|
||
};
|
||
var options = $.extend(defaults, opts);
|
||
cpMedia.register(mediaQueryElement, {
|
||
setup: function (elements) {
|
||
elements = elements || [];
|
||
for (var i = 0; i < elements.length; i++) {
|
||
$(elements[i]).removeClass(className);
|
||
cpMedia.diag('$(element[' + i + ']).removeClass("' + className + '"), mediaQuery: ' + mediaQueryElement);
|
||
if (options.unmatch != null && typeof (options.unmatch) === 'function') {
|
||
options.unmatch(e, elements[i], className, null, mediaQueryElement);
|
||
cpMedia.diag('options.unmatch(e, element[' + i + '], "' + className + '", null, "' + mediaQueryElement + '")');
|
||
}
|
||
}
|
||
},
|
||
match: function (e, element) {
|
||
$(element).addClass(className);
|
||
cpMedia.diag('$(element).addClass("' + className + '"), mediaQuery: ' + mediaQueryElement);
|
||
if (options.match != null && typeof (options.match) === 'function') {
|
||
options.match(e, element, className, null, mediaQueryElement);
|
||
cpMedia.diag('options.match(e, element, "' + className + '", null, "' + mediaQueryElement + '")');
|
||
}
|
||
},
|
||
unmatch: function (e, element) {
|
||
$(element).removeClass(className);
|
||
cpMedia.diag('$(element).removeClass("' + className + '"), mediaQuery: ' + mediaQueryElement);
|
||
if (options.unmatch != null && typeof (options.unmatch) === 'function') {
|
||
options.unmatch(e, element, className, null, mediaQueryElement);
|
||
cpMedia.diag('options.unmatch(e, element, "' + className + '", null, "' + mediaQueryElement + '")');
|
||
}
|
||
}
|
||
}, false);
|
||
}
|
||
|
||
function toggleClassesMedia(classNameMatch, classNameUnmatch, mediaQueryElement, opts) {
|
||
//Extending toggleClass with options.
|
||
var defaults = {
|
||
match: null, // [function] code to execute when media query match on element
|
||
unmatch: null // [function] code to execute when media query unmatch on element
|
||
};
|
||
var options = $.extend(defaults, opts);
|
||
cpMedia.register(mediaQueryElement, {
|
||
setup: function (elements) {
|
||
elements = elements || [];
|
||
for (var i = 0; i < elements.length; i++) {
|
||
$(elements[i]).addClass(classNameUnmatch).removeClass(classNameMatch);
|
||
cpMedia.diag('$(elements[' + i + ']).removeClass("' + classNameMatch + '").addClass("' + classNameUnmatch + '"), mediaQuery: ' + mediaQueryElement);
|
||
if (options.unmatch != null && typeof (options.unmatch) === 'function') {
|
||
options.unmatch(null, elements[i], classNameMatch, classNameUnmatch, mediaQueryElement);
|
||
cpMedia.diag('options.unmatch(e, element, "' + classNameUnmatch + '", "' + classNameUnmatch + '", "' + mediaQueryElement + '")');
|
||
}
|
||
}
|
||
},
|
||
match: function (e, element) {
|
||
$(element).addClass(classNameMatch).removeClass(classNameUnmatch);
|
||
cpMedia.diag('$(element).addClass("' + classNameMatch + '").removeClass("' + classNameUnmatch + '"), mediaQuery: ' + mediaQueryElement);
|
||
if (options.match != null && typeof (options.match) === 'function') {
|
||
options.match(e, element, classNameMatch, classNameUnmatch, mediaQueryElement);
|
||
cpMedia.diag('options.match(e, element, "' + classNameMatch + '", "' + classNameUnmatch + '", "' + mediaQueryElement + '")');
|
||
}
|
||
},
|
||
unmatch: function (e, element) {
|
||
$(element).addClass(classNameUnmatch).removeClass(classNameMatch);
|
||
cpMedia.diag('$(element).removeClass("' + classNameMatch + '").addClass("' + classNameUnmatch + '"), mediaQuery: ' + mediaQueryElement);
|
||
if (options.unmatch != null && typeof (options.unmatch) === 'function') {
|
||
options.unmatch(e, element, classNameMatch, classNameUnmatch, mediaQueryElement);
|
||
cpMedia.diag('options.unmatch(e, element, "' + classNameUnmatch + '", "' + classNameUnmatch + '", " ' + mediaQueryElement + '")');
|
||
}
|
||
}
|
||
}, false);
|
||
}
|
||
|
||
function fireMediaElementQueriesOfChildren ($parent) {
|
||
var fireIndividualMediaQuery = function ($element) {
|
||
var rwdinfo = $element.data('rwdinfo');
|
||
for (var i = 0; i < rwdinfo.length; i++) {
|
||
window.cpMedia.fireQuery(rwdinfo[i].rawQuery);
|
||
}
|
||
};
|
||
|
||
$parent.find('*').hasData('rwdinfo').each(function () {
|
||
fireIndividualMediaQuery($(this));
|
||
});
|
||
if ($parent.hasData('rwdinfo').length == 1) {
|
||
fireIndividualMediaQuery($parent);
|
||
}
|
||
}
|
||
|
||
function fireAllMediaElementQueries() {
|
||
window.cpMedia.fire();
|
||
}
|
||
|
||
function matchMultiColumn(e, element, classNameMatch, classNameUnmatch, mediaQueryElement) {
|
||
$(element).find('div .row').addClass(classNameMatch);
|
||
if (classNameUnmatch != null)
|
||
$(element).find('div .row').removeClass(classNameUnmatch);
|
||
cpMedia.diag('$(' + element + ').find("div .row").addClass("' + classNameMatch + '"), mediaQuery: ' + mediaQueryElement);
|
||
}
|
||
|
||
function unmatchMultiColumn(e, element, classNameMatch, classNameUnmatch, mediaQueryElement) {
|
||
$(element).find('div .row').removeClass(classNameMatch);
|
||
if (classNameUnmatch != null)
|
||
$(element).find('div .row').addClass(classNameUnmatch);
|
||
cpMedia.diag('$(' + element + ').find("div .row").removeClass("' + classNameMatch + '"), mediaQuery: ' + mediaQueryElement);
|
||
}
|
||
|
||
function applyElementQueryToChildren ($parent) {
|
||
$parent.find("[data-elementquery]").each(function () {
|
||
var jsonQuery = $(this).data("elementquery");
|
||
if (jsonQuery != null && typeof(jsonQuery) === "object") {
|
||
var elementId = $(this).attr("id");
|
||
if (elementId == null || elementId == "") {
|
||
throw new Error("data-elementquery attribute can only by used on elements with unique id.");
|
||
}
|
||
if ($(this).parents('.megaMenu').length > 0 && !isResolvedOrState(window)) {
|
||
cpMedia.diag('#' + elementId + ' is inside megaMenu. MediaQuery: ' + $(this).attr("data-elementquery") + ' was not applied. Because the megaMenu has not been lazyLoaded');
|
||
return;
|
||
}
|
||
var options = {};
|
||
var matchFunction = $(this).data("elementquerymatch");
|
||
var unmatchFunction = $(this).data("elementqueryunmatch");
|
||
if (typeof matchFunction !== 'undefined' && matchFunction != '')
|
||
options.match = window[matchFunction];
|
||
if (typeof unmatchFunction !== 'undefined' && matchFunction != '')
|
||
options.unmatch = window[unmatchFunction];
|
||
for (var propertyName in jsonQuery) {
|
||
var mq = jsonQuery[propertyName];
|
||
mq = mq
|
||
.replace("max-", "this-max-")
|
||
.replace("min-", "this-min-")
|
||
.replace("below-", "this-below-")
|
||
.replace("above-", "this-above-");
|
||
var elementMediaQuery = "#" + elementId + ":media(" + mq + ")";
|
||
toggleClassMedia(propertyName, elementMediaQuery, options);
|
||
}
|
||
}
|
||
});
|
||
|
||
$parent.find("[data-elementqueryclasses]").each(function () {
|
||
var jsonQuery = $(this).data("elementqueryclasses");
|
||
if (jsonQuery != null && typeof (jsonQuery) === "object") {
|
||
var elementId = $(this).attr("id");
|
||
if (elementId == null || elementId == "") {
|
||
throw new Error("data-elementqueryclasses attribute can only by used on elements with unique id.");
|
||
}
|
||
if ($(this).parents('.megaMenu').length > 0 && !isResolvedOrState(window.Pages.megaMenuLoaded)) {
|
||
cpMedia.diag('#' + elementId + ' is inside megaMenu. MediaQuery: ' + $(this).attr("data-elementquery") + ' was not applied. Because the megaMenu has not been lazyLoaded');
|
||
return;
|
||
}
|
||
var options = {};
|
||
var matchFunction = $(this).data("elementquerymatch");
|
||
var unmatchFunction = $(this).data("elementqueryunmatch");
|
||
if (typeof matchFunction !== 'undefined' && matchFunction != '')
|
||
options.match = window[matchFunction];
|
||
if (typeof unmatchFunction !== 'undefined' && matchFunction != '')
|
||
options.unmatch = window[unmatchFunction];
|
||
for (var propertyName in jsonQuery) {
|
||
var mq = jsonQuery[propertyName];
|
||
mq = mq
|
||
.replace("max-", "this-max-")
|
||
.replace("min-", "this-min-")
|
||
.replace("below-", "this-below-")
|
||
.replace("above-", "this-above-");
|
||
var elementMediaQuery = "#" + elementId + ":media(" + mq + ")";
|
||
var propNameSplit = propertyName.split("-");
|
||
if (propNameSplit.length != 2)
|
||
throw new Error("data-elementqueryclasses attribute needs to have two classes separated by a dash (‘-‘)");
|
||
|
||
toggleClassesMedia(propNameSplit[0], propNameSplit[1], elementMediaQuery, options);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
$(function () {
|
||
$("[data-contentcontainerbreakpoint]").each(function () {
|
||
var $container = $(this);
|
||
var breakpoint = $container.data("contentcontainerbreakpoint");
|
||
if (breakpoint != null && typeof(breakpoint) === "number") {
|
||
var elementId = $container.attr("id");
|
||
if (elementId == null || elementId == "") {
|
||
throw new Error("data-contentcontainerbreakpoint attribute can only by used on elements with unique id.");
|
||
}
|
||
var elementMediaQueryOuter = "#" + elementId + ":media(this-min-width:" + breakpoint + "em)";
|
||
cpMedia.diag('register: ' + elementMediaQueryOuter);
|
||
cpMedia.register(elementMediaQueryOuter, {
|
||
setup: function () {
|
||
$container.children('div.row.outer').removeClass('wide');
|
||
cpMedia.diag('#' + elementId + ' div.row.outer .removeClass("wide")');
|
||
},
|
||
match: function (e, element) {
|
||
$(element).children('div.row.outer').addClass('wide');
|
||
cpMedia.diag('#' + elementId + ' div.row.outer .addClass("wide")');
|
||
},
|
||
unmatch: function (e, element) {
|
||
$(element).children('div.row.outer').removeClass('wide');
|
||
cpMedia.diag('#' + elementId + ' div.row.outer .removeClass("wide")');
|
||
}
|
||
});
|
||
|
||
var innerBreakpoint = Math.round(breakpoint / 2);
|
||
var elementMediaQueryInner = "#" + elementId + ":media(this-min-width:" + innerBreakpoint + "em)";
|
||
cpMedia.diag('register: ' + elementMediaQueryInner);
|
||
cpMedia.register(elementMediaQueryInner, {
|
||
setup: function () {
|
||
$container.find('div.row.nest').removeClass('wide');
|
||
cpMedia.diag('#' + elementId + ' div.row.nest .removeClass("wide")');
|
||
},
|
||
match: function (e, element) {
|
||
$(element).find('div.row.nest').addClass('wide');
|
||
cpMedia.diag('#' + elementId + ' div.row.nest .addClass("wide")');
|
||
},
|
||
unmatch: function (e, element) {
|
||
$(element).find('div.row.nest').removeClass('wide');
|
||
cpMedia.diag('#' + elementId + ' div.row.nest .removeClass("wide")');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
$("[data-ajaxinclude]").each(function () {
|
||
var jsonData = $(this).data("ajaxinclude");
|
||
if (jsonData != null && typeof (jsonData) === "object") {
|
||
var $div = $(this);
|
||
var elementId = $(this).attr("id");
|
||
if (elementId == null || elementId == "") {
|
||
throw new Error("data-ajaxinclude attribute can only by used on elements with unique id.");
|
||
}
|
||
var url = jsonData.url;
|
||
var query = jsonData.query;
|
||
cpMedia.register(query, {
|
||
setup: function () {
|
||
cpMedia.diag('div setup init');
|
||
AJAX(url, "GET", null, function (response) {
|
||
var $newContent = $(response);
|
||
/*$div.replaceWith($newContent); //1.) replace content with the div with ajax-include pattern
|
||
$div = $newContent;
|
||
$div.show();*/
|
||
$div.append($newContent); //2.) append content in the div with ajax-include pattern
|
||
console.log('div setup done');
|
||
}, false);
|
||
},
|
||
deferSetup: true,
|
||
match: function () {
|
||
$div.show();
|
||
cpMedia.diag('div show');
|
||
},
|
||
unmatch: function () {
|
||
$div.hide();
|
||
cpMedia.diag('div hide');
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
applyElementQueryToChildren($('body'));
|
||
|
||
//Setup execution of functions when resizing
|
||
window.Pages = window.Pages || {};
|
||
window.Pages.onResizeHandlers = window.Pages.onResizeHandlers || [];
|
||
if (!window.isRemoveSetHeights) {
|
||
window.Pages.onResizeHandlers.push(SetHeights);
|
||
}
|
||
if (typeof window.dynamicStretchContainers === 'function')
|
||
window.Pages.onResizeHandlers.push(window.dynamicStretchContainers);
|
||
|
||
if ($('#hdnWidgetManager').length == 0 && typeof rearrangeFlyoutsOnResizeEvents === 'function')
|
||
window.Pages.onResizeHandlers.push(rearrangeFlyoutsOnResizeEvents);
|
||
|
||
window.Pages.onResizeHandlersExecute = window.Pages.onResizeHandlersExecute || function () {
|
||
for (var i = 0; i < window.Pages.onResizeHandlers.length; i++) {
|
||
if (typeof (window.Pages.onResizeHandlers[i]) === 'function') {
|
||
window.Pages.onResizeHandlers[i]();
|
||
}
|
||
}
|
||
};
|
||
|
||
var timeout = 250; //time out to debounce execution of resize events
|
||
function executeOnResizeEvents(event) {
|
||
var timer;
|
||
|
||
window.addEventListener(event, function (e) {
|
||
timer && clearTimeout(timer);
|
||
|
||
timer = setTimeout(function () {
|
||
window.Pages.onResizeHandlersExecute();
|
||
}, timeout);
|
||
}, false);
|
||
}
|
||
executeOnResizeEvents('resize');
|
||
executeOnResizeEvents('orientationChange');
|
||
|
||
$.when(window.Pages.rwdReady.resolve()).done(function () {
|
||
window.Pages.rwdSetupComplete.resolve();
|
||
});
|
||
});
|