HomeGenie Forum

Automation Program Plugins and Wizard Scripting => Help => Topic started by: wolfgang928 on September 05, 2016, 09:37:22 AM

Title: Widget restrictions between Renderview and $$.widget approach
Post by: wolfgang928 on September 05, 2016, 09:37:22 AM

Hello,

i have a deep inside 'widget editor' question.

There a two possible ways to code a widget:

1. Using [{
  Name: 'Weather Underground Widget',
  Author: 'Generoso Martello',
  ...

  RenderView: function (cuid, module) {...}
}

2.) $$.widget = {
  name: 'Generic Color Light',
  version: '1.2',
  ...
};

Using version number one i can easily use multiple popups beside the pure edit popup like configuration, info and others

>> example taken from timetable widget
<div class="hg-popup-a" data-ui-field="controlpopup" data-dismissible="false" data-position-to="window" data-transition="pop" data-overlay-theme="b">....<>

<div class="hg-popup-a" data-ui-field="helppopup" data-position-to="window" data-dismissible="false" data-transition="pop" data-overlay-theme="b"> .... <>

<div class="hg-popup-a" data-ui-field="calendarpopup" data-position-to="window" data-dismissible="false" data-transition="pop" data-overlay-theme="b"> ....<>

I can assign these popups with

this.ControlPopup = container.find('[data-ui-field=controlpopup]').popup();
this.HelpPopup = container.find('[data-ui-field=helppopup]').popup();
this.CalendarPopup = container.find('[data-ui-field=calendarpopup]').popup();


With version number 2 i can't find an assignment part for popups inside code. There is only an event call like this

$$.field('options').on('click', function (){
    $$.popup.popup('open'); 
    ...
});

I would like to open an additional information popup, but all i tried does not show this second popup despite the fact i have done all correctly inside html and using jQuery or normal Js synthax.

Is there a hardcoded limitation for only one popup per widget using the version 2 coding approach? If not, how can i show second popup?

Using alert dialog is not an alternative!

Thanks for a hint 
Wolfgang

Title: Re: Widget restrictions between Renderview and $$.widget approach
Post by: Gene on September 05, 2016, 10:41:10 AM

Documentation is missing, so I'll try to explain a few commands for widget v2:

$$.field is to be used to get a reference to any data-ui-field inside the main widget div that is defined as <div data-ui-field="widget">....</div>

$$.field implements a caching mechanism, but if you want a direct reference to the element you can use $$._widget.find('[data-ui-filed="myfieldname"]')

$$.popup is a reference to the main widget popup which is defined outside the main widget div as data-ui-field="controlpopup"

if you add any other element outside the main widget div, you can get a reference to it by using the $$.container element:

Code: [Select]

$$.container.find('[data-ui-field=myotherpopup')


Title: Re: Widget restrictions between Renderview and $$.widget approach
Post by: wolfgang928 on September 05, 2016, 03:18:08 PM

Hello Gene,
thanks for your help, i managed to display the popup now.

Is it generally not possible to open a second popup from the first, like the following?

Code: [Select]

$$.onStart = function() {
 
  //
  // dialog stuff to open the logbook dialog
  //
  DialogLog = $$.container.find('[data-ui-field="dialogpopup"]').popup();
  DialogLog.trigger('create');
 
  // This does not work <-- button of configurationpopup
  $$.popup.field('btn_info').on('click', function () {
    $$.popup.popup('close');  <<- this works
  DialogLog.popup('open');  <<- this doesn't
  });
 
  // This works <-- button of widget
  $$.field('info').on('click', function () {
    DialogLog.popup('open');
  });
Thanks for an idea.
Wolfgang

Title: Re: Widget restrictions between Renderview and $$.widget approach
Post by: Gene on September 05, 2016, 03:50:21 PM

This is the code that wraps a wdiget's javascript:

https://github.com/genielabs/HomeGenie/blob/master/BaseFiles/Common/html/pages/configure/widgeteditor/_widgetedit.js#L404

as you can see there is a $$.ui field that is a shorthand for accessing HG.Ui class. You can find all HG js API classes here:

https://github.com/genielabs/HomeGenie/blob/master/BaseFiles/Common/html/js/api/

in particular you will need the SwitchPopup function which is defined here:

https://github.com/genielabs/HomeGenie/blob/master/BaseFiles/Common/html/js/api/homegenie.ui.js#L263

so, from inside a widget you can call this function with:

Code: [Select]

$$.ui.SwitchPopup(oldpopup, newpopup);

or from any other place outside a widget:

Code: [Select]

HG.Ui.SwitchPopup(oldpopup, newpopup);


Title: Re: Widget restrictions between Renderview and $$.widget approach
Post by: wolfgang928 on September 05, 2016, 08:13:29 PM

Thanks a lot! :)

Title: Re: Widget restrictions between Renderview and $$.widget approach
Post by: wolfgang928 on September 07, 2016, 12:31:03 PM

Hello Gene,

a further additional information to those V2 widget divs.

if i use a second popup dialog for a widget i can shift between them (because only one at a time is allowed) with

Code: [Select]

var DialogLog = $$.container.find('[data-ui-field="dialogpopup"]').popup();
DialogLog.trigger('create');
$$.ui.SwitchPopup($$.popup, DialogLog);

I have a list object inside newpopup, which i can handle with

Code: [Select]

$$.popup.field('btn_info').on('click', function () {
    $$.ui.SwitchPopup($$.popup, DialogLog);
   
    var ul = DialogLog.find("ul");
    ul.empty();
    ul.append("<li>kuno</li>");
    ul.listview('refresh');
  });

Regards Wolfgang