I have created an extension for VSC that adds some statusbar buttons when a file of type JS/TS is opened. But I would rather only show the buttons if the active tab is JS/TS. Currently if I open a markdown file and a JS file the status bar buttons are added even when the MD file is the active tab.
Is there some kind of event that gets called when users swap tabs that I could use to show/hide my buttons.
Here is my repo:
https://github.com/sketchbuch/vsc_quokka_statusbar
Changing active text editor event
vscode.window.onDidChangeActiveTextEditor(editor => {
if (!editor) {
// hide
return;
}
if (editor.document.languageId === 'javascript' || editor.document.languageId === 'typescript') {
// show
} else {
// hide
}
});
If you want to consider all visible editors (split/grid):
vscode.window.onDidChangeVisibleTextEditors(editors => {
if (editors.some(editor => {
return editor.document.languageId === 'javascript' || editor.document.languageId === 'typescript';
})) {
// show
} else {
// hide
}
});
Related
onPress of submit button, I want to validate all SimpleForms' fields (ComboBox, Input, DatePicker, etc.) that are
required &
visible
to see if they are null or blank (""). If a targeted (required & visible) field is null/blank, set that control's state to "Error" and display an error message. If no targeted field is null/blank, pop up a success dialog box.
This method is automated so in the future, any fields added later will automatically be checked without need of manual additions to controller code.
Controller code:
requiredAndVisible: function(oControl) {
if (typeof oControl.getRequired === "function") { //certain ctrls like toolbars dont have getRequired as a method, so we want to skim those out, else itll throw an error later in the next check
if (oControl.getRequired() === true && oControl.getVisible() === true) {
return oControl;
}
}
},
onSubmit: function() {
var valid = true,
oView = this.getView(),
aFormInitial = oView.byId("formInitial").getContent(), // get all the controls of SimpleForm1
aFormConfig = oView.byId("formConfiguration").getContent(), // get all controls of SimpleForm2
aControls = aFormInitial.concat(aFormConfig), // combine the 2arrays together into 1
aFilteredControls = aControls.filter(this.requiredAndVisible); // check each element if it required & visible using the 1st function. return only the controls that are both req'd & visible
aFilteredControls.forEach(function(oControl) { // in resultant array, check each element if...
if (!oControl.getValue() || oControl.getValue().length < 1) { // its value is null or blank
oControl.setValueState("Error");
valid = false; // set valid to false if it is
} else {
oControl.setValueState("None");
}
});
if (valid === false) {
// **replace this code with w/e error handling code u want**
oView.byId("errorMsgStrip").setVisible(true);
} else if (valid === true) {
// **replace this code with whatever success handling code u want**
var oDialogConfirm = new sap.ui.xmlfragment("dialogID", "dialog.address.here", this);
oDialogConfirm.open();
}
},
For a specific page, I'm trying to hide the statusbar and make the content fullscreen but it doesn't seem to work.
general setting in appcomponent.ts .
//for most pages
if (core.isPlatform(OsType.CORDOVA)) {
this.statusBar.styleLightContent();
this.statusBar.overlaysWebView(false);
this.statusBar.backgroundColorByHexString('#0076b2');
}
code in specific page:
some-page.ts
//for specific page
ionViewDidLoad() {
if (this.core.isPlatform(OsType.CORDOVA)) {
this.statusBar.hide();
this.statusBar.overlaysWebView(true);
}
}
ionViewWillLeave() {
if (this.core.isPlatform(OsType.CORDOVA)) {
this.statusBar.show();
this.statusBar.overlaysWebView(false);
}
}
my result is always with the blue Statusbar visible:
I have two menus 'Setup' and 'Reports' with sub-menus 'admin users','Reports dashboard','partner dashboard','partner relationship' etc marked with red color.
I want to navigate or click using protractor locators but unable to find how to select these menus that have no id and common CSS. I want something like this
var userTypes = element.all(by.repeater('t in user_userTypes'));</br>
userTypes.get(2).click()
From what I see, these elements are navigation menu items, Setup and Reports are high-level menus and Admin Users, Reports Dashboard, Partner dashboard, Partner Relationship and Grading Data are submenus. To open a submenu, I assume, you should click the appropriate menu.
Let's make a reusable function that would accept a menu label and a desired submenu label and use by.repeater() locator filtering the menus by text:
function selectMenu(menuLabel, submenuLabel) {
var menu = element.all(by.repeater("mi in menuItems")).filter(function (menu) {
return menu.all(by.tagName("a")).first().getText().then(function (text) {
return text.indexOf(menuLabel) === 0;
});
}).first();
menu.click(); // open up menu
var submenu = menu.all(by.repeater("s in mi.subMenuItems")).filter(function (submenu) {
return submenu.all(by.tagName("a")).first().getText().then(function (text) {
return text.indexOf(submenuLabel) === 0;
});
}).first();
submenu.click(); // select submenu
}
Usage samples:
selectMenu("Setup", "Admin Users");
selectMenu("Reports", "Reports Dashboard");
Define a method and pass the 'hrefValue', filter by anchor tag.
var clickParticular = function(hrefValue){
element.all(by.tagName('a')).filter(function(element, index) {
return element.getAttribute('href').then(function (text) {
return text === hrefValue;
});
}).then(function(filteredElements) {
filteredElements[0].click().then(function() {
});
});
}
In my firefox sdk addon, I want to use a custom webpage from my data directory as my settings/about page.
But I am having trouble keeping tabs on the tab!
So I have a button that calls the OptionsPanel() function to open my webpage in a new tab. Now, I want to make it so if the user forgets that tab is open and pushes the button again, that it activates the already-open settings tab. That means I need to know that the tab is open and I need to be able to switch to it if it is OR open it if it is not already open.
Here is what I've come up with so far, but it doesn't work; it just always opens a new tab. I don't even know if I'm barking up the right tree.
const tabs = require("sdk/tabs");
var optionsTab;
function OptionsPanel(){
var opsTab = GetTabByID(optionsTab.id);
if(opsTab == null){
tabs.open( data.url("OptionsPanel.html") );
optionsTab.id = tabs.tab.id; <======errors out as undefined
}else{
opsTab.activate();
}
}
//return a handle to the tab that matches specified tab id
function GetTabByID(whatid){
for(let thistab of tabs){
if(thistab.id = whatid){
return thistab;
}
}
return null;
}
So, here are my goals:
Open my page in a new tab if it isn't already open.
If the tab is already open, then switch to that tab.
If the page is open when the browser loads, then be ready to switch to that tab if the user pushes the options button.
Why would you think tabs module has a tab property?
Normally you would use the activeTab property instead. However it does not get updated immediately after tabs.open is called. One has to use tabs[tabs.length - 1] instead.
const tabs = require("sdk/tabs");
var optionsTabId;
function OptionsPanel(){
var opsTab = GetTabByID(optionsTabId);
if (opsTab == null) {
tabs.open( data.url("OptionsPanel.html") );
optionsTabId = tabs[tabs.length - 1].id;
} else {
opsTab.activate();
}
}
Additionally, you made a mistake in GetTabByID.
//return a handle to the tab that matches specified tab id
function GetTabByID(whatid){
for(let thistab of tabs){
if(thistab.id == whatid){ // use == to compare
return thistab;
}
}
return null;
}
Keep in mind this assumes that it is not possible to navigate away from your options tab. I would check optsTab.url just in case.
Alternatively you could make use of the tab event interface
const tabs = require("sdk/tabs");
const OPTIONS_URL = data.url("OptionsPanel.html");
var optionsTab = null;
function OptionsPanel(){
if (optionsTab == null) {
tabs.open(OPTIONS_URL);
tabs.once('ready', function(tab) {
optionsTab = tab;
optionsTab.on('ready', function readyListener(tab) {
if (tab.url !== OPTIONS_URL) {
optionsTab.off('ready', readyListener);
optionsTab = null;
}
})
optionsTab.once('close', function(tab) {
optionsTab = null;
})
});
} else {
optionsTab.activate();
}
}
I have created a Button with the Tiny Method addButton().
How is it possible to toggle the State of the Button ?
In my first simple case I have a Button with Fullscreen
(Different Functionality than the built-in function)
and want to hide it after getting the Fullscreen State
and replace it with an "End Fullscreen" Button.
But I have not found the right way to show or hide them.
I know that the button will get an ID, but I dont know which one ...
If you add the button with:
editor.addButton('customFullscreen', {
tooltip: 'Fullscreen',
shortcut: 'Ctrl+Alt+F',
onClick: toggleCustomFullscreen,
onPostRender: function() {
var self = this;
editor.on('CustomFullscreenStateChanged', function(e) {
if (e.state) {
self.name('Close fullscreen');
//self.active(e.state); // uncomment for "pressed" look
} else {
self.name('Fullscreen');
}
});
}
});
and handle the event with
var customFullscreenState = false;
function toggleFullscreen() {
customFullscreenState = !customFullscreenState;
if (customFullscreenState) {
// do something, we are active
} else {
// do something else, we're unactive
}
editor.fire('CustomFullscreenStateChanged', {state: fullscreenState});
}
You should be able to have it look like wo different button and do two different things depending on state, but it will still just be one button that changes action and text.