Version 1.10

- Added auto detection for mobile and desktop/resposive use
- Clickable container support. The widget searches a parent element based on the class to add the click event.

README.md

@@ -6,8 +6,13 @@ Displaying you Mendix microservice architecture in just 1 hybrid app.
 ### Features and limitations
 * Open an URL on an attribute.
 * Configuring the InAppBrowser settings like navigation buttons or URL bar.
+* Support for mobile and desktop.
 * Offline capability
 ### Dependencies [optional]
 * Mendix 7.23.2 or higher
 ### Configuration
-Add the widget inside a Dataview and configure the String Attribute containing the complete URL. Make sure that the link contains the required navigation profile for Mendix.
+Add the widget inside a Dataview and configure the String Attribute containing the complete URL. Make sure that the link contains the required navigation profile for Mendix.
+* **Link text**: The text of the link/button on the page
+* **Link glyphicon**: The complete classes to display a glyphicon as prefix of the text.
+* **Link render**: Must the link be rendered as button or link
+* **Clickable container**: The widget will search for a parent HTML element containing the defined class and set the click event.

src/InAppBrowser/InAppBrowser.xml

@@ -14,7 +14,7 @@
             </attributeTypes>
         </property>
 
-        <property key="buttonText" type="translatableString" required="true">
+        <property key="buttonText" type="translatableString" required="false">
             <caption>Link text</caption>
             <category>Appearance</category>
             <description>The text of the link</description>
@@ -26,9 +26,9 @@
         <property key="buttonIcon" type="string" defaultValue="glyphicon glyphicon-chevron-right">
             <caption>Link glyphicon</caption>
             <category>Appearance</category>
-            <description>The complete classes to display the required</description>
+            <description>The complete classes to display a glyphicon as prefix of the text.</description>
         </property>
-        <property key="buttonRender" type="enumeration" defaultValue="button">
+        <property key="buttonRender" type="enumeration" defaultValue="button" required="true">
             <caption>Link render</caption>
             <category>Appearance</category>
             <description>Must the link be rendered as button or link</description>
@@ -37,6 +37,21 @@
                 <enumerationValue key="button">Button</enumerationValue>
             </enumerationValues>
         </property>
+
+        <property key="responsiveHandling" type="enumeration" defaultValue="_parent" required="true">
+            <caption>Responsive handling</caption>
+            <category>Behavior</category>
+            <description>How must the link be handled in a responsive browser? Current tab or new tab?</description>
+            <enumerationValues>
+                <enumerationValue key="_parent">Current tab</enumerationValue>
+                <enumerationValue key="_blank">New tab</enumerationValue>
+            </enumerationValues>
+        </property>
+        <property key="containerClass" type="string" required="false">
+            <caption>Clickable container</caption>
+            <category>Behavior</category>
+            <description>Search for an container based on a class in the parentset to set the same click event.</description>
+        </property>
 
         <property key="hideURLBar" type="boolean" defaultValue="true">
             <caption>Hide URL Bar</caption>

src/InAppBrowser/widget/InAppBrowser.js

@@ -119,7 +119,17 @@ define([
 
         // Attach events to HTML dom elements
         _setupEvents: function () {
-            $(this.appButton).on('click touch', lang.hitch(this, this._openBrowser));
+            var click = lang.hitch(this, this._openBrowser);
+            $(this.appButton).on('click touch', click);
+
+            if(this.containerClass){
+                var parent = $(this.domNode).closest("."+this.containerClass);
+                if(parent){
+                    $(parent).on('click touch', click);
+                    $(parent).addClass("mousehover");
+                    logger.debug(this.id + "._setupEvents add clickable container");
+                }
+            }
         },
 
         _openBrowser: function () {
@@ -146,6 +156,7 @@ define([
                 } else {
                     // Render responsive version
                     console.log(this.id + "._openBrowser handle responsive");
+                    window.open(link, this.responsiveHandling);
                 }
 
             } else {

src/InAppBrowser/widget/ui/InAppBrowser.css

@@ -1,17 +1,6 @@
 .inappbrowser {
-
+    display: inline-block;
 }
-
-.inappbrowser-message {
-
-}
-
-.input-group-addon {
-    clear: both;
-    padding: 2px 6px;
-}
-
-.inappbrowser-infoTextNode {
-    padding: 0.8em 1em;
-    margin-top: 10px;
+.mousehover {
+    cursor: pointer;
 }

src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="InAppBrowser" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="InAppBrowser" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="InAppBrowser/InAppBrowser.xml" />
         </widgetFiles>

test/.mendix-cache/base_rev

@@ -1 +1 @@
-11
+13