[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