I'm new to jQuery (and truth be told I am only using it because this WMD editor requires it).
Anyway, I am looking at the jQuery code (go to the above link and view jquery.wmd.js) and there are option defaults:
WMDEditor.defaults = { // {{{
version: 2.0,
output_format:"markdown",
lineLength:40,
button_bar: "wmd-button-bar",
preview: "wmd-preview",
output: "wmd-output",
input: "wmd-input",
...
Which leads me to believe that there is a way to pass on the options as arguments to the function. I am looking for a way to pass on the helpLink option. I am sure it is really easy, like facepalm easy, but I can't read jQuery and there is no documentation. Can someone show me how to pass on option arguments to this
$(function() {
$(".wmd-input").wmd();
});
If the plugin is setup normally you can do this:
var defaults = {
version: 2.0,
output_format:"markdown",
lineLength:40,
button_bar: "wmd-button-bar",
preview: "wmd-preview",
output: "wmd-output",
input: "wmd-input"
// and then keep on going
}
$(function() {
$(".wmd-input").wmd(defaults);
});
Related
I'm relatively new to javascript development and have tried to construct my own framework. I've been trying to convert my standard javascript functions to a framework. However I've been stuck at a relatively simple (I think), but nowhere explained issue.
In my HTML I call on the settings I want to use in my JavaScript (the user has to be able to edit them in html, not in js as it will be minified).
<script>
$(document).ready(function(){
var settings = {authenticFilter: 'on',
randomizeHeaders: {state: 'on', topHeader: 'h1', bottomHeader: 'h2'},
};
var papery = new Papery(settings);
});
</script>
But I can't seem to figure out how to use the settings I have given to my framework in the javascript file.
I know I can call upon this.settings = settings; in my javascript file, but in an if statement below, I want make use of specific settings in the given settings. However this option and several other ways I've tried to use the settings won't work. Can I even use the settings I give to the prototype from my html in an array?
var Papery = function (settings) {
Papery.authenticFilter = function() {
if (Papery.authenticFilter == 'on'){
$("img").addClass("authenticFilter");
$(".authenticFilter").css({"filter": "sepia(80%) grayscale(1) contrast(1) opacity(0.7)", "-webkit-filter": "sepia(80%) contrast(1) opacity(0.7)"});
}
}
}
You are using Papery.authenticFilter instead of settings.authenticFilter. Keep in mind that in usual libraries, a bunch of default settings are set in initialization in case they are not defined on the settings passed on the constructor.
I use jQuery for some time, but that is usually very simple jQuery. I just watched some video tutorial in which the author uses something called Pub Sub Pattern. I've never heard of it before, so I have searched on Stackoverflow and Google for explanations:
Why would one use the Publish/Subscribe pattern (in JS/jQuery)?
But it's still not clear to me, especially because of the code that is used by the author of the above mentioned tutorial. So, I will paste this code here and if you can give me explanations:
1. Here is the first .js file named pubsub.js, and I don't understand it:
(function($) {
var o = $({}); // ??? what is this ???
$.subscribe = function() { // ??? and this ???
o.on.apply(o, arguments); // ??? o.on.apply(o, arguments) ???
};
$.unsubscribe = function() { // ??? and this ???
o.off.apply(o, arguments); // ??
};
$.publish = function() { // ??? and this ???
o.trigger.apply(o, arguments); // ?? o.trigger.apply(o, arguments); ??
};
}(jQuery));
I know that with jQuery you can use $( document ).ready() or $(function() but I've never seen (function($) { ... }(jQuery)); - what does this mean/do? Also, I don't understand the rest of the code...
2. The next file is app.js and it contains:
(function() {
$.subscribe('form.submitted', function() {
$('.flash').fadeIn(500).delay(1000).fadeOut(500);
})
});
What does this actually do? Again, what (function() { ... }); means/do? And as for the rest of code, can you explain to me $.subscribe('form.submitted', function() {?
3. Finally, we have something like this:
$.publish('form.submitted', form); // publish?
This also is not clear to me.
I understand that all this is a basic implementation of PubSub Pattern with jQuery, but I still don't get why would someone do in this way (by using this pattern), I have read that answer on Stackoverflow, but it's still unclear to me... I guess that if I understand this code, then it would become clearer to me why and when to use this pattern.
In the case of (function($) { ... }(jQuery));, the author is passing the jQuery instance in as a parameter. Inside the function (which has it's own scope), the $ is a reference to the jQuery instance that was passed in.
"Pub Sub" is just another term for Event Management, or Event Handling. All you're saying is "When [this] happens, do [that]".
When you "subscribe", you are passing in 2 parameters, the "event" that you are listening for, and the code you want to run when the event "fires".
When you "publish", you are "firing" (or triggering) that event.
Think of it like the onclick event. When you set something up on the onclick event, you are subscribing to that event. When you click, you are publishing that event.
I want to add list of user-defined functions and variables to ace editor's auto-complete.
To do it I want to examine all the code user inserted to the document, find defined functions (and their arguments), defined variables and their scope, etc.
Main question
Is that data already calculated somewhere in the ace source-code (or language-plugin) and I can just grab it in a way?`
What I want
for exapmle, if user inserted code like this:
var var0 = 'abcd';
function foo(var1, var2){
var var3 = 'efg';
}
I want to add to the auto-complete box, function called 'foo' with two parameters - var1 and var2. I want to add also var0 to variables list, and to add var3 just when user writes in the scope it's defined (in the function).
What I already knows :
I know how to enable auto-complete and live auto-complete.
I know how to add new completer
I know that built-in Basic auto-complete adding all the words in document Indiscriminately
I know about ace-tern plugin, and I don't think I want to use it. For now it's still hackish, documention-less, and I can't figure how to enable it.
I know that Ace already have some of the data I'm after. For example it warns when a variable is re-defined when already defined in the same scope. So it had list of variables and their scope. My guess it's using jshint - but Is there a way to grab it from there?
I read ace documation and find a lot useful methods I can use to extract the data, if I have to. The question is if I really need to do this myself.
UPDATE: I implied that in my answer, but to clarify - Tern will do exactly what you are asking in what i want. Snippet below solves one more problem of providing some context which you do not want user even see in the editor. See screenshots of your code used at Ace.Tern live demo
That is opionated,but imo the best option for adding auto-complete in ace is Tern.
Tern accepts typedef configuration option ( described here: http://ternjs.net/doc/manual.html#typedef), but what is more interesting, it will accept your custom js object as a child, ie:
var myContext = {
name: 'myContext',
obj: obj
}
Where obj is your js object. Then in Tern configuration you will use it as:
defs: ['underscore', myContext]
Which will use both your custom object and underscore module for autocomplete.
Tern related ace.js config: (See https://github.com/sevin7676/Ace.Tern/blob/master/demo.html for comments on config options)
var myContext = { ... }
var editor = ace.edit("editor");
editor.getSession().setUseWorker(true);
ace.config.loadModule('ace/ext/tern', function () {
editor.setOptions({
enableTern: {
defs: ['browser', 'ecma5', myContext],
plugins: {
doc_comment: {
fullDocs: true
}
},
useWorker: true,
startedCb: function () {
console.log('editor.ternServer:', editor.ternServer);
},
},
enableSnippets: true,
enableBasicAutocompletion: true,
});
});
I am trying to verify that correct option is selected from selectbox using protractor.
This is how I pick value from selectbox:
element(by.id('form-mileage-unit')).click().then(function() {
element(by.cssContainingText('option', browser.params.lengthUnit)).click();
});;
So base on this I write code below:
it('Verify paint color', function() {
element(by.id('form-mileage-unit')).click().then(function() {
element(by.cssContainingText('option', browser.params.lengthUnit).getAttribute("value")).toEqual(browser.params.lengthUnit);
});;
});
Unfortunately I am getting error:
TypeError: Object by.cssContainingText("option", "Motohodin") has no method 'getText'
Can someone advise me with this?
You are closing the parenthesis in the wrong place and there is no expect(). Replace:
element(by.cssContainingText('option', browser.params.lengthUnit).getAttribute("value")).toEqual(browser.params.lengthUnit);
with:
var option = element(by.cssContainingText('option', browser.params.lengthUnit));
expect(option.getAttribute("value")).toEqual(browser.params.lengthUnit);
If you are dealing with select->option constructions a lot, consider using an abstraction over it that would make your tests cleaner and more readable, see:
Select -> option abstraction
If my Jasmine test has failures, it only shows those by default. I have to click "Spec List" to see all of the tests that were run.
Can I somehow get it to always show the spec list by default?
I am using jasmine 2.1.3 with require.js as outlined in this stackoverflow question:
Getting requirejs to work with Jasmine
and this was bugging me too.
I am also using jquery so I added an event trigger after the .execute() like so:
require(specs, function (spec) {
jasmineEnv.execute();
$('.spec-list-menu').click();
});
I couldn't find any configuration for setting the default, but you can see in the jasmine-html.js file:
find('.failures-menu').onclick = function() {
setMenuModeTo('failure-list');
};
find('.spec-list-menu').onclick = function() {
setMenuModeTo('spec-list');
};
setMenuModeTo('failure-list');
if you changed it to:
find('.failures-menu').onclick = function() {
setMenuModeTo('failure-list');
};
find('.spec-list-menu').onclick = function() {
setMenuModeTo('spec-list');
};
setMenuModeTo('spec-list');
It will also set the default.
I don't really like editing libraries like that since I usually forget what I have changed when I update the library.
That was the reason I went with the jquery route.