We Keep Coding

Javascript causes multiple syntax errors on MS Edge only

if (!slideOutObserver && doc.querySelector('.slide-out-cms')) {
mutObv.observe(doc.querySelector('.slide-out-cms'), { attributeFilter: ['class'] });
slideOutObserver = true;
}
The console error is as follows: script5022: SyntxError
Which I click on and it takes me to the above code
Any ideas or workarounds?
Entire script if needed, in this script we are showing the user a cookie consent message, which overlaps some fixed elements on the page. We are doing some other things to reposition and slide things up and down based on what elements are visible:
// On document ready
$(function() {
var cookieAckId = 'cookie-acknowledgment',
pureCloudId = 'chatTrigger',
slideOutClass = 'slide-out-cms.show',
mobileContinue = 'fixed-button-container',
slideOutObserver = false,
consentText = 'This site uses essential cookies to function correctly. For more detailed information, please see our privacy policy. By continuing to use this website you consent to our use of cookies.',
mutObv;
//If the user closes/accepts the acknowledgment
function closeAck() {
// Remove the Acknowledgment from the page and shift floaters back
$('#' + cookieAckId).slideUp().queue(function() {
$(this).remove();
repositionFloaters();
});
//Kill Mutation Observer
mutObv.disconnect();
//Kill the resize listener
$(root).off('resize', repositionFloaters);
//set cookie
var d = new Date;
d.setFullYear(d.getFullYear() + 2);
$.cookie('acceptedGdprCookies', 'true', {
path: '/',
domain: '.' + browser.getDomain(),
expires: d,
});
}
// floaters are there, let's alter their position!
function repositionFloaters() {
var $cookieAck = $('#' + cookieAckId),
cookieAckHeight = 0,
$pureCloud = $('#' + pureCloudId),
$slideOut = $('.' + slideOutClass),
$mobileContinue = $('.' + mobileContinue);
if (!slideOutObserver && doc.querySelector('.slide-out-cms')) {
mutObv.observe(doc.querySelector('.slide-out-cms'), { attributeFilter: ['class'] });
slideOutObserver = true;
}
// If cookie Acknowledgment exists, grab it's height
if ($cookieAck.length) {
cookieAckHeight = $cookieAck.outerHeight();
}
// Shift up Purecloud and Slide Out if they exist
[$pureCloud, $slideOut, $mobileContinue].forEach(function($item) {
if ($item.length) {
$item.css('transform', 'translateY(-' + cookieAckHeight + 'px)');
}
});
// If both Slideout and purecloud exist, stop trying to observe for their addition
if ($pureCloud.length && $slideOut.length && cookieAckHeight > 0) {
mutObv.disconnect();
}
}
// Create the Cookie Acknowledgment
var $cookieAck = $('<div id="' + cookieAckId + '"><div class="relative"><div class="ca-text col-xs-12"><span>' + consentText + '</span><div class="ca-accept"></div></div></div>'),
$acceptBtn = $('<button class="ca-accept-btn b">ACCEPT</button>').on('click', closeAck),
$closeBtn = $('<span class="ca-close-btn icon-closepositive"></span>').on('click', closeAck);
$cookieAck.append($closeBtn);
$cookieAck.find('.ca-accept').append($acceptBtn);
$('body').append($cookieAck);
// Create Mutation Observer to watch for Purecloud and Slideout being added to the page
mutObv = new MutationObserver(repositionFloaters);
mutObv.observe(doc.body, { childList: true });
// Add Listener if the page is resized
$(root).on('resize', repositionFloaters);
// Upon creating of Cookie Acknowledgment element, try to shift floaters
repositionFloaters();
});

If anyone is happens to need the answer for this, I finally solved it!
MS Edge does not like the mutation observer without the argument attributes: true.
So the correct code would look like this:
if (!slideOutObserver && doc.querySelector('.slide-out-cms')) {
mutObv.observe(doc.querySelector('.slide-out-cms'), {
attributes: true,
attributeFilter: ['class']
});
}

Transforming old code to ember component

currently i'm starting with Ember, and i'm loving it! I'm with some difficulties, especially when it comes to components.
For you to understand, I'm going through old code to Ember, and I would like to turn this code into a Component, but I do not know actually how to start, since I do not know how to catch the button being clicked, and I also realized that Ember has several helpers, maybe I do not need any of this giant code to do what I want.
This is the old code result: http://codepen.io/anon/pen/WQjobV?editors=110
var eventObj = {};
var eventInstances = {};
var actual;
var others;
var clicked;
var createEventInstance = function (obj) {
for (var key in obj) {
eventInstances[key] = new Event(obj[key]);
}
};
var returnStyle = function (inCommon) {
var $inCommon = inCommon;
$inCommon.css({
width: '342.4px',
minWidth: '342.4px'
});
$inCommon.find('.cta').removeClass('hidden');
$inCommon.find('.event-close').removeClass('inline');
$inCommon.find('.event-info_list').removeClass('inline');
$inCommon.removeClass('hidden');
$inCommon.find('.expanded').slideUp();
$inCommon.find('.expanded').slideUp();
$inCommon.find('.event-arrow').remove();
$inCommon.find('h2').find('ul').remove('ul');
};
var Event = function (id) {
this.id = id;
};
Event.prototype.expandForm = function () {
actual.css('width', '100%');
actual.find('.event-info_list').addClass('inline');
actual.find('.expanded').slideDown().css('display', 'block');
actual.find('.event-close').addClass('inline');
};
Event.prototype.close = function () {
returnStyle(actual);
returnStyle(others);
};
Event.prototype.hideElements = function () {
clicked.addClass('hidden');
others.addClass('hidden');
};
Event.prototype.maskPhone = function () {
$('[name$=phone]').mask('(99) 99999-9999', {
placeholder: '(00) 0000-0000'
});
};
$('.submit-form').on('click', function (e) {
e.preventDefault();
var id = '.' + $(this).data('id');
var name = $(id).children('#person-name').val();
var email = $(id).children('#person-email').val();
var guests = $(id).children('#person-obs.guests').val();
var phone = $(id).children('#person-phone').val();
var participants = $(id).children('#booking-participants').val();
if (name === '' || email === '' || phone === '' || participants === '' || guests === '') {
alert('Preencha os campos obrigatórios.');
} else {
$(id).submit();
}
});
Event.prototype.createDropDown = function () {
actual.find('h2').addClass('event-change')
.append('<span class="event-arrow" aria-hidden="true">▼</span>')
.append(function () {
var self = $(this);
var list = '<ul class="dropdown hidden">';
$('.event').each(function (index) {
if ($(this).find('h2')[0] != self[0]) {
list += '<li data-index="' + index + '">' + $(this).find('h2').text() + '</li>';
}
});
return list;
}).click(function () {
if ($(this).attr('data-expanded') == true) {
$(this).find('ul').toggleClass('hidden');
$(this).attr('data-expanded', false);
} else {
$(this).find('ul').toggleClass('hidden');
$(this).attr('data-expanded', true);
}
}).find('li').click(function (e) {
e.stopPropagation();
actual.find('.event-info_list').removeClass('inline');
actual.find('h2').attr('data-expanded', false);
actual.find('h2').removeClass('event-change');
actual.find('.expanded').slideUp().css('display', 'inline-block');
others.removeClass('hidden');
actual.find('.cta').removeClass('hidden');
actual.find('h2').find('.event-arrow').remove();
actual.find('h2').off('click');
actual.find('h2').find('ul').remove('ul');
$($('.event')[$(this).attr('data-index')]).find('.cta').trigger('click');
});
};
Event.prototype.open = function () {
actual = $('[data-id="' + this.id + '"]');
others = $('.event').not(actual);
clicked = actual.find('.cta');
this.hideElements();
this.expandForm();
this.createDropDown();
this.maskPhone();
};
$('.event').each(function (i, event) {
var prop = 'id' + $(event).data('id');
var value = $(event).data('id');
eventObj[prop] = value;
});
createEventInstance(eventObj);
Basically i have this boxes, which box represent one booking in some event (will be populate by the server). When the user clicks in one box, this boxes expands and the other disappear. But than a dropbox will be created with the other boxes, so the user can navigate in the events by this dropdown.
I didn't do much with Ember, i transform the "events" div into a component with the name "BookingBoxComponent" and two actions:
SiteApp.BookingBoxComponent = Ember.Component.extend({
actions:
open: function() {
// HOW COULD I ACCESS THE CLICKED BUTTON HERE?
},
close: function() {
}
});
As you can see, i put two actions, one for opening the box and other for closing, should i just put the logic in both, or i can improve this like a Ember way?
I don't know if i am asking to much here, so if i am, at least i would like to know how to access the button clicked in the open method, i was trying passing as a parameter, like:
<button {{action 'open' this}}></button>
But didn't work.
I could offer 50 of my points to someone who help transform the old cold in a Ember way code.
Thanks.

The event object will be passed with every action as the last parameter, so when you specified this you were actually passing whatever object has context in that block. In your open function, do not pass this and do
open: function(event) {
// event.currentTarget would be the button
}
And now you can do something like event.currentTarget or event.target

Kendo UI Tooltip Will Sometimes Remain Visible When it should Disappear

I have been playing around with this for quite some time, and I do not know what is wrong. When I have a few links in a row, and keep fluttering my mouse cursor over them quickly every so often a tooltip will remain visible when it should go away (it is visible even after the cursor is no longer on the link).
I believe my code is logically valid, can someone else see if they know why a tooltip here and there would remain visible?
For a link of this type:
Link
Here is the code:
function tooltip(e) {
var ticketType = j$(e).data("ticket-type");
var ticketID = j$(e).data("ticket-id");
j$.post("/Some/Url/", { "ticketID":ticketID, "ticketType":ticketType },
function(r) {
var title = r["tt"];
var tooltip = j$(e).kendoTooltip( { content: title, position: "top" } ).data("kendoTooltip");
}).always(function() {
if (j$(e).is(":hover")) { j$(e).data("kendoTooltip").show(); }
else { j$(e).data("kendoTooltip").hide(); }
});
j$(e).hover(function() {},
// Handler for when the pointer is leaving an element
function(e) {
if (j$(e.target).data("kendoTooltip") != undefined) {
j$(e.target).data("kendoTooltip").hide();
.log(e.target.innerHTML + ": was hidden.");
}
}
);
}

I think the problem is that sometimes you mouseout before ajax post returns, therefore the tooltip is shown after you leave a link. As well as hiding on mouseout, how about setting a data attribute on the target link so that the AJAX return can check the attribute before showing the tooltip:
function tooltip(e) {
j$(e).data("hover", "true"); //turn on hover data-attribute
var ticketType = j$(e).data("ticket-type");
var ticketID = j$(e).data("ticket-id");
j$.post("/Some/Url/", { "ticketID":ticketID, "ticketType":ticketType },
function(r) {
var title = r["tt"];
var tooltip = j$(e).kendoTooltip( { content: title, position: "top" } ).data("kendoTooltip");
}).always(function() {
if (j$(e).data("hover") == "true") { j$(e).data("kendoTooltip").show(); }
else { j$(e).data("kendoTooltip").hide(); }
});
j$(e).hover(function() {},
// Handler for when the pointer is leaving an element
function(e) {
j$(e).data("hover", "false"); //turn offhover data-attribute
if (j$(e.target).data("kendoTooltip") != undefined) {
j$(e.target).data("kendoTooltip").hide();
.log(e.target.innerHTML + ": was hidden.");
}
}
);
}
DEMO
NOTE: demo uses a setTimeout to fake an ajax call

My Javascript functions aren't working when adding more than 9 elements

I have this page developed for listing people out. When you click on their names I have another section built out to hold the content of that individual. It has been working fine, but now I have a need to add more than 9 people to the list.
When Adding the 10th element you can no longer click the name on the left and load the correct persons information. It is selected and jumps to the #1 element. I have provided the code below and a link to the page on https://github.com/supasmo/Management-Testing.
I need help with correcting this problem so it can take on as many people as I need to add to the list. Thanks in Advance for any suggestions.
JS
management = {
debug: true,
defaultItem: 1,
currentItem: 0,
bios: ".bios .bio",
bio: "#bio",
manager: ".managers div.bio",
managerLinks: ".managers a",
topLinks: ".bio a.top",
paging: ".bio .paging",
bioNames: ".bio h1",
yellowArrowSrc: "public/assets/common/arrow-link.png",
blueArrowSrc: "public/assets/common/arrow-link-blue.png",
init: function() {
this.log("management.init()");
// count bios
this.bioCount = $(this.bios).length;
this.log("Found " + this.bioCount + " bios.");
// hide bios, names and "top" links, show paging links
$(this.bios).hide();
$(this.topLinks).hide();
$(this.bioNames).hide();
$(this.paging).show();
// show default item
this.showItem(this.defaultItem);
// adjust bio links
$(this.managerLinks).click(function(e) {
e.preventDefault();
management.linkClick($(this).parent());
});
// enable next and prev clicks
$(this.paging + " .next").css("cursor", "pointer").click(function() {
management.nextClick();
});
$(this.paging + " .prev").css("cursor", "pointer").click(function() {
management.prevClick();
});
},
prevClick: function() {
this.log("prevClick()");
newItem = this.currentItem - 1;
if (newItem < 1) {
newItem = this.bioCount;
}
this.showItem(newItem);
},
nextClick: function() {
this.log("nextClick()");
newItem = this.currentItem + 1;
if (newItem > this.bioCount) {
newItem = 1;
}
this.showItem(newItem);
},
linkClick: function(which) {
this.showItem(which.attr("class").substr(3, 1));
},
showItem: function(which) {
this.log("showItem(" + which + ")");
if (which == this.currentItem) {
this.log("--> aborted: item is already showing");
} else {
$(this.bio + this.currentItem).hide();
$(this.bio + which).show();
$(this.manager).removeClass("current");
$(this.manager + which).addClass("current");
$(this.manager + " img.arrow").attr("src", this.yellowArrowSrc);
$(this.manager + which + " img.arrow").attr("src", this.blueArrowSrc);
this.currentItem = which;
}
},
log: function(message) {
if (this.debug) {
console.log(message);
}
},
// ===== End of Object =====
endOfObject: 1
}
$(document).ready(function() {
management.init();
});

this.showItem(which.attr("class").substr(3, 1));
This part doesn’t work for more than one digit, and is just not the right way to do that in general, since the order of classes in class is not supposed to matter. At the very least, you should use a data attribute:
<div class="bio" data-bio="10">
this.showItem(which.data("bio"));
If you want to be substringy, though, you’ve got a perfectly good link:
// adjust bio links
$(this.managerLinks).click(function(e) {
management.linkClick(this);
e.preventDefault();
});
linkClick: function(which) {
this.showItem(which.getAttribute("href").match(/\d+/)[0]);
},

tinymce custom-button replace content

I added a custom 'quote' button.
ed.addButton('blockquote', {
title : 'blockquote',
cmd : 'mceblockquote',
image : url + '/img/blockquote.gif',
onclick : function() {
var blockquoteActive = tinyMCE.activeEditor.controlManager.get('blockquote').isActive();
if (blockquoteActive) {
//replace <blockquote> tags ?!
//set Button inactive
}
else {
ed.selection.setContent('<blockquote>' + ed.selection.getContent() + '</blockquote><br />');
}
}
});
ed.onNodeChange.add(function(ed, cm, n) {
cm.setActive('blockquote', n.nodeName == 'IMG');
})
When I click the button, everything works fine. The selection is quoted.
How do I replace the blockquote-tags when klicking the button again?
How do I set the button inactive?
Regards,
saromba

it worked thanks...
I've made some changes (maybe / probably improvements).
When nothing is selected, do nothing
When text is already quoted
When user marked the text with a double-click, the blockquote element will now be removed
onclick : function() {
var blockquoteActive = tinyMCE.activeEditor.controlManager.get('blockquote').isActive();
var selection = ed.selection.getContent();
if (blockquoteActive) {
if (selection) {
var parElem = ed.dom.getParent(ed.selection.getNode(), 'blockquote');
var inner = parElem.innerHTML;
ed.dom.remove(parElem);
ed.selection.setContent(inner);
}
else return
}
else {
if (selection) {
ed.selection.setContent('<blockquote>' + ed.selection.getContent() + '</blockquote><br />');
}
}
}

Try this. You may modify it a bit.
ed.addButton('blockquote', {
title : 'blockquote',
cmd : 'mceblockquote',
image : url + '/img/blockquote.gif',
onclick : function() {
var blockquoteActive = tinyMCE.activeEditor.controlManager.get('blockquote').isActive();
if (blockquoteActive) {
//replace <blockquote> tags ?!
content = ed.selection.getContent();
content.replace(/<\/?blockquote>/ig,'');
ed.selection.setContent(content);
//set Button inactive
// works only if blockquote is registered at the controlManager
ed.controlManager.setActive('blockquote', false);
}
else {
ed.selection.setContent('<blockquote>' + ed.selection.getContent() + '</blockquote><br />');
}
}
});