Remove all touch events management, simply disable scroller replacement when on mobile context. Should fix scrolling and button issues on mobile.

cdujeu · cdujeu · commit a5afbb42c296 · 2015-09-08T16:36:31.000+02:00
diff --git a/core/src/plugins/access.ajxp_home/class.UserDashboardHome.js b/core/src/plugins/access.ajxp_home/class.UserDashboardHome.js
@@ -158,7 +158,6 @@ Class.create("UserDashboardHome", AjxpPane, {
                     switchToRepo(repoId);
                 }
             };
-            attachMobilTouchForClick(repoEl, select);
             disableTextSelection(repoEl);
             if(simpleClickOpen){
                 repoEl.observe("click", function(e){
diff --git a/core/src/plugins/gui.ajax/res/js/ajaxplorer.js b/core/src/plugins/gui.ajax/res/js/ajaxplorer.js
diff --git a/core/src/plugins/gui.ajax/res/js/ajaxplorer_boot.js b/core/src/plugins/gui.ajax/res/js/ajaxplorer_boot.js
diff --git a/core/src/plugins/gui.ajax/res/js/ajaxplorer_boot_protolegacy.js b/core/src/plugins/gui.ajax/res/js/ajaxplorer_boot_protolegacy.js
diff --git a/core/src/plugins/gui.ajax/res/js/lib/prototype/webfx.selectable.js b/core/src/plugins/gui.ajax/res/js/lib/prototype/webfx.selectable.js
@@ -79,23 +79,6 @@ SelectableElements = Class.create({
 			oElement.attachEvent("onclick", this._onclick);
 			oElement.attachEvent("ondblclick", this._ondblclick);
 		}
-        if(addTouch){
-            oElement.observe("touchstart", function(event){
-                var touchData = event.changedTouches[0];
-                  oElement.selectableTouchStart = touchData["clientY"];
-            }.bind(this));
-            oElement.observe("touchend", function(event){
-                if(oElement.selectableTouchStart) {
-                    var touchData = event.changedTouches[0];
-                    var delta = touchData['clientY'] - oElement.selectableTouchStart;
-                    if(Math.abs(delta) > 2){
-                        return;
-                    }
-                }
-                oElement.selectableTouchStart = null;
-                this._onclick(event);
-            }.bind(this) );
-        }
 
 		this.eventMouseUp = this.dragEnd.bindAsEventListener(this);
 		this.eventMouseDown = this.dragStart.bindAsEventListener(this);
diff --git a/core/src/plugins/gui.ajax/res/js/pydio/ui/class.AjxpPane.js b/core/src/plugins/gui.ajax/res/js/pydio/ui/class.AjxpPane.js
@@ -82,6 +82,11 @@ Class.create("AjxpPane", {
         }.bind(this);
         document.observe("ajaxplorer:component_config_changed", this.configObserver);
 
+        if(this.options.replaceScroller && window.ajxpMobile){
+            this.options.replaceScroller = false;
+            this.htmlElement.setStyle({overflowY:"auto"});
+        }
+
         if(this.options.replaceScroller){
             this.scroller = new Element('div', {
                 id:'scroller_'+this.htmlElement.id,
diff --git a/core/src/plugins/gui.ajax/res/js/pydio/ui/class.FilesList.js b/core/src/plugins/gui.ajax/res/js/pydio/ui/class.FilesList.js
@@ -79,9 +79,10 @@ Class.create("FilesList", SelectableElements, {
                 this._instanciatedToolbars = $A();
             }
 		}
-        if(this.options.fit && this.options.fit == "content"){
+        if((this.options.fit && this.options.fit == "content") || window.ajxpMobile){
             this.options.replaceScroller = false;
         }
+
         if(!FilesList.staticIndex) {
             FilesList.staticIndex = 1;
         }else{
@@ -731,11 +732,6 @@ Class.create("FilesList", SelectableElements, {
                     paddingBottom: '0'
                 }
             );
-            if(this.options.horizontalScroll){
-                attachMobileScroll(this.htmlElement, "horizontal");
-            }else{
-                attachMobileScroll(contentContainer, "vertical");
-            }
             scrollElement = contentContainer;
 			var oElement = this.htmlElement.down(".selectable_div");
 			
@@ -832,11 +828,6 @@ Class.create("FilesList", SelectableElements, {
 			buffer = '<div class="panelHeader"><div style="float:right;padding-right:5px;font-size:1px;height:16px;"><input type="image" height="16" width="16" src="'+ajxpResourcesFolder+'/images/actions/16/zoom-in.png" id="slider-input-1" style="border:0px;width:16px;height:16px;margin-top:0px;padding:0px;" value="64"/></div>'+MessageHash[126]+'</div>';
 			buffer += '<div id="selectable_div-'+this.__currentInstanceIndex+'" class="selectable_div'+(this._displayMode == "detail" ? ' detailed':'')+'" style="overflow:auto;">';
 			this.htmlElement.update(buffer);
-            if(this.options.horizontalScroll){
-                attachMobileScroll(this.htmlElement, "horizontal");
-            }else{
-                attachMobileScroll(this.htmlElement.down(".selectable_div"), "vertical");
-            }
 			if(this.paginationData && parseInt(this.paginationData.get('total')) > 1 ){
                 this.htmlElement.addClassName("paginated");
                 this.htmlElement.down(".selectable_div").insert({before:this.createPaginator()});
@@ -919,7 +910,6 @@ Class.create("FilesList", SelectableElements, {
             if(parseInt(this.paginationData.get('total')) == 1) this._sortableTable.paginationLoaderFunc = null;
         }
 
-
         if(this.options.replaceScroller){
             this.scroller = new Element('div', {id:'filelist_scroller'+this.__currentInstanceIndex, className:'scroller_track', style:"right:0px"});
             this.scroller.insert('<div id="filelist_scrollbar_handle'+this.__currentInstanceIndex+'" class="scroller_handle"></div>');
diff --git a/core/src/plugins/gui.ajax/res/js/pydio/ui/class.FoldersTree.js b/core/src/plugins/gui.ajax/res/js/pydio/ui/class.FoldersTree.js
@@ -35,7 +35,7 @@ Class.create("FoldersTree", AjxpPane, {
 	{
 		$super(oElement, options);
 		this.treeContainer = new Element('div', {id:'tree_container', style:'overflow:auto;height:100%;width:100%;'});
-        if(this.options.replaceScroller){
+		if(this.options.replaceScroller){
             this.scroller = new Element('div', {id:'tree_scroller', className:'scroller_track', style:"right:"+(parseInt(oElement.getStyle("marginRight"))-parseInt(oElement.getStyle("paddingRight")))+"px"});
             this.scroller.insert('<div id="scrollbar_handle" class="scroller_handle"></div>');
             oElement.insert(this.scroller);
diff --git a/core/src/plugins/gui.ajax/res/js/pydio/ui/class.InfoPanel.js b/core/src/plugins/gui.ajax/res/js/pydio/ui/class.InfoPanel.js
@@ -78,6 +78,10 @@ Class.create("InfoPanel", AjxpPane, {
      * @param node
      */
     open : function($super, node){
+        // We should not have the observers
+        document.stopObserving("ajaxplorer:actions_refreshed", this.updateHandler );
+        document.stopObserving("ajaxplorer:component_config_changed", this.componentConfigHandler );
+        document.stopObserving("ajaxplorer:user_logged", this.userLogHandler );
         this.htmlElement.up('div.dialogBox').setStyle({width:Math.min(450, document.viewport.getWidth())+'px'});
         this.htmlElement.up('div.dialogContent').setStyle({padding:0});
         this.htmlElement.down('#ip_content_info_panel').setStyle({position:"relative", top:0, left:0, width:'100%', height: Math.min(450, document.viewport.getHeight()-28)+'px', overflow:'auto'});
diff --git a/core/src/plugins/gui.ajax/res/js/pydio/util/ajxp_utils.js b/core/src/plugins/gui.ajax/res/js/pydio/util/ajxp_utils.js
@@ -791,43 +791,11 @@ function scrollByTouch(event, direction, targetId){
 }
 
 function attachMobileScroll(targetId, direction){
-	if(!window.ajxpMobile) return;
-    var target;
-	if(typeof (targetId) == "string"){
-		target = $(targetId);
-	}else{
-		target = targetId;
-		targetId = target.id;
-        if(!target.id){
-            targetId = "scroll-pane-"+Math.floor(Math.random()*1000);
-            target.setAttribute('id', targetId);
-        }
-	}
-	if(!target) return;
-	target.addEventListener("touchmove", function(event){ scrollByTouch(event, direction, targetId); });
-	target.addEventListener("touchstart", function(event){ scrollByTouch(event, direction, targetId); });
-	target.addEventListener("touchend", function(event){ scrollByTouch(event, direction, targetId); });
-}
-
-function attachMobilTouchForClick(oElement, callback){
-
-    oElement.observe("touchstart", function(event){
-        var touchData = event.changedTouches[0];
-        oElement.selectableTouchStart = touchData["clientY"];
-    });
-    oElement.observe("touchend", function(event){
-        if(oElement.selectableTouchStart) {
-            var touchData = event.changedTouches[0];
-            var delta = touchData['clientY'] - oElement.selectableTouchStart;
-            if(Math.abs(delta) > 2){
-                return;
-            }
-        }
-        oElement.selectableTouchStart = null;
-        callback(event);
-    } );
-
-
+	if(!window.ajxpMobile || !$(targetId)) return;
+    var overflow = {};
+    if(direction == 'vertical' || direction == 'both') overflow['overflowY'] = 'auto';
+    if(direction == 'horizontal' || direction == 'both') overflow['overflowX'] = 'auto';
+    $(targetId).setStyle(overflow);
 }
 
 function bufferCallback(name, time, callback){
diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/ajaxplorer.css b/core/src/plugins/gui.ajax/res/themes/orbit/css/ajaxplorer.css
@@ -275,7 +275,6 @@ div.thumbnail_cell_metadata span.metadata_chunk{
 
 .selectable_div.detailed{
     padding: 0 !important;
-    overflow: hidden !important;
 }
 
 .thumbnail_iconlike_shadow{
diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/allz.css b/core/src/plugins/gui.ajax/res/themes/orbit/css/allz.css
diff --git a/core/src/plugins/gui.ajax/res/themes/orbit/css/media.css b/core/src/plugins/gui.ajax/res/themes/orbit/css/media.css
@@ -84,6 +84,9 @@ and (max-width : 720px) {
     .thumbnail_selectable_cell > div > div.overlay_icon_div{
         top: 32px !important;
     }
+    .thumbnail_selectable_cell.selected-focus:not(.ajxpNodeLeaf) > div > div.overlay_icon_div{
+        display: none;
+    }
     #topPane{
         width: 200px;
     }
diff --git a/core/src/plugins/gui.mobile/ajxp-mobile.css b/core/src/plugins/gui.mobile/ajxp-mobile.css
@@ -185,6 +185,7 @@ div.detailed div.FL-inlineToolbar {
     margin-bottom: 7px;
     text-align: left;
     margin-top: 5px;
+    overflow: visible;
 }
 
 .selected div.FL-inlineToolbar a {
@@ -197,12 +198,12 @@ div.detailed div.FL-inlineToolbar {
 
 div.detailed .FL-inlineToolbar a#ls_inline_button {
     position: absolute;
-    top: 15px;
-    right: 12px;
-    border: 0;
-    padding: 4px 11px !important;
-    background-color: rgba(255, 255, 255, 0);
+    top: 24px;
+    right: 16px;
+    padding: 4px 10px 2px 12px !important;
+    background-color: rgb(255, 255, 255);
     border-radius: 30px;
+    color: #FB725C;
 }
 
 div.detailed .FL-inlineToolbar a#ls_inline_button > span.ajxp_icon_span{
diff --git a/core/src/plugins/gui.mobile/ajxp-mobile.js b/core/src/plugins/gui.mobile/ajxp-mobile.js
@@ -99,7 +99,9 @@ function initAjxpMobileActions(){
 
 document.observe("ajaxplorer:gui_loaded", function(){
 	//initAjxpMobileActions();
+	/*
 	document.addEventListener("touchmove", function(event){
 		event.preventDefault();
 	});
+	*/
 });
diff --git a/core/src/plugins/gui.mobile/manifest.xml b/core/src/plugins/gui.mobile/manifest.xml
@@ -42,11 +42,6 @@
 				<link type="text/css" rel="stylesheet" href="plugins/gui.mobile/ajxp-mobile.css" media="screen">
 				<script type="text/javascript">
 					window.ajxpMobile = true;
-					if(!window.getAjxpMobileActions){
-                        var conn = new Connexion();
-                        conn._libUrl = '';
-                        conn.loadLibrary('plugins/gui.mobile/ajxp-mobile.js');
-                    }
 				</script>
 			]]></template>
 			<template name="main_oxygen" element="ajxp_desktop" position="top" theme="oxygen"><![CDATA[

Original file line number	Diff line number	Diff line change
`@@ -158,7 +158,6 @@ Class.create("UserDashboardHome", AjxpPane, {`
`158`	`158`	`switchToRepo(repoId);`
`159`	`159`	`}`
`160`	`160`	`};`
`161`		`- attachMobilTouchForClick(repoEl, select);`
`162`	`161`	`disableTextSelection(repoEl);`
`163`	`162`	`if(simpleClickOpen){`
`164`	`163`	`repoEl.observe("click", function(e){`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ Class.create("FoldersTree", AjxpPane, {`
`35`	`35`	`{`
`36`	`36`	`$super(oElement, options);`
`37`	`37`	`this.treeContainer = new Element('div', {id:'tree_container', style:'overflow:auto;height:100%;width:100%;'});`
`38`		`- if(this.options.replaceScroller){`
	`38`	`+ if(this.options.replaceScroller){`
`39`	`39`	`this.scroller = new Element('div', {id:'tree_scroller', className:'scroller_track', style:"right:"+(parseInt(oElement.getStyle("marginRight"))-parseInt(oElement.getStyle("paddingRight")))+"px"});`
`40`	`40`	`this.scroller.insert('<div id="scrollbar_handle" class="scroller_handle"></div>');`
`41`	`41`	`oElement.insert(this.scroller);`