I have the following popper.js script and I want that when I click a button a text appears and when I click the button again the text disappears. The script shown only unhide the text.
var ref = $('#button-a');
var popup = $('#popup');
popup.hide();
ref.click(function(){
popup.show();
var popper = new Popper(ref,popup,{
placement: 'bottom',
onCreate: function(data){
console.log(data);
},
modifiers: {
flip: {
behavior: ['bottom']
},
offset: {
enabled: true,
offset: '0,10'
}
}
});
});
Your event handler is never calling .hide() (I assume these are the JQuery show and hide functions?). You either need to use .toggle() instead of .show() or set up a conditional that handles the case where the popup is already visible and calls .hide().
Related
I am developing a chrome extension. I am trying to get the selected/highlighted text from the active tab and do something with it. For now, say all the extension does is writing what the selected text is on a popup. I can't seem to do it. I tried a lot of methods. content script, background scripts. Nothing works. in my manifest.jsonI have permissions for activeTab, contextMenus. I tried multiple functions that take the selected text but nothing works. Example of some functions
const text = (window.getSelection) ?
window.getSelection().toString() :
document.selection.createRange().text;
console.log(text)
chrome.contextMenus.create({
id: 'selectionGetter',
title: 'send selected text',
contexts: ['selection'],
});
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "getSelection"},
function(response){
const url=response.url;
const subject=response.subject;
const body = response.body;
console.log(body)
});
});
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.sendRequest(tab.id, {method: "getSelection"},
function(response){
sendServiceRequest(response.data);
});
});
Would love your help
See How to access the webpage DOM rather than the extension page DOM? for full explanation, here's a quick illustration:
chrome.tabs.executeScript({code: 'getSelection().toString()'}, ([sel] = []) => {
if (!chrome.runtime.lastError) {
document.body.textContent = 'Selection: ' + sel;
}
});
If you have default_popup declared in manifest.json then put this code in popup.js, and put <script src=popup.js></script> in popup.html. It will run each time the popup is shown.
Otherwise put it inside chrome.browserAction.onClicked listener in the background script.
My current situation:
kendo tooltip works fine alone.
my new custom angularjs directive with kendoConfirm works fine alone.
but once i try to use them both together on an element, then only the kendo tooltip stops working.
<button type="button" title="Disable Item" k-confirm-disable k-confirm-disable-title="'Confirm Disable'" k-confirm-disable-msg="'Are you sure you want to disable this item?'" ng-click="disable(dataItem.id)" class="btn btn-danger" kendo-tooltip k-content="'Disable Item'" k-options="kendoTooltipOptions">
$scope.kendoTooltipOptions = {
showAfter: 600, //time for tooltip appear
position : 'top',
width : 100
}
kendo tooltip only works when I remove the custom angular directive from the element.
function kConfirmDisable($compile){
return {
restrict: 'A',
scope: {
kConfirmDisableTitle: '#',
kConfirmDisableMsg: '#'
},
link: function(scope, element, attrs){
var clickHandlers = $._data(element[0]).events.click;
clickHandlers.reverse(); //reverse the click event handlers list
var onClick = function(evt) {
evt.preventDefault();
evt.stopImmediatePropagation();
if(!scope.kConfirmDisableTitle) {
scope.kConfirmDisableTitle = "Confirm";
}
if(!scope.kConfirmDisableMsg) {
scope.kConfirmDisableMsg = "Are you sure?";
}
angular.element("<div></div>").kendoConfirm({
title: scope.kConfirmDisableTitle.replace(/['"]+/g, ''),
content: scope.kConfirmDisableMsg.replace(/['"]+/g, ''),
buttonLayout: "normal",
visible: false,
actions: [
{
text: "No",
Primary: false,
action: function(){
evt.preventDefault();
evt.stopImmediatePropagation();
}
},
{
text: "Yes",
Primary: true,
action: function(){
element.unbind(this);
setTimeout(function() {
element.unbind("click", onClick);
element.click();
evt.preventDefault();
evt.stopImmediatePropagation();
element.on("click", onClick);
},0);
}
},
],
animation: {
open:{
effects: "zoom:in",
duration: 250
},
close:{
effects: "fade:out",
duration: 250
}
},
open: function(e) {
$("html, body").css("overflow", "hidden");
},
close: function() {
$("html, body").css("overflow", "visible");
}
}).data("kendoConfirm").open().result;
};
element.on("click", onClick);
clickHandlers.reverse();
}
}
}
Since Kendo AngularJs source is not available, I can only suggest couple of things:
Try to research what happens if you dont stop the propagation and not stop the default on the click in your directive.
If the scenario is that it does not work immediately on page reload and hovering on the element without using clicks- then this is not relevant.
Avoid using isolated scope in your directive and get the attributes via the $attrs link function parameter. Since you did not specify you get js error, I am assuming Kendo isn't using isolated scope, but it is still a direction to investigate.
my solution is I removed the "k-" from the "k-confirm-disable" directive and it worked.
i think its because kendo has "k-" reserved.
I extended sap.ui.core.Icon with hover event handling:
sap.ui.define(function () {
"use strict";
return sap.ui.core.Icon.extend("abc.reuseController.HoverIcon", {
metadata: {
events: {
"hover" : {}
}
},
// the hover event handler, it is called when the Button is hovered - no event registration required
onmouseover : function(evt) {
this.fireHover();
},
// add nothing, just inherit the ButtonRenderer as is
renderer: {}
});
});
The event onmouseover is never fired. I also used this extension for sap.m.Button and it works. But I need this for sap.ui.core.Icon.
I also tried this jquery example but it did not work at all.
$("testIcon").hover(function(oEvent){alert("Button" + oEvent.getSource().getId());});
Please, do you have any idea why event handler onmouseover is not called for sap.ui.core.Icon? Or can you propose some other solution?
Bellow is how I added icon to my sap.suite.ui.commons.ChartContainer:
var oFilterIcon = new HoverIcon({
tooltip : "{i18n>filter}",
src : "sap-icon://filter",
hover : function(oEvent){alert("Button" + oEvent.getSource().getId());},
});
this.byId("idChartContainer").addCustomIcon(oFilterIcon);
This is my analysis:
Your new custom Control Icon for hover is correct. If you will use it independently it will work correctly .
However, your custom control will not work as your icons are converted to sap.m.OverflowToolbarButton when you use ChartContainer.
I looked into the source code of Chart Container and below is the code:
sap.suite.ui.commons.ChartContainer.prototype._addButtonToCustomIcons = function(i) {
var I = i;
var s = I.getTooltip();
var b = new sap.m.OverflowToolbarButton({
icon: I.getSrc(),
text: s,
tooltip: s,
type: sap.m.ButtonType.Transparent,
width: "3rem",
press: [{
icon: I
}, this._onOverflowToolbarButtonPress.bind(this)]
});
this._aCustomIcons.push(b);
}
So, you Icon is not used but its properties are used. As this is standard code, your hover code of Custom icon is not passed along.
One solution will be to add the onmouseover to sap.m.OverflowToolbarButton :
sap.m.OverflowToolbarButton.prototype.onmouseover=function() {
alert('hey')
};
However, this is dangerous as all OverflowToolbarButton button start using this code and I will not recommend it.
Next solution would be to overwrite the private method:_addButtonToCustomIcons ( again not recommendred :( )
sap.suite.ui.commons.ChartContainer.prototype._addButtonToCustomIcons = function(icon) {
var oIcon = icon;
var sIconTooltip = oIcon.getTooltip();
var oButton = new sap.m.OverflowToolbarButton({
icon : oIcon.getSrc(),
text : sIconTooltip,
tooltip : sIconTooltip,
type : sap.m.ButtonType.Transparent,
width : "3rem",
press: [{icon: oIcon}, this._onOverflowToolbarButtonPress.bind(this)]
});
this._aCustomIcons.push(oButton);
//oButton.onmouseover.
oButton.onmouseover = function() {
this.fireHover();
}.bind(oIcon);
};
Let me know if this helps u. :)
I'm trying to pass the active dom element when the contextmenu is clicked from my background script to a script that is being called through chrome.tabs.executeScript. I can pass booleans and strings just fine, but i always get an error when i pass dom elements. I'm starting to think it's not possible.
//doScripts function called from browser action
chrome.browserAction.onClicked.addListener(function(tab) {
doScripts(true, null);
});
//doScripts function called from context menu click
function getClickHandler(info, tab) {
var currTarg = document.activeElement;
console.log("currTarg = " + currTarg);
doScripts(false, currTarg);
}
//i reference doingBrowserAction and contextTarg in myscript.js
function doScripts(context, targ){
chrome.tabs.executeScript(null, {code: "var doingBrowserAction = "+context+"; var contextTarg = "+targ+";"}, function(){
chrome.tabs.executeScript(null, {file: "js/myscript.js"}, function(){
//all injected
});
});
}
//setup context menu
chrome.contextMenus.create({
"title" : "DESTROY!",
"type" : "normal",
"contexts" : ["page","selection","link","editable","image","video","audio"],
"onclick" : getClickHandler
});
i reference doingBrowserAction and contextTarg in myscript.js. I know what i'm trying to do is possible because the adblock extension does it, but having a hard time figuring out how. thanks in advance.
You cannot get a direct reference to a content script's DOM element from the background page, because the background page runs in the extension's process, and the content script runs in the tab's process. See also https://code.google.com/p/chromium/issues/detail?id=39507.
The document.activeElement property in the background page refers to the active element in the background page's document. As you can imagine, this value is quite useless.
If you query the state of the currently right-clicked element, bind an event in the content script. In the next example, I've chosen the contextmenu event, because context menus can also be opened through the keyboard.
This example adds a context menu option that removes the last active element from the document.
// content script
var lastElementContext;
document.addEventListener('contextmenu', function(event) {
lastElementContext = event.target;
}, true);
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
if (lastElementContext && lastElementContext.parentNode) {
lastElementContext.parentNode.removeChild(lastElementContext);
lastElementContext = null;
}
});
Background script:
chrome.contextMenus.create({
title: 'DESTROY!',
contexts: ['page', 'link', 'editable', 'image', 'video', 'audio'],
onclick: function(info, tab) {
chrome.tabs.sendMessage(tab.id, 'doDestroy');
}
});
I'm using Malsup's excellent Form plugin to dynamically load search results onto the same page.
It works great with a standard form submit, however I have 2 select elements in my form and would love for the results to update as the select is changed.
My code at the moment is thus:
$(document).ready(function() {
var options = {
target: '#bands-results',
beforeSubmit: showRequest
};
$('#bandsearch').ajaxForm(options);
});
// Show loading message and submit form
function showRequest(formData, jqForm, options) {
$('#bands-results').prepend('<span>Searching</span>');
return true;
}
I haven't seen other examples that do the same.
Help appreciated.
Got it licked with this
$(document).ready(function() {
$("#genre-filter").change(function() {
$("#band_search").submit();
});
// bind to the form's submit event
$('#band_search').ajaxForm({
beforeSubmit: showRequest,
target: '#band_list',
success: function() {
$('#premlim').hide();
}
});
})
function showRequest(formData, jqForm, options) {
return true;
}