I had an screen scraper app that used CEFSharp that was working fine until I updated CEFSharp to the latest version. It appears that the way I was registering javascript extension functions no longer works. Here is my startup code:
[STAThread]
public static void Main()
{
try
{
CefSettings settings = new CefSettings();
settings.RegisterExtension(new CefExtension("showModalDialog", Resources.showModalDialog));
//Perform dependency check to make sure all relevant resources are in our output directory.
Cef.Initialize(settings, performDependencyCheck: true, browserProcessHandler: null);
ProcessCommandLine();
var browser = new BrowserForm("https://www.google.com");
Application.Run(browser);
}
catch (Exception ex)
{
MessageBox.Show(ex.ToString());
}
}
If I comment out the settings.RegisterExtension line, it runs fine. It used to work. Here is the code for my extension:
(function () {
absolutePath = function (href) {
var link = document.createElement("a");
link.href = href;
return (link.protocol + "//" + link.host + link.pathname + link.search + link.hash);
}
showModalDialog = function (url, arg, opt) {
url = url || ''; //URL of a dialog
arg = arg || null; //arguments to a dialog
opt = opt || 'dialogWidth:300px;dialogHeight:200px'; //options: dialogTop;dialogLeft;dialogWidth;dialogHeight or CSS styles
var caller = showModalDialog.caller.toString();
var dialog = document.body.appendChild(document.createElement('dialog'));
dialog.setAttribute('style', opt.replace(/dialog/gi, ''));
dialog.innerHTML = '×<iframe id="dialog-body" name="dialog-body" src="' + absolutePath(url) + '" style="border: 0; width: 100%; height: 100%;"></iframe>';
//document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.getElementById('dialog-close').addEventListener('click', function (e) {
e.preventDefault();
dialog.close();
});
document.getElementById('dialog-body').addEventListener('load', function (e) {
this.style.height = this.contentWindow.document.body.scrollHeight + 'px';
this.style.width = this.contentWindow.document.body.scrollWidth + 'px';
this.contentWindow.close = function () {
dialog.close();
};
this.contentWindow.dialogArguments = arg;
this.window = this.contentWindow;
});
dialog.showModal();
//if using yield
if (caller.indexOf('yield') >= 0) {
return new Promise(function (resolve, reject) {
dialog.addEventListener('close', function () {
var returnValue = document.getElementById('dialog- body').contentWindow.returnValue;
document.body.removeChild(dialog);
resolve(returnValue);
});
});
}
//if using eval
var isNext = false;
var nextStmts = caller.split('\n').filter(function (stmt) {
if (isNext || stmt.indexOf('showModalDialog(') >= 0)
return isNext = true;
return false;
});
dialog.addEventListener('close', function () {
var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
document.body.removeChild(dialog);
//nextStmts[0] = nextStmts[0].replace(/(window\.)?showModalDialog\(.*\)/g, JSON.stringify(returnValue));
//eval('{\n' + nextStmts.join('\n'));
});
throw 'Execution stopped until showModalDialog is closed';
};
})();
Did something change about the syntax of extensions?
https://bugs.chromium.org/p/chromium/issues/detail?id=665391
It's a Chrome thing and it doesn't look like they are going to fix it.
Related
We've just started using the bot-framework. For client side we are using the cdn and not react. We have certain links that bot responds with. And we would like to append a url parameter to each link and open the link in the same window. So far this is what my code looks like. Is there a better way to achieve this using the botframework. I know there is cardActionMiddleware which has openUrl cardAction, but we don't have any cards and I am not sure on how to implement that.
var webchatMount = document.getElementById('webchatMount');
function loadChatbot() {
var xhr = new XMLHttpRequest();
xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
xhr.setRequestHeader('Authorization', 'BotConnector ' + '<secret>');
xhr.send();
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var store = window.WebChat.createStore({}, function ({ dispatch }) {
return function (next) {
return function (action) {
if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
var event = new Event('webchatincomingactivity');
event.data = action.payload.activity;
window.dispatchEvent(event);
}
return next(action);
}
}
});
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({ token: response }),
store: store,
},
webchatMount
);
document.querySelector('.webchat__send-box-text-box__input').focus();
window.addEventListener('webchatincomingactivity', ({ data }) => {
setTimeout(function () {
var links = document.querySelectorAll('#webchatMount a');
if (links.length >= 1) {
for (var i = 0; i <= links.length; i++) {
if (links[i] == undefined)
break;
var compare = new RegExp('maindomain');
var href = links[i].getAttribute('href');
var st = getParameterByName('st', href);
if (links[i].hasAttribute('target')) {
links[i].removeAttribute('target');
}
if (compare.test(href)) {
// internal link
// check if it has st=INTRA
if (st) {
console.log(' it has a value');
} else {
links[i].setAttribute('href', insertParam('st', 'INTRA', href));
}
} else {
// external link, do nothing
}
}
}
}, 1000);
});
}
}
}
and here are getParameterByName and insertParam functions.
function getParameterByName(name, url) {
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
function insertParam(key, value, url) {
key = encodeURIComponent(key);
value = encodeURIComponent(value);
// kvp looks like ['key1=value1', 'key2=value2', ...]
var kvp = url.split('&');
var i=0;
for(; i<kvp.length; i++){
if (kvp[i].startsWith(key + '=')) {
var pair = kvp[i].split('=');
pair[1] = value;
kvp[i] = pair.join('=');
break;
}
}
if(i >= kvp.length){
kvp[kvp.length] = [key,value].join('=');
}
return kvp.join('&');
}
I am new to botframework webchat so I don't know it very well. I know that the secret should not be used like that, but for know we are testing and would like to get it to work. Any help would be appericiated
Thanks.
I'm using angularjs in visual studio.using cordova media plugin startRecord() and stopRecord() is working but not able to pause and resume recording.I'm not using media capture plugin as i don't have default recorder installed.
This is my code:
var audurl = '///storage/emulated/0/New/';
audurl += 'Voice_' + '.amr';
var mediaRec;
function recordAudio() {
mediaRec = new Media(audurl, onSuccess, onError);
mediaRec.startRecord();
}
function pauseAudio() {
mediaRec = new Media(audurl, onSuccess, onError);
mediaRec.pauseRecord();
}
thanks...
On my phone the method media.resumeRecord was not available, although in this soure-code it is defined. Nevertheless you can take advantage of all other methods, like startRecord and stopRecord, to rebuild a kind of resumeRecord function, as it is done in a handler below:
var myRecordHandler = function () {
// ALL RECORDED FILES ARE SAVED IN THIS ARRAY
var recordedAudioFiles = [];
// REMEMBER POSITION WHEN PLAYING IS STOPPED
var currentPosition = {index:0,shift:0};
// PAUSE-MODE
var paused = false;
// SET A SPECIFC DIRECTORY WHERE THE FILES ARE STORED INTO
// DEFAULT: ''
this.setDirectory = function(dir) {this.dir=dir;};
// SET FILENAME
// DEFAULT: recoredFilesX
this.setFilename = function(filename) {this.filename=filename;};
// SET MIME/Type of THE FILES;
// DEFAULT: mp3
this.setFileType = function(type) {this.filetype=type;};
// GET ALL RECORED FILES
this.getAllFiles = function() {return recordedAudioFiles;};
// STOP/PAUSE RECORDED FILES
var handleRecordedFileHold = function () {
for (var r = 0; r < recordedAudioFiles.length; r++) {
var recordedAudioFile = recordedAudioFiles[r];
if(recordedAudioFile.isBeingRecorded){
if(paused)recordedAudioFile.media.pause();
else recordedAudioFile.media.stop();
continue;
}
recordedAudioFile.duration = new Date().getTime() - recordedAudioFile.startTime;
// call release to free this created file so that it could get deleted for instance
recordedAudioFile.media.stopRecord();
recordedAudioFile.media.release();
recordedAudioFile.isBeingRecorded = true;
}
}
// START RECORDING
this.startAudioRecording = function() {
paused = false;
handleRecordedFileHold();
var dir = this.dir ? this.dir : '';
var filename = this.filename ? this.filename : 'recoredFiles';
var type = this.filetype ? this.filetype : 'mp3';
var src = dir + filename + (recordedAudioFiles.length + 1) + '.' + type;
var mediaRec = new Media(src,
function () {
console.log('recordAudio():Audio Success');
},
function (err) {
console.log('recordAudio():Audio Error: ' + err.code);
});
recordedAudioFiles.push({
media: mediaRec,
startTime: new Date().getTime()
});
mediaRec.startRecord();
}
// PAUSE RECORDING
this.pauseRecoredFiles = function () {
if(recordedAudioFiles.length){
paused = true;
clearTimeout(currentPosition.timeout);
handleRecordedFileHold();
var recoredMedia = recordedAudioFiles[currentPosition.index].media;
recoredMedia.getCurrentPosition(
function (position) {
currentPosition.shift = position;
},
function (e) {
console.log("Error getting pos=" + e);
}
);
}
}
// PLAY RECORD
this.playRecordedFiles = function () {
handleRecordedFileHold();
var playNextFile = function () {
var recoredMedia = recordedAudioFiles[currentPosition.index];
if (recoredMedia) {
if(paused){
recoredMedia.media.seekTo(currentPosition.shift*1000);
paused = false;
}
recoredMedia.media.play();
currentPosition.timeout = setTimeout(function () {
currentPosition.index++;
recoredMedia.media.stop();
playNextFile();
}, recoredMedia.duration ? recoredMedia.duration : 0);
}
else{
paused = false;
currentPosition.index = currentPosition.shift = 0;
}
};
playNextFile();
}
// RESET PLAY
this.stopRecordedFiles = function () {
currentPosition.index = currentPosition.shift = 0;
clearTimeout(currentPosition.timeout);
handleRecordedFileHold();
}
// REMOVE ALL RECORDED FILES
this.removeRecordedFiles = function() {
paused = false;
currentPosition.index = currentPosition.shift = 0;
clearTimeout(currentPosition.timeout);
handleRecordedFileHold();
recordedAudioFiles = [];
}
};
var handler = new myRecordHandler();
// you can use this handler in your functions like this:
function recordAudio() {
// records one track and stops former track if there is one
handler.startAudioRecording();
}
function playAudio() {
handler.playRecordedFiles();
}
function pauseAudio() {
handler.pauseRecoredFiles();
}
function resumeAudio() {
pauseAudio();
recordAudio();
}
function stopAudio() {
handler.stopRecordedFiles();
}
Although I could not test your directory/filenames, because I do not have this directory created on my phone, these methods might help you to to store your files in a specific directory as well as with certain filenames:
handler.setDirectory('__YOUR_DIR__');
handler.setFilename('__YOUR_FILENAME__');
handler.setFileType('__YOUR_FILETYPE__');
I am using openModal() javascript function ,its working fine in ie ,but in chrome and safari its appending base url with url i am sending,resulting in an error? Please Help!!
function OpenModalReplyDialog(url, SubscriberId) {
//Todo: Cleanup the unnecessary code.
var returnValue = new ModalReturnValue(null, null, null);
var retVal = null;
var urlredirect = url + '/UC_5_0_0.aspx?SubscriberId=' + SubscriberId;
returnValue = openModal(urlredirect, 350, 500);
return true;
}
This is code for openModal()
function openModal(url, width, height, args, options)
{
var returnValue = new ModalReturnValue(null, null, null);
var dialogArguments = self;
var defaultWindowOptions = 'center:yes;status:no;unadorned:yes;help:no;resizable:yes;';
if(args !=null)
{
dialogArguments = args;
}
var windowOptions = 'dialogHeight:' + height + 'px;dialogWidth:' + width + 'px;' + (options != null ? options : defaultWindowOptions);
returnValue = window.showModalDialog(url, dialogArguments, windowOptions);
if (returnValue != null)
{
if (returnValue.Command == "TimeOut") {
if (pageSessionTimeoutInfo != null) {
if (pageSessionTimeoutInfo.IsModal) {
closeModal(returnValue);
return;
}
}
redirectToUrl(returnValue.Url);
}
else
return returnValue;
}
else
return returnValue;
}
window.showModalDialog() is deprecated, it’s removed by Chrome & Firefox etc but works in IE. Please consider other options like Jquery dialog or bootstrap dialog or HTML5 dialog element. window.showModalDialog polyfill using a dialog element, click here for details.
I am a programmer and I just made a simple webapp, with webview in Android studio. I have everything working except one thing. I used the WebQR set from LazarSoft. In my webapp part I have a file called webqr.js (found beneath) with the following content.
What I am trying to do is when a QR-code is scanned I want to open the result (if it is an URL) automatic in the same browser window. Now it just shows only the result.
Any help would be much appreciated.
var gCtx = null;
var gCanvas = null;
var c=0;
var stype=0;
var gUM=false;
var webkit=false;
var moz=false;
var v=null;
var imghtml='<div id="qrfile"><canvas id="out-canvas" width="320" height="240"></canvas>'+
'<div id="imghelp">drag and drop a QRCode here'+
'<br>or select a file'+
'<input type="file" onchange="handleFiles(this.files)"/>'+
'</div>'+
'</div>';
var vidhtml = '<video id="v" autoplay></video>';
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
if(files.length>0)
{
handleFiles(files);
}
else
if(dt.getData('URL'))
{
qrcode.decode(dt.getData('URL'));
}
}
function handleFiles(f)
{
var o=[];
for(var i =0;i<f.length;i++)
{
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
gCtx.clearRect(0, 0, gCanvas.width, gCanvas.height);
qrcode.decode(e.target.result);
};
})(f[i]);
reader.readAsDataURL(f[i]);
}
}
function initCanvas(w,h)
{
gCanvas = document.getElementById("qr-canvas");
gCanvas.style.width = w + "px";
gCanvas.style.height = h + "px";
gCanvas.width = w;
gCanvas.height = h;
gCtx = gCanvas.getContext("2d");
gCtx.clearRect(0, 0, w, h);
}
function captureToCanvas() {
if(stype!=1)
return;
if(gUM)
{
try{
gCtx.drawImage(v,0,0);
try{
qrcode.decode();
}
catch(e){
console.log(e);
setTimeout(captureToCanvas, 500);
};
}
catch(e){
console.log(e);
setTimeout(captureToCanvas, 500);
};
}
}
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
function read(a)
{
var html="<br>";
if(a.indexOf("http://") === 0 || a.indexOf("https://") === 0)
html+="<a target='_blank' href='"+a+"'>"+a+"</a><br>";
html+="<b>"+htmlEntities(a)+"</b><br><br>";
document.getElementById("result").innerHTML=html;
}
function isCanvasSupported(){
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}
function success(stream) {
if(webkit)
v.src = window.webkitURL.createObjectURL(stream);
else
if(moz)
{
v.mozSrcObject = stream;
v.play();
}
else
v.src = stream;
gUM=true;
setTimeout(captureToCanvas, 500);
}
function error(error) {
gUM=false;
return;
}
function load()
{
if(isCanvasSupported() && window.File && window.FileReader)
{
initCanvas(800, 600);
qrcode.callback = read;
document.getElementById("mainbody").style.display="inline";
setwebcam();
}
else
{
document.getElementById("mainbody").style.display="inline";
document.getElementById("mainbody").innerHTML='<p id="mp1">QR code scanner for HTML5 capable browsers</p><br>'+
'<br><p id="mp2">sorry your browser is not supported</p><br><br>'+
'<p id="mp1">try <img src="firefox.png"/> or <img src="chrome_logo.gif"/> or <img src="Opera-logo.png"/></p>';
}
}
function setwebcam()
{
document.getElementById("result").innerHTML="- scanning -";
if(stype==1)
{
setTimeout(captureToCanvas, 500);
return;
}
var n=navigator;
document.getElementById("outdiv").innerHTML = vidhtml;
v=document.getElementById("v");
if(n.getUserMedia)
n.getUserMedia({video: true, audio: false}, success, error);
else
if(n.webkitGetUserMedia)
{
webkit=true;
n.webkitGetUserMedia({video:true, audio: false}, success, error);
}
else
if(n.mozGetUserMedia)
{
moz=true;
n.mozGetUserMedia({video: true, audio: false}, success, error);
}
//document.getElementById("qrimg").src="qrimg2.png";
//document.getElementById("webcamimg").src="webcam.png";
document.getElementById("qrimg").style.opacity=0.2;
document.getElementById("webcamimg").style.opacity=1.0;
stype=1;
setTimeout(captureToCanvas, 500);
}
function setimg()
{
document.getElementById("result").innerHTML="";
if(stype==2)
return;
document.getElementById("outdiv").innerHTML = imghtml;
//document.getElementById("qrimg").src="qrimg.png";
//document.getElementById("webcamimg").src="webcam2.png";
document.getElementById("qrimg").style.opacity=1.0;
document.getElementById("webcamimg").style.opacity=0.2;
var qrfile = document.getElementById("qrfile");
qrfile.addEventListener("dragenter", dragenter, false);
qrfile.addEventListener("dragover", dragover, false);
qrfile.addEventListener("drop", drop, false);
stype=2;
}
Welcome to JavaScript, may you long prosper with its many uses!
As you are new to JavaScript, you may not know its Browser API, but fear not!
What you are looking for is window.open
Its syntax is simple:
window.open("http://example.com")
So, when you get the url from you qr decoder, all you have to do is window.open the URL, and viola, the window will appear in a new tab!
Now if you want to open in the same browser window, then you want to use
window.location.replace("http://example.com")
This will redirect the same tab, instead of a new one!
To implement this in your program, take a look at this read function:
function read(a) {
// If it's a URL, open in here
if(a.indexOf("http://") === 0 || a.indexOf("https://") === 0)
window.location.replace(a)
}
Hope I could help!
I'm trying to hack/personalize a html5/ajax/javascript plugin for drag&drop and upload a file
(the problem with this plugin is that it uploads the file directly after being dropped on the drop zone..) So i want to change this behaviour and control the moment in which the upload should happens
(the upload uses jquery-ajax) by externalizing the upload function
The main plugin's script is written in this page (the html5Upload.js) :
/*jslint unparam: true, browser: true, devel: true */
/*global define*/
define(function () {
'use strict';
var module = {},
noop = function () { },
console = window.console || { log: noop },
supportsFileApi;
function UploadManager(options) {
var self = this;
self.dropContainer = options.dropContainer;
self.inputField = options.inputField;
self.uploadsQueue = [];
self.activeUploads = 0;
self.data = options.data;
self.key = options.key;
self.maxSimultaneousUploads = options.maxSimultaneousUploads || -1;
self.onFileAdded = options.onFileAdded || noop;
self.uploadUrl = options.uploadUrl;
self.onFileAddedProxy = function (upload) {
console.log('Event: onFileAdded, file: ' + upload.fileName);
self.onFileAdded(upload);
};
self.initialize();
}
function FileUpload(file) {
var self = this;
self.file = file;
self.fileName = file.name;
self.fileSize = file.size;
self.uploadSize = file.size;
self.uploadedBytes = 0;
self.eventHandlers = {};
self.events = {
onProgress: function (fileSize, uploadedBytes) {
var progress = uploadedBytes / fileSize * 100;
console.log('Event: upload onProgress, progress = ' + progress + ', fileSize = ' + fileSize + ', uploadedBytes = ' + uploadedBytes);
(self.eventHandlers.onProgress || noop)(progress, fileSize, uploadedBytes);
},
onStart: function () {
console.log('Event: upload onStart');
(self.eventHandlers.onStart || noop)();
},
onCompleted: function (data) {
console.log('Event: upload onCompleted, data = ' + data);
file = null;
(self.eventHandlers.onCompleted || noop)(data);
}
};
}
FileUpload.prototype = {
on: function (eventHandlers) {
this.eventHandlers = eventHandlers;
}
};
UploadManager.prototype = {
initialize: function () {
console.log('Initializing upload manager');
var manager = this,
dropContainer = manager.dropContainer,
inputField = manager.inputField,
cancelEvent = function (e) {
e.preventDefault();
e.stopPropagation();
};
if (dropContainer) {
manager.on(dropContainer, 'dragover', cancelEvent);
manager.on(dropContainer, 'dragenter', cancelEvent);
manager.on(dropContainer, 'drop', function (e) {
cancelEvent(e);
manager.processFiles(e.dataTransfer.files);
});
}
if (inputField) {
manager.on(inputField, 'change', function () {
manager.processFiles(this.files);
});
}
},
processFiles: function (files) {
console.log('Processing files: ' + files.length);
var manager = this,
len = files.length,
file,
upload,
i;
for (i = 0; i < len; i += 1) {
file = files[i];
if (file.size === 0) {
alert('Files with files size zero cannot be uploaded or multiple file uploads are not supported by your browser');
break;
}
upload = new FileUpload(file);
manager.uploadFile(upload);
}
},
uploadFile: function (upload) {
var manager = this;
manager.onFileAdded(upload);
// Queue upload if maximum simultaneous uploads reached:
if (manager.activeUploads === manager.maxSimultaneousUploads) {
console.log('Queue upload: ' + upload.fileName);
manager.uploadsQueue.push(upload);
return;
}
manager.ajaxUpload(upload);
},
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// This is the function i want to externalize to be called from outside this script
ajaxUpload: function (upload) {
var manager = this,
xhr,
formData,
fileName,
file = upload.file,
prop,
data = manager.data,
key = manager.key || 'file';
console.log('Beging upload: ' + upload.fileName);
manager.activeUploads += 1;
xhr = new window.XMLHttpRequest();
formData = new window.FormData();
fileName = file.name;
xhr.open('POST', manager.uploadUrl);
// Triggered when upload starts:
xhr.upload.onloadstart = function () {
// File size is not reported during start!
console.log('Upload started: ' + fileName);
upload.events.onStart();
};
// Triggered many times during upload:
xhr.upload.onprogress = function (event) {
if (!event.lengthComputable) {
return;
}
// Update file size because it might be bigger than reported by the fileSize:
upload.events.onProgress(event.total, event.loaded);
};
// Triggered when upload is completed:
xhr.onload = function (event) {
console.log('Upload completed: ' + fileName);
// Reduce number of active uploads:
manager.activeUploads -= 1;
upload.events.onCompleted(event.target.responseText);
// Check if there are any uploads left in a queue:
if (manager.uploadsQueue.length) {
manager.ajaxUpload(manager.uploadsQueue.shift());
}
};
// Triggered when upload fails:
xhr.onerror = function () {
console.log('Upload failed: ', upload.fileName);
};
// Append additional data if provided:
if (data) {
for (prop in data) {
if (data.hasOwnProperty(prop)) {
console.log('Adding data: ' + prop + ' = ' + data[prop]);
formData.append(prop, data[prop]);
}
}
}
// Append file data:
formData.append(key, file);
// Initiate upload:
xhr.send(formData);
},
on: function (element, eventName, handler) {
if (!element) {
return;
}
if (element.addEventListener) {
element.addEventListener(eventName, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, handler);
} else {
element['on' + eventName] = handler;
}
}
};
module.fileApiSupported = function () {
if (typeof supportsFileApi !== 'boolean') {
var input = document.createElement("input");
input.setAttribute("type", "file");
supportsFileApi = !!input.files;
}
return supportsFileApi;
};
module.initialize = function (options) {
return new UploadManager(options);
};
return module;
});
i was thinking about to set the scope of all variables needed by that function to the global scope
and define it outside the prototype .. i'm not sure it will work as this function calls the manager to which it belongs itself..
honnestly, i'm not that expert to make this work , i hope your help guys
Simply set it to where it returns whatever it is you need in the global scope. For example,
Instead of:
return module;
Do:
return {
module: module,
fileUpload: FileUpload };
You could take the text define and replace it with var uploader = this will give you an object with all of the characteristics and methods including the one you are looking to extract. Now if this code is relying on some other externally defined object it might through some errors but a basic reading of the code doesn't appear to rely on anything. I would not change the scope of the variables or attempt to cut out one (or even a few) methods. JavaScript closures make removing arbitrary code much harder.
As i said, setting the variables's scope needed by the function to the global scope
var monmanager;
var monupload;
/////////////////////////////////////////////////////////////////////////////////////
/*jslint unparam: true, browser: true, devel: true */
/*global define*/
define(function () {
'use strict';
var module = {},
noop = function () { },
console = window.console || { log: noop },
supportsFileApi;
function UploadManager(options) {
var self = this;
self.dropContainer = options.dropContainer;
self.inputField = options.inputField;
self.uploadsQueue = [];
self.activeUploads = 0;
self.data = options.data;
self.key = options.key;
self.maxSimultaneousUploads = options.maxSimultaneousUploads || -1;
self.onFileAdded = options.onFileAdded || noop;
self.uploadUrl = options.uploadUrl;
self.onFileAddedProxy = function (upload) {
console.log('Event: onFileAdded, file: ' + upload.fileName);
self.onFileAdded(upload);
};
self.initialize();
}
function FileUpload(file) {
var self = this;
self.file = file;
self.fileName = file.name;
self.fileSize = file.size;
self.uploadSize = file.size;
self.uploadedBytes = 0;
self.eventHandlers = {};
self.events = {
onProgress: function (fileSize, uploadedBytes) {
var progress = uploadedBytes / fileSize * 100;
console.log('Event: upload onProgress, progress = ' + progress + ', fileSize = ' + fileSize + ', uploadedBytes = ' + uploadedBytes);
(self.eventHandlers.onProgress || noop)(progress, fileSize, uploadedBytes);
},
onStart: function () {
console.log('Event: upload onStart');
(self.eventHandlers.onStart || noop)();
},
onCompleted: function (data) {
console.log('Event: upload onCompleted, data = ' + data);
file = null;
(self.eventHandlers.onCompleted || noop)(data);
}
};
}
FileUpload.prototype = {
on: function (eventHandlers) {
this.eventHandlers = eventHandlers;
}
};
UploadManager.prototype = {
initialize: function () {
console.log('Initializing upload manager');
var manager = this,
dropContainer = manager.dropContainer,
inputField = manager.inputField,
cancelEvent = function (e) {
e.preventDefault();
e.stopPropagation();
};
if (dropContainer) {
manager.on(dropContainer, 'dragover', cancelEvent);
manager.on(dropContainer, 'dragenter', cancelEvent);
manager.on(dropContainer, 'drop', function (e) {
cancelEvent(e);
manager.processFiles(e.dataTransfer.files);
});
}
if (inputField) {
manager.on(inputField, 'change', function () {
manager.processFiles(this.files);
});
}
},
processFiles: function (files) {
console.log('Processing files: ' + files.length);
var manager = this,
len = files.length,
file,
upload,
i;
for (i = 0; i < len; i += 1) {
file = files[i];
if (file.size === 0) {
alert('Files with files size zero cannot be uploaded or multiple file uploads are not supported by your browser');
break;
}
upload = new FileUpload(file);
manager.uploadFile(upload);
}
},
uploadFile: function (upload) {
var manager = this;
//////////my modification////////////////-----------------------------------------<<<<<<<<<<<<<<<
monmanager = manager;
//////////////////////////-----------------------------------------<<<<<<<<<<<<<<<
manager.onFileAdded(upload);
// Queue upload if maximum simultaneous uploads reached:
if (manager.activeUploads === manager.maxSimultaneousUploads) {
console.log('Queue upload: ' + upload.fileName);
manager.uploadsQueue.push(upload);
return;
}
//////////my modification////////////////-----------------------------------------<<<<<<<<<<<<<<<
monupload = upload;
//////////////////////////-----------------------------------------<<<<<<<<<<<<<<<
// manager.ajaxUpload(upload);
},
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// This is the function i want to externalize to be called from outside this script
ajaxUpload: function (upload) {
var manager = this,
xhr,
formData,
fileName,
file = upload.file,
prop,
data = manager.data,
key = manager.key || 'file';
console.log('Beging upload: ' + upload.fileName);
manager.activeUploads += 1;
xhr = new window.XMLHttpRequest();
formData = new window.FormData();
fileName = file.name;
xhr.open('POST', manager.uploadUrl);
// Triggered when upload starts:
xhr.upload.onloadstart = function () {
// File size is not reported during start!
console.log('Upload started: ' + fileName);
upload.events.onStart();
};
// Triggered many times during upload:
xhr.upload.onprogress = function (event) {
if (!event.lengthComputable) {
return;
}
// Update file size because it might be bigger than reported by the fileSize:
upload.events.onProgress(event.total, event.loaded);
};
// Triggered when upload is completed:
xhr.onload = function (event) {
console.log('Upload completed: ' + fileName);
// Reduce number of active uploads:
manager.activeUploads -= 1;
upload.events.onCompleted(event.target.responseText);
// Check if there are any uploads left in a queue:
if (manager.uploadsQueue.length) {
manager.ajaxUpload(manager.uploadsQueue.shift());
}
};
// Triggered when upload fails:
xhr.onerror = function () {
console.log('Upload failed: ', upload.fileName);
};
// Append additional data if provided:
if (data) {
for (prop in data) {
if (data.hasOwnProperty(prop)) {
console.log('Adding data: ' + prop + ' = ' + data[prop]);
formData.append(prop, data[prop]);
}
}
}
// Append file data:
formData.append(key, file);
// Initiate upload:
xhr.send(formData);
},
on: function (element, eventName, handler) {
if (!element) {
return;
}
if (element.addEventListener) {
element.addEventListener(eventName, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, handler);
} else {
element['on' + eventName] = handler;
}
}
};
module.fileApiSupported = function () {
if (typeof supportsFileApi !== 'boolean') {
var input = document.createElement("input");
input.setAttribute("type", "file");
supportsFileApi = !!input.files;
}
return supportsFileApi;
};
module.initialize = function (options) {
return new UploadManager(options);
};
return module;
});
and then i could call the function from outside :
$("#testcontrol").click(function(){
console.log( "it's clicked !" );
monmanager.ajaxUpload(monupload);
});
now it's fine :)