I use jquery-style-switcher.js for changing style of some elements. When I click on the colors style of page doesn't change and in source of this page added this classjssError error level0 to ul tag that contain colors. This codes worked in HTML page but in CMS no!
I debug this js file by chrome and understand that When this js file on the general html file runed : an event call it addClickEvents executed but in my website that used this template for skin of website : addClickEvents function don't executed. Function that call addClickEvents is init function
init: function ($root, config) {
this.$root = $root;
this.config = config ? config : {};
this.setDefaultTheme();
if(this.defaultTheme) {
// try cookies
if (this.config.cookie) {
this.checkCookie();
}
// try hover
if (this.config.hasPreview) {
this.addHoverEvents();
}
// finally, add click events
this.addClickEvents();
} else {
this.$root.addClass('jssError error level0');
}
}
In this function(init) : defaultTheme value is undefined !!!!
Why defaultTheme is undefined ? if you can answer this question , The problem will be solved.
jquery-style-switcher.js :
(function ($) {
var jStyleSwitcher,
_defaultOptions = {
hasPreview: true,
defaultThemeId: 'jssDefault',
fullPath: 'css/',
cookie: {
expires: 30,
isManagingLoad: true
}
},
// private
_cookieKey = 'jss_selected',
_docCookies = {};
/*\
|*|
|*| :: cookies.js ::
|*|
|*| A complete cookies reader/writer framework with full unicode support.
|*|
|*| revision #1
|*|
|*| https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
|*|
|*| This framework is released under the GNU Public License, version 3 or later.
|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
|*| Syntaxes:
|*|
|*| * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
|*| * docCookies.getItem(name)
|*| * docCookies.removeItem(name[, path[, domain]])
|*| * docCookies.hasItem(name)
|*| * docCookies.keys()
|*|
\*/
_docCookies = {
getItem: function (sKey) {
if (!sKey) {
return null;
}
return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
},
setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) {
return false;
}
var sExpires = "";
if (vEnd) {
switch (vEnd.constructor) {
case Number:
sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
break;
case String:
sExpires = "; expires=" + vEnd;
break;
case Date:
sExpires = "; expires=" + vEnd.toUTCString();
break;
}
}
document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
return true;
},
removeItem: function (sKey, sPath, sDomain) {
if (!this.hasItem(sKey)) {
return false;
}
document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
return true;
},
hasItem: function (sKey) {
if (!sKey) {
return false;
}
return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
},
keys: function () {
var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) {
aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]);
}
return aKeys;
}
};
jStyleSwitcher = function ($root, config) {
return this.init($root, config);
};
jStyleSwitcher.prototype = {
/**
* {Object} DOM reference to style option list
*/
$root: null,
/**
* {Object} configs for the style switcher
*/
config: {},
/**
* {Object} jQuery reference to <link> tag for swapping CSS
*/
$themeCss: null,
/**
* {String} default theme page was loaded with
*/
defaultTheme: null,
init: function ($root, config) {
this.$root = $root;
this.config = config ? config : {};
this.setDefaultTheme();
if(this.defaultTheme) {
// try cookies
if (this.config.cookie) {
this.checkCookie();
}
// try hover
if (this.config.hasPreview) {
this.addHoverEvents();
}
// finally, add click events
this.addClickEvents();
} else {
this.$root.addClass('jssError error level0');
}
},
setDefaultTheme: function () {
this.$themeCss = $('link[id=' + this.config.defaultThemeId + ']');
if(this.$themeCss.length) {
this.defaultTheme = this.$themeCss.attr('href');
}
},
resetStyle: function() {
this.updateStyle(this.defaultTheme);
},
updateStyle: function(newStyle) {
this.$themeCss.attr('href', newStyle);
},
getFullAssetPath: function(asset) {
return this.config.fullPath + asset + '.css';
},
checkCookie: function () {
var styleCookie;
// if using cookies and using JavaScript to load css
if (this.config.cookie && this.config.cookie.isManagingLoad) {
// check if css is set in cookie
styleCookie = _docCookies.getItem(_cookieKey);
if (styleCookie) {
newStyle = this.getFullAssetPath(styleCookie);
// update link tag
this.updateStyle(newStyle);
// update default ref
this.defaultTheme = newStyle;
}
}
},
addHoverEvents: function () {
var self = this;
this.$root.find('a').hover(
function () {
var asset = $(this).data('theme'),
newStyle = self.getFullAssetPath(asset);
// update link tag
self.updateStyle(newStyle);
},
function () {
// reset link tag
self.resetStyle();
}
);
},
addClickEvents: function () {
var self = this;
this.$root.find('a').click(
function () {
var asset = $(this).data('theme'),
newStyle = self.getFullAssetPath(asset);
// update link tag
self.updateStyle(newStyle);
// update default ref
self.defaultTheme = newStyle;
// try to store cookie
if (self.config.cookie) {
_docCookies.setItem(_cookieKey, asset, self.config.cookie.expires, '/');
}
}
);
}
};
$.fn.styleSwitcher = function (options) {
return new jStyleSwitcher(this, $.extend(true, _defaultOptions, options));
};
})(jQuery);
HTML of this section in my page :
<div id="colour-variations">
<a class="option-toggle"><i class="icon-gear"></i></a>
<h3>Preset Colors</h3>
<ul class="jssError error level0">
<li><a href="javascript: void(0);" data-theme="style"></a></li>
<li><a href="javascript: void(0);" data-theme="pink"></a></li>
<li><a href="javascript: void(0);" data-theme="blue"></a></li>
<li><a href="javascript: void(0);" data-theme="turquoise"></a></li>
<li><a href="javascript: void(0);" data-theme="orange"></a></li>
<li><a href="javascript: void(0);" data-theme="lightblue"></a></li>
<li><a href="javascript: void(0);" data-theme="brown"></a></li>
<li><a href="javascript: void(0);" data-theme="green"></a></li>
</ul>
</div>
You can see template that is general website. I use this template in skin for dotnetnuke7 and this problem appeared.
