[Pkg-javascript-commits] [dojo] 47/88: Improve dom.setSelectable impl w/ feature detection and test page on 1.8 branch; refs #15990 !strict
David Prévot
taffit at moszumanska.debian.org
Thu Aug 21 17:39:35 UTC 2014
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to annotated tag 1.8.5
in repository dojo.
commit ec60c7b56d04ace9d0132b91451e23f12a6c0d1e
Author: Kenneth G. Franqueiro <kenneth.franqueiro at gmail.com>
Date: Sat Dec 1 00:52:12 2012 +0000
Improve dom.setSelectable impl w/ feature detection and test page on 1.8 branch; refs #15990 !strict
git-svn-id: http://svn.dojotoolkit.org/src/branches/1.8/dojo@30097 560b804f-0ae3-0310-86f3-f6aa0a117693
---
dom.js | 65 ++++++++++++++++++++++++++--------
tests/test_dom_setSelectable.html | 74 +++++++++++++++++++++++++++++++++++++++
2 files changed, 125 insertions(+), 14 deletions(-)
diff --git a/dom.js b/dom.js
index 595c8a1..4c1ec89 100644
--- a/dom.js
+++ b/dom.js
@@ -1,5 +1,5 @@
-define(["./sniff", "./_base/lang", "./_base/window"],
- function(has, lang, win){
+define(["./sniff", "./_base/window"],
+ function(has, win){
// module:
// dojo/dom
@@ -112,9 +112,34 @@ define(["./sniff", "./_base/lang", "./_base/window"],
};
- // TODO: do we need this function in the base?
+ // TODO: do we need setSelectable in the base?
- dom.setSelectable = function(/*DOMNode|String*/ node, /*Boolean*/ selectable){
+ // Add feature test for user-select CSS property
+ // (currently known to work in all but IE < 10 and Opera)
+ has.add("css-user-select", function(global, doc, element){
+ // Avoid exception when dom.js is loaded in non-browser environments
+ if(!element){ return false; }
+
+ var style = element.style;
+ var prefixes = ["Khtml", "O", "ms", "Moz", "Webkit"],
+ i = prefixes.length,
+ name = "userSelect",
+ prefix;
+
+ // Iterate prefixes from most to least likely
+ do{
+ if(typeof style[name] !== "undefined"){
+ // Supported; return property name
+ return name;
+ }
+ }while(i-- && (name = prefixes[i] + "UserSelect"));
+
+ // Not supported if we didn't return before now
+ return false;
+ });
+
+ /*=====
+ dom.setSelectable = function(node, selectable){
// summary:
// Enable or disable selection on a node
// node: DOMNode|String
@@ -128,20 +153,32 @@ define(["./sniff", "./_base/lang", "./_base/window"],
// example:
// Make the node id="bar" selectable
// | dojo.setSelectable("bar", true);
+ };
+ =====*/
+ var cssUserSelect = has("css-user-select");
+ dom.setSelectable = cssUserSelect ? function(node, selectable){
+ // css-user-select returns a (possibly vendor-prefixed) CSS property name
+ dom.byId(node).style[cssUserSelect] = selectable ? "" : "none";
+ } : function(node, selectable){
node = dom.byId(node);
- if(has("mozilla")){
- node.style.MozUserSelect = selectable ? "" : "none";
- }else if(has("khtml") || has("webkit")){
- node.style.KhtmlUserSelect = selectable ? "auto" : "none";
- }else if(has("ie")){
- var v = (node.unselectable = selectable ? "" : "on"),
- cs = node.getElementsByTagName("*"), i = 0, l = cs.length;
- for(; i < l; ++i){
- cs.item(i).unselectable = v;
+
+ // (IE < 10 / Opera) Fall back to setting/removing the
+ // unselectable attribute on the element and all its children
+ var nodes = node.getElementsByTagName("*"),
+ i = nodes.length;
+
+ if(selectable){
+ node.removeAttribute("unselectable");
+ while(i--){
+ nodes[i].removeAttribute("unselectable");
+ }
+ }else{
+ node.setAttribute("unselectable", "on");
+ while(i--){
+ nodes[i].setAttribute("unselectable", "on");
}
}
- //FIXME: else? Opera?
};
return dom;
diff --git a/tests/test_dom_setSelectable.html b/tests/test_dom_setSelectable.html
new file mode 100644
index 0000000..9e0dabf
--- /dev/null
+++ b/tests/test_dom_setSelectable.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Test Page for dojo/dom.setSelectable</title>
+ <style>
+ @import "../resources/dojo.css";
+ #test {
+ border: 1px solid #000;
+ padding: 10px;
+ }
+ .item {
+ float: left;
+ padding: 10px;
+ }
+ .item td {
+ border: 1px solid #ccc;
+ }
+ .clear {
+ clear: both;
+ padding: 10px;
+ }
+ </style>
+ </head>
+ <body>
+ <h1>Test Page for dojo/dom.setSelectable</h1>
+ <p>Use the buttons below and then attempt selecting in the bordered area
+ underneath.</p>
+ <p>
+ <button onclick="makeSelectable(true);">Allow Selection</button>
+ <button onclick="makeSelectable(false);">Prevent Selection</button>
+ </p>
+ <div id="test">
+ <p>Some notes:</p>
+ <ul>
+ <li>In WebKit and IE10, <code>*-user-select: none</code> doesn't prevent you from
+ selecting within textboxes, whereas in Firefox it does</li>
+ <li>The <code>unselectable</code> attribute (used where <code>user-select</code>
+ is unavailable, e.g. IE < 10 and Opera) does not prevent text selection
+ when the selection is started from outside the node in question</li>
+ <li>In IE10, <code>-ms-user-select</code> exhibits the same behavior as
+ described in the previous bullet; all other browsers which implement
+ <code>*-user-select</code> seem to properly prevent selection even
+ when it is started outside of the node in question</li>
+ <li>Opera doesn't honor the <code>unselectable</code> attribute on textboxes</li>
+ <li>IE honors <code>unselectable</code> on textboxes, but moreover, it
+ prevents any input whatsoever</li>
+ </ul>
+ <div class="item">
+ Some text
+ </div>
+ <table class="item">
+ <tr>
+ <td>A</td>
+ <td>table</td>
+ <td>here</td>
+ </tr>
+ </table>
+ <div class="clear">
+ <input type="text" value="an input here">
+ </div>
+ More text here
+ </div>
+ <script src="../dojo.js"></script>
+ <script>
+ var makeSelectable; // function to be defined below
+ require(["dojo/dom", "dojo/domReady!"], function(dom){
+ makeSelectable = function(selectable){
+ dom.setSelectable("test", selectable);
+ };
+ });
+ </script>
+ </body>
+</html>
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/dojo.git
More information about the Pkg-javascript-commits
mailing list