path: root/cmd/mist/assets/qml/views/browser.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 (on) {
            //appTitle.visible = false
            //appDomain.visible = false
            
            //uriNav.visible = true
            clickAnywhereOnApp.visible = true

            navBar.state = "fullUrlVisible"
        } else {
            //appTitle.visible = true
            //appDomain.visible = true
            //uriNav.visible = false
            clickAnywhereOnApp.visible = false

            navBar.state = "titleVisible"

        }

    }

    Component.onCompleted: {
    }

    Item {
        objectName: "root"
        id: root
        anchors.fill: parent
        state: "inspectorShown"

        MouseArea {
            id: clickAnywhereOnApp
            z:15
            //hoverEnabled: true
            anchors.fill: parent
            /*hoverEnabled: true*/
            
            onClicked: {
                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

                onClicked: {
                    webview.goBack()
                }

                anchors{
                    left: parent.left
                    leftMargin: 6
                }

                style: ButtonStyle {
                    background: Image {
                        source: "../../backButton.png"
                        width: 20
                        height: 30
                    }
                }
            }

            Rectangle {
                id: appInfoPane
                height: 28
                color: "#FFFFFF"
                radius: 6


               MouseArea {
                    anchors.fill: parent
                    z: 10
                    hoverEnabled: true
                    
                    onEntered: {
                        showFullUrlBar(true);
                    }    
                        
                }

                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
                     
                     anchors {
                         left: parent.left
                         right: parent.horizontalCenter
                         top: parent.top
                         bottom: parent.bottom
                         rightMargin: 10
                     }
                     color: "#928484"
                 }

                 Text {
                     id: appDomain
                     text: "loading domain"
                     font.bold: false
                     horizontalAlignment: Text.AlignLeft
                     verticalAlignment: Text.AlignVCenter
                     
                     anchors {
                         left: parent.horizontalCenter
                         right: parent.right
                         top: parent.top
                         bottom: parent.bottom
                         leftMargin: 10
                     }
                     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: {
                        webview.url = this.text;
                    }
                   /* onFocusedChanged: {
                         if (focused) {
                             //uriNav.selectAll();
                         }
                    }*/
                }
                
                z:2
            }
            
            Rectangle {
                id: appInfoPaneShadow
                width: 10
                height: 30
                color: "#BDB6B6"
                radius: 6

                anchors {
                    left: back.right
                    right: parent.right
                    leftMargin:10
                    rightMargin:10
                    top: parent.top 
                    topMargin: 23
                }

                z:1
            }

            Rectangle {
                id: navBarBackground
                anchors.fill: parent
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "#F6F1F2" }
                    GradientStop { position: 1.0; color: "#DED5D5" }
                }
                z:-1
            }

            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: {
                if (loadRequest.status == WebEngineView.LoadSucceededStatus) {
                    webview.runJavaScript("document.title", function(pageTitle) {
                        menuItem.title = pageTitle; 
                    });

                    //var topBarStyle
                    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(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 //webview.url.replace("a", "z")
                    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
                }
            }
        ]
    }
}