import QtQuick 2.0 import QtQuick.Controls 1.0; import QtQuick.Controls.Styles 1.0 import QtQuick.Layouts 1.0; import QtWebEngine 1.0 //import QtWebEngine.experimental 1.0 import QtQuick.Window 2.0; Rectangle { id: window anchors.fill: parent color: "#00000000" property var title: "" property var iconSource: "../browser.png" property var menuItem property var hideUrl: true property alias url: webview.url property alias windowTitle: webview.title property alias webView: webview property var cleanPath: false property var open: function(url) { if(!window.cleanPath) { var uri = url; if(!/.*\:\/\/.*/.test(uri)) { uri = "http://" + uri; } var reg = /(^https?\:\/\/(?:www\.)?)([a-zA-Z0-9_\-]*\.eth)(.*)/ if(reg.test(uri)) { uri.replace(reg, function(match, pre, domain, path) { uri = pre; var lookup = eth.lookupDomain(domain.substring(0, domain.length - 4)); var ip = []; for(var i = 0, l = lookup.length; i < l; i++) { ip.push(lookup.charCodeAt(i)) } if(ip.length != 0) { uri += lookup; } else { uri += domain; } uri += path; }); } window.cleanPath = true; webview.url = uri; //uriNav.text = uri.text.replace(/(^https?\:\/\/(?:www\.)?)([a-zA-Z0-9_\-]*\.\w{2,3})(.*)/, "$1$2$3"); uriNav.text = uri; } else { // Prevent inf loop. window.cleanPath = false; } } function showFullUrlBar(on){ if (uriNav.focus == false ) { if (on == false) { clickAnywhereOnApp.visible = false navBar.state = "titleVisible" } else { clickAnywhereOnApp.visible = true navBar.state = "fullUrlVisible" } } } Component.onCompleted: { } Item { objectName: "root" id: root anchors { fill: parent } state: "inspectorShown" MouseArea { id: clickAnywhereOnApp z:15 // Using a secondary screen to catch on mouse exits for the area, because // there are many hover actions conflicting anchors { top: parent.top topMargin: 50 right: parent.right bottom: parent.bottom left: parent.left } hoverEnabled: true onEntered: { showFullUrlBar(false); } onClicked: { uriNav.focus = false showFullUrlBar(false); } // Rectangle { // anchors.fill: parent // color: "#88888888" // } } RowLayout { id: navBar height: 74 z: 20 anchors { left: parent.left right: parent.right } Button { id: back z: 30 onClicked: { webview.goBack() } anchors { left: parent.left leftMargin: 6 } style: ButtonStyle { background: Image { source: (webview.canGoBack) ? (control.hovered ? "../../backButtonHover.png" : "../../backButton.png") : "../../backButtonDisabled.png" width: 20 height: 30 } } } Rectangle { id: appInfoPane height: 28 color: "#FFFFFF" radius: 6 z:2 MouseArea { anchors.fill: parent z: 10 hoverEnabled: true onEntered: { showFullUrlBar(true); } /*onExited: { showFullUrlBar(false); }*/ } anchors { left: back.right right: parent.right leftMargin: 10 rightMargin: 10 } Text { id: appTitle text: "LOADING" font.bold: true font.capitalization: Font.AllUppercase horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter elide: Text.ElideRight anchors { left: parent.left right: parent.horizontalCenter top: parent.top bottom: parent.bottom leftMargin: 32 } color: "#928484" } Text { id: appDomain text: "loading domain" font.bold: false horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter elide: Text.ElideLeft anchors { left: parent.horizontalCenter right: parent.right top: parent.top bottom: parent.bottom leftMargin: 32 } color: "#C0AFAF" } TextField { id: uriNav opacity: 0.0 anchors { left: parent.left right: parent.right leftMargin: 16 } horizontalAlignment: Text.AlignHCenter style: TextFieldStyle { textColor: "#928484" background: Rectangle { border.width: 0 color: "transparent" } } text: webview.url; y: parent.height / 2 - this.height / 2 z: 20 activeFocusOnPress: true Keys.onReturnPressed: { // if there's no http, add it. var url = this.text, matches = url.match(/^([a-z]*\:\/\/)?([^\/.]+)(:?\/)(.*|$)/i), requestedProtocol = (matches && matches[1] != "undefined")? "" : "http://"; webview.url = requestedProtocol + url; } } } Rectangle { id: appInfoPaneShadow width: 10 height: 30 color: "#BDB6B6" radius: 6 z:1 anchors { left: back.right right: parent.right leftMargin:10 rightMargin:10 top: parent.top topMargin: 23 } } Rectangle { id: navBarBackground anchors.fill: parent z:-1 gradient: Gradient { GradientStop { position: 0.0; color: "#F6F1F2" } GradientStop { position: 1.0; color: "#DED5D5" } } } states: [ State { name: "fullUrlVisible" PropertyChanges { target: appTitle anchors.rightMargin: -50 opacity: 0.0 } PropertyChanges { target: appDomain anchors.leftMargin: -50 opacity: 0.0 } PropertyChanges { target: uriNav anchors.leftMargin: 0 opacity: 1.0 } }, State { name: "titleVisible" PropertyChanges { target: appTitle anchors.rightMargin: 10 opacity: 1.0 } PropertyChanges { target: appDomain anchors.leftMargin: 10 opacity: 1.0 } PropertyChanges { target: uriNav anchors.leftMargin: -50 opacity: 0.0 } } ] transitions: [ // This adds a transition that defaults to applying to all state changes Transition { // This applies a default NumberAnimation to any changes a state change makes to x or y properties NumberAnimation { properties: "anchors.leftMargin, anchors.rightMargin, opacity" easing.type: Easing.InOutQuad //Easing.InOutBack duration: 300 } } ] } WebEngineView { objectName: "webView" id: webview anchors { left: parent.left right: parent.right bottom: parent.bottom top: navBar.bottom } z: 10 onLoadingChanged: { // this checks if your app has special header tags if (loadRequest.status == WebEngineView.LoadSucceededStatus) { webview.runJavaScript("document.title", function(pageTitle) { menuItem.title = pageTitle; }); webView.runJavaScript("document.querySelector(\"meta[name='ethereum-dapp-url-bar-style']\").getAttribute(\"content\")", function(topBarStyle){ if (topBarStyle=="transparent") { // Adjust for a transparent sidebar Dapp navBarBackground.visible = false; back.visible = false; appInfoPane.anchors.leftMargin = -16; appInfoPaneShadow.anchors.leftMargin = -16; webview.anchors.topMargin = -74; webview.runJavaScript("document.querySelector('body').classList.add('ethereum-dapp-url-bar-style-transparent')") } else { navBarBackground.visible = true; back.visible = true; appInfoPane.anchors.leftMargin = 0; appInfoPaneShadow.anchors.leftMargin = 0; webview.anchors.topMargin = 0; }; }); // webView.runJavaScript("document.querySelector(\"link[rel='icon']\").getAttribute(\"href\")", function(sideIcon){ // if(sideIcon){ // window.iconSource = "http://localhost:3000/whisper-icon@2x.png" //webview.url + sideIcon // console.log(iconSource) // }; // }); webview.runJavaScript(eth.readFile("bignumber.min.js")); webview.runJavaScript(eth.readFile("ethereum.js/dist/ethereum.js")); var cleanTitle = webview.url.toString() var matches = cleanTitle.match(/^[a-z]*\:\/\/([^\/?#]+)(?:[\/?#]|$)/i); var domain = matches && matches[1]; appDomain.text = domain appTitle.text = webview.title showFullUrlBar(false); } } onJavaScriptConsoleMessage: { console.log(sourceID + ":" + lineNumber + ":" + JSON.stringify(message)); } } Rectangle { id: sizeGrip color: "gray" visible: false height: 10 anchors { left: root.left right: root.right } y: Math.round(root.height * 2 / 3) MouseArea { anchors.fill: parent drag.target: sizeGrip drag.minimumY: 0 drag.maximumY: root.height drag.axis: Drag.YAxis } } WebEngineView { id: inspector visible: false anchors { left: root.left right: root.right top: sizeGrip.bottom bottom: root.bottom } } states: [ State { name: "inspectorShown" PropertyChanges { target: inspector } } ] } }