jquery - Javascript works before turned into a wordpress template -
so tested theme static html/css/js before turning wordpress theme , worked perfectly. it's on wordpress it's throwing error in js file (line 593):
uncaught typeerror: cannot set property 'mynode' of undefined
directly after line
//add data mindmap var root = $('body>ul>li').get(0).mynode = $('body').addrootnode($('body>ul>li>a').text(), {
here full js. haven't changed since uploading , making theme wordpress.
it came here: https://github.com/kennethkufluk/js-mindmap
any ideas? new js/jquery still :) thanks!!!
(function ($) { 'use strict'; var timeout = 4, // movement timeout in seconds centre_force = 3, // strength of attraction centre active node node, line; // define node related functions. node = function (obj, name, parent, opts) { this.obj = obj; this.options = obj.options; this.name = name; this.href = opts.href; if(opts.url) { this.url = opts.url; } // create element display this.el = $('<a href="' + this.href + '">' + this.name + '</a>').addclass('node'); $('body').prepend(this.el); if(!parent) { obj.activenode = this; this.el.addclass('active root'); } else { obj.lines[obj.lines.length] = new line(obj, this, parent); } this.parent = parent; this.children = []; if(this.parent) { this.parent.children.push(this); } // animation handling this.moving = false; this.movetimer = 0; this.obj.movementstopped = false; this.visible = true; this.x = 1; this.y = 1; this.dx = 0; this.dy = 0; this.hasposition = false; this.content = []; // array of content elements display onclick; this.el.css('position', 'absolute'); var thisnode = this; this.el.draggable({ drag: function () { obj.root.animatetostatic(); } }); this.el.click(function () { if(obj.activenode) { obj.activenode.el.removeclass('active'); if(obj.activenode.parent) { obj.activenode.parent.el.removeclass('activeparent'); } } if(typeof opts.onclick === 'function') { opts.onclick(thisnode); } obj.activenode = thisnode; obj.activenode.el.addclass('active'); if(obj.activenode.parent) { obj.activenode.parent.el.addclass('activeparent'); } obj.root.animatetostatic(); return false; }); }; // root node only: control animation loop node.prototype.animatetostatic = function () { cleartimeout(this.movetimer); // stop movement after time var thisnode = this; this.movetimer = settimeout(function () { //stop movement thisnode.obj.movementstopped = true; }, timeout * 1000); if(this.moving) { return; } this.moving = true; this.obj.movementstopped = false; this.animateloop(); }; // root node only: animate nodes (calls recursively) node.prototype.animateloop = function () { var i, len, mynode = this; this.obj.canvas.clear(); for(i = 0, len = this.obj.lines.length; < len; i++) { this.obj.lines[i].updateposition(); } if(this.findequilibrium() || this.obj.movementstopped) { this.moving = false; return; } settimeout(function () { mynode.animateloop(); }, 10); }; // find right position node node.prototype.findequilibrium = function () { var i, len, stable = true; stable = this.display() && stable; for(i = 0, len = this.children.length; < len; i++) { stable = this.children[i].findequilibrium() && stable; } return stable; }; //display node, , children node.prototype.display = function (depth) { var parent = this, stepangle, angle; depth = depth || 0; if(this.visible) { // if: i'm not active , parent's not active , children aren't active ... if(this.obj.activenode !== && this.obj.activenode !== this.parent && this.obj.activenode.parent !== this) { // todo hide me! this.el.hide(); this.visible = false; } } else { if(this.obj.activenode === || this.obj.activenode === this.parent || this.obj.activenode.parent === this) { this.el.show(); this.visible = true; } } this.drawn = true; // positioned? if not, position me. if(!this.hasposition) { this.x = this.options.maparea.x / 2; this.y = this.options.maparea.y / 2; this.el.css({ 'left': this.x + "px", 'top': this.y + "px" }); this.hasposition = true; } // children positioned? if not, lay out children around me stepangle = math.pi * 2 / this.children.length; $.each(this.children, function (index) { if(!this.hasposition) { if(!this.options.showprogressive || depth <= 1) { angle = index * stepangle; this.x = (50 * math.cos(angle)) + parent.x; this.y = (50 * math.sin(angle)) + parent.y; this.hasposition = true; this.el.css({ 'left': this.x + "px", 'top': this.y + "px" }); } } }); // update position return this.updateposition(); }; // updateposition returns boolean stating whether it's been static node.prototype.updateposition = function () { var forces, showx, showy; if(this.el.hasclass("ui-draggable-dragging")) { this.x = parseint(this.el.css('left'), 10) + (this.el.width() / 2); this.y = parseint(this.el.css('top'), 10) + (this.el.height() / 2); this.dx = 0; this.dy = 0; return false; } //apply accelerations forces = this.getforcevector(); this.dx += forces.x * this.options.timeperiod; this.dy += forces.y * this.options.timeperiod; // damp forces this.dx = this.dx * this.options.damping; this.dy = this.dy * this.options.damping; //add minimum speeds if(math.abs(this.dx) < this.options.minspeed) { this.dx = 0; } if(math.abs(this.dy) < this.options.minspeed) { this.dy = 0; } if(math.abs(this.dx) + math.abs(this.dy) === 0) { return true; } //apply velocity vector this.x += this.dx * this.options.timeperiod; this.y += this.dy * this.options.timeperiod; this.x = math.min(this.options.maparea.x, math.max(1, this.x)); this.y = math.min(this.options.maparea.y, math.max(1, this.y)); // display showx = this.x - (this.el.width() / 2); showy = this.y - (this.el.height() / 2) - 10; this.el.css({ 'left': showx + "px", 'top': showy + "px" }); return false; }; node.prototype.getforcevector = function () { var i, x1, y1, xsign, dist, theta, f, xdist, rightdist, bottomdist, otherend, fx = 0, fy = 0, nodes = this.obj.nodes, lines = this.obj.lines; // calculate repulsive force every other node for(i = 0; < nodes.length; i++) { if(nodes[i] === this) { continue; } if(!nodes[i].visible) { continue; } // repulsive force (coulomb's law) x1 = (nodes[i].x - this.x); y1 = (nodes[i].y - this.y); //adjust variable node size // var nodewidths = (($(nodes[i]).width() + this.el.width())/2); dist = math.sqrt((x1 * x1) + (y1 * y1)); // var myrepulse = this.options.repulse; // if (this.parent==nodes[i]) myrepulse=myrepulse*10; //parents stand further away if(math.abs(dist) < 500) { if(x1 === 0) { theta = math.pi / 2; xsign = 0; } else { theta = math.atan(y1 / x1); xsign = x1 / math.abs(x1); } // force based on radial distance f = (this.options.repulse * 500) / (dist * dist); fx += -f * math.cos(theta) * xsign; fy += -f * math.sin(theta) * xsign; } } // add repulsive force of "walls" //left wall xdist = this.x + this.el.width(); f = (this.options.wallrepulse * 500) / (xdist * xdist); fx += math.min(2, f); //right wall rightdist = (this.options.maparea.x - xdist); f = -(this.options.wallrepulse * 500) / (rightdist * rightdist); fx += math.max(-2, f); //top wall f = (this.options.wallrepulse * 500) / (this.y * this.y); fy += math.min(2, f); //bottom wall bottomdist = (this.options.maparea.y - this.y); f = -(this.options.wallrepulse * 500) / (bottomdist * bottomdist); fy += math.max(-2, f); // each line, of i'm part, add attractive force. for(i = 0; < lines.length; i++) { otherend = null; if(lines[i].start === this) { otherend = lines[i].end; } else if(lines[i].end === this) { otherend = lines[i].start; } else { continue; } // ignore pull of hidden nodes if(!otherend.visible) { continue; } // attractive force (hooke's law) x1 = (otherend.x - this.x); y1 = (otherend.y - this.y); dist = math.sqrt((x1 * x1) + (y1 * y1)); if(math.abs(dist) > 0) { if(x1 === 0) { theta = math.pi / 2; xsign = 0; } else { theta = math.atan(y1 / x1); xsign = x1 / math.abs(x1); } // force based on radial distance f = (this.options.attract * dist) / 10000; fx += f * math.cos(theta) * xsign; fy += f * math.sin(theta) * xsign; } } // if i'm active, attract me centre of area if(this.obj.activenode === this) { // attractive force (hooke's law) otherend = this.options.maparea; x1 = ((otherend.x / 2) - this.options.centreoffset - this.x); y1 = ((otherend.y / 2) - this.y); dist = math.sqrt((x1 * x1) + (y1 * y1)); if(math.abs(dist) > 0) { if(x1 === 0) { theta = math.pi / 2; xsign = 0; } else { xsign = x1 / math.abs(x1); theta = math.atan(y1 / x1); } // force based on radial distance f = (0.1 * this.options.attract * dist * centre_force) / 1000; fx += f * math.cos(theta) * xsign; fy += f * math.sin(theta) * xsign; } } if(math.abs(fx) > this.options.maxforce) { fx = this.options.maxforce * (fx / math.abs(fx)); } if(math.abs(fy) > this.options.maxforce) { fy = this.options.maxforce * (fy / math.abs(fy)); } return { x: fx, y: fy }; }; node.prototype.removenode = function () { var i, oldnodes = this.obj.nodes, oldlines = this.obj.lines; for(i = 0; < this.children.length; i++) { this.children[i].removenode(); } this.obj.nodes = []; for(i = 0; < oldnodes.length; i++) { if(oldnodes[i] === this) { continue; } this.obj.nodes.push(oldnodes[i]); } this.obj.lines = []; for(i = 0; < oldlines.length; i++) { if(oldlines[i].start === this) { continue; } else if(oldlines[i].end === this) { continue; } this.obj.lines.push(oldlines[i]); } this.el.remove(); }; // define line related functions. line = function (obj, startnode, endnode) { this.obj = obj; this.options = obj.options; this.start = startnode; this.colour = "blue"; this.size = "thick"; this.end = endnode; }; line.prototype.updateposition = function () { if(!this.options.showsublines && (!this.start.visible || !this.end.visible)) { return; } this.size = (this.start.visible && this.end.visible) ? "thick" : "thin"; this.color = (this.obj.activenode.parent === this.start || this.obj.activenode.parent === this.end) ? "red" : "blue"; this.strokestyle = "#fff"; this.obj.canvas.path("m" + this.start.x + ' ' + this.start.y + "l" + this.end.x + ' ' + this.end.y).attr({ 'stroke': this.strokestyle, 'opacity': 0.2, 'stroke-width': '5px' }); }; $.fn.addnode = function (parent, name, options) { var obj = this[0], node = obj.nodes[obj.nodes.length] = new node(obj, name, parent, options); console.log(obj.root); obj.root.animatetostatic(); return node; }; $.fn.addrootnode = function (name, opts) { var node = this[0].nodes[0] = new node(this[0], name, null, opts); this[0].root = node; return node; }; $.fn.removenode = function (name) { return this.each(function () { // if (!!this.mindmapinit) return false; //remove node matching anme // alert(name+' removed'); }); }; $.fn.mindmap = function (options) { // define default settings. options = $.extend({ attract: 15, repulse: 6, damping: 0.55, timeperiod: 10, wallrepulse: 0.4, maparea: { x: -1, y: -1 }, canvaserror: 'alert', minspeed: 0.05, maxforce: 0.1, showsublines: false, updateiterationcount: 20, showprogressive: true, centreoffset: 0, timer: 0 }, options); var $window = $(window); return this.each(function () { var mindmap = this; this.mindmapinit = true; this.nodes = []; this.lines = []; this.activenode = null; this.options = options; this.animatetostatic = function () { this.root.animatetostatic(); }; $window.resize(function () { mindmap.animatetostatic(); }); //canvas if(options.maparea.x === -1) { options.maparea.x = $window.width(); } if(options.maparea.y === -1) { options.maparea.y = $window.height(); } //create drawing area this.canvas = raphael(0, 0, options.maparea.x, options.maparea.y); // add class object, styles can applied $(this).addclass('js-mindmap-active'); // add keyboard support (thanks wadefs) $(this).keyup(function (event) { var newnode, i, activeparent = mindmap.activenode.parent; switch(event.which) { case 33: // pgup case 38: // up, move parent if(activeparent) { activeparent.el.click(); } break; case 13: // enter (change insert sibling) case 34: // pgdn case 40: // down, move first child if(mindmap.activenode.children.length) { mindmap.activenode.children[0].el.click(); } break; case 37: // left, move previous sibling if(activeparent) { newnode = null; if(activeparent.children[0] === mindmap.activenode) { newnode = activeparent.children[activeparent.children.length - 1]; } else { for(i = 1; < activeparent.children.length; i++) { if(activeparent.children[i] === mindmap.activenode) { newnode = activeparent.children[i - 1]; } } } if(newnode) { newnode.el.click(); } } break; case 39: // right, move next sibling if(activeparent) { newnode = null; if(activeparent.children[activeparent.children.length - 1] === mindmap.activenode) { newnode = activeparent.children[0]; } else { for(i = activeparent.children.length - 2; >= 0; i--) { if(activeparent.children[i] === mindmap.activenode) { newnode = activeparent.children[i + 1]; } } } if(newnode) { newnode.el.click(); } } break; case 45: // ins, insert child break; case 46: // del, delete node break; case 27: // esc, cancel insert break; case 83: // 's', save break; } return false; }); }); }; }(jquery)); // load mindmap $(document).ready(function () { // enable mindmap in body $('body').mindmap(); // add data mindmap var root = $('body>ul>li').get(0).mynode = $('body').addrootnode($('body>ul>li>a').text(), { href: '/', url: '/', onclick: function (node) { $(node.obj.activenode.content).each(function () { this.hide(); }); } }); $('body>ul>li').hide(); var addli = function () { var parentnode = $(this).parents('li').get(0); if(typeof (parentnode) == 'undefined') parentnode = root; else parentnode = parentnode.mynode; this.mynode = $('body').addnode(parentnode, $('a:eq(0)', this).text(), { // href:$('a:eq(0)',this).text().tolowercase(), href: $('a:eq(0)', this).attr('href'), onclick: function (node) { $(node.obj.activenode.content).each(function () { this.hide(); }); $(node.content).each(function () { this.show(); }); } }); $(this).hide(); $('>ul>li', this).each(addli); }; $('body>ul>li>ul').each(function () { $('>li', this).each(addli); }); }); /*jslint devel: true, browser: true, continue: true, plusplus: true, indent: 2 */
Comments
Post a Comment