Browse Source

HUE-137. Make double click delegators more stable and prevent any links with no href from breaking the desktop

* removing double return from previous HUE-137 commit
* adding commented documentation for JFrame.callClick
* adding an override to callClick to make it force the handling of links with jframe_ignore and disabled css classes; required for double click delegator pattern to work.
Aaron Newton 15 years ago
parent
commit
feea8d930d

+ 15 - 12
apps/jframegallery/src/jframegallery/templates/double.click-delegator.html

@@ -21,22 +21,25 @@ limitations under the License.
 		<title>Double Click Delegator</title>
 	</head>
 	<body>
-		<div data-dblclick-delegate="{'dblclick_loads':'.dblme'}" style="width: 200px; height: 100px; padding: 40px; background: #ccc; border: 1px solid #000; margin: 10px auto;">
-			<a class="dblme" href="/jframegallery/post-load.alert.popup.html">I show an alert if you double click anywhere inside the box around me.</a>
-		</div>
+		<div class="jframe_padded">
+			<p>Note that to use double click delegation on a container with links in it, if you don't want the links to fire on single click, you must add the css class "jframe_ignore" to them and configure the double click delegator to point to the desired link. This is especially useful with HtmlTables with selectable rows if you don't want a single click on the row to load another page, even if the user clicks on a link.</p>
+			
+			<div data-dblclick-delegate="{'dblclick_loads':'.dblme'}" style="width: 200px; height: 100px; padding: 40px; background: #ccc; border: 1px solid #000; float: left; margin: 0px 10px;">
+				<a class="dblme jframe_ignore" href="/jframegallery/post-load.alert.popup.html">I show an alert if you double click anywhere inside the box around me. Note that I have the css class "jframe_ignore" which means a single click on me does nothing.</a>
+			</div>
 
-		<div data-dblclick-delegate="{'dblclick_loads':'.dblme'}" style="width: 200px; height: 100px; padding: 40px; background: #ccc; border: 1px solid #000; margin: 10px auto;">
-			I'm a div with a double click delegate specified, but no link matching, so I don't do anything.
-		</div>
+			<div data-dblclick-delegate="{'dblclick_loads':'.dblme'}" style="width: 200px; height: 100px; padding: 40px; background: #ccc; border: 1px solid #000; float: left; margin: 0px 10px;">
+				I'm a div with a double click delegate specified, but no link matching, so I don't do anything.
+			</div>
 
-		<div data-dblclick-delegate="{'dblclick_loads':'.dblme'}" style="width: 200px; height: 100px; padding: 40px; background: #ccc; border: 1px solid #000; margin: 10px auto;">
-			<a class="dblme">I'm an anchor with no href, so clicking me or double clicking my container should do nothing.</a>
-		</div>
+			<div data-dblclick-delegate="{'dblclick_loads':'.dblme'}" style="width: 200px; height: 100px; padding: 40px; background: #ccc; border: 1px solid #000; float: left; clear:both; margin: 10px; clear:both;">
+				<a class="dblme">I'm an anchor with no href, so clicking me or double clicking my container should do nothing.</a>
+			</div>
 
-		<div data-dblclick-delegate="{'dblclick_loads':'.dblme'}" style="width: 200px; height: 100px; padding: 40px; background: #ccc; border: 1px solid #000; margin: 10px auto;">
-			<a class="dblme ccs-nav_back">I'm a link with no href, but I have the ccs class name ccs-nav_back, so I navigate back in the app window's history. Double clicking my container should send you back to the JFrame gallery.</a>
+			<div data-dblclick-delegate="{'dblclick_loads':'.dblme'}" style="width: 200px; height: 100px; padding: 40px; background: #ccc; border: 1px solid #000;  margin: 10px; float: left;">
+				<a class="dblme ccs-nav_back">I'm a link with no href, but I have the ccs class name ccs-nav_back, so I navigate back in the app window's history. Double clicking my container should send you back to the JFrame gallery.</a>
+			</div>
 		</div>
 
-
 	</body>
 </html>

+ 17 - 5
desktop/core/static/js/Source/CCS/CCS.JFrame.js

@@ -103,7 +103,6 @@ CCS.JFrame = new Class({
 		//given the response and response text, this method determines if there's been a serverside error
 		errorDetector: function(requestInstance, responseText) {
 			//flag this as an error
-			return repsonseText.contains('ccs-error-popup');
 			return responseText.contains('ccs-error-popup');
 		},
 		getScroller: function(){
@@ -176,12 +175,25 @@ CCS.JFrame = new Class({
 		this.element = this.element || new Element('div').setStyles({display: 'block', position: 'relative', outline: 'none'}).store('widget', this);
 	},
 
+	delegatedTo: [],
+
+/*
+	
+	the JFrame callClick event invokes the click handler for links/elements, matching against any JFrameLinkers and, 
+	if none are found, running the default click handler (which is to load the link's href, if defined, into the JFrame).
+	event - (*object*) the event object that was fired; a click, usually
+	link - (*element*) typically an anchor tag, though that's not a requirement
+	force - (*boolean*) forces the link to be activated even if it has the css class .disabled or .jframe_ignore
+	callClick: function(event, link, force) {
+		//this function is defined in the applyDelegates function below;
+		//this commented out version added here for visibility's sake
+	},
+
+*/
 	/*
 		applies the default link handling delegates to a specific target, allowing you to attach link handling to any container
 		target - (*element*) the element to which you wish to attach delegates
 	*/
-	delegatedTo: [],
-	
 	applyDelegates: function(target){
 		target = document.id(target) || this.content;
 		//make sure we only apply this once per target
@@ -209,11 +221,11 @@ CCS.JFrame = new Class({
 
 			}
 		}.bind(this);
-		this.callClick = function(e, elem){
+		this.callClick = function(e, elem, force){
 			//allow links to force jframe to nerf them
 			//this is required for doubleclick support
 			//as otherwise there's no way to prevent this default jframe handler per link
-			if (elem.hasClass('jframe_ignore') || elem.hasClass('disabled')) return e.preventDefault();
+			if (!force && (elem.hasClass('jframe_ignore') || elem.hasClass('disabled'))) return e.preventDefault();
 			// Fix relative links
 			if (elem.get('href')) {
 				var url = new URI(elem.get('href'), {base: this.currentPath});

+ 1 - 1
desktop/core/static/js/Source/JFrameFilters/CCS.JFrame.DoubleClickDelegate.js

@@ -35,7 +35,7 @@ CCS.JFrame.doubleClickHandler = function(jframe, event, delegate){
 	};
 	
 	var link = getLink(delegate);
-	if (link) jframe.callClick(event, link);
+	if (link) jframe.callClick(event, link, true);
 };
 
 CCS.JFrame.addGlobalFilters({