Develop Reference

How do i make a separate menu for a specific window in electron?

I am working on an about this app window on Windows and I want to make a custom menu bar for my about window. Since I already have a custom menu is there a way I can create another one and apply it only to that specific window?
Side note:
Here is my code for the new window that is supposed to stop it from being adjusted and going into full screen, but for some reason the minimize and enlarge button still work.
app.on('ready', createWindow);
electron.app.on('ready', () => {
//Triger update check
if (!isDev) {
autoUpdater.checkForUpdates();
}
})
function createWindow(){
//create brower window
win = new BrowserWindow({
backgroundColor: '#2e2c29',
width: 800,
height: 600,
//transparent: true,
frame: false,
titleBarStyle: 'hidden',
backgroundColor: '#0000',
webPreferences: {
nodeIntegration: true
}
});
//Quit when all windows are closed
app.on('window-all-closed', () => {
app.quit()
})
app.once('ready', function() {
const template = [
{
label: 'File',
submenu: [
{
label: 'About Hubris',
click: () =>
openAboutWindow()
},
{ type: 'separator' },
{ role: 'hide' },
{ role: 'hideothers' },
{ role: 'unhide' },
{ type: 'separator' },
{ role: 'quit' }
]
},
{
label: 'View',
submenu: [
{ role: 'minimize' },
{ role: 'zoom' },
{ type: 'separator' },
{ role: 'togglefullscreen' }
]
},
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
//here is the code for the about window
var newWindow = null
function openAboutWindow() {
if (newWindow) {
newWindow.focus()
return
}
newWindow = new BrowserWindow({
height: 439,
resizable: false,
width: 599,
title: 'About Hubris',
minimizable: false,
fullscreenable: false,
frame: false,
titleBarStyle: 'hidden',
})
newWindow.loadURL('file://' + __dirname + '/about-this-app.html')
newWindow.on('closed', function() {
newWindow = null
})
}
});

You can switch menus on the fly. I have an app with 'editor' and 'presentation' modes. I create and store a menu for each mode (they have different menu items):
let editorMenu = Menu.buildFromTemplate(menuTemplate);
and subscribe to the relevant window events (focus, blur, etc). Then when a window gets focus
Menu.setApplicationMenu(editorMenu);

To do this, you have to import menu from electron in at the top of our main.js file:
// From
const {app, BrowserWindow} = require('electron')
// To
const {app, BrowserWindow, Menu} = require('electron').
Then, near the bottom of our createWindow() function, we add:
function createWindow () {
// some code here removed for brevity
var menu = Menu.buildFromTemplate([
{
label: 'Menu',
submenu: [
{label:'Adjust Notification Value'},
{label:'CoinMarketCap'},
{label:'Exit'}
]
}
])
Menu.setApplicationMenu(menu);
}
Next, we reference Menu.buildFromTemplate([{}]), which is where our menu is actually defined and built, within a series of arrays and objects.
The "label" represents the name you want your menu to display so put what you like.
The "submenu" property is an array of objects, with each object defining the actual menu items displayed when the label is clicked.
Finally, use .setApplicationMenu to set the menu. If you save the project, and run npm start in the console, you will see the menu with it's items (array) being displayed but if your click on them nothing happens.
You can change this by going back to our main.js, add the following code to make our Exit button close the application:
var menu = Menu.buildFromTemplate([
{
label: 'Menu',
submenu: [
{label:'Adjust Notification Value'},
{label:'CoinMarketCap'},
{
label:'Exit',
click() {
app.quit()
}
}
]
}
])
So, to make a menu item clickable, we simply add a comma after the label value, and reference "click() { }"
In this case, we're calling app.quit()" when the Exit submenu item is clicked. Give it a try by running npm start in the console and click Exit.
That's it!

CkEditor - How to add link attribute in dialog

I`m using CKEditor on my website.
I need adding select input for follow attribute in link plugin
i.e.
< a href="link_target" rel="nofollow">Hyper link< /a>
Customize from left to right
I try many time. but not implemented yet.
How to customize the select options?
It is my customize code of link.js
/ckeditor/plugins/link/dialogs/link.js
{
id: "followOptions",
type: "select",
label: b.followOptions,
"default": "doFollow",
items: [
[b.doFollow, "doFollow"],
[b.noFollow, "noFollow"]
], setup: function (a) {
this.setValue(a.followOptions || "")
}, commit: function (a) {
a.followOptions = this.getValue()
}
}

jqGrid custom editfunc doesn't work when custom search parameters are specified

Version jqGrid used here:
#license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright(c) 2008, Tony Tomov, tony#trirand.com
The first block of code below is an entire self contained implementation of jqGrid. It is in fact mostly taken from one of the examples on the jqGrid site. In it I added a snippet, the part between the comment lines with the clip markings.
That added snipped adds a custom editfunc. It works nicely (in the example it is of course more or less a stub, only doing an alert). Also, searching works, with all of its default parameters. For both, select a row and click on the respective icon of Edit or Search.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="./lib/jquery/jquery.min.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="./lib/jqGrid-js-free/js/jquery.jqGrid.js"></script>
<!-- This is the localization file of the grid controlling messages, labels, etc.-->
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="./lib/jqGrid-js-free/js/i18n/grid.locale-en.js"></script>
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" type="text/css" media="screen" href="./lib/jquery-ui/jquery-ui.css" />
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="./lib/jqGrid-js-free/css/ui.jqgrid.css" />
<meta charset="utf-8" />
<title>jqGrid without PHP - Loading Data - JSON Live</title>
</head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
colModel: [
{
label: 'Title',
name: 'Title',
width: 150,
formatter: formatTitle
},
{
label: 'Link',
name: 'Link',
width: 80,
formatter: formatLink
},
{
label: 'View Count',
name: 'ViewCount',
width: 35,
sorttype:'integer',
formatter: 'number',
align: 'right'
},
{
label: 'Answer Count',
name: 'AnswerCount',
width: 25
}
],
viewrecords: true, // show the current page, data rang and total records on the toolbar
width: 780,
height: 200,
rowNum: 15,
datatype: 'local',
pager: "#jqGridPager",
caption: "Load live data from stackoverflow"
});
fetchGridData();
function fetchGridData() {
var gridArrayData = [];
// show loading message
$("#jqGrid")[0].grid.beginReq();
$.ajax({
url: "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow",
success: function (result) {
for (var i = 0; i < result.items.length; i++) {
var item = result.items[i];
gridArrayData.push({
Title: item.title,
Link: item.link,
CreationDate: item.creation_date,
ViewCount: item.view_count,
AnswerCount: item.answer_count
});
}
// set the new data
$("#jqGrid").jqGrid('setGridParam', { data: gridArrayData});
// hide the show message
$("#jqGrid")[0].grid.endReq();
// refresh the grid
$("#jqGrid").trigger('reloadGrid');
}
});
}
function formatTitle(cellValue, options, rowObject) {
return cellValue.substring(0, 50) + "...";
};
function formatLink(cellValue, options, rowObject) {
return "<a href='" + cellValue + "'>" + cellValue.substring(0, 25) + "..." + "</a>";
};
/*---- 8< ------*/
// editfunc here works (an alert is popped up), although the format of the function parameters is not according to spec:
// searchfunc also works (it is the default)
$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',{
add:false, del:false, view:false,
editfunc: function(){alert('EDIT');}
});
/*---- >8 ------*/
});
</script>
</body>
</html>
Now take the same file, remove the small snippet between the snip lines, and replace it with the following snippet, that looks more like something I need to implement:
/*---- 8< ------*/
// editfunc does NOT work as desired here (no alert)
// search function works, WITH the parameters as specified here
// from the file jquery.jqGrid.js (): navGrid : function parameters: (elem, p, pEdit, pAdd, pDel, pSearch, pView)
// (=jqGrid-free #license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright(c) 2008, Tony Tomov, tony#trirand.com)
$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',
{ add:false, del:false, view:false }, // p
{ editfunc: function(r){alert('EDIT');} }, // pEdit (does NOT work)
{ }, // pAdd
{ }, // pDel
{ multipleSearch: true, closeAfterSearch:true, closeOnEscape:true, searchOnEnter:true, showQuery:true }, // pSearch (works with these options)
{ } // pView
);
/*---- >8 ------*/
Here, alas the editfunc does not work at all, I get the default edit function. Search now works though, as desired with the custom specified parameters.
In short: I cannot seem to get both a customized editfunc and search with custom parameters working!
I cannot see anything wrong with the second snippet. It is btw. also per some examples on the jqGrid wiki.
Any hints to get both working together would be appreciated.

The problem is very easy: you placed editfunc in the wrong place in your last snippet. The editfunc should be specified as the property of the second parameter of navGrid (together with add:false, del:false, view:false). You used the editfunc correctly in the first part of your code, but you placed it in the second part of the code on the wrong place. You can fix your code by usage
$('#jqGrid').jqGrid( 'navGrid', '#jqGridPager',
{ add:false, del:false, view:false, editfunc: function(r){alert('EDIT');} }, // p
{ }, // pEdit
{ }, // pAdd
{ }, // pDel
{ multipleSearch: true, closeAfterSearch:true, closeOnEscape:true,
searchOnEnter:true, showQuery:true }, // pSearch (works with these options)
{ } // pView
);
By the way, you placed the code of commercial product Guriddo jqGrid JS in the directory jqGrid-js-free, which sounds strange. Guriddo jqGrid JS can't be used for free. You can see the current prices here. I started development of free jqGrid fork of jqGrid, which can be used completely free of charge, exactly because of that. Free jqGrid implemented many new features, which can be helpful for you. The demo https://jsfiddle.net/OlegKi/odvxefra/3/ is a small modification of your code, which displays
I used additionally
url: "https://api.stackexchange.com/2.2/questions",
// add sending of custom parameters to the URL
postData: {
order: "desc",
sort: "activity",
tagged: "jqgrid",
site: "stackoverflow"
},
datatype: "json",
// below prmNames remove sending all standard jqGrid paranmeters
prmNames: {
page: null,
rows: null,
sort: null,
order: null,
search: null,
nd: null,
id: "question_id"
},
jsonReader: {
root: "items",
repeatitems: false,
id: "question_id"
},
loadonce: true,
forceClientSorting: true,
sortname: "creation_date",
sortorder: "desc"
The data will be loaded from the same URL "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow", sorted locally by creation_date property in the desc order and displayed in the grid. One can use other properties in the custom formatter by adding the properties in additionalProperties. For example you can add additionalProperties: ["owner", "is_answered", "score", "last_activity_date"] to save the properties locally and to have access to the properties inside of, for example, custom formatter.

Initializing bootstrap-markdown with JavaScript and customizing the options

I'm trying to use bootstrap-markdown and everything works fine except I can't call the plugin via JavaScript. For instance:
$("#content").markdownEditor({
autofocus: false,
savable: false,
iconlibrary: 'fa',
resize: 'vertical',
additionalButtons: custom_buttons, // an array defining custom commands
onPreview: function (e) {
var content = e.getContent();
console.log('content', content);
}
});
Does anyone has any ideas what might be the case? Couldn't find anything useful on the web or repo's github page. And yes I've already included markdown.js and to-markdown.js which weren't mentioned in the docs at all but it was quick find anyway.
All I need now is to call the editor, add a couple of custom toolbar buttons (image upload, code block insert etc.) and be done with it.
Code snippets, links & live fiddles are much appreciated :)

For some reason, changing the order of script references fixed this.
Here's the order now:
lib/markdown.js
lib/bootstrap-markdown.js ,
lib/to-markdown.js
And here's my initialization:
$(function () {
var custom_buttons = [[
{
name: "insertCode",
data: [{
name: "cmdInsertCode",
toggle: "toggle",
title: "Insert Code",
icon: "fa fa-fire",
callback: function (e) {
var selected = e.getSelection(),
content = e.getContent();
// e.replaceSelection(chunk);
// var cursor = selected.start;
//e.setSelection(cursor, cursor + chunk.length);
console.log('cmdInsertCode clicked');
}
}]
}
]];
$("#content").markdown({
autofocus: false,
savable: false,
iconlibrary: 'glyph',
resize: 'vertical',
additionalButtons: custom_buttons,
onShow: function (e) {
console.warn('e:editor shown');
}
});
});
Kudos :godmode:

items not loading in sencha touch 2

i have a sencha touch application that uses a tabpanel, a beta version of this application loads all items of the tabpanel and displays it.
with so many items, switching between tabs became slower
for optimization my idea is to load items only when a certain panel is activated after showing a loading mask.
i was able to make it work on first click but when i switch to the same tab another time it's not being filled or at least items are not being showed.
no exceptions are thrown.
Ext.application({
name : 'Sencha',
launch : function() {
var root = contents;
var children = root._listOfContentChild;
var mainPanel = Ext.create('components.NavigationPanel',
{
iconCls : 'more',
listeners: {
activate: function() {
mainPanel .setMasked({
xtype: 'loadmask',
message: 'Loading...'
});
setTimeout(function() {
loadItems(root,children); // returns my items
mainPanel .setItems(items);
mainPanel .setMasked(false);
}, 300);
} } });
var settingsPanel = Ext.create('components.NavigationPanel', {
title : 'Settings',
iconCls : 'settings',
});
view=Ext.Viewport.add({
xtype : 'tabpanel',
deferredRender:true,
tabBarPosition : 'bottom',
activeItem:settingsPanel,
items : [mainPanel,settingsPanel ]
});
}
});
overview:
my application is working correctly if all items are filled at the beginning before pressing on tabs
my problem is when i have a huge number of items and i press on their corresponding tab. it hangs for 1,2 secs.
a person using this application will think that he didn't press correctly on the tab and it will look so slow.
my approach is to load a mask on tab press just for 1 sec, this will make my tab respond automatically when pressed, then i add my items. this idea worked only for the first click, when i switch to another tab and back to the original nothing is being showed (except for the loading mask)
i tried mainPanel.add instead of mainPanel.setItems. i faced another problem, now in the next tap on the panel,my items are shown but without the loading mask as if i'm loading the items at the beginning before pressing.

I figured out the solution. Check the below code.
Hope that helps you!
Code :
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'Sencha',
launch: function() {
//var root = contents;
//var children = root._listOfContentChild;
var mainPanel = Ext.create('Ext.Panel', {
iconCls : 'more',
id:'mpanel',
styleHtmlContent:true,
listeners: {
painted: function() {
mainPanel.removeAll();
mainPanel.add({
masked:{
xtype:'loadmask',
id:'lmask',
}
});
setTimeout(function() {
Ext.getCmp('lmask').hide();
Ext.getCmp('mpanel').add({ xtype:'textfield',label:'Name',required:true });
}, 300);
}
}
});
var settingsPanel = Ext.create('Ext.Panel', {
title : 'Settings',
iconCls : 'settings',
});
view=Ext.Viewport.add({
xtype : 'tabpanel',
deferredRender:true,
tabBarPosition : 'bottom',
activeItem:settingsPanel,
items : [mainPanel,settingsPanel ]
});
}
});
Sample output :