Develop Reference

How to create new window without menu bar for onlick function (electronJS)

I tried this but this gives me a new window with menu bar. I removed main window menu bar using win.setMenu(null) in main.js file. but I couldn't find a way to do it in new window ("add items window")
please see the image below to see it clearly
onclick="window.open('addNew.html' ,'Add New Item', 'width=900 , height=400 , toolbar=no ,resizable=no')

You can intercept the new window creation and remove the menu the same way you remove it for your main window.
const { app } = require("electron");
app.on("browser-window-created", (e, win) => {
win.removeMenu();
});

I used 'Menu.setApplicationMenu(null)' insted of 'win.setMenu(null)'. this works for me. thank you.

Get Id of TitlePane programatically defined to show/hide

I am very new to Dojo and this is what I am trying to do. I have a titlepane which is programatically declared using the code below:
var pane = this._createTitlePane(config.widgets.title, config.widgets.position,
config.widgets.open);
_createTitlePane: function (title, position, open, optclass) {
var tp = new TitlePane({
title: title,
open: open
}).placeAt(this.sidebar, position);
domClass.add(tp.domNode, 'titlePaneBottomFix titlePaneRightFix');
if (optclass) {
domClass.add(tp.domNode, optclass);
}
tp.startup();
return tp;
},
Later I am trying to hide this title pane when a button is clicked using esri.hide. My question is how do I get a reference to this title pane? There's no Id when it is defined.
When I look in the chrome debugger, I see the below line highlights the widget
<div class="titlePaneBottomFix titlePaneRightFix dijitTitlePane" title="" role="group" id="dijit_TitlePane_1" widgetid="dijit_TitlePane_1">
If I try to do something like esri.hide(dojo.byId("dijit_TitlePane_1")), then it hides the widget. But can I refer to the title pane using this widget Id?

You may want to just give the title pane its own id in the function:
_createTitlePane: function (title, position, open, optclass, paneId) {
var tp = new TitlePane({
title: title,
id: paneId, // TitlePane id here
open: open
}).placeAt(this.sidebar, position);
domClass.add(tp.domNode, 'titlePaneBottomFix titlePaneRightFix');
if (optclass) {
domClass.add(tp.domNode, optclass);
}
tp.startup();
return tp;
}
Then you can refer to it with and hide it with:
esri.hide(dijit.byId("theIdYouGaveIt").domNode);
To understand the difference between dojo.byId and dijit.byId, this link may help.

Also, if you're creating this in your own custom widget, you can also make the title pane a local reference, ie: this.tp = new TitlePane({...}). Anywhere you need to access it from inside the widget, you can simply call "this.tp". Outside of the widget, you can access it using dot notataion: myWidget.tp.doSomething(). Better yet, if you create it declaratively in a template like this: <div data-dojo-type=dijit/TitlePane" data-dojo-attach-point="tp" ...></div>, when the widget is instantiated it will automatically have a handle to "this.tp" via the attach point.

How to check whether a twitter bootstrap popover is visible or not?

I have an element $('#anElement') with a potential popover attached, like
<div id="anElement" data-original-title="my title" data-trigger="manual" data-content="my content" rel="popover"></div>
I just would like to know how to check whether the popover is visible or not: how this can be accomplished with jQuery?

If this functionality is not built into the framework you are using (it's no longer twitter bootstrap, just bootstrap), then you'll have to inspect the HTML that is generated/modified to create this feature of bootstrap.
Take a look at the popupver documentation. There is a button there that you can use to see it in action. This is a great place to inspect the HTML elements that are at work behind the scene.
Crack open your chrome developers tools or firebug (of firefox) and take a look at what it happening. It looks like there is simply a <div> being inserted after the button -
<div class="popover fade right in" style="... />
All you would have to do is check for the existence of that element. Depending on how your markup is written, you could use something like this -
if ($("#popoverTrigger").next('div.popover:visible').length){
// popover is visible
}
#popoverTrigger is the element that triggered that popover to appear in the first place and as we noticed above, bootstrap simply appends the popover div after the element.

There is no method implemented explicitly in the boostrap popover plugin so you need to find a way around that. Here's a hack that will return true or false wheter the plugin is visible or not.
var isVisible = $('#anElement').data('bs.popover').tip().hasClass('in');
console.log(isVisible); // true or false
It accesses the data stored by the popover plugin which is in fact a Popover object, calls the object's tip() method which is responsible for fetching the tip element, and then checks if the element returned has the class in, which is indicative that the popover attached to that element is visible.
You should also check if there is a popover attached to make sure you can call the tip() method:
if ($('#anElement').data('bs.popover') instanceof Popover) {
// do your popover visibility check here
}

In the current version of Bootstrap, you can check whether your element has aria-describedby set. The value of the attribute is the id of the actual popover.
So for instance, if you want to change the content of the visible popover, you can do:
var popoverId = $('#myElement').attr('aria-describedby');
$('#myElement').next(popoverid, '.popover-content').html('my new content');

This checks if the given div is visible.
if ($('#div:visible').length > 0)
or
if ($('#div').is(':visible'))

Perhaps the most reliable option would be listening to shown/hidden events, as demonstrated below. This would eliminate the necessity of digging deep into the DOM that could be error prone.
var isMyPopoverVisible = false;//assuming popovers are hidden by default
$("#myPopoverElement").on('shown.bs.popover',function(){
isMyPopoverVisible = true;
});
$("#myPopoverElement").on('hidden.bs.popover',function(){
isMyPopoverVisible = false;
});
These events seem to be triggered even if you hide/show/toggle the popover programmatically, without user interaction.
P. S. tested with BS3.

Here is simple jQuery plugin to manage this. I've added few commented options to present different approaches of accessing objects and left uncommented that of my favor.
For current Bootstrap 4.0.0 you can take bundle with Popover.js: https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js
// jQuery plugins
(function($)
{
// Fired immiedately
$.fn.isPopover = function (options)
{
// Is popover?
// jQuery
//var result = $(this).hasAttr("data-toggle");
// Popover API
var result = !!$(this).data('bs.popover');
if (!options) return result;
var $tip = this.popoverTip();
if (result) switch (options)
{
case 'shown' :
result = $tip.is(':visible');
break;
default:
result = false;
}
return result;
};
$.fn.popoverTip = function ()
{
// jQuery
var tipId = '#' + this.attr('aria-describedby');
return $(tipId);
// Popover API by id
//var tipId = this.data('bs.popover').tip.id;
//return $(tipId);
// Popover API by object
//var tip = this.data('bs.popover').tip; // DOM element
//return $(tip);
};
// Load indicator
$.fn.loadIndicator = function (action)
{
var indicatorClass = 'loading';
// Take parent if no container has been defined
var $container = this.closest('.loading-container') || this.parent();
switch (action)
{
case 'show' :
$container.append($('<div>').addClass(indicatorClass));
break;
case 'hide' :
$container.find('.' + indicatorClass).remove();
break;
}
};
})(jQuery);
// Usage
// Assuming 'this' points to popover object (e.g. an anchor or a button)
// Check if popover tip is visible
var isVisible = $(this).isPopover('shown');
// Hide all popovers except this
if (!isVisible) $('[data-toggle="popover"]').not(this).popover('hide');
// Show load indicator inside tip on 'shown' event while loading an iframe content
$(this).on('shown.bs.popover', function ()
{
$(this).popoverTip().find('iframe').loadIndicator('show');
});

Here a way to check the state with Vanilla JS.
document.getElementById("popover-dashboard").nextElementSibling.classList.contains('popover');

This works with BS4:
$(document).on('show.bs.tooltip','#anElement', function() {
$('#anElement').data('isvisible', true);
});
$(document).on('hidden.bs.tooltip','#anElement', function() {
$('#anElement').data('isvisible', false);
});
if ($('#anElement').data('isvisible'))
{
// popover is visible
$('#tipUTAbiertas').tooltip('hide');
$('#tipUTAbiertas').tooltip('show');
}

Bootstrap 5:
const toggler = document.getElementById(togglerId);
const popover = bootstrap.Popover.getInstance(toggler);
const isShowing = popover && popover.tip && popover.tip.classList.contains('show');

Using a popover with boostrap 4, tip() doesn't seem to be a function anymore. This is one way to check if a popover is enabled, basically if it has been clicked and is active:
if ($('#element').data('bs.popover')._activeTrigger.click == true){
...do something
}

Show and hide dynamic jQuery UI Dialogs

I know this should be simple, but it doesn't appear to be working the way I hoped it would.
I'm trying to dynamically generate jQuery UI dialogs for element "help."
I want to toggle the visibility of the dialog on close (x button in dialog), and clicking of the help icon. This way, a user should be able to bring up the dialog and get rid of it, as needed, multiple times during a page view.
// On creation of page, run the following to create dialogs for help
// (inside a function called from document.ready())
$("div.tooltip").each(function (index, Element) {
$(Element).dialog({
autoOpen: false,
title: $(Element).attr("title"),
dialogClass: 'tooltip-dialog'
});
});
$("a.help").live("click", function (event) {
var helpDiv = "div#" + $(this).closest("span.help").attr("id");
var dialogState = $(helpDiv).dialog("isOpen");
// If open, close. If closed, open.
dialogState ? $(helpDiv).dialog('close') : $(helpDiv).dialog('open');
});
Edit: Updated code to current version. Still having an issue with value of dialogState and dialog('open')/dialog('close').
I can get a true/false value from $(Element).dialog("isOpen") within the each. When I try to find the element later (using a slightly different selector), I appear to be unable to successfully call $(helpDiv).dialog("isOpen"). This returns [] instead of true/false. Any thoughts as to what I'm doing wrong? I've been at this for about a day and a half at this point...

Maybe replace the line declaring dialogState with var dialogState = ! $(helpDiv).dialog( "isOpen" );.
Explanation: $(helpDiv).dialog( "option", "hide" ) does not test if the dialog is open. It gets the type of effect that will be used when the dialog is closed. To test if the dialog is open, you should use $(helpDiv).dialog( "isOpen" ). For more details, see http://jqueryui.com/demos/dialog/#options and http://jqueryui.com/demos/dialog/#methods.

I was able to get it working using the following code:
$("div.tooltip").each(function (index, Element) {
var helpDivId = '#d' + $(Element).attr('id').substr(1);
var helpDiv = $(helpDivId).first();
$(Element).dialog({
autoOpen: true,
title: $(Element).attr("title"),
dialogClass: 'tooltip-dialog'
});
});
// Show or hide the help tooltip when the user clicks on the balloon
$("a.help").live("click", function (event) {
var helpDivId = '#d' + $(this).closest('span.help').attr('id').substr(1);
var helpDiv = $(helpDivId).first();
var dialogState = helpDiv.dialog('isOpen');
dialogState ? helpDiv.dialog('close') : helpDiv.dialog('open');
});
I changed the selectors so that they're identical, instead of just selecting the same element. I also broke out the Id, div and state into separate variables.

How can I check to see if a Dojo dialog is loaded?

I am running a function that needs to close a Dojo dialog if it is loaded. How do I check if a dojo dialog is running? Do I use pure JavaScript and check by id if it is undefined?
if (dijit.byId("blah") !== undefined) {
destroyRecursive dijit;
}
Or do I use a property of the dialog object like:
isFocusable method
isLoaded property

Dialog provides two properties you might want to check: isLoaded and open. By digging the code you'll find the following descriptions:
open: True if Dialog is currently displayed on screen.
isLoaded: True if the ContentPane has data in it, either specified during initialization (via href or inline content), or set via attr('content', ...) / attr('href', ...) False if it doesn't have any content, or if ContentPane is still in the process of downloading href.
So, you could just:
var dialog = dijit.byId("blah");
if( dialog.open ) {
dialog.destroy();
}

Do you want to hide it or destroy it?
If you just want to show/hide it you can do the following:
var dialog = dijit.byId('blah');
if (dialog) {
if (dialog.open) {
dialog.hide();
}
else {
dialog.show();
}
}
If you wanted to destory it to free up memory:
var dialog = dijit.byId('blah');
dialog.destory();
I think destroy is recursive since it calls its parent destroy method and one of its parents is dijit.layout.ContentPane.