diff --git a/qml/articles/4.Adding_entry_to_the_web_context_menu.md b/qml/articles/4.Adding_entry_to_the_web_context_menu.md new file mode 100644 index 0000000..a9edb9c --- /dev/null +++ b/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 diff --git a/qml/extensions/qml_tutorial_4/main.qml b/qml/extensions/qml_tutorial_4/main.qml new file mode 100644 index 0000000..ca76eef --- /dev/null +++ b/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)) + }) + } + } + +} diff --git a/qml/extensions/qml_tutorial_4/metadata.desktop b/qml/extensions/qml_tutorial_4/metadata.desktop new file mode 100644 index 0000000..da58910 --- /dev/null +++ b/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 diff --git a/qml/images/tutorial4/populated_context_menu.png b/qml/images/tutorial4/populated_context_menu.png new file mode 100644 index 0000000..72e7e05 Binary files /dev/null and b/qml/images/tutorial4/populated_context_menu.png differ