Skip to content

Commit

Permalink
When in a Device View - Arrow Up/Down will scroll the page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@InnaBoitsun
InnaBoitsun committed Oct 23, 2015
1 parent 93d4217 commit c8ed6a9
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 27 deletions.
67 changes: 40 additions & 27 deletions Website/Composite/content/views/browser/BrowserPageBinding.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,19 +109,16 @@ BrowserPageBinding.prototype.onBindingRegister = function () {
BrowserPageBinding.superclass.onBindingRegister.call(this);
this.subscribe(BroadcastMessages.SYSTEM_ACTIONPROFILE_PUBLISHED);
this.subscribe(BroadcastMessages.SYSTEMTREEBINDING_REFRESHED_AFTER);

this.subscribe(BroadcastMessages.KEY_ARROW);

this.addActionListener(WindowBinding.ACTION_ONLOAD);
this.addActionListener(TabBoxBinding.ACTION_SELECTED);
this.addActionListener(TabBoxBinding.ACTION_UPDATED);
this.addActionListener(BrowserTabBinding.ACTIONVENT_CLOSE);
this.addActionListener(ViewBinding.ACTION_LOADED);
this.addActionListener(PageBinding.ACTION_INITIALIZED);


this.addActionListener(SplitterBinding.ACTION_DRAGSTART);
this.addActionListener(SplitterBinding.ACTION_DRAGGED);


}

/**
Expand All @@ -148,6 +145,15 @@ BrowserPageBinding.prototype.handleBroadcast = function (broadcast, arg) {
this.refreshView();
}
break;
case BroadcastMessages.KEY_ARROW:
if (this._box.isFocused) {
var frameOvl = document.getElementById(BrowserPageBinding.DEVICE_TOUCHVIEW_FRAMEOVERLAY_ID);
if(frameOvl && frameOvl.style.display == "block") { // Scroll Touch Device View on Key UP/DOWN
var delta = KeyEventCodes.VK_UP == arg ? -50 : 50;
this.scrollDeviceFrame(delta);
}
}
break;
}
}

Expand Down Expand Up @@ -195,8 +201,8 @@ BrowserPageBinding.prototype.setPageArgument = function (map) {
} else {
this._startURL = url;
}
if (!this.systemViewDefinition){
if (!this.systemViewDefinition) {

this.systemViewDefinition = map["SystemViewDefinition"];
//NEWUI Add tree to Browser
var explorerdocument = this.bindingDocument;
Expand All @@ -216,7 +222,7 @@ BrowserPageBinding.prototype.setPageArgument = function (map) {
this.image = map.image;
}


}

/**
Expand All @@ -239,7 +245,7 @@ BrowserPageBinding.prototype.onBeforePageInitialize = function () {

// Subscribe to current tab selected
var dockPanelViewBinding = this.getAncestorBindingByType(ViewBinding, true);
var dockTabPanel = UserInterface.getBinding(dockPanelViewBinding.getMigrationParent());
var dockTabPanel = UserInterface.getBinding(dockPanelViewBinding.getMigrationParent());
dockTabPanel.addActionListener(FocusBinding.ACTION_FOCUS, this);

if (this._startURL) {
Expand Down Expand Up @@ -313,7 +319,7 @@ BrowserPageBinding.prototype.push = function (node, isManual, isForce) {
self.pushURL(result, isManual);
} else {
self.pushToken(node, isManual);
}
}
}, 0);
});
this._entityToken = entityToken;
Expand Down Expand Up @@ -448,7 +454,7 @@ BrowserPageBinding.prototype.handleAction = function (action) {
break;
case FocusBinding.ACTION_FOCUS:
//TODO add check target
if (action.target instanceof DockPanelBinding){
if (action.target instanceof DockPanelBinding) {
this.onBrowserTabSelected();
}
break;
Expand Down Expand Up @@ -598,7 +604,7 @@ BrowserPageBinding.prototype._handleDocumentLoad = function (binding) {
);
}
});

}

/*
Expand Down Expand Up @@ -629,7 +635,7 @@ BrowserPageBinding.prototype._updateAddressBar = function (url) {
bar.setValue(result);
}
});

}
}

Expand Down Expand Up @@ -802,9 +808,9 @@ BrowserPageBinding.prototype._updateBroadcasters = function () {
browserview.enable();
}






}

/**
Expand Down Expand Up @@ -906,18 +912,15 @@ BrowserPageBinding.prototype.handleEvent = function (e) {
break;
case DOMEvents.MOUSEDOWN:
this._box.focus();
case DOMEvents.WHEEL:

case DOMEvents.WHEEL:
if (element.id == BrowserPageBinding.DEVICE_TOUCHVIEW_FRAMEOVERLAY_ID) {
this._box.focus();
var delta = e.deltaY || e.detail || e.wheelDelta;
delta = Math.abs(delta) < 50 ? 50 * Math.sign(delta) : delta;
var doc = this._box.getFrameElement().contentWindow.document;
doc.documentElement.scrollTop += delta;
doc.body.scrollTop += delta; // Chrome
}
this.scrollDeviceFrame(delta);
}
break;

case DOMEvents.CLICK:
if (element.id == BrowserPageBinding.DEVICE_TOUCHVIEW_FRAMEOVERLAY_ID) {
this._box.focus();
Expand All @@ -928,7 +931,7 @@ BrowserPageBinding.prototype.handleEvent = function (e) {
if (el) {
if (el.tagName && ["input", "textarea"].indexOf(el.tagName.toLowerCase()) > -1 && ["text", "textarea", "email", "password", "url", "radio", "checkbox"].indexOf(el.type.toLowerCase()) > -1) {
el.focus();
}
}
el.click();
}
element.style.display = "block";
Expand Down Expand Up @@ -962,7 +965,7 @@ BrowserPageBinding.prototype.loadDeviceList = function () {
var h = device.getAttribute("h");
var touch = device.getAttribute("touch");
var requirepublicnet = device.getAttribute("requirepublicnet");

var urlProperty = device.getAttribute("url");

var itemBinding = MenuItemBinding.newInstance(bindingDocument);
Expand Down Expand Up @@ -1014,7 +1017,9 @@ BrowserPageBinding.prototype.setCustomUrl = function (url) {
}

/**
* Set client width for browser iframe
* Set client width/height for browser iframe
* For touch device view the Frame Overlay is created to imitate touch device: hand cursor, skip hover effects.
* For touch device view next should work: focus form fields, handle click events, scroll on MOUSE WHEEL, on KEY UP/DOWN, fit window area by using CSS transform.scale feature.
* @param {int} width
*/
BrowserPageBinding.prototype.setScreen = function (dim, touch) {
Expand All @@ -1027,7 +1032,7 @@ BrowserPageBinding.prototype.setScreen = function (dim, touch) {
CSSUtil.attachClassName(frame, "deviceFrame");
CSSUtil.detachClassName(frame, "centeredXY");
frame.contentWindow.document.getElementsByTagName('body')[0].style.overflowX = "hidden";

if (isFrameCenteredXY) {
CSSUtil.attachClassName(frame, "centeredXY");
}
Expand Down Expand Up @@ -1087,7 +1092,9 @@ BrowserPageBinding.prototype.setScreen = function (dim, touch) {
}
}


/**
Helper fucntions with Device Frame
*/
BrowserPageBinding.prototype.getScrollbarWidth = function () {
var div, width = this.getScrollbarWidth.width;
if (width === undefined) {
Expand All @@ -1101,6 +1108,12 @@ BrowserPageBinding.prototype.getScrollbarWidth = function () {
return width;
};

BrowserPageBinding.prototype.scrollDeviceFrame = function (delta) {
var doc = this._box.getFrameElement().contentWindow.document;
doc.documentElement.scrollTop += delta;
doc.body.scrollTop += delta; // Chrome
}

/**
* Return perspective handle for browser
*/
Expand Down Expand Up @@ -1131,4 +1144,4 @@ BrowserPageBinding.prototype.getSystemPage = function () {
BrowserPageBinding.prototype.onBrowserTabSelected = function () {

this.bindingWindow.bindingMap.systemtoolbar._containAllButtons();
}
}
2 changes: 2 additions & 0 deletions Website/Composite/content/views/browser/BrowserTabBoxBinding.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,7 @@ BrowserTabBoxBinding.prototype.getFrameElement = function () {
*/
BrowserTabBoxBinding.prototype.focus = function () {
this.dispatchAction(Binding.ACTION_FOCUSED);
this.isFocused = true;
};

/**
Expand All @@ -243,4 +244,5 @@ BrowserTabBoxBinding.prototype.focus = function () {
*/
BrowserTabBoxBinding.prototype.blur = function () {
this.dispatchAction(Binding.ACTION_BLURRED);
this.isFocused = false;
};

0 comments on commit c8ed6a9

Please sign in to comment.