So, I have the save function written and it works exactly as intended the first time I save a file. However, if I try to overwrite the file by saving it again, the file saves fine, but the window reloads clearing all the data that's been entered. I can just load the saved file and continue editing, but that will get annoying fast. I cannot find any info on how to resolve this issue, anywhere. Any help would be greatly appreciated.
function saveData(){
let data = {}
data.item1 = getItem1()
data.item2 = getItem2()
data.item3 = getItem3()
// convert data object to a string
let dataString = JSON.stringify(data, null, 4)
// open save dialog and chooses path
let savePath = dialog.showSaveDialog({filters: [{name: 'Save File', extensions: ['json']},]})
// save file to disk
if (savePath != undefined){
fs.writeFile(savePath, dataString, function(err) {
// file saved or err
})
}
}
And here is the menu template entry:
{ label: 'File',
submenu: [
{ label: 'New', click: SendEvent('file-new')},
{ label: 'Open', click: SendEvent('file-open')},
{ label: 'Save', accelerator: 'CmdOrCtrl+S', click: function(){
saveData();
}
},
{ label: 'Save As',
accelerator: 'CmdOrCtrl+Shift+S',
click: SendEvent('file-save-as')},
{ label: 'Close', click: SendEvent('file-close')},
{ type: 'separator'},
{ label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: function() {app.quit();}},
{ type: 'separator' },
{ label: 'Print', accelerator: 'CmdOrCtrl+P', click(){win.webContents.print({silent: false, printBackground: false})} }
]
},
And the getItem1 function:
function getItem1(){
const item1 = document.getElementById('itemID').src
return item1
}
Now I'm feeling a bit dumb. It turns out that the reason it was reloading was because I'm using the electron-reload package to automatically reload the page when I save the source files. It was also causing the page to reload when the save file was overwritten. Good to know going forward.
Edit:
You can tell electron-reload to ignore a directory by ammending your require statement to look something like this:
require('electron-reload')(__dirname, {ignored: /<folder_to_be_ignored>|[\/\\]\./});
https://github.com/yan-foto/electron-reload#api
Related
We are trying to add functionality to an old system. Our clients use scanners, so it would be ideal if we could add a QR code on screen for them to scan. I found a small open source javascript library that displays QR codes. I wanted to use that, but I am pulling the URL from the database, putting it into a Store, and then populating a link on screen. So, I have the following:
this.searchForm = {
frame: true,
xtype: 'form',
layout: 'form',
labelWidth: 150,
items: [{
xtype: 'component',
fieldLabel: 'Wireless App',
tpl: '<div id="qrcode" style="width:100px; height:100px;"></div>{Url}',
data: { Url: '' },
ref: '../../WirelessAppLabel'
}, {
xtype: 'label',
ref:'../../StatusLabel'
}]
};
lookupRF: function(search) {
this.createRFLookup();
this.lookupRFWindow.show();
this.WirelessAppStore = WirelessAppUrl.getInstance().createStore();
PM.Retriever.retrieve([this.WirelessAppStore], {
callback: function (response, success) {
if (success) {
this.WMSAppUrl = this.WirelessAppStore.data.items[0].data.Url;
this.lookupRFWindow.WirelessAppLabel.update({ Url: this.WMSAppUrl });
new QRCode(document.getElementById("qrcode"), this.WMSAppUrl);
}
},
scope: this
});
}
where PM is a namespace we created internally. (These two functions are not in the same file, but one references the other). But, I keep getting errors saying QRCode is not defined. I tried loading it using Ext.Loader.load() and also just adding a reference to the script in index.html, but neither option worked. Any suggestions?
Here is the link to the QR Code javascript we are attempting to utilize: https://davidshimjs.github.io/qrcodejs/
I found a much easier approach. Rather than try to do everything in Javascript, it is already hitting the server to pull from the database, so I added a QR Code generator that created a Bitmap server side, which converts it into a Base64String. So, now my code looks like this:
this.searchForm = {
frame: true,
xtype: 'form',
layout: 'form',
labelWidth: 150,
items: [{
xtype: 'component',
fieldLabel: 'Wireless App',
tpl: '{Url}<br/><img src="data:image/jpeg;base64, {Image}" style="width:100px;height:100px;" />',
data: {
Url: '',
Image: ''
},
ref: '../../WirelessAppLabel'
}, {
xtype: 'label',
ref:'../../StatusLabel'
}]
};
lookupRF: function(search) {
this.createRFLookup();
this.lookupRFWindow.show();
this.WirelessAppStore = WirelessAppUrl.getInstance().createStore();
PM.Retriever.retrieve([this.WirelessAppStore], {
callback: function (response, success) {
if (success) {
this.WMSAppUrl = this.WirelessAppStore.data.items[0].data.Url;
this.WMSAppImage = this.WirelessAppStore.data.items[0].data.QRCode;
this.lookupRFWindow.WirelessAppLabel.update({
Url: this.WMSAppUrl,
Image: this.WMSAppImage
});
}
},
scope: this
});
And then to actually create the QRCode, I used this open source package: https://github.com/codebude/QRCoder
Not exactly the solution that was asked for, but it works really well.
Please any one help me. I need the tinyMCE popup textbox validation. how to validate the textbox when click on ok Here i use the code below.
tinymce.PluginManager.add('weblink', function(editor, url) {
editor.addButton('weblink', {
text: 'Web Link',
icon: false,
onclick: function() {
editor.windowManager.open({
title: 'Web Link',
body: [
{type: 'textbox', name: 'caption', label: 'Enter Your Caption',maxLength:20},
{type: 'textbox', name: 'weburl', label: 'Enter Your Web URL',maxLength:32}
],
onsubmit: function(e){
var weblinkTxt = "href='"+e.data.weburl+"'";
if(hyperlink!='' && (hyperlink==1 || hyperlink =='1'))
{
editor.insertContent("<a "+weblinkTxt+">"+ e.data.caption+"</a>")
}
else
{
editor.insertContent("<img src='"+emailImg+"'>"+ e.data.caption+" "+e.data.weburl)
}
}
});
}
});
});
I just came across the need to validate the input from a dialog in TinyMCE as well. Unfortunately, it seems there is no native way to do it. However, I found a way to do it, using e.preventDefault().
The idea is to use the e.preventDefault() right after the submit function starts, and manage the dialog window afterwards. This way, it is possible to validate the input:
If it is not valid, then show a warning to the user and do nothing to the dialog window. It will be kept open, and the user will have to insert a new value;
If it is valid, then close the window dialog and continue the method to do whatever you want.
Applied to you example, it would be like this:
tinymce.PluginManager.add('weblink', function(editor, url) {
editor.addButton('weblink', {
text: 'Web Link',
icon: false,
onclick: function() {
editor.windowManager.open({
title: 'Web Link',
body: [
{type: 'textbox', name: 'caption', label: 'Enter Your Caption',maxLength:20},
{type: 'textbox', name: 'weburl', label: 'Enter Your Web URL',maxLength:32}
],
onsubmit: function(e){
//this will prevent TinyMCE from closing the window dialog
e.preventDefault();
/*here you apply your validations to e.data.weburl
and to e.data.caption*/
if(isNotValid){
/*The validation failed, so let's tell the user about it.
The empty function is to let TinyMCE know that it should
do nothing when clicking on the "OK" button. Without it,
I experienced different behaviour when clicking on
"OK" and when pressing "Enter".*/
editor.windowManager.alert('Invalid input!', function(){});
} else {
/*It is valid, so let's first close the
dialog window, and then do what you want*/
editor.windowManager.close();
var weblinkTxt = "href='"+e.data.weburl+"'";
if(hyperlink!='' && (hyperlink==1 || hyperlink =='1'))
{
editor.insertContent("<a "+weblinkTxt+">"+ e.data.caption+"</a>")
}
else
{
editor.insertContent("<img src='"+emailImg+"'>"+ e.data.caption+" "+e.data.weburl)
}
}
}
});
}
});
});
Hope this can still help you or anyone also facing this problem!
I have a strange behavior of extjs file upload.
The file upload defined as:
items: [{
xtype: 'filefield',
itemId: 'uploadandsign',
buttonText: NG.getLabel('browse'),
buttonOnly: true,
hideLabel: true,
width: 100
}]
If the file uploading is success I show successful label on the screen with remove "X" button:
onOpenFileBrowserChange: function (filefield, newValue, oldValue, eOpts) {
var me = this,
form = filefield.up('form').getForm(),
infoBox = invoiceorigin.down('#fileuploadinfoplaceholder'),
fileDescription,
secondfilefield,
customerFileName = newValue.replace(/^.*[\\\/]/, ''),
draft = me.getDraft(),
isSigned = true,
files = draft.files();
if (filefield.itemId === 'uploadandsign') {
isSigned = false;
secondfilefield = invoiceorigin.down('#uploadnosign');
fileDescription = 'File system, Unsigned';
}
secondfilefield.disable();
if (form.isValid()) {
form.submit({
url: NG.getLatestApiPath('WebInvoice', 'UploadInvoiceFile'),
waitMsg: NG.getLabel('webinvoiceInvoiceOriginUploadingFile'),
success: function (fp, o) {
if (o.result.success) {
var file = o.result.file;
files.add({
fileName: file.fileName,
createDate: file.createDate,
isAttachment: false,
isSigned: isSigned,
fileOrigin: fileDescription,
customerFileName: customerFileName,
invoiceFileOrigin: 'Local'
});
filefield.disable();
infoBox.removeAll();
infoBox.add(Ext.create('NG.view.webinvoice.InformationBox', {
data: {
closable: true,
icon: true,
iconCls: 'n-pdf-icon',
content: '<div class="n-text-overflow" style="width:145px;">' + fileDescription + '<br/>' + customerFileName + '</div>'
}
}));
}
else {
}
},
failure: function (form, action) {
}
});
}
return false;
},
Then if I remove the file from #infobox, the reset() function called:
onRemoveFileClick: function (view) {
var me = this,
invoiceorigin = view.up('invoiceorigin'),
uploadNoSignBtn = invoiceorigin.down('#uploadnosign'),
uploadAndSignBtn = invoiceorigin.down('#uploadandsign'),
infoBox = invoiceorigin.down('#fileuploadinfoplaceholder'),
draft = me.getDraft(),
files = draft.files(),
pagemanager = view.up('webinvoicepagemanager'),
invoiceFilePlace = files.findExact('isAttachment', false);
me.deleteFileConfirmReject(
NG.getLabel('webinvoiceInvoiceOriginDeleteInvoiceFileTitle'),
NG.getLabel('webinvoiceInvoiceOriginDeleteInvoiceFileMsg'),
function (buttonId, text, opt) {
if (buttonId == 'yes') {
infoBox.removeAll();
if (invoiceFilePlace > -1) {
files.removeAt(invoiceFilePlace);
}
me.fillInvoiceOriginStep(pagemanager);
uploadNoSignBtn.reset();
uploadAndSignBtn.reset();
uploadNoSignBtn.enable();
uploadAndSignBtn.enable();
}
});
}
After this action if I will choose the same file.... nothing happens with page... no any change event fired on the page.. However if I choose different file the behavior is OK.
In the ExtJS documentation said that the reset() function have to clear previous files uploads... however it does not helps.
Is any body met such file upload ExtJS behaivour and could help with this issue?
Thanks a lot.
What I tried and worked quite good was to get the file from the form with a typical JS document.getElementsByName('[name you gave]'); and it got perfectly the file uploaded without mattering in wich execution you are in.
Hope it helps.
I'm trying to write a tinymce plugin, so I checked out the tutorial "Creating a plugin" on http://www.tinymce.com/. Inserting and Replacing Content is no problem, everything works fine.
Now i want to change the value of the textbox automatically after changing the value of the listbox. As an example, after changing the listbox element, the value of the active element should be written to the textbox above. How can I access this element?
tinymce.PluginManager.add('myexample', function(editor, url) {
// Add a button that opens a window
editor.addButton('myexample',
{
text: 'Example',
onclick: function()
{
// Open window
editor.windowManager.open({
title: 'Example Plugin',
body: [
// Text
{type: 'textbox', name: 'title', label: 'Text', value: 'temp'},
// Listbox
{type: 'listbox', name: 'test', label: 'Ziel',
'values':
[
{text: 'Eins', value: '1'},
{text: 'Zwei', value: '2'}
],
onselect: function(v)
{
console.log(this.value());
// CHANGE THE VALUE OF THE TEXTBOX ...
// ????
}
}
],
onsubmit: function(e)
{
console.log(e.data.title, e.data.test);
}
});
}
});
});
I know this is an old question, but I was facing the same issue and I found this answer in another forum that saved my day.
The standard tinymce way to do this is to save the popup window in a variable:
var win = editor.windowManager.open({ //etc
And then for accessing the element:
win.find('#text'); // where text is the name specified
I hope this can help someone else in the future.
Now I found a solution. The best method is not to use the internal form-designer. You can use an IFrame with an external html-page, then you can work with document.getElementById(...)
Here you can find an example
I have the following file structure
And in content.php i have the following JS code
var file = "http://2sense.net/blog/posts/my-second-post.md"
var opts = {
basePath: "http://2sense.net/blog/posts/",
container: 'epiceditor',
textarea: null,
basePath: 'epiceditor',
clientSideStorage: true,
localStorageName: 'epiceditor',
useNativeFullscreen: true,
parser: marked,
file: {
name: 'epiceditor',
defaultContent: '',
autoSave: 100
},
theme: {
base: '/themes/base/epiceditor.css',
preview: '/themes/preview/preview-dark.css',
editor: '/themes/editor/epic-dark.css'
},
button: {
preview: true,
fullscreen: true
},
focusOnLoad: false,
shortcut: {
modifier: 18,
fullscreen: 70,
preview: 80
},
string: {
togglePreview: 'Toggle Preview Mode',
toggleEdit: 'Toggle Edit Mode',
toggleFullscreen: 'Enter Fullscreen'
}
}
window.editor = new EpicEditor(opts);
editor.load(function () {
console.log("Editor loaded.")
});
$("#openfile").on("click", function() {
console.log("openfile");
editor.open(file);
editor.enterFullscreen();
})
When i try to open the file with "editor.open(file);" does not happen anything. And I have verified that the event is triggered proprely when i press the button.
Do you have any idea how to fix this, or do you have a real example... the documentation for the API on the epiceditor website does not say so much.
Cheers
Client side JS cannot open desktop files (or, not easily or cross browser). This would be a nice feature to use with the File API, but that's not implemented. EpicEditor stores "files" in localStorage. When you do editor.open('foo') you're basically doing: JSON.parse(localStorage['epiceditor'])['foo'].content. This has been asked a few times, so I made a ticket to make it more clear in the docs.
https://github.com/OscarGodson/EpicEditor/issues/276
Does that help?
P.S. a pull request with docs that make sense to you are always welcome :)