Skip to content

Commit

Permalink
A complete working version. The findbox does not look shiny and also the
Browse files Browse the repository at this point in the history
shortkey does not make the input box active (Ctrl + F).
  • Loading branch information
ehsan-karamad committed Jul 21, 2015
1 parent 9b1cf9f commit 055a8fc
Show file tree
Hide file tree
Showing 10 changed files with 451 additions and 4 deletions.
31 changes: 31 additions & 0 deletions samples/webview-samples/multi-tab-browser/browser.css
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,7 @@ webview {
width: 22px;
}


#zoom-box button {
font-size: 12px;
margin: 2px 0px;
Expand Down Expand Up @@ -421,3 +422,33 @@ webview {
font-size: 14px;
width: 24px;
}

.overlay-gray {
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}

#exit-box {
color: rgb(193, 193, 193);
display: none;
position: absolute;
z-index: 1000;
}

#permission-box {
color: rgb(193, 193, 193);
display: none;
position: absolute;
z-index: 1000;
}

.req-button {
color: rgb(193, 193, 193);
background: rgb(90, 90, 90);
}
14 changes: 14 additions & 0 deletions samples/webview-samples/multi-tab-browser/browser.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
<script src="tabs.js"></script>
<script src="find_box_controller.js"></script>
<script src="zoom_box_controller.js"></script>
<script src="exit_box_controller.js"></script>
<script src="permission_box_controller.js"></script>
<script src="browser.js"></script>
<script src="browser_main.js"></script>
</head>
Expand Down Expand Up @@ -57,6 +59,18 @@
<button id="find-forward">&#62;</button>
</form>
</div>
<div id="exit-box">
<h2> Browser Exit? </h2>
<h3> Do you really want to exit browser? </h3>
<button id="exit-yes" class="req-button"> Yes </button>
<button id="exit-no" class="req-button"> No </button>
</div>
<div id="permission-box">
<h2> Request Permission </h2>
<h4 id="question"></h4>
<button id="allow" class="req-button"> Yes </button>
<button id="deny" class="req-button"> No </button>
</div>

<div id="content-container">
</div>
Expand Down
11 changes: 11 additions & 0 deletions samples/webview-samples/multi-tab-browser/browser.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ var browser = (function(configModule, tabsModule) {
contentContainer,
findbox,
zoombox,
exitbox,
permissionbox,
newTabElement) {
this.controlsContainer = controlsContainer;
this.back = back;
Expand All @@ -30,6 +32,9 @@ var browser = (function(configModule, tabsModule) {
this.newTabElement = newTabElement;
this.findBoxController = new findTool.FindController(findbox, this);
this.zoomBoxController = new zoomTool.ZoomController(zoombox, this);
this.exitBoxController = new exitTool.ExitController(exitbox, this);
this.permissionBoxController = new permissionTool.PermissionController(
permissionbox, this);
this.tabs = new tabsModule.TabList(
'tabs',
this,
Expand Down Expand Up @@ -173,6 +178,8 @@ var browser = (function(configModule, tabsModule) {
e.preventDefault();
this.tabs.removeTab(this.tabs.getSelected());
break;
case 122:
chrome.app.window.current().fullscreen();
}
// Ctrl + [1-9]
if (e.keyCode >= 49 && e.keyCode <= 57) {
Expand Down Expand Up @@ -212,5 +219,9 @@ var browser = (function(configModule, tabsModule) {
}
};

Browser.prototype.closeBrowser = function() {
this.exitBoxController.activate();
}

return {'Browser': Browser};
})(config, tabs);
2 changes: 2 additions & 0 deletions samples/webview-samples/multi-tab-browser/browser_main.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ var mainBrowser = null;
query('#content-container'),
query('#find-box'),
query('#zoom-box'),
query('#exit-box'),
query('#permission-box'),
query('#new-tab'));
} else {
// When API not available, show lightbox
Expand Down
34 changes: 34 additions & 0 deletions samples/webview-samples/multi-tab-browser/exit_box_controller.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
var exitTool = (function() {
var containerElement = null;
var browserInstance = null;
var controller = null;
var yes = null; no = null;
function query(id) { return containerElement.querySelector(id);}
var ExitController = function(container, browser) {
containerElement = container;
browserInstance = browser;
controller = this;
yes = query('#exit-yes');
no = query('#exit-no');
yes.onclick = function() {
window.close();
};
no.onclick = deactivate;
this.overlay = document.createElement('div');
this.overlay.className = 'overlay-gray';
document.body.appendChild(this.overlay);
};

ExitController.prototype.activate = function() {
containerElement.style.display = 'block';
this.overlay.style.display = 'block';
};

function deactivate() {
containerElement.style.display = 'none';
controller.overlay.style.display = 'none';
};

return {'ExitController': ExitController};

})();
139 changes: 139 additions & 0 deletions samples/webview-samples/multi-tab-browser/find_box_controller.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
var findTool = (function() {
var VISIBLE_STYLE = 'block';
var HIDDEN_STYLE = 'none';
var containerElement = null, browserInstance = null, controller = null;
var form = null, findText = null, matchCase = null, findBackward = null,
findForward = null, findResult = null;
var findMatchCase = false;
function query(id) {
return containerElement.querySelector(id);
}
var FindController = function(container, browser) {
containerElement = container;
browserInstance = browser;
form = query('#find-form');
findText = query('#find-text');
findResults = query('#find-results');
findBackward = query("#find-backward");
findForward = query("#find-forward");
matchCase = query("#match-case");
controller = this;
initHandlers();
}

function isVisible() {
return containerElement.style.display == VISIBLE_STYLE;
}

function hideBox() {
containerElement.style.display = HIDDEN_STYLE;
}

function showBox() {
setWebviewFindUpdateHandler();
containerElement.style.display = VISIBLE_STYLE;
}

FindController.prototype.toggleVisibility = function() {
if (isVisible()) {
hideBox();
} else {
showBox();
}
};

function findTextOnInput(e) {
browserInstance.tabs.getSelected().webview.find(
findText.value, {matchCase: findMatchCase});
}

function findTextOnKeyDown(e) {
if (e.ctrlKey && e.keyCode == 13) {
e.preventDefault();
browserInstance.tabs.getSelected().webview.stopFinding('activate');
hideBox();
}
}
function matchCaseOnClick(e) {
e.preventDefault();
findMatchCase = !findMatchCase;
if (findMatchCase) {
matchCase.style.color = 'blue';
matchCase.style['font-weight'] = 'bold';
} else {
matchCase.style.color = 'black';
matchCase.style['font-weight'] = "";
}
browserInstance.tabs.getSelected().webview.find(
findText.value, {matchCase: findMatchCase});
}

function formOnSubmit(e) {
e.preventDefault();
browserInstance.tabs.getSelected().webview.find(
findText.value, {matchCase: findMatchCase});
}

function findBackwardOnClick(e) {
e.preventDefault();
browserInstance.tabs.getSelected().webview.find(
findText.value, {backward: true, matchCase: findMatchCase});
}

function handleFindUpdate(e) {
if (e.searchText == "") {
findResults.innerText = "";
} else {
findResults.innerText =
event.activeMatchOrdinal + " of " + event.numberOfMatches;
}
// Ensure that the find box does not obscure the active match
if (e.finalUpdate && !e.canceled) {
containerElement.style.left = '';
containerElement.style.opacity = '';
var rect = containerElement.getBoundingClientRect();
if (containerElementObscuresActiveMatch(rect, e.selectionRect)) {
var potentialLeft = e.selectionRect.left - rect.width - 10;
if (potentialLeft >= 5) {
containerElement.style.left = potentialLeft + 'px';
} else {
containerElement.style.opacity = "0.5";
}
}
}
}

function containerElementObscuresActiveMatch(findBoxRect, matchRect) {
return findBoxRect.left < matchRect.left + matchRect.width &&
findBoxRect.right > matchRect.left &&
findBoxRect.top < matchRect.top + matchRect.height &&
findBoxRect.bottom > matchRect.top;

}

function handleKeydown(e) {
// Check for Ctrl + F
if (e.ctrlKey && e.keyCode == 70) {
showBox();
}
}

function initHandlers() {
findText.addEventListener('input', findTextOnInput);
findText.addEventListener('keydown', findTextOnKeyDown);
matchCase.addEventListener('click', matchCaseOnClick);
form.addEventListener('submit', formOnSubmit);
window.addEventListener('keydown', handleKeydown);
}

function setWebviewFindUpdateHandler() {
if (browserInstance && browserInstance.tabs) {
for (var index = 0; index < browserInstance.tabs.getNumTabs(); ++index) {
var wv = browserInstance.tabs.selectIdx(index).webview;
wv.onfindupdate = handleFindUpdate;
wv.stopFinding();
}
}
}
return {'FindController': FindController};
})();
2 changes: 0 additions & 2 deletions samples/webview-samples/multi-tab-browser/guest_messaging.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ var webviewTitleInjectionComplete = false;
console.warn('Warning: Title message from embedder contains no tab name');
}
};

var simulateCtrlClick = function(url) {
var a = document.createElement('a');
a.href = url;
Expand Down Expand Up @@ -57,7 +56,6 @@ var webviewTitleInjectionComplete = false;
'id-' + (new Date()).getTime(),
'width=100,height=100,left=100,top=100');
};

window.addEventListener('message', function(e) {
if (e.data) {
var data = JSON.parse(e.data);
Expand Down
Loading

0 comments on commit 055a8fc

Please sign in to comment.