[Pkg-javascript-commits] [dojo] 70/87: Improve dom.setSelectable impl w/ feature detection and test page on 1.7 branch; refs #15990 !strict
David Prévot
taffit at moszumanska.debian.org
Thu Aug 21 17:39:23 UTC 2014
This is an automated email from the git hooks/post-receive script.
taffit pushed a commit to annotated tag 1.7.5
in repository dojo.
commit abb4d00585454cded5629486264e5bb27f522dda
Author: Kenneth G. Franqueiro <kenneth.franqueiro at gmail.com>
Date: Thu Dec 13 02:26:50 2012 +0000
Improve dom.setSelectable impl w/ feature detection and test page on 1.7 branch; refs #15990 !strict
git-svn-id: http://svn.dojotoolkit.org/src/branches/1.7/dojo@30162 560b804f-0ae3-0310-86f3-f6aa0a117693
---
dom.js | 72 +++++++++++++++++++++++++++++--------
tests/test_dom_setSelectable.html | 74 +++++++++++++++++++++++++++++++++++++++
2 files changed, 131 insertions(+), 15 deletions(-)
diff --git a/dom.js b/dom.js
index a6696a7..220ff7d 100644
--- a/dom.js
+++ b/dom.js
@@ -142,25 +142,67 @@ define(["./_base/sniff", "./_base/lang", "./_base/window"],
// TODO: do we need this function in the base?
- dom.setSelectable = function(/*DOMNode|String*/node, /*Boolean*/selectable){
+ //>>excludeStart("webkitMobile", kwArgs.webkitMobile);
+
+ // 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;
+ });
+
+ 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);
- //>>excludeStart("webkitMobile", kwArgs.webkitMobile);
- if(has("mozilla")){
- node.style.MozUserSelect = selectable ? "" : "none";
- }else if(has("khtml") || has("webkit")){
- //>>excludeEnd("webkitMobile");
- node.style.KhtmlUserSelect = selectable ? "auto" : "none";
- //>>excludeStart("webkitMobile", kwArgs.webkitMobile);
- }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");
}
}
- //>>excludeEnd("webkitMobile");
- //FIXME: else? Opera?
};
+ /*
+ //>>excludeEnd("webkitMobile");
+ //>>includeStart("webkitMobile", kwArgs.webkitMobile);
+ has.add("css-user-select", "WebkitUserSelect");
+ dom.setSelectable = function(node, selectable){
+ dom.byId(node).style.WebkitUserSelect = selectable ? "" : "none";
+ }
+ //>>includeEnd("webkitMobile");
+ //>>excludeStart("webkitMobile", kwArgs.webkitMobile);
+ */
+ //>>excludeEnd("webkitMobile");
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