Add Qml web page context menu example

Signed-off-by: Juraj Oravec <jurajoravec@mailo.com>

qml/articles/4.Adding_entry_to_the_web_context_menu.md

@@ -0,0 +1,60 @@
+# Falkon QML Tutorial - 4. Adding entry to the web context extension menu
+
+Hello, in this chapter I will show you how to add an entry to the
+context menu on the webpage.
+
+In the example I will reuse code from [Tutorial 3](tutorial3_link) and
+increment the badge counter when menu entry is selected.
+
+
+## Create entry in context menu
+
+```qml
+populateWebViewMenu: function(menu, webHitTestResult) {
+    // Create a menu entry
+    var action = menu.addAction({
+        text: 'Action',
+        icon: 'falkon'
+    })
+
+    // Bind some function to it
+    action.triggered.connect(function() {
+        // Do something
+    })
+}
+```
+
+### Argument: menu
+Menu to which the action will be added.  
+The submenu can also be created, might be added later. For now just go
+see for yourself files
+[qmlmenu.h](qmlmenu_h_link)
+and for exact implementation also look at
+[qmlmenu.cpp](qmlmenu_cpp_link)
+
+### Argument: webHitTestResult
+Result of a simple test, what is under the mouse?  
+I have use a test for an image in my example, more information can be
+found in the code in file
+[qmlwebhittestresult.h](qmlwebhittestresult_link)
+
+
+## Example
+The example code will add a button to main toolbar and statusbar. When
+user invokes a context menu on the webpage at most 2 entries will be
+added. One will be added always and second one only if the object on
+which was clicked is an image.
+
+![Populated context menu](../images/tutorial4/populated_context_menu.png)
+
+
+### Code
+The code for this example can be found at
+[extensions/qml_tutorial_4](../extensions/qml_tutorial_4)
+
+
+
+[tutorial3_link]: 3.Adding_a_button_to_the_toolbar.md
+[qmlwebhittestresult_link]: https://github.com/KDE/falkon/blob/master/src/lib/plugins/qml/api/menus/qmlwebhittestresult.h
+[qmlmenu_h_link]: https://github.com/KDE/falkon/blob/master/src/lib/plugins/qml/api/menus/qmlmenu.h
+[qmlmenu_cpp_link]: https://github.com/KDE/falkon/blob/master/src/lib/plugins/qml/api/menus/qmlmenu.cpp

qml/extensions/qml_tutorial_4/main.qml

@@ -0,0 +1,68 @@
+import org.kde.falkon 1.0 as Falkon
+import QtQuick 2.3
+
+Falkon.PluginInterface {
+
+    QtObject {
+        id: tutorial3Object
+        property int clickCount
+    }
+
+    init: function(state, settingsPath){
+        console.log(i18n('"Tutorial4" plugin loaded'))
+        tutorial3Object.clickCount = 0;
+    }
+
+    testPlugin: function() {
+        return true
+    }
+
+    unload: function() {
+        console.log(i18n('"Tutorial4" plugin unloaded'))
+    }
+
+    function buttonClicked() {
+        tutorial3Object.clickCount++;
+        console.log(i18n('"Tutorial4" clickCount increased to ' + tutorial3Object.clickCount))
+    }
+
+    Falkon.BrowserAction {
+        name: 'QML Tutorial 3'
+        identity: 'qml-tutorial-3-id'
+        title: i18n('Qml Tutorial 3')
+        toolTip: i18n('My little button')
+        icon: 'falkon'
+        badgeText: tutorial3Object.clickCount
+        location: Falkon.BrowserAction.NavigationToolBar | Falkon.BrowserAction.StatusBar
+        popup: Rectangle {
+            width: 100;
+            height: 100;
+        }
+    }
+
+    populateWebViewMenu: function(menu, webHitTestResult) {
+        var action_always = menu.addAction({
+            text: 'Increment counter by one',
+            icon: 'falkon'
+        })
+
+        action_always.triggered.connect(function() {
+            tutorial3Object.clickCount++;
+            console.log(i18n('"Tutorial4" clickCount increased to ' + tutorial3Object.clickCount))
+        })
+
+        if (webHitTestResult.isImage()) {
+            var action_image = menu.addAction({
+                text: 'Image, increment by two',
+                icon: 'falkon'
+            })
+
+            action_image.triggered.connect(function() {
+                tutorial3Object.clickCount += 2;
+                console.log(i18n('"Tutorial4" Surprise, this is an image with url: ' + webHitTestResult.imageUrl))
+                console.log(i18n('"Tutorial4" clickCount increased to ' + tutorial3Object.clickCount))
+            })
+        }
+    }
+
+}

qml/extensions/qml_tutorial_4/metadata.desktop

@@ -0,0 +1,11 @@
+[Desktop Entry]
+Name=Tutorial4 QML
+Comment=Example QML extension with button and context button
+Icon=
+Type=Service
+X-Falkon-Type=Extension/Qml
+
+X-Falkon-Author=Juraj Oravec
+X-Falkon-Email=jurajoravec@mailo.com
+X-Falkon-Version=1.0.0
+X-Falkon-Settings=false