plugeth/cmd/mist/assets/qml/views/browser.qml
2015-02-17 17:37:26 +01:00

507 lines
14 KiB
QML

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<span style='color:#CCC'>$3</span>");
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
experimental.settings.javascriptCanAccessClipboard: true
//experimental.settings.localContentCanAccessRemoteUrls: true
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
top: navBar.bottom
}
z: 10
Timer {
interval: 2000; running: true; repeat: true
onTriggered: {
webview.runJavaScript("try{document.querySelector('meta[name=ethereum-dapp-info]').getAttribute('content')}catch(e){}", function(extraInfo) {
if (extraInfo) {
menuItem.secondaryTitle = extraInfo;
}
});
webview.runJavaScript("try{document.querySelector('meta[name=ethereum-dapp-badge]').getAttribute('content')}catch(e){}", function(badge) {
if (badge) {
if (Number(badge)>0 && Number(badge)<999) {
menuItem.badgeNumber = Number(badge);
menuItem.badgeContent = "number"
} else if (badge == "warning") {
menuItem.badgeIcon = "\ue00e"
menuItem.badgeContent = "icon"
} else if (badge == "ghost") {
menuItem.badgeIcon = "\ue01a"
menuItem.badgeContent = "icon"
} else if (badge == "question") {
menuItem.badgeIcon = "\ue05d"
menuItem.badgeContent = "icon"
} else if (badge == "info") {
menuItem.badgeIcon = "\ue08b"
menuItem.badgeContent = "icon"
} else if (badge == "check") {
menuItem.badgeIcon = "\ue080"
menuItem.badgeContent = "icon"
} else if (badge == "gear") {
menuItem.badgeIcon = "\ue09a"
menuItem.badgeContent = "icon"
} else {
menuItem.badgeContent = ""
}
} else {
menuItem.badgeContent = ""
}
});
}
}
onLoadingChanged: {
if (loadRequest.status == WebEngineView.LoadSucceededStatus) {
webview.runJavaScript("document.title", function(pageTitle) {
menuItem.title = pageTitle;
});
webView.runJavaScript("try{document.querySelector(\"link[rel='icon']\").getAttribute(\"href\")}catch(e){}", function(sideIcon){
if(sideIcon){
menuItem.icon = webview.url + sideIcon;
};
});
webView.runJavaScript("try{document.querySelector(\"meta[name='ethereum-dapp-url-bar-style']\").getAttribute(\"content\")}catch(e){}", function(topBarStyle){
if (!topBarStyle) {
showFullUrlBar(true);
navBarBackground.visible = true;
back.visible = true;
appInfoPane.anchors.leftMargin = 0;
appInfoPaneShadow.anchors.leftMargin = 0;
webview.anchors.topMargin = 0;
return;
}
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(eth.readFile("bignumber.min.js"));
webview.runJavaScript(eth.readFile("ethereum.js/dist/ethereum.js"));
webview.runJavaScript(eth.readFile("mist.js"));
var cleanTitle = webview.url.toString()
var matches = cleanTitle.match(/^[a-z]*\:\/\/([^\/?#]+)(?:[\/?#]|$)/i);
var domain = matches && matches[1];
if (domain)
appDomain.text = domain //webview.url.replace("a", "z")
if (webview.title)
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
}
}
]
}
}