I am creating a browser extension using "CROSSRIDER", Now I want to create a menubar inbetween toolbar and our website page, as shown in fig below
In the above image you can oberserver that the menubar contains "Congradulations browser app is successfully installed" text.
Below, You can also see two more images that show's before and after adding a Menu bar to the single website.(I took these sample images from another website just for explanation)
Image--> 1(Before adding Menu bar)
Image--> 2(After adding menu bar)
In the above fig you can observer the menubar(which was in yellow color). Now I want to create a menu bar like that.How can I achieve this scenario using CROSSRIDER.
You can achieve this using regular JS DOM or jQuery code from within the Extension Page Scope.
So, to get you started, in the extension.js file you could use something like:
appAPI.ready(function($) {
$('<div id="my-toolbar"></div>').
css({
"background-color":"wheat",
height:"50px",
left:0,
position:"fixed",
top:0,
width:"100%"})
.appendTo('body');
});
[Disclosure: I am a Crossrider employee]
Related
I have a site with TouchableOpacity that uses react-navigation to navigate to another screen. Is it possible in some way to add href to this button so I could open the another screen in new tab using context menu "Open link in new tab"?
I know there is possibility to add accessibilityRole='link' href={''} to a component but what about a whole button of view.
This is according to: https://github.com/necolas/react-native-web/issues/162
Using Text component it is possible by:
<Text
accessibilityRole='link'
href={defineRightClick()}
target='_blank'
onPress={(e) => {
e.preventDefault();
navigateFunction();
}}>
Click to navigate, right click to open in new tab
</Text>
Ask if more information is needed for this question and I will edit it.
Every help is appreciated as I have tried to find solution but have not come across or found a way to handle this case.
Found an answer!
Even thought it is not documented in here: https://necolas.github.io/react-native-web/docs/accessibility/#accessibility-patterns
and using href in TouchableOpacity will show ts error No overload matches this call., it is possible to add to a TouchableOpacity props
accessibilityRole='link'
href={'desired link'}
target='_blank'
Then using e.preventDefault() in onPress event of TouchableOpacity will prevent link opening and do other things assigned to the function. At the same time the link is possible to be opened with right click > context menu > "Open link in new tab"
I will post this as answer so if anyone else comes across this they might find the solution
I'd like to attach images to certain cells of my Google spreadsheet, to appear upon hovering the mouse upon that cell, similar to how the native text-only regular cell notes (Shift+F2) appear.
Natively, Google Sheets supports inserting images in the cell. My image sizes are however too big, and I'd have to make the row/column width/height huge for them to be displayed at 100%. Plus, I'd want the images to only appear upon mouseover, and not always be visible.
(I should add that the functionality I describe is actually very easily achievable in Excel, which allows setting a picture-background for cell comments, something that Google Sheets does not.)
I discovered a Google Sheets addon which seems to extend regular cell notes to include richer content, including images. Inconveniently, it requires each image be uploaded to an image server rather than be loaded from the PC. That would have still been fine, except I couldn't get it to achieve the above stated goal.
Finally, I found this suggested workaround, which for me does not work, in the sense that the image is not loaded as a preview upon mousing over the URL (whether it ends with .jpg or not), only the URL itself is:
Interestingly, the effect I'm after actually exists in Google Docs, when the link isn't even an image but just a page:
Issue:
There is no native way to trigger actions on hover events in Sheets, and there is no way to retrieve images that have been uploaded from the computer and don't have a valid URL. This greatly limits what you can accomplish.
Nevertheless, there are workarounds available that can get you close to the functionality you're asking for.
Workaround (showModelessDialog):
You could, for example create a modeless dialog whose purpose would be to show the image corresponding to the selected cell.
Ideally, onSelectionChange trigger would be used, since this trigger to refresh the modeless dialog with current image when the user changes the selected cell, but since creating a modeless dialog requires authorization, simple triggers cannot run services that require authorization, and onSelectionChange is only available as a simple trigger (cannot be installed), that won't be possible.
So one possible workflow could be the following:
Show a modeless dialog when the spreadsheet is opened by a user.
The user selects the cell with the image that should be shown.
User clicks a button in the modeless dialog (or the previous image) to refresh the modeless dialog with the currently selected image.
How to do this:
To achieve this, you can follow these steps:
Install onOpen trigger that creates modeless dialog when the user opens the spreadsheet (the trigger needs to be installed, since, as I mentioned, simple triggers cannot use services that require authorization). To do that, go to the Apps Script editor (selecting Tools > Script editor), copy this function to your Code.gs file, and install the trigger following these steps:
function onOpenTrigger(e) {
var html = HtmlService.createTemplateFromFile("Page").evaluate()
.setWidth(800) // Change dimensions according to your preferences
//.setHeight(600) // Change dimensions according to your preferences
SpreadsheetApp.getUi()
.showModelessDialog(html, "My image");
}
Create the HTML template corresponding to the modeless dialog. The idea here would be: when the page loads, the currently selected image is shown. If the button (or the image itself) gets clicked, the page will refresh with current image (see retrieveImage and refreshImage). Create an HTML file in the editor via File > New > HTML file, and copy the following code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body onload="retrieveImage()">
<img id="currentImage" onclick="retrieveImage()" alt="No image is selected" width="600">
<button onclick="retrieveImage()">Click to refresh image!</button>
</body>
<script>
function retrieveImage() {
google.script.run.withSuccessHandler(refreshImage).getSelectedImage();
}
function refreshImage(imageUrl) {
if (imageUrl) document.getElementById("currentImage").src = imageUrl;
}
</script>
</html>
Back in your script file (.gs), create a function to retrieve the image URL from current cell (in case this cell has an image). This function will get called by the modeless dialog when it loads and when its button is clicked. It could be like this (regex is used to retrieve that — see this answer:
function getSelectedImage() {
var formula = SpreadsheetApp.getActiveRange().getFormula();
var regex = /=image\("(.*)"/i;
var matches = formula.match(regex);
return matches ? matches[1] : null;
}
Note:
You can adapt the dimensions of both the selected image (<img width="" height="">) and the modeless dialog (.setWidth, .setHeight) according to your preferences.
Reference:
Dialogs and Sidebars in G Suite Documents
Installable Triggers: Managing triggers manually
getActiveRange()
As shown in the following example, I would like to restrict the tab key behavior to just this frame with links.
http://jsfiddle.net/zFXNM/
tabindex ="1"
I do NOT want the tab to go the URL other items in the browser.
For example, the "Compose Mail" in Gmail does this already. I observed 3 usages of "tabindex=-1" within the JS.
In pure JavaScript, I have figured out a solution for this issue. The idea is whenever the page is loaded we determine the first and last links, then we prevent the tab default action and jump to the first link from the last tab.
if (activeElement.id == lastHrefID) {
e.preventDefault();
document.getElementById(firstHrefID).focus();
}
A working solution is available at : https://jsfiddle.net/srirammac/95sv63s7/
I'm trying to implement my own image browser in CKeditor and I don't understand how to send back the url of the chosen image to the editor.
I have created a plugin to display a button in the editor toolbar, the button works fine and opens a div with my image browser in it. Until there, no problem.
Textarea used:
<textarea id="page_article"></textarea>
CKeditor init:
CKEDITOR.replace('page_article', {"extraPlugins" : 'imagebrowser'});
My browser displays a list of image and for each image I use a button to insert the image back into the editor.
<button id="action" image_url="[Real_Image_URL]">AddImageToEditor</button>
I capture clicks on button with this function:
$( document ).on("click", "button", function()
{
// CAPTURE IMAGE URL
var img_url = $(this).attr('image_url');
}
What should I use to send back the img_url to the editor? I have tried the insertHTML but I can't get it to work.
Example:
CKEDITOR.instances.page_article.insertHtml('blablabla');
Thanks!
Laurent
Have you read through this documentation:
http://docs.ckeditor.com/#!/guide/dev_file_browser_api
You will likely need call window.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl [,data]);
I am building a GUI and I am using wxribbon for wxpython. I want to have only one tab(ribbon page) in when user starts my app, from where user can dynamically add more pages or can add panels and buttons to a page. I am able to achieve all the dynamic parts of ribbon. The only problem I have is that I am unable to start with only one ribbon page. When I define only one page, I don't see the ribbon bar(tab bar), what I see is only the page. Now, when I define two page in the beginning, then I see the bar. Can someone tell me what I code have to change in wxribbon so that I am able to have a tab bar visible with only one page in it. Any help would be great. Thanks!. The sample code I am using to add a page is as follows :
import wxRibbon as RB
self._ribbon = RB.RibbonBar(self, id = wx.ID_ANY)
page_1 = RB.RibbonPage(self._ribbon, WORKPIECE, "Workpiece", Bitmap("eye.xpm"))
page_2 = RB.RibbonPage(self._ribbon, wx.ID_ANY, "New Tab", Bitmap("empty.xpm"))
You need the flag RIBBON_BAR_ALWAYS_SHOW_TABS
try this:
self._ribbon = RB.RibbonBar(self, wx.ID_ANY, agwStyle = RB.RIBBON_BAR_DEFAULT_STYLE | RB.RIBBON_BAR_ALWAYS_SHOW_TABS)