CodeMirror with elFinder! Wasn't able to find an example anywhere so had to figure it out. It turns out to be really simple in the end, but it took a bit to figure out so I'm posting this because someone out there is bound to need it eventually.
$().ready(function() {
var elf = $('#elfinder').elfinder({
url : 'elfinder-2.0-rc1/php/connector.php',
commandsOptions: {
edit : {
// list of allowed mimetypes to edit
// if empty - any text files can be edited
mimes : ['text/plain', 'text/html', 'text/javascript', 'text/css'],
// you can have a different editor for different mimes
editors : [{
mimes : ['text/plain', 'text/html', 'text/javascript', 'text/css'],
load : function(textarea) {
this.myCodeMirror = CodeMirror.fromTextArea(textarea, {
lineNumbers: true,
theme: "xq-dark"
})
},
close : function(textarea, instance) {
this.myCodeMirror = null;
},
save : function(textarea, editor) {
textarea.value = this.myCodeMirror.getValue();
this.myCodeMirror = null;
}
} ] //editors
} //edit
} //commandsoptions
}).elfinder('instance');
});
The answer is above!
I should really have asked this as a question and then answered it. Sorry.
Related
In my project I have 3 company root nodes and test children.With Checkboxes.
- []Company1
-- []Test1
-- []Test2
- []Company2
-- []Test1
-- []Test2
-- []Test 3
- []Company3
-- []Test1
The tree is much more complex, but for question I reduced the levels. However, I want to manage, that it is forbidden to select two Companies. As sample, if Test1 from Company2 is selected and the user select Test1 from Company1, then all selections from Company1 and Company3 get unchecked.
My code for the jstree is:
$(function () {
$('#html1').on('select_node.jstree', function(e, data){
var countSelected = data.selected.length;
if (countSelected>1) {
data.instance.deselect_node( [ data.selected[0] ] );
}
});
$.ajax({
type: "get",
url: "/jstreecontent",
dataType: "json",
success: function(data) {
$('#html1').jstree({
'core' : {
'data' : data
},
"checkbox" : {
"keep_selected_style" : false
},
"plugins" : [ "checkbox", "contextmenu"],
"checkbox": {
three_state : true, // to avoid that fact that checking a node also check others
whole_node : false, // to avoid checking the box just clicking the node
tie_selection : false // for checking without selecting and selecting without checking
},
"contextmenu": {
"items": function ($node) {
var tree = $("#html1").jstree(true);
if($node.a_attr.type === 'test')
return getTestContextMenu($node, tree);
}
}
});
},
complete: function() {
// This function will be triggered always, when ajax request is completed, even it fails/returns other status code
console.log("complete");
},
error: function() {
// This will be triggered when ajax request fail.
console.log("Error");
}
});
});
If I remove the part:
"checkbox": {
three_state : true, // to avoid that fact that checking a node also check others
whole_node : false, // to avoid checking the box just clicking the node
tie_selection : false // for checking without selecting and selecting without checking
},
The selection with the root nodes works perfect, just one root node is allowed, but I cannot select a whole root, just its nodes. So I think the
$('#html1').on('select_node.jstree', function(e, data){
var countSelected = data.selected.length;
if (countSelected>1) {
data.instance.deselect_node( [ data.selected[0] ] );
}
});
Is working on all nodes, not only on the top one. Maybe this is wrong.
But it seems, I fail with it, it is the wrong way. I hope someone else had the same problem in the past and give me a hint for this.
I want to use the echarts to make a Data Visualization Force layout, when i follow the step to setup all option, it has an error, said
Uncaught Error: Component series.force not exists. Load it first
i think it might be javascript goes wrong, so i change another version of the echarts.js, but the error still exist, and anyone help me ?
btw, this is my second post on stackoverflow, still learning how to use this platform, so if anywhere that you think i can describe the problem better, pls tell me, thanks.
here is my javascript cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0-release/echarts.js"></script>
and here is my main code
<div id="main" style="width: 1280px;height:800px;"></div>
<script>
// init
var myChart = echarts.init(document.getElementById('main'));
// if the website is still loading, show the animation
// myChart.showLoading();
var data = data_format(jdata);
var option = {
title : {
text : 'test', // this field will connect to the book name
},
tooltip : {},
toolbox : {
show : true,
feature : {
saveAsImage : {
title : 'save as image',
show : true,
type : 'png'
}
}
},
legend : {},
series : [
{
type : 'force',
name : 'test',
ribbonType : false,
categories : [
{
name : 'person'
}
],
itemStyle : {
normal : {
label : {
show : true,
textStyle : {
color : 'black'
}
},
nodeStyle : {
}
}
},
minRadius : 15,
maxRadius : 25,
gravity : 1,
scaling : 1,
linkSymbol : 'arrow',
steps : 10,
coolDown : 1,
nodes : data.nodes,
links : data.links
}
]
}
// setup all option
myChart.setOption(option);
</script>
According to the docs (click on the series node on the left menu to open it and see all types) series has no force type
Valid types are: e.g. bar, graph, etc.
Maybe this example will help you. It uses a series of type graph which has a force object.
e.g. from the example:
series : [
{
type: 'graph',
layout: 'force',
force: {
repulsion: 100
}
...
I can't get wikimedia's jquery.i18n plugin to work with external files.
This :
// Localisation
$.i18n.debug = true;
$.i18n().load( {
'fr' : {
'message-hello' : 'bonjour!'
},
'en': '/assets/i18n/en.json'
} );
$.i18n().locale = 'fr';
console.log($.i18n('message-hello'));
is working perfectly. Console says:
Loading messages from: /assets/i18n/en.json jquery.i18n.js:269
bonjour!
but this :
// Localisation
$.i18n.debug = true;
$.i18n().load( {
'fr' : {
'message-hello' : 'bonjour!'
},
'en': '/assets/i18n/en.json'
} );
$.i18n().locale = 'en';
console.log($.i18n('message-hello'));
is not. Console says:
Loading messages from: /assets/i18n/en.json jquery.i18n.js:269
message-hello
What am I missing ?
Here is my /assets/i18n/en.json file :
{
"#metadata": {
"authors": [
"Alice",
"David",
"Santhosh"
],
"last-updated": "2012-09-21",
"locale": "en",
"message-documentation": "qqq",
"AnotherMetadata": "AnotherMedatadataValue"
},
"appname-title": "Example Application",
"appname-sub-title": "An example application with jquery.i18n",
"appname-header-introduction": "Introduction",
"appname-about": "About this application",
"appname-footer": "Footer text",
"message-hello": "hello!"
}
EDIT : If i do $.i18n('message-hello') from the console, it works. Could this be because the json file is not yet loaded when I call $.i18n('message-hello') from my script ? And if so, how can I tell the script to wait until it is ?
OK so it seems that when I call console.log($.i18n('message-hello'));, the JSON file has not been loaded yet. The workaround I've found is to use the done() method and wrap all my other code inside.
$.i18n.debug = true;
$.i18n().locale = 'en';
$.i18n().load( {
'fr' : {
'message-hello' : 'bonjour!'
},
'en': '/assets/i18n/en.json'
}).done( function() {
// All my other JS code
});
If someone has a better solution, I'll take it.
I have a problem with a js script running in Internet Explorer.
Basically the script runs fine in Firefox, but I need to embed it into the webbrowser control in a silverlight application, for which it has to run error free in the Internet Explorer engine.
Running it in the IE produces an "Expected object" error in the following line:
$f("player", "player.swf", {
How could this be rewritten to also work in IE?
Here is the complete script:
$f("player", "player.swf", {
key: '##18a1aaa6552d45a2cfe',
log: { level: 'debug', filter: 'org.flowplayer.cluster.*' },
clip: {
url: 'live3',
live: true,
provider: 'rtmp',
autoBuffer:true,
bufferLength:10,
scale:'fit',
connectionProvider: 'cluster',
onStart: function(clip){ }
},
canvas: {backgroundImage: 'url(staytuned.jpg)'},
onError:function(err){canvas: {backgroundImage: 'url(taytuned.jpg)'}},
contextMenu: [
'player 1.1',
{'About ...' : function() {
location.href = "url/?page=aboutus";}},
{'Contact ...' : function() {
location.href = "url/?page=contactus";}},
{'More Casts ...' : function() {
location.href = "url/?page=casts";}},
],
plugins: {
overlay: {
url: 'overlay.swf',
top: 0,
right: 0,
width: 854,
height:450,
zIndex:3
},
rtmp: {
url: 'rtmp.swf'
},
cluster: {
url: 'cluster.swf',
netConnectionUrl: 'url',
hosts: [
{host:'url'},
{host:'url'}
]
},
controls: {
autoHide: false,
url:'url',
zIndex:5
},
gatracker: {
url: "analytics.swf",
trackingMode: "Bridge",
bridgeObject: "pageTracker"
}
}
});
Thanks,
Andrej
First answer was incorrect. See comments for details.
Edit
The problem is likely that $f is not defined at the time you're trying to call it. Place alert(typeof $f); on the line immediately before the line causing the error. If it doesn't alert function, them I'm right.
Make sure you're including the script that contains the definition for $f before you try to call it.
Goto www.jslint.com. Paste this entire script into the top window and click the "jslint" button below it.
You'll find that onError is malformed:
onError:function(err){canvas: {backgroundImage: 'url(taytuned.jpg)'}},
it should read more like:
onError:function(err) {
var canvas = {backgroundImage: 'url(taytuned.jpg)'};
return canvas;
},
There's a similar issue a few lines below.
And I suspect that "taytuned.jpg" needs to be enclosed within quotes, but it's not my script.
I've got two instances of uploadify in my form. You'll find the definitions below.
And two buttons that trigger the uploads. The image button is the only one relevant to the question:
$( "#btnimageupload" ).button().click(function()
{
$('#picbrowse').uploadifySettings( 'scriptData', ({ 'isSelected': $( '#selectImage' ).val() }));
$('#picbrowse').uploadifyUpload();
});
Now, here's the issue:
When I click btnimageupload button, the image doesn't upload. The progressbar goes to 100 and stops. No errors, javascript or otherwise.
But, when I disable the vdobrowse file input box, and its corresponding script, everything works fine. The images are uploaded and the data is transferring.
Here's the tricky part... if I don't pass the scriptData on the btnimageupload click handler, images will upload even with vdobrowse file input box on the page.
So it seems to me like scriptData is breaking uploadify when there's more than one instance of uploadify on the page.
Anyone know how I could solve this?
Uploadify definitions
$('#picbrowse').uploadify(
{
uploader : 'script/uplodify/uploadify.swf',
script : '../../dopost.php',
cancelImg : 'script/uplodify/cancel.png',
folder : '/images',
queueID : 'picqueue',
auto : false,
multi : true,
fileDesc : 'Image Files',
fileExt : '*.gif;*.jpg;',
queueSizeLimit: 5,
scriptData:
({
'action': 'upload_image',
}),
onComplete: function( event, queueID, fileObj, response, data )
{
console.log( reponse)
}
});
.
$('#vdobrowse').uploadify(
{
uploader : 'script/uplodify/uploadify.swf',
script : '../../dopost.php',
cancelImg : 'script/uplodify/cancel.png',
folder : '/video',
queueID : 'vdoqueue',
auto : false,
multi : true,
fileDesc : 'Video Files',
fileExt : '*.avi;*.mpg;*.mov;*.mp4;*.mpeg;*.flv;*.mkv;*.wmv',
queueSizeLimit: 5,
scriptData:
{
action: 'upload_video'
},
onComplete: function( event, queueID, fileObj, response, data )
{
console.log( response );
}
});
The plugin appears to be putting the
options into global space, which is
why when you are using two or more
uploadify's with scriptData it is
picking up the last stored value in
scriptData.
I see running two uploadify's on one
page a pointless exercise and as such
I never test the functionality with
multiple uploadify's.
uploadifySettings works perfectly with
one uploadify. Multiple uploadify's
are the demo page to demonstrate the
different setups possible.
That said, it is still obviously a
problem for users and we will need to
fix it for those that wish to use
multiple uploadify's on the same page.
Forum
I suggest to use swfUpload. I am use in at my project and tested with multiple instances and it's work perfect. So swfUpload easy to understand and api looks like as uploadify api.
Given that there seems to be a limitation with scriptData and multiple Uploadifys on a page, what you could do is skip the scriptData and folder attributes and parse out the file types inside dopost.php and take an action based on that.
For example:
$fileParts = pathinfo($_FILES['Filedata']['name']);
$extension = strtolower($fileParts['extension']);
switch($extension){
case "gif" | "jpg":
// Do Image Upload Action
break;
case "avi" | "mpg" | "mov" | "mp4" | "mpeg" | "flv" | "mkv" | "wmv":
// Do Video Upload Action
break;
}
I'm receiving the scripData just fine, I've made an example on my website
I've limited the upload size to 500KB for obvious reasons and corrected the code:
$('#picbrowse').uploadify(
{
uploader : 'uploadify.swf',
script : 'uploadify.php',
cancelImg : 'cancel.png',
folder : 'uploads/images',
queueID : 'picqueue',
auto : false,
multi : true,
removeCompleted : false,
fileDesc : 'Image Files',
fileExt : '*.gif;*.jpg',
sizeLimit : 512000,
queueSizeLimit: 5,
scriptData: {action: 'upload_image'},
onComplete: function( event, queueID, fileObj, response, data )
{
$ul.html('');
var json = jQuery.parseJSON(response);
$.each(json,function(k,v){
var li = "<li>"+k+": "+v+"</li>";
$ul.append(li);
});
},
onError: function (event,ID,fileObj,errorObj) {
console.log(errorObj.type + ' Error: ' + errorObj.info);
}
});
$('#vdobrowse').uploadify(
{
uploader : 'uploadify.swf',
script : 'uploadify.php',
cancelImg : 'cancel.png',
folder : 'uploads/video',
queueID : 'vdoqueue',
auto : false,
multi : true,
sizeLimit : 512000,
fileDesc : 'Video Files',
fileExt : '*.avi;*.mpg;*.mov;*.mp4;*.mpeg;*.flv;*.mkv;*.wmv',
queueSizeLimit: 5,
scriptData: {action: 'upload_video'},
onComplete: function( event, queueID, fileObj, response, data )
{
$ul.html('');
var json = jQuery.parseJSON(response);
$.each(json,function(k,v){
var li = "<li>"+k+": "+v+"</li>";
$ul.append(li);
});
}
});
And I'm using the standard uploadify.php and echoing the POST variable instead:
echo json_encode($_POST);