browser.qml

import QtQuick 2.2
import QtQuick.Window 2.2
import QtWebKit 3.0
import QtWebKit.experimental 1.0

Rectangle {
    id:root
    width: 800
    height: 600

    Rectangle{
        color:"black"
        anchors.fill: parent
        Image{
            source:"twitter13.svg"
            x:parent.width-width-20
            y:-40
            opacity: 0.5
        }
        MouseArea{
            anchors.fill: parent
            property point previousPosition
            hoverEnabled: true
            onPressed: {
                previousPosition = Qt.point(mouseX, mouseY)
            }
            onPositionChanged: {
                if (pressedButtons == Qt.LeftButton && QmlApp.visibility != 5) {
                    QmlApp.x += mouseX - previousPosition.x
                    QmlApp.y += mouseY - previousPosition.y
                }
            }
        }
    }

    Image{
        source:"close.svg"
        sourceSize.width: 30
        sourceSize.height: 30
        x:parent.width-35
        y:5
        MouseArea{
            cursorShape: Qt.PointingHandCursor
            anchors.fill: parent
            onClicked: {
                QmlApp.close()
            }
        }
    }

    NumberAnimation {
        id: spinnerRot
        target: spinner
        properties: "rotation"
        from: 0
        to: 360
        loops: Animation.Infinite
        duration: 2000
    }
    Image{
        id:spinner
        source:"spinner.svg"
        sourceSize.width: 70
        sourceSize.height: 70
        x:parent.width/2-35
        y:parent.height/2-35
        opacity: 0.9
        Component.onCompleted:spinnerRot.start()
    }

    PropertyAnimation {id: showLoadStatus; target: loadStatus; properties: "opacity"; to: 0.8; duration: 300}
    PropertyAnimation {id: hideLoadStatus; target: loadStatus; properties: "opacity"; to: 0; duration: 300}
    PropertyAnimation {id: loadStatusAni; target: loadStatus; properties: "width"; to: 0; duration: 100;}

    Rectangle{
        id:loadStatus
        color:"green"
        width:0
        height:90
    }
    Row {
        y:45
        spacing: 5
        Image {
            source:"arrow_left.svg"
            sourceSize.width: 40
            sourceSize.height: 40
            MouseArea{
                cursorShape: Qt.PointingHandCursor
                anchors.fill: parent
                onClicked: {
                    mainView.goBack();
                }
            }
        }
        Image {
            source:"arrow_right.svg"
            sourceSize.width: 40
            sourceSize.height: 40
            MouseArea{
                cursorShape: Qt.PointingHandCursor
                anchors.fill: parent
                onClicked: {
                    mainView.goForward()
                }
            }
        }
        Image {
            id:reloadBut
            source:"update.svg"
            sourceSize.width: 40
            sourceSize.height: 40
            MouseArea{
                cursorShape: Qt.PointingHandCursor
                anchors.fill: parent
                onClicked: {
                    if(mainView.loading)
                        mainView.stop()
                    else
                        mainView.reload()
                }
            }
        }
        Image{
            source:"home.svg"
            sourceSize.width: 40
            sourceSize.height: 40
            MouseArea{
                cursorShape: Qt.PointingHandCursor
                anchors.fill: parent
                onClicked: {
                    mainView.url = "http://google.com/"
                }
            }
        }
        Rectangle{
            border.width: 2
            border.color: "white"
            width:root.width-230
            height:40
            color:"transparent"
            clip: true
            TextInput{
                id:addressBar
                width:parent.width-10
                anchors.centerIn: parent
                font.pointSize:15
                font.family : "sans serif"
                color:"white"
                selectByMouse: true
                text:mainView.url
            }
        }
        Image{
            source:"tick.svg"
            sourceSize.width: 40
            sourceSize.height: 40
            MouseArea{
                cursorShape: Qt.PointingHandCursor
                anchors.fill: parent
                onClicked: {
                    var u = addressBar.text
                    function addhttp(url) {
                        if (url.substring(0,11) === "javascript:")
                            return url
                        if (!/^(?:f|ht)tps?\:\/\//.test(url))
                            return "http://" + url;
                        return url;
                    }
                    mainView.url = addressBar.text = addhttp(addressBar.text)
                }
            }
        }
    }

    WebView {
        id:mainView

        width: parent.width-10
        height:parent.height-95
        contentWidth: parent.width-10
        contentHeight: parent.height-95

        y:90
        x:5

        url: "http://google.com/"
        smooth: true

        onLoadProgressChanged: {
            loadStatusAni.stop()
            loadStatusAni.to = width*loadProgress*0.01
            loadStatusAni.start()
        }

        onLoadingChanged: {
            if(loading){
                hideLoadStatus.stop()
                showLoadStatus.start()
                reloadBut.source = "close.svg"
            }else{
                showLoadStatus.stop()
                hideLoadStatus.start()
                reloadBut.source = "update.svg"
            }
        }
    }
}