Is there any way to get a list of all features detected by Modernizr?
The current naming of features is very unintuitive, for example to check for feature "canvas" you just have to call Modernizr.canvas but in order to check for "forms-placeholder" or "forms_placeholder" (it depends on whether you check for the feature's name on the page or in the generated code) you have to call Modernizr.placeholder
There seems to be no rule in the naming of features. I couldn't even find a complete reference of all these features, especially the "non-core" ones. The documentation on modernizr.com is very poor. It also lacks a good tutorial. All I can do is simply guess it's names, since only some of them are included as the class names for the <html> tag (for example, you won't find "Input Types" or "Input Attributes" there).
All I need is to call some functions only when specific feature is supported, for example:
if(Modernizr.canvas){
// draw canvas
}
I tried to detect whether the browser supports .toDataURL('image/png') function, but the Modernizr script returns only "todataurljpeg" and "todataurlwebp", even though the "todataurlpng" is somwhere in there.
How can I retrieve all the Modernizer.features names via JavaScript? Any links to some good references or tutorials will be appreciated (obviously not the ones from the Modernizr home page).
I think your biggest problem is you're mixing up your versions. In the current stable tag, 2.8.1, this is the test for todataurl:
// canvas.toDataURL type support
// http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl
// This test is asynchronous. Watch out.
(function () {
if (!Modernizr.canvas) {
return false;
}
var image = new Image(),
canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
image.onload = function() {
ctx.drawImage(image, 0, 0);
Modernizr.addTest('todataurljpeg', function() {
return canvas.toDataURL('image/jpeg').indexOf('data:image/jpeg') === 0;
});
Modernizr.addTest('todataurlwebp', function() {
return canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
});
};
image.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==';
}());
(source: https://github.com/Modernizr/Modernizr/blob/v2.8.1/feature-detects/canvas-todataurl-type.js)
You'll notice in particular that 'todataurlpng' is not present.
Now, here's the test in master (3.0 beta):
/*!
{
"name": "canvas.toDataURL type support",
"property": ["todataurljpeg", "todataurlpng", "todataurlwebp"],
"tags": ["canvas"],
"builderAliases": ["canvas_todataurl_type"],
"async" : false,
"notes": [{
"name": "HTML5 Spec",
"href": "http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl"
}]
}
!*/
define(['Modernizr', 'createElement', 'test/canvas'], function( Modernizr, createElement ) {
var canvas = createElement('canvas');
Modernizr.addTest('todataurljpeg', function() {
return !!Modernizr.canvas && canvas.toDataURL('image/jpeg').indexOf('data:image/jpeg') === 0;
});
Modernizr.addTest('todataurlpng', function() {
return !!Modernizr.canvas && canvas.toDataURL('image/png').indexOf('data:image/png') === 0;
});
Modernizr.addTest('todataurlwebp', function() {
return !!Modernizr.canvas && canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
});
});
(source: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/canvas/todataurl.js)
There it is!
The docs are better than you think, but 3.0 beta is a major rewrite and the docs have not been updated (mostly because it hasn't actually been released, yet). Just keep in mind that if you see something you think should be there or isn't mentioned in the docs, it's probably something new in the beta.
As for a list of all the feature detections, there's the docs, which is still your safest bet. I also found this nifty site, but it appears that, despite what it says in the description, the tool is referencing the master branch, and is thus, pulling from 3.0 beta with all the new and changed detects. So it might be a little off-putting for now.
Related
How does one detect a spelling mistake inside a textarea in JavaScript? Is there an event associated with this? How do I access Chrome's spell-check suggestions for a misspelled word?
How do I access Chrome's spell-check suggestions for a misspelled word?
To the best of my knowledge, you cannot. To answer more fully, I'll also mention related issues:
There was once an unofficial Google spell-check API that has disappeared
You can download but not access Chrome's built in dictionary
There is no open API for Google's dictionary
Is there an event associated with this?
No, nor does the contextmenu event provide anything useful for this purpose: it has no spell-check information and you cannot read the list of context menu items (which may contain spelling suggestions). The change event also doesn't provide spell-check information.
How does one detect a spelling mistake inside a textarea in JavaScript?
You can either code this yourself or use a third party library. There are other Stack Overflow questions on this topic or you can search for yourself. Related Stack Overflow questions include:
Javascript Spell Checking Methods
javascript spell checker recommendations
Javascript based spell-checkers for web applications
Add spell check to my website
Need Client side spell checker for DIV
javascript spell checking
As the question seems a bit broad and open to interpretation (especially with the current bounty-'requirements'), I'll start by explaining how I interpret it and try to answer the subquestions in the process (Q/A style).
You seem to be asking:
"Google Chrome"/"Chromium" specific:
Q: if browser "Google Chrome"/"Chromium" exposes a spellcheck-API that you can interact with through the use of javascript in a common webpage
A: No, not really (at least not in the way you'd want).
There is a Chromium-specific Spellcheck API Proposal (from dec 2012).
Here are some parts of it:
Could this API be part of the web platform?
It is unlikely that spellchecking will become part of the web platform.
More importantly, it has only one method called 'loadDictionary':
loadDictionary( myDictionaryFile // string path or URL
, dictionaryFormat // enumerated string [ "hunspell" (concatentation of .aff and .dic files)
// , "text" (plain text)
// ]
) // returns int indicating success or an error code in loading the dictionary.
The point? Helping the community create custom dictionaries for Zulu, Klingon, etc. because approximately 20-30% of Spellcheck bugs-rapports were regarding unsupported languages.
Now let's not confuse Chrome's SpellCheck API (above) with Chrome/Webkit's SpellCheck API (hu? say what?):
Hironori Bono (a software engineer for Google Chrome) proposed an API around 2011 and some related bug rapports and a patch that was(/is still?) in Chrome.
void addSpellcheckRange( unsigned long start
, unsigned long length
, DOMStringList suggestions
// [, unsigned short options]
);
void removeSpellcheckRange(SpellcheckRange range);
Usage example:
var input = document.querySelector('input');
input.addSpellcheckRange( 4
, 9
, [ 'Chrome'
, 'Firefox'
, 'Opera'
, 'Internet Explorer'
]
);
Sources:
http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#42 ,
http://peter.sh/experiments/spellcheck-api/ (you should be able to try it live there IF this API still works..)
The point? After contemplating over this a couple of day's it suddenly clicked: custom spell-check integration with the browser - using the browser's context-menu instead of blocking it and providing your own. So one could link that with an existing external spell-check library.
Above historical and experimental API's clearly never directly supported what you want to accomplish.
Q: if "Google Chrome"/"Chromium" spellcheck-API exposes an 'onSpellError' (-like) event on (for example) a textarea
A: As outlined above, it appears that Chrome doesn't have such an event.
HTM5 currently only exposes the ability to enable or disable spell-checking on spellcheck supported elements.
Q: how to access Chrome's spell-check suggestions for a misspelled word
A: As outlined above: it appears that you can't. It appears to be the same answer as for the almost duplicate-question: How can I access Chrome's spell-check dictionary?
It might be interesting to note that "TinyMCE's spellchecker was previously provided by 'hacking' a Chrome toolbar API owned by Google, against Google's own legal usage policies. This spellchecking service has been discontinued permanently.". Now if you search the web you probably can find how they did that, but it certainly doesn't seem the best way to go about it (and advocate it here).
Using javascript spell-check libraries you could however use Chrome's dictionaries (so you wouldn't need to maintain the dictionaries) but you would have to supply and ship these files together with your web-app (instead of fetching the installed ones in the browser).
General:
Q: How to detect a spelling mistake inside a textarea in JavaScript
A: Internet Explorer allows using the spellchecker
integrated into Microsoft Word via ActiveX as listed in the following
code snippet.
function CheckText(text) {
var result = new Array;
var app = new ActiveXObject('Word.Application');
var doc = app.Documents.Add();
doc.Content = text;
for (var i = 1; i <= doc.SpellingErrors.Count; i++) {
var spellingError = doc.SpellingErrors.Item(i);
for (var j = 1; j <= spellingError.Words.Count; j++) {
var word = spellingError.Words.Item(j);
var error = {};
error.word = word.Text;
error.start = word.Start;
error.length = word.Text.length;
error.suggestions = new Array;
var suggestions = word.GetSpellingSuggestions();
for (var k = 1; k <= suggestions.Count; k++) {
error.suggestions.push(suggestions.Item(k).Name);
}
result.push(error);
}
}
return result;
}
Source: https://lists.w3.org/Archives/Public/public-webapps/2011AprJun/0516.html
But IE/ActiveX/MS-Word isn't really what you have asked for, neither is it very cross platform/browser, that leaves us with local javascript spell-check libraries:
Javascript Spell Checking Methods
http://code.google.com/p/bjspell/
http://www.javascriptspellcheck.com/
http://ejohn.org/blog/revised-javascript-dictionary-search/
Etc.
Comparing/explaining them is really outside the scope of this answer.
It is worth noting what format of dictionary you wish to use!
Alternatively one could use an external spellcheck API service (where a server handles the data and you'd communicate with it using AJAX).
Obviously you'd need to take privacy matters into account!
The bounty-'requirements' ask for:
Q: definitive proof
A: I should have found something more regarding the subject than some esoteric experimental features. Neither do I see libraries that try to shim their functionality into some (upcoming) standardized method/event identifiers etc.
As noted, popular libraries like TinyMCE also currently have no other solution.
In the 'living standard'/'the world is our playground' mentality my answer could very well already be outdated when I press the 'submit'-button. But even then I wouldn't recommend such an experimental feature in the near future on a 'production' level website/interface.
Q: and obtaining a good answer explaining how to achieve this
(chrome specific or in general? Spell-check suggestions or detecting that there is a typo?)
A: Other than the above, I can't think of anything (other than libraries that web-developers currently use (see 4)).
Hope this helps!
There is not an API for accessing Chrome's spellcheck suggestions, nor are there natively any events fired when words are mistyped. However, events could be implemented.
I have no idea what your use-case is for this functionality, but I put together a demonstration using montanaflynn's Spellcheck API on MashApe. The demo watches a text area, and when the user pauses typing, it sends the text via the API to be tested. The API returns JSON containing the original string, the suggested corrected string, and an object containing the corrected words and their suggested replacements.
The suggestions are displayed below the textarea. When suggestions are hovered, the mistyped word is highlighted. When clicked, the typo is replaced with the suggestion.
I also added a shuffling function, that scrambles the words in the string before sending it, to add a layer of privacy to the use of the API (it uses SSL also). Neither the API nor Chrome use context-based suggestions, so the shuffling doesn't alter the results.
Here's a link to the CodePen: http://codepen.io/aecend/pen/rOebQq
And here is the code:
CSS
<style>
* {
font-family: sans-serif;
}
textarea {
margin-bottom: 10px;
width: 500px;
height: 300px;
padding: 10px;
}
.words {
width: 500px;
}
.word {
display: inline-block;
padding: 2px 5px 1px 5px;
border-radius: 2px;
background: #00B1E6;
color: white;
margin: 2px;
cursor: pointer;
}
</style>
HTML
<textarea id="text" placeholder="Type something here..."></textarea>
<div id="words"></div>
JavaScript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
;(function(){
"use strict";
var words = document.getElementById("words"),
input = document.getElementById("text"),
timeout, xhr;
input.addEventListener("keyup", function(e){
if (timeout) clearTimeout(timeout);
if (!this.value.trim()) words.innerHTML = '';
timeout = setTimeout(function() {
var test_phrase = shuffle_words( input.value );
spell_check(test_phrase);
timeout = null;
}, 500);
});
function shuffle_words(inp) {
inp = inp.replace(/\s+/g, ' ');
var arr = inp.split(" "),
n = arr.length;
while (n > 0) {
var i = Math.floor(Math.random() * n--),
t = arr[n];
arr[n] = arr[i];
arr[i] = t;
}
return arr.join(' ');
}
function spell_check(text){
if (xhr) xhr.abort();
xhr = $.ajax({
url: 'https://montanaflynn-spellcheck.p.mashape.com/check/',
headers: {
'X-Mashape-Key': 'U3ogA8RAAMmshGOJkNxkTBbuYYRTp1gMAuGjsniThZuaoKIyaj',
'Accept': 'application/json'
},
data: {
'text': text
},
cache: false,
success: function(result){
xhr = null;
suggest_words(result);
}
});
}
function suggest_words(obj){
if (!obj.corrections) return;
words.innerHTML = '';
for (var key in obj.corrections) {
if (obj.corrections.hasOwnProperty(key)) {
var div = document.createElement("div");
div.className = "word";
div.innerHTML = obj.corrections[key][0];
div.orig = key;
div.onmouseover = function() {
var start = input.value.indexOf(this.orig);
input.selectionStart = start;
input.selectionEnd = start + this.orig.length;
};
div.onmouseout = function() {
var len = input.value.length;
input.selectionStart = len;
input.selectionEnd = len;
}
div.onclick = function() {
input.value = input.value.replace(this.orig, this.innerHTML);
this.parentNode.removeChild(this);
}
words.appendChild(div);
}
}
}
})();
</script>
I only used jQuery to simplify the AJAX request for this demonstration. This could easily be done in vanilla JS.
You can disable internal browser spellcheck and integrate any other opensource spellcheck library, for example
JavaScript SpellCheck. It contains all events you may need for deep integration, check the API page.
We have a bunch of forms on our Intranet coded for IE9 that contain code similar to this:
var dept = req.responseXML.selectNodes("//Dept")[0].text;
We just upgraded all of our PCs to IE10 and selectNodes is now obsolete and has been replaced with querySelectorAll, so the corrected bit of code would be:
var dept = req.responseXML.querySelectorAll("Dept")[0].textContent;
All these forms use a shared JS file for sending requests out so I thought if I could define some prototype functions/properties I could fix this incompatibility without touching every form. I made some progress and was able to map selectNodes to querySelectorAll using:
Document.prototype.selectNodes = function(param) {
return this.querySelectorAll(param.replace("//", ""));
}
However I am now running into issues mapping text to textContent. The following doesn't seem to work:
Element.prototype.text = function() {
return this.textContent;
};
If anyone has any adivce I would greatly appreciate it, I really don't want to track all these forms down. Thanks!
It really seems that you ought to fix your code rather than hack the DOM methods in order to avoid fixing your code. Imagine how this builds up over time and your code gets further and further away from programming to a standard DOM and then at some point, you'll probably even have a name collision with something that changes in a browser.
If you wanted to hack the code so that elem.text returns elem.textContent, then because these are properties references, not function calls you need to use a getter like this:
Object.defineProperty(HTMLElement.prototype, "text", {
get: function() {
return this.textContent || this.innerText;
},
set: function(txt) {
if (this.textContent) {
this.textContent = txt;
} else {
this.innerText = txt;
}
}
});
How does one detect a spelling mistake inside a textarea in JavaScript? Is there an event associated with this? How do I access Chrome's spell-check suggestions for a misspelled word?
How do I access Chrome's spell-check suggestions for a misspelled word?
To the best of my knowledge, you cannot. To answer more fully, I'll also mention related issues:
There was once an unofficial Google spell-check API that has disappeared
You can download but not access Chrome's built in dictionary
There is no open API for Google's dictionary
Is there an event associated with this?
No, nor does the contextmenu event provide anything useful for this purpose: it has no spell-check information and you cannot read the list of context menu items (which may contain spelling suggestions). The change event also doesn't provide spell-check information.
How does one detect a spelling mistake inside a textarea in JavaScript?
You can either code this yourself or use a third party library. There are other Stack Overflow questions on this topic or you can search for yourself. Related Stack Overflow questions include:
Javascript Spell Checking Methods
javascript spell checker recommendations
Javascript based spell-checkers for web applications
Add spell check to my website
Need Client side spell checker for DIV
javascript spell checking
As the question seems a bit broad and open to interpretation (especially with the current bounty-'requirements'), I'll start by explaining how I interpret it and try to answer the subquestions in the process (Q/A style).
You seem to be asking:
"Google Chrome"/"Chromium" specific:
Q: if browser "Google Chrome"/"Chromium" exposes a spellcheck-API that you can interact with through the use of javascript in a common webpage
A: No, not really (at least not in the way you'd want).
There is a Chromium-specific Spellcheck API Proposal (from dec 2012).
Here are some parts of it:
Could this API be part of the web platform?
It is unlikely that spellchecking will become part of the web platform.
More importantly, it has only one method called 'loadDictionary':
loadDictionary( myDictionaryFile // string path or URL
, dictionaryFormat // enumerated string [ "hunspell" (concatentation of .aff and .dic files)
// , "text" (plain text)
// ]
) // returns int indicating success or an error code in loading the dictionary.
The point? Helping the community create custom dictionaries for Zulu, Klingon, etc. because approximately 20-30% of Spellcheck bugs-rapports were regarding unsupported languages.
Now let's not confuse Chrome's SpellCheck API (above) with Chrome/Webkit's SpellCheck API (hu? say what?):
Hironori Bono (a software engineer for Google Chrome) proposed an API around 2011 and some related bug rapports and a patch that was(/is still?) in Chrome.
void addSpellcheckRange( unsigned long start
, unsigned long length
, DOMStringList suggestions
// [, unsigned short options]
);
void removeSpellcheckRange(SpellcheckRange range);
Usage example:
var input = document.querySelector('input');
input.addSpellcheckRange( 4
, 9
, [ 'Chrome'
, 'Firefox'
, 'Opera'
, 'Internet Explorer'
]
);
Sources:
http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#42 ,
http://peter.sh/experiments/spellcheck-api/ (you should be able to try it live there IF this API still works..)
The point? After contemplating over this a couple of day's it suddenly clicked: custom spell-check integration with the browser - using the browser's context-menu instead of blocking it and providing your own. So one could link that with an existing external spell-check library.
Above historical and experimental API's clearly never directly supported what you want to accomplish.
Q: if "Google Chrome"/"Chromium" spellcheck-API exposes an 'onSpellError' (-like) event on (for example) a textarea
A: As outlined above, it appears that Chrome doesn't have such an event.
HTM5 currently only exposes the ability to enable or disable spell-checking on spellcheck supported elements.
Q: how to access Chrome's spell-check suggestions for a misspelled word
A: As outlined above: it appears that you can't. It appears to be the same answer as for the almost duplicate-question: How can I access Chrome's spell-check dictionary?
It might be interesting to note that "TinyMCE's spellchecker was previously provided by 'hacking' a Chrome toolbar API owned by Google, against Google's own legal usage policies. This spellchecking service has been discontinued permanently.". Now if you search the web you probably can find how they did that, but it certainly doesn't seem the best way to go about it (and advocate it here).
Using javascript spell-check libraries you could however use Chrome's dictionaries (so you wouldn't need to maintain the dictionaries) but you would have to supply and ship these files together with your web-app (instead of fetching the installed ones in the browser).
General:
Q: How to detect a spelling mistake inside a textarea in JavaScript
A: Internet Explorer allows using the spellchecker
integrated into Microsoft Word via ActiveX as listed in the following
code snippet.
function CheckText(text) {
var result = new Array;
var app = new ActiveXObject('Word.Application');
var doc = app.Documents.Add();
doc.Content = text;
for (var i = 1; i <= doc.SpellingErrors.Count; i++) {
var spellingError = doc.SpellingErrors.Item(i);
for (var j = 1; j <= spellingError.Words.Count; j++) {
var word = spellingError.Words.Item(j);
var error = {};
error.word = word.Text;
error.start = word.Start;
error.length = word.Text.length;
error.suggestions = new Array;
var suggestions = word.GetSpellingSuggestions();
for (var k = 1; k <= suggestions.Count; k++) {
error.suggestions.push(suggestions.Item(k).Name);
}
result.push(error);
}
}
return result;
}
Source: https://lists.w3.org/Archives/Public/public-webapps/2011AprJun/0516.html
But IE/ActiveX/MS-Word isn't really what you have asked for, neither is it very cross platform/browser, that leaves us with local javascript spell-check libraries:
Javascript Spell Checking Methods
http://code.google.com/p/bjspell/
http://www.javascriptspellcheck.com/
http://ejohn.org/blog/revised-javascript-dictionary-search/
Etc.
Comparing/explaining them is really outside the scope of this answer.
It is worth noting what format of dictionary you wish to use!
Alternatively one could use an external spellcheck API service (where a server handles the data and you'd communicate with it using AJAX).
Obviously you'd need to take privacy matters into account!
The bounty-'requirements' ask for:
Q: definitive proof
A: I should have found something more regarding the subject than some esoteric experimental features. Neither do I see libraries that try to shim their functionality into some (upcoming) standardized method/event identifiers etc.
As noted, popular libraries like TinyMCE also currently have no other solution.
In the 'living standard'/'the world is our playground' mentality my answer could very well already be outdated when I press the 'submit'-button. But even then I wouldn't recommend such an experimental feature in the near future on a 'production' level website/interface.
Q: and obtaining a good answer explaining how to achieve this
(chrome specific or in general? Spell-check suggestions or detecting that there is a typo?)
A: Other than the above, I can't think of anything (other than libraries that web-developers currently use (see 4)).
Hope this helps!
There is not an API for accessing Chrome's spellcheck suggestions, nor are there natively any events fired when words are mistyped. However, events could be implemented.
I have no idea what your use-case is for this functionality, but I put together a demonstration using montanaflynn's Spellcheck API on MashApe. The demo watches a text area, and when the user pauses typing, it sends the text via the API to be tested. The API returns JSON containing the original string, the suggested corrected string, and an object containing the corrected words and their suggested replacements.
The suggestions are displayed below the textarea. When suggestions are hovered, the mistyped word is highlighted. When clicked, the typo is replaced with the suggestion.
I also added a shuffling function, that scrambles the words in the string before sending it, to add a layer of privacy to the use of the API (it uses SSL also). Neither the API nor Chrome use context-based suggestions, so the shuffling doesn't alter the results.
Here's a link to the CodePen: http://codepen.io/aecend/pen/rOebQq
And here is the code:
CSS
<style>
* {
font-family: sans-serif;
}
textarea {
margin-bottom: 10px;
width: 500px;
height: 300px;
padding: 10px;
}
.words {
width: 500px;
}
.word {
display: inline-block;
padding: 2px 5px 1px 5px;
border-radius: 2px;
background: #00B1E6;
color: white;
margin: 2px;
cursor: pointer;
}
</style>
HTML
<textarea id="text" placeholder="Type something here..."></textarea>
<div id="words"></div>
JavaScript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
;(function(){
"use strict";
var words = document.getElementById("words"),
input = document.getElementById("text"),
timeout, xhr;
input.addEventListener("keyup", function(e){
if (timeout) clearTimeout(timeout);
if (!this.value.trim()) words.innerHTML = '';
timeout = setTimeout(function() {
var test_phrase = shuffle_words( input.value );
spell_check(test_phrase);
timeout = null;
}, 500);
});
function shuffle_words(inp) {
inp = inp.replace(/\s+/g, ' ');
var arr = inp.split(" "),
n = arr.length;
while (n > 0) {
var i = Math.floor(Math.random() * n--),
t = arr[n];
arr[n] = arr[i];
arr[i] = t;
}
return arr.join(' ');
}
function spell_check(text){
if (xhr) xhr.abort();
xhr = $.ajax({
url: 'https://montanaflynn-spellcheck.p.mashape.com/check/',
headers: {
'X-Mashape-Key': 'U3ogA8RAAMmshGOJkNxkTBbuYYRTp1gMAuGjsniThZuaoKIyaj',
'Accept': 'application/json'
},
data: {
'text': text
},
cache: false,
success: function(result){
xhr = null;
suggest_words(result);
}
});
}
function suggest_words(obj){
if (!obj.corrections) return;
words.innerHTML = '';
for (var key in obj.corrections) {
if (obj.corrections.hasOwnProperty(key)) {
var div = document.createElement("div");
div.className = "word";
div.innerHTML = obj.corrections[key][0];
div.orig = key;
div.onmouseover = function() {
var start = input.value.indexOf(this.orig);
input.selectionStart = start;
input.selectionEnd = start + this.orig.length;
};
div.onmouseout = function() {
var len = input.value.length;
input.selectionStart = len;
input.selectionEnd = len;
}
div.onclick = function() {
input.value = input.value.replace(this.orig, this.innerHTML);
this.parentNode.removeChild(this);
}
words.appendChild(div);
}
}
}
})();
</script>
I only used jQuery to simplify the AJAX request for this demonstration. This could easily be done in vanilla JS.
You can disable internal browser spellcheck and integrate any other opensource spellcheck library, for example
JavaScript SpellCheck. It contains all events you may need for deep integration, check the API page.
I'm trying to learn JavaScript, using an OO approach. This is my code:
/*global document, MouseEvent */
MouseEvent.prototype.mouseCoordinates = function () {
return {
'x' : this.pageX - this.target.offsetLeft,
'y' : this.pageY - this.target.offsetTop
};
};
(function () {
var Pencil = function () {},
Canvas = function () {
this.element = document.getElementById('canvas');
this.tool = new Pencil();
this.element.addEventListener('click', this.tool.draw, false);
},
c;
Pencil.prototype.draw = function (event) {
var context = event.target.getContext('2d'),
coordinates = event.mouseCoordinates();
context.fillRect(coordinates.x, coordinates.y, 5, 5);
};
c = new Canvas();
}());
I'm trying to do something like MS Paint. So, I've created a Canvas object and a Pencil one. I am able to do it using a procedural approach but I don't want to. I don't want to use any library now, I'm just studying.
I've these questions:
Are there any good practice to register events? Should I register events using the object constructor?
My canvas object has a tool (pencil in this case) object. Conceptually it's not good. My canvas should not have a tool object. It must provides a surface to draw and that's it! But, it's there as a callback (click event). How could I solve this?
Every tool will have the same interface but different behaviours. Could I create interfaces using Javascript?
What else can I improve?
UPDATE:
(function () {
var pencil = {
draw : function (event) {
var context = event.target.getContext('2d'),
coordinates = event.mouseCoordinates();
context.fillRect(coordinates.x, coordinates.y, 5, 5);
}
},
currentTool = pencil,
canvas = (function () {
var object = {};
object.element = document.getElementById('canvas');
object.element.addEventListener('click', function (event) {
currentTool.draw(event);
}, false);
return object;
}());
}());
I've followed all the tips (thank you, I appreciate your help!). What do you think? Now I have a "global" currentTool variable. What do you think about it? Thanks.
Thank you.
I know you said you don't want to use library but I gotta recommend you look into source code in a good open source library such as jquery. If you want to seriously learn more, you should look at the code real good developers wrote and see how they did for what you just asked. As far as I can tell, that, except for keeping reading, is one of the best way of learning a programming language with good practice.
It's kinda tricky to register events without any framework (capturing
or bubbling phase is only the beginning of your problems), so here
are answers on other questions
Your pencil tool can listen to the canvas events and, eventually,
when someone dispatch a click on it, the pencil tool looks in the
global object (singleton) if it's an active tool. If it is, you
change the color of some appropiate pixels on the canvas.
There's no interface (as in php) in javascript, only prototypical
behaviour. You can, howewer write an abstract class, which methods
(in prototype namespace) will throw an exception "not implemented",
forcing you to override them.
As for improvements, you will surely find yourself fighting with
different browser's behaviour. That's why (well, that's not all)
frameworks exist. As I can see, you like developpent in OO style, I
can give you an advice to try MooTools or, a harder one, Google
Closure framework. Feel free to ask questions about them here.
I have a case where I'd like to animate the zoom style of a div (and it's entire contents). Legibility is not an issue, as this will be to 'pop' the element into view. Now I can get just about every other style aspect animating with Fx, but I can't seem to get this working for the zoom.
This is in chrome (though obviously I want to get it browser agnostic as well).
Using the Elements tab in the Chrome dev tools I can manually set the zoom style on the html element and it behaves accordingly, so I knew it must be possible to modify in code. Using the answer on this question: zoom css/javascript
I can get the element to zoom in and out with code:
dialog.setStyle('WebkitTransform', 'scale(0.1)')
Now I could write a 'native' function to do this, but then I'd lose out on all the great animation options in Fx. Can anyone suggest an elegent way to achieve this with Fx?
yes, you need to hack some of the CSS parsers in the mootools core to enable FX to work with them.
check this fun example I did a while back for another SO problem: http://jsfiddle.net/dimitar/ZwMUH/ - click on any 2 icons to swap them and it will transition them via scale.
or this light box base class I wrote that also uses it: http://jsfiddle.net/dimitar/6creP/
at its basic, start by modding the parsers:
Element.Styles.MozTransform = "rotate(#deg) scale(#)";
Element.Styles.MsTransform = "rotate(#deg) scale(#)";
Element.Styles.OTransform = "rotate(#deg) scale(#)";
Element.Styles.WebkitTransform = "rotate(#deg) scale(#)";
Object.append(Fx.CSS.Parsers, {
TransformScale: {
parse: function(value) {
return ((value = value.match(/^scale\((([0-9]*\.)?[0-9]+)\)$/i))) ? parseFloat(value[1]) : false;
},
compute: function(from, to, delta) {
return Fx.compute(from, to, delta);
},
serve: function(value) {
return 'scale(' + value + ')';
}
}
});
also relevant, define public and scripting vers of all styles cross browser:
transforms: {
computed: ['transformProperty', 'WebkitTransform', 'MozTransform', 'OTransform', 'msTransform'],
raw: ['transform', '-webkit-transform', '-moz-transform', '-o-transform', 'msTransform']
};
detection method which will loop through the transforms defined above and return the first one that the element supports as the definitive property to work with in the future, or opacity as fallback if unavailable:
var testEl = new Element("div"),
self = this;
this.scaleTransform = this.options.transforms.computed.some(function(el, index) {
var test = el in testEl.style;
if (test) {
self.prop = self.options.transforms.raw[index];
}
return test;
});
if (!this.prop) {
this.prop = "opacity";
}
then this.prop will refer to the correct browser property, vendor prefixed or opacity as fallback for tweening/morphing whereas this.scaleTransform will be a boolean that points to the ability to scale - you can then check against that to see if its supported when you are creating the morph object.
The object itself would be like this:
var morphObj = {};
morphObj[this.prop] = ["scale(0)", "scale(1)"]; // call it dynamically
el.morph(morphObj);
other solutions are available such as this plugin http://mootools.net/forge/p/fx_tween_css3, there's also one by Theiry Bela I know of: https://github.com/tbela99/Fx.css
its also going to be natively available in mootools 2.0
have fun.