I'm trying to add behavior to a google closure editor, and I'm having trouble getting even an empty plugin to register.
(function() {
goog.provide('my.EscapeKeyPressedPlugin');
goog.require('goog.editor.Plugin');
my.EscapeKeyPressedPlugin = function() {
goog.editor.Plugin.call(this);
};
goog.inherits(my.EscapeKeyPressedPlugin, goog.editor.Plugin);
Rally.ui.richtext.EscapeKeyPressedPlugin.prototype.getTrogClassId = function() {
return 'EscapeKeyPressedPlugin';
};
})();
This is what I've conjured attempting to copy examples of built in plugins, but when I add this plugin to my editor, the editor becomes completely non-functional and no controls render. I don't get any js errors either, so I'm stuck.
What am I missing here?
The issue was namespacing. Something about how and when goog.provide or Ext.ns('') got hit caused the two to collide and destroy objects.
I moved to a new namespace and my example plugin works.
Related
I've been attempting to implement a ASP.NET MVC custom validation method. Tutorials I've used such as codeproject explain that you add data-val-customname to the element. Then jQuery.validate.unobtrusive.js then uses the third segment of the attribute
data-val-<customname>
as the name of the rule, as shown below.
$.validator.addMethod('customname', function(value, element, param) {
//... return true or false
});
However I just can't get the customname method to fire. By playing around I have been able to get the below code to work, but according to all the sources I've read Unobtrusive validation should not work like this.
$.validator.addMethod('data-val-customname', function(value, element, param) {
//... return true or false
});
I've posted an example of both methods
jsfiddle example
Any help would be much appreciated
I've updated my question hopefully to make clearer.
I have finally found got there in the end, but still feels like too much hard work and therefore I've probably got something wrong. Initial I was scuppered by a bug in Chrome Canary 62 which refused to allow the adding of a custom method.
My next issue was having to load jQuery, jQuery.validate and jQuery.validate.unobtrusive in the markup and then isolate javascript implementation in a ES6 class. I didn't want to add my adaptors before $().ready() because of my class structure and loading of the app file independent of jQuery. So I had to force $.validator.unobtrusive.parse(document);.
Despite this I was still having issues and finally debugged the source code and found that an existing validator information that is attached to the form was not merging with the updated parsed rules, and essentially ignoring any new adaptors added.
My final work around and admit feels like I've done too much, was to destroy the initial validation information before my forced re-parse.
Here is the working jsfiddle demo
Here is some simplified code
onJQueryReady() {
let formValidator = $.data(document.querySelector('form'), "validator" );
formValidator.destroy();
$.validator.unobtrusive.adapters.add("telephone", [], function (options) {
options.rules['telephone'] = {};
options.messages['telephone'] = options.message;
});
$.validator.unobtrusive.parse(document);
$.validator.addMethod("telephone", this.handleValidateTelephoneNumber);
}
I'm using CKEditor in my Angular app and have a view that reloads my CKEditor instance every time users access a new model.
I'm using the following JS to initialize the editor:
var initEditor = function() {
$('.js-editor-wrap').html("<textarea id='editor'></textarea>");
var editor = CKEDITOR.replace('editor', {});
editor.on('loaded', function() {
console.log('editor loaded');
});
editor.on('instanceReady', function() {
console.log('instance ready')
});
}
And the following to destroy the editor:
var destroyEditor = function() {
if (CKEDITOR.instances['editor']) {
CKEDITOR.instances['editor'].destroy(true);
$('#editor').off().remove();
}
}
The first editor initialization works just as expected, but subsequent initializations create an editor instance with a status of "unloaded" that never triggers the "loaded" or "instanceReady" events. I'm not seeing any errors in the console.
Any ideas what might be causing this?
This is definitely a similar issue to the following, but different enough that I think it warrants its own question: CKEditor instance already exists
After a LOT more digging and thanks to the jsfiddle from Jey Dwork, I figured out where the issue is here. My CKEditor config file adds a couple of plugins that referenced lang files that were improperly named. For some reason, when these plugins were included together they caused the editor to not fully load during a second initialization.
Removing the lang files and reference to them in the plugin definitions resolved the issue. It's too bad that there wasn't some error that was triggered around this. All's well that ends well though.
Some background, skip to the 2nd paragraph to get to the question. I have tried quite a few editors like your typical developer and still my all-time favorite was Homesite/ColdFusion Studio before it was sucked into Dreamweaver and I trust most of you will agree with me that well, yea.. Dreamweaver. Anyway, I've been running Sublime Text 2 and it's ok but I feel I need more of an IDE than a text editor. To that end I have been using NetBeans for a few months. I'm starting to love it. At home I use a Mac with TextMate and Coda but I wouldn't mind moving to NetBeans completely however there are a few issues that bother me. Most notably its XSL editing is annoying for a few reasons and then secondly this JavaScript issue I've been having.
I like the ability to jump around a JavaScript file using ctrl+click on methods and such, alt+back to move back and being able to see the outline of your methods and classes in the navigator. However my issue is that in my Javascript files NetBeans doesn't seem to be able to figure out my class and its methods. I use a pattern for writing my singleton classes that has proved indispensable for me. I write such classes as follows:
// create class to contain code for this page
var FieldMgmt = function() {
// vars local to the class
var Fields = {}; // Store the form fields of the class
return {
// startup method
init: function() {
// initialize properties
console.log('field management intialized');
// capture the fields
this.Fields = Fields = {
field1: $('select[name=field1]') // field One
,field2: $('select[name=field2]') // field Two
,field3: $('select[name=field3]') // field Three
};
this.initEvents(); // setup events
}
// initialize events
,initEvents: function(){
}
// method 1
,method1: function(arg1, arg2){
}
// method 2
,method2: function(arg1, arg2){
}
}; // end return of FieldMgmt
}(); // end FieldMgmt
// start the code for this page
$(document).ready( function(doc){ FieldMgmt.init(); } );
And below is a picture of what shows up in my navigator for this file:
As you can see, none of my methods show up in the navigator such as initEvents, method1, method2, etc. ctrl+click-ing a method call as well doesn't go to the method declaration. So NetBeans just doesn't know this is a class. I've had similar problems with this pattern before in other editors, for instance NotePad++ and I was able to get the editor to figure out my file by modifying the regular expressions used to parse the file.
I can survive without this feature but if I could get this to work then this would be my editor of choice as these files can get rather large and being able to see all the methods and jump around the file quickly by ctrl+click-ing, etc. would be fantastic.
I'm using NetBeans 7.3 with everything updated to the latest as of today on Windows Server 2003. Any help would be greatly appreciated. Is there anyway for me to modify NetBeans in order for it to be aware of my methods? Are there plugins for this? Thanks in advance.
In your example code you return a closure that keeps a variable named Fields as "private" but the first thing you do in init is expose it publicly by declaring this.Fields=Fields. With the example code posted you might as well declare FieldMgmt as an object literal and have NetBeans recognize it to have it's properties show up in the Navigator.
var FieldMgmt = {
init: function() {
}
,initEvents: function(){
}
,method1: function(arg1, arg2){
}
,method2: function(arg1, arg2){
}
};
Thanks to #HMR for his answer. It put me on the right path. I'm posting this now so that others using the style of coding I mentioned can have an example of how to modify theirs to show up in the navigator without changing how it behaves or losing the advantages of structuring your code this way. So the final outcome looks like this:
// create class to contain code for this page
var FieldMgmt;
(function(){
// vars local to this closure
var Fields = {}; // Store the form fields of the class
FieldMgmt = {
// startup method
init: function() {
// initialize properties
console.log('field management intialized');
// capture the fields
this.Fields = Fields = {
field1: $('select[name=field1]') // field One
,field2: $('select[name=field2]') // field Two
,field3: $('select[name=field3]') // field Three
};
this.initEvents(); // setup events
}
// initialize events
,initEvents: function(){
}
// method 1
,method1: function(arg1, arg2){
}
// method 2
,method2: function(arg1, arg2){
}
}; // end FieldMgmt
})(); // end closure
// start the code for this page
$(document).ready( function(doc){ FieldMgmt.init(); } );
And the navigator now shows the methods and properties:
Hope that helps.
It works in the current version of Netbeans 8.1.
So basically, I'm trying to introduce modifications in OpenERP's POS inteface from version 6.1. I see that the layout of this view can be found at /static/src/xml/pos.xml. What I want is to modify this view from my own addon (thus, not altering the original pos addon) and as far as I know, there is no way of inheriting this view to add changes (or is there?). So after studying the module, I'm trying to override its js function to slip in my own pos.xml with all my modifications (a copy of the original pos.xml, but with name 'PointOfSale_Mine' and other modifications). So far, I have added my own .js as follows:
openerp.my_pos = function(db) {
db.point_of_sale.PointOfSale = db.point_of_sale.PointOfSale.extend({
render: function() {
this._super.apply(this,arguments);
return qweb_template("PointOfSale_Mine")();
//return this._super.qweb_template("PointOfSale_Mine")();
//return db.point_of_sale.qweb_template("PointOfSale_Mine")();
}
})
};
And of course, I'm getting the error "qweb_template is not defined" as my JS skills and my knowledge regarding OpenERP6.1's new web framework is quite limited. I would really like to know how can I call the same method that the original 'render' function calls (You can see my useless attempts commented in the code above). Or is my whole approach wrong and there is a better way of introducing my changes to the template?
Thanks in advance. Any help will be appreciated.
Ok. After some trial and errors I came up with this code to do the trick:
openerp.my_pos = function(db) {
db.point_of_sale.PointOfSale = db.point_of_sale.PointOfSale.extend({
render: function() {
var rend = this._super();
var jdoc = $(rend);
jdoc.find('.pos-payment-container').prepend('<input type="text" value=""/>')
return jdoc[0].outerHTML;
}
})
};
It does not replace the entire pos.xml template as I was initially attempting, but it is probably better as you inherit the current template and introduce your modifications only (even if you have to .prepend() a big chunk of html code)
I have been developing a new JavaScript application which is rapidly growing in size.
My entire JavaScript Application has been encapsulated inside a single function, in a single file, in a way like this:
(function(){
var uniqueApplication = window.uniqueApplication = function(opts){
if (opts.featureOne)
{
this.featureOne = new featureOne(opts.featureOne);
}
if (opts.featureTwo)
{
this.featureTwo = new featureTwo(opts.featureTwo);
}
if (opts.featureThree)
{
this.featureThree = new featureThree(opts.featureThree);
}
};
var featureOne = function(options)
{
this.options = options;
};
featureOne.prototype.myFeatureBehavior = function()
{
//Lots of Behaviors
};
var featureTwo = function(options)
{
this.options = options;
};
featureTwo.prototype.myFeatureBehavior = function()
{
//Lots of Behaviors
};
var featureThree = function(options)
{
this.options = options;
};
featureThree.prototype.myFeatureBehavior = function()
{
//Lots of Behaviors
};
})();
In the same file after the anonymous function and execution I do something like this:
(function(){
var instanceOfApplication = new uniqueApplication({
featureOne:"dataSource",
featureTwo:"drawingCanvas",
featureThree:3540
});
})();
Before uploading this software online I pass my JavaScript file, and all it's dependencies, into Google Closure Compiler, using just the default Compression, and then I have one nice JavaScript file ready to go online for production.
This technique has worked marvelously for me - as it has created only one global footprint in the DOM and has given me a very flexible framework to grow each additional feature of the application. However - I am reaching the point where I'd really rather not keep this entire application inside one JavaScript file.
I'd like to move from having one large uniqueApplication.js file during development to having a separate file for each feature in the application, featureOne.js - featureTwo.js - featureThree.js
Once I have completed offline development testing, I would then like to use something, perhaps Google Closure Compiler, to combine all of these files together - however I want these files to all be compiled inside of that scope, as they are when I have them inside one file - and I would like for them to remain in the same scope during offline testing too.
I see that Google Closure Compiler supports an argument for passing in modules but I haven't really been able to find a whole lot of information on doing something like this.
Anybody have any idea how this could be accomplished - or any suggestions on a development practice for writing a single JavaScript Library across multiple files that still only leaves one footprint on the DOM?
The jQuery github has a similar setup to the one you speak of. There is even a Makefile / ant build.xml that use the google closure complier.
The basic concept is to develop all your stuff in separate files, then use cat (or something similar) to put all the files together.
cat intro.js core.js featureOne.js featureTwo.js featureThree.js outro.js > build/script.js
The code inside intro.js and outro.js from jQuery:
// intro.js
(function(window, undefined) {
// outro.js
})(window);
Take a look at how this library is built
http://github.com/oyvindkinsey/easyXDM
The files are separated, but merged together, placed into a closure, and run through jslint by the ant script (build.xml).
The ant script also does conditional 'compilation', string replacements and minification.
I recommend that you split your code base into AMD/RequireJS-style modules.
The AMD format seems to meet most of your requirements, and is rapidly becoming a de facto standard.