We Keep Coding

Using Node's 'Docx' to append to an existing Word doc with JS

I'm curious if it is possible to append to a generated Word document that I've created with Js and docx module. Currently I can generate the document and format it. Yet, I'm not seeing anything in their documentation about appending or adding a paragraph to an existing document (there is a section on exporting, but it always creates a new file, even if its the same name). Is this a limitation in JavaScript? I'm assuming that since I'd want to look for the document in the system files, that this creates a security issue (JS from a browser looking for a file in a end user's system) and hence why docx doesn't do it. Any guidance on this is greatly appreciated. Also, if it's not then would using Word APIs solve this?
P.S. I can share the code that generates the document, but that part is running fine, I just need to know if what I want is possible or if I'm wasting time.
This is a function I've tried and found from stackoverflow, but it was for a web app, this is a chrome extension. I've looked around and can't find anything else to try. Idally I'd like to write to the doc generated and add to it.
// pretty sure I cann't utilize a function like this unfornately
// all code is functional before this is call
function writeToDocument(doc, text){
let paragraph = new docx.Paragraph();
// invalid code
// paragraph.addRun(new docx.TextRun(text));
// doc.addParagraph(paragraph);
let packer = new docx.Packer();
docx.packer.toBuffer(doc).then((buffer) =>{
fs.writeFileSync(docName + ".docx",buffer);
});
}

It looks this is limitation of library. There is addSection() but it is private. Also, there are no methods to open a previously generated file.
Only way is: first create content, and later create doc and save it:
let paragraphs = [];
//any way to add element to array, eg
paragraphs[paragraphs.length] = new Paragraph({
children: [
new TextRun("Hello World"),
new TextRun({
text: "Foo Bar",
bold: true,
}),
new TextRun({
text: "\tGithub is the best",
bold: true,
}),
],
});
//paragraphs[paragraphs.length] = addAnotherParagraph()
//create document
const doc = new Document({
sections: [
{
properties: {},
children: paragraphs,
},
],
});
//and save it in fauvorite way
Packer.toBuffer(doc).then((buffer) => {
//why in `docx` documentation uses sync versioin?... You should avoid it
fs.writeFileSync("My Document.docx", buffer);
});

Get reference to existing OpenSeadragon Viewer

I need to add an overlay to an existing OpenSeadragon viewer object which isn't created by my code, but elsewhere in the application.
I have got to a point where I know that the viewer has been created as I can access the various html elements that are created via jQuery. However I can't work out if there's any way to create a viewer from an existing reference.
I've tried using the id of the viewer div in:
var viewer = OpenSeadragon(id: "open-seadragon-viewer-id");
but this doesn't seem to work.
Is there any way to do this or can you only get the viewer within the code that initialised it?

Here's one crazy thought... you could monkey-patch some portion of OSD in order to grab the viewer...
var viewer;
var originalIsOpen = OpenSeadragon.Viewer.prototype.isOpen;
OpenSeadragon.Viewer.prototype.isOpen = function() {
// Now we know the viewer!
viewer = this;
// Reinstate the original, since we only need to run our version once
OpenSeadragon.Viewer.prototype.isOpen = originalIsOpen;
// Call the original
return originalIsOpen.call(this);
}
It's kind of tacky, but should work. Note this assumes there is only one viewer on the page... if there are more than one, the same principle could work but you would need to keep track of an array of viewers.
BTW, I'm using isOpen, because it's simple and it gets called every frame. Other functions could work as well.
EDIT: fixed code so we are using the prototype. I still haven't actually tested this code so there may still be bugs!

This solution does not directly answer the question, as it relies on your own code creating the OpenSeaDragon object. It is an implementation of #iangilman's mention of storing the viewer in a global variable. However others may find it useful. (Note that passing a global variable to a function requires a workaround - see Passing a global variable to a function)
The code demonstrates how to use the same OpenSeaDragon object to display different pictures.
var viewer3=null; //global variable
var newURL1='image/imageToDisplay1.png';
var newURL2='image/imageToDisplay2.png';
var elementID='myID';
//the loadScan function will display the picture using openSeaDragon and can be called as many times as you want.
loadScan("viewer3",newURL1,elementID);
loadScan("viewer3",newURL2,elementID);
//the actual function
function loadScan(theViewer,newURL,theID) {
//if object has already been created, then just change the image
if (window[theViewer]!=null) {
window[theViewer].open({
type: 'image',
url: newURL
});
} else {
//create a new OpenSeadragon object
window[theViewer] = OpenSeadragon({
prefixUrl: "/myapp/vendor/openseadragon/images/",
id: theID,
defaultZoomLevel: 1,
tileSources: {
url: newURL,
type: 'image'
}
});
}
}

Bootstrap Dialog Global options?

I have many dialog popups spread across many pages, each utilizing BoostrapDialog
BootstrapDialog.show({...});
or
var x = new BootstrapDialog({...});
I want to add the "closeByBackdrop: true" option to all of them.
Is there a way to define some default options? I'm thinking along the same lines as jQuery's ajaxSettings() where you can set global options (but still override them in each specific instance if necessary)
$.ajaxSetup ({
cache: false,
error: function(x, t, m){
alert("Generic Error");
}
});
I cant't find any information remotely related to a global options setter anywhere...which leads me to think there is no such thing. wondering if someone knows of this... or even better has implemented their own way of achieving this.
The obvious solution is to manually go through all my dialogs and add the option manually, but since this is the preferred way they should ALL work, i'd like to not have to specify it for every instance.
The other solution would be to re code them all to accept my own options object, and just extend that object for each instance:
$(document).ready(function(){
modalOptions = {...};
});
function openDialogX(){
var dialogXOptions = modalOptions;
dialogXOptions.buttons = [...];
dialogXOptions.title = "...";
dialogXOptions.message = "...";
var dialogX = new BootstrapDialog(dialogXOptions);
}
It would be nice to not have to re-code them all to accept a custom options object.
TL;DR:
Is there a BoostrapDialog equivalent to jQuery's ajaxSettup() for redefining default options. If not, what solutions have you used to achieve this (if at all).

You do have a BootstrapDialog.defaultOptions around line 231 in the master repo. Use that to modify the defaults to whatever you need :
$.extend( BootstrapDialog.defaultOptions, {
closable: true,
closeByBackdrop: true,
autodestroy: false
} );
and take benefit of the new settings in all dialogs :
var myDialog = new BootstrapDialog({
title: 'Example',
message: 'Sample text'
}).open()
demo -> http://jsfiddle.net/ffj6r1b6/ (try change closeByBackdrop to false and re-run)

Ext Component Query Selector formats & options

I am a novice in Sencha Touch 2 & Ext too. I have jquery knowledge, so I am relating few things similar for quick understanding but got stuck in selector query.
I am creating dynamic textfields like:
var autoSuggestField = 'people_' + counter; // suppose counter is looping 5 times
var field = new Ext.field.Text({
name: autoSuggestField,
itemId: 'testing', // just for testing
// itemId: autoSuggestField, // actual code
inputCls:'auto-suggest',
placeHolder:'Select People',
cls:'place-holder',
listeners: {
clearicontap:function(obj, e, eOpts) {
// tried option 1
var allPeople = Ext.ComponentQuery.query('.place-holder .auto-suggest');
console.log(allPeople); // console says '[]'
// tried option 2
var allPeople = Ext.ComponentQuery.query('.place-holder');
console.log(allPeople); // console says '[]'
// tried option 3
var allPeople = Ext.ComponentQuery.query('.auto-suggest');
console.log(allPeople); // console says '[]'
// tried option 4
var allPeople = Ext.ComponentQuery.query('#testing');
console.log(allPeople); // console says '[class , class, class]'
}
}
});
But I am looking for something:
// var allPeople = Ext.ComponentQuery.query('[name^=people_]'); // as we do jquery
Or anything similar to it, which should work. Please clear what I am doing wrong in option[1,2,3] as most of the post says that using id[option 4] is bad. An how can we achieve using [name^=] "which says any element starting with people_". Is it possible in Ext? Is it possible through REGEX?(just for an idea)
Please add explanations for better understanding of selectors.

Instead of looking for regular expressinons you can add a an extra config like type:'people' for all the people related textfiled components and you can query it using the
var allPeopleComponents = Ext.ComponentQuery.query('textfield[type=people]');
The above will return the array of components having type='people'.
Please take a look here and for better understanding of ComponentQuery options here
Hope it helps you.

Dojo DataGrid Virtual Scrolling How-To?

I've been digging around for this one quite a bit. I'm using dojox.grid.datagrid and I have an ajax call that brings back 200-300 rows.
The grid renders and scrolls just fine in Chrome but scrolling is excruciatingly slow in IE 7 and 8. I'd like to use virtual scrolling to try and remedy the issue but can't find any sample code.
Here's what my code looks like at present.
function setupAvailableScenes(location) {
var avaiableScenesGridPane = dijit.byId("AvaiableScenesGridPane");
var availableScenesGrid = dijit.byId("AvailableScenesGrid");
if (_isFirstLoad) {
availableScenesGrid = new dojox.grid.DataGrid({
id: 'AvailableScenesGrid',
store: availableScenesStore,
query: { Id: "*" },
sortInfo: "1",
rowsPerPage: 20,
autoHeight:20,
style: "width:315px",
structure: [
{ name: "Available Scenes", field: "Name", width: "85%" },
{ name: " ",
field: "_item",
rowsPerPage: "25",
type: dojox.grid.cells._Widget,
editable: false,
width: "15%",
formatter: function (scene) {
return new dijit.form.Button(
{
label: "+",
onClick: function () {
AddSceneToSelectedScenes(scene);
}
})
}
}
]
});
avaiableScenesGridPane.set('content', availableScenesGrid);
}
var availableScenesStore = new dojo.data.ItemFileWriteStore({
url: _applicationPath + "/Location/" + location.Id + "/Scene.json",
preventUrlCache: true
});
availableScenesGrid.setStore(availableScenesStore);
}

Often one of the biggest things you can do to improve DataGrid performance is to throw away the ItemFileReadStore/WriteStore and use an optimized data store (personally I like QueryReadStore). It would mean needing a server-side servlet of some kind (PHP/JSP/etc) to handle the virtual scrolling/pagination, but I've seen major perf boosts over just using a store backed by a JSON file.
Some other things to consider, which may or may not help:
give your anonymous formatter function a name and try scrolling the table with the Chrome or Firebug profiles turned on to see if it's hogging a lot of cycles (or, like Vijay Agrawal said, you could try replacing the dijit.form.Button with a vanilla html <button> tag)
you shouldn't actually need to specify the dojox.grid.cells._Widget type for that cell; having a custom formatter returning a valid Dijit should be sufficient to make the Grid do the right thing.

Since you specified rowsPerPage=25, it is already doing virtual scrolling (it pulls the new set of rows only when user scrolls down)
Since you mention scrolling is very slow, the performance issue seems to be around rendering the new rows - you may try a couple things to improve performance:
1) remove autoHeight attribute. Instead, specify a fixed height in the style attribute
2) in the formatter function, instead of returning a dijit, try returning a simple html button/anchor styled as button
so remove the type:dojox.grid.cells._Widget attribute and in the format function return the html you want to use