SmallShut für Overview anpassen

[himself]

Hallo,

ich versuche gerade (und mit gerade meine ich seit ein paar Stunden) das widget smallshut für die Verwendung im Overview-Modus anzupassen. Erfolg ist überschaubar.
Hier ein Besipiel welches funktioniert:

{% macro win_shut2 (id, txt, left, top, gad_move, gad_stop, gad_pos, gad_shade, gad_window_r, gad_window_l, type, hide) %}
   {% import "widgets/window.html" as window %}
   {% import "basic.html" as basic %}
   {% import "icon.html" as icon %}
   {% set uid = uid(page, id) %}
   {% set min = 0 %}
   {% set max = 100 %}

   <style>
      .pos .ui-slider .ui-input-text {
      display: none !important;
      }
      .pos .ui-slider-track, .pos .ui-slider-switch {
      margin: 0 15px 15px 15px !important;
      }
   </style>

   <a id="{{ uid }}-button" href="#{{ uid }}-popup" {% if txt %}title="{{ txt }}"{% endif %} style="position: absolute; top: {{ top }}; left: {{ left }};"
      {% if hide == 1 %}style="display: none;"{% endif %} data-rel="popup"
         class=" {%- if type == 'icon' -%} /**- display as icon -*/
         switch ui-link absolutepos
      {%- else -%} /**- display as button -*/
         ui-btn ui-{{ type|default('mini') }} ui-corner-all ui-btn-inline absolutepos
         {%- if not pic is empty -%}
            {{ not txt is empty ? ' ui-btn-icon-top' }} ui-nodisc-icon
         {%- endif -%}
      {%- endif -%}"
   >
      {{ window.complete(uid~'-icon', gad_pos, gad_window_r, gad_window_l, min, max, color) }}
   </a>

   <div id="{{ uid }}-popup" data-role="popup" style="min-width:200px;">
      <div>
         {{ window.complete(uid~'-icon', gad_pos, gad_window_r, gad_window_l, min, max, color) }}
         {{ txt|e }}
      </div>
      <div data-role="controlgroup" data-type="horizontal">
         {{ basic.stateswitch(id~'up', gad_move, 'mini', 0, 'control_arrow_up.svg') }}
         {{ basic.stateswitch(id~'down', gad_move, 'mini', 1, 'control_arrow_down.svg') }}
         {% if gad_stop %}{{ basic.stateswitch(id~'stop', gad_stop, 'mini', 1, 'audio_stop.svg') }}{% endif %}
         {% if gad_shade %}{{ basic.stateswitch(id~'shade', gad_shade, 'mini', 1, 'fts_shutter_50.svg') }}{% endif %}
      </div>
      {% if gad_pos %}
         <div class="pos">
            {{ basic.slider(id~'slider', gad_pos, 0 , 100 , 5, 'horizontal', 'handle' ) }}
         </div>
      {% endif %}
      <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Schließen</a>
   </div>
{% endmacro %}

So sieht das smallshut widget aus:

{% macro smallshut(id, txt, item_move, item_stop, item_position, item_saved, type) %}
{% import "basic.html" as basic %}
{% import "icon.html" as icon %}
{% set uid = uid(page, id) %}

   <div class="smallshut"{% if not id is empty %} id="{{ uid(page, id) }}"{% endif %} >
      <span class="ui-shut-txt">
         {% if txt %} {{ txt }} {% endif %}
      </span>
      <span class="ui-shut-btn">
         {{ basic.stateswitch('',  item_move, type|default('micro'), '0', 'carat-u') }}
      </span>
      <span class="ui-shut-btn">
         {{ basic.stateswitch('', item_stop, type|default('micro'), 1, 'delete') }}
      </span>
      <span class="ui-shut-btn">
         {{ basic.stateswitch('', item_move, type|default('micro'), '1', 'carat-d') }}
      </span>
      <span class="ui-shut-btn">
         {% if item_saved %}
            {{ basic.stateswitch('', item_saved, type|default('micro'), '1', 'fts_shutter_50.svg') }}
         {% endif %}
      </span>
      <span class="ui-shut-pic">
         {% if item_position %}
            {{ icon.shutter(id~'position', '', item_position) }}
         {% endif %}
      </span>
   </div>
{% endmacro %}

Irgendwie bekomme ich aber die Fäden nicht zusammen. Hat das schon jemand für sich gelöst?
Vielen Dank!

Alfons

[wvhn]

Verstehe ich das richtig, dass Du den smallshut in ein Popup packen willst?
Und kannst Du bitte den Code nochmal lesbar posten? Beitrag editieren, Code löschen, neu anwählen mit "#"-Taste, "<>"-Taste oben links neben der Schriftart-Taste drücken und den Code einfügen.

Gruß
Wolfram

[himself]

Hallo Wolfram,

bin immer wieder erstaunt wie leicht es manchen fällt DInge in verständliche Worte zu packen! Genau. Ich möchte mittels eines Widgets in der Overview die Darstellung des Smallshutters öffnen (als PopUp) Der Smallshutter wiederum kann auf Position anfahren bzw. Lamellen Neigung nochmals mittels PopUp's einstellen.
Widget_1.JPG -> Widget_2.JPG->Widget_3.JPG

So sollte die Abfolge aussehen.

Ich hoffe nun ist klar beschreiben was ich meine.

Gruß

Alfons

[wvhn]

Hi Alfons,

das Popup für den smallshut sollte kein Problem sein. Allerdings verbietet jQuery mobile den Aufruf eines weiteren Popups im Popup.
So wie es aussieht, sind das oben die Original-Widgets aus dem example3.graphic. Ist das Absicht?

Auf die Schnelle sollte es ausreichen, das smallshut-Widget innerhalb des Popups im ovbasic_winshut2 aufzurufen, also etwa so:

{% macro win_shut2 (id, txt, left, top, gad_move, gad_stop, gad_pos, gad_shade, gad_window_r, gad_window_l, type, hide) %}
   {% import "widgets/window.html" as window %}
   {% import "basic.html" as basic %}
   {% import "icon.html" as icon %}
   {% import "device.html" as device %}
   {% set uid = uid(page, id) %}
   {% set min = 0 %}
   {% set max = 100 %}

   <style>
      .pos .ui-slider .ui-input-text {
      display: none !important;
      }
      .pos .ui-slider-track, .pos .ui-slider-switch {
      margin: 0 15px 15px 15px !important;
      }
   </style>

   <a id="{{ uid }}-button" href="#{{ uid }}-popup" {% if txt %}title="{{ txt }}"{% endif %} style="position: absolute; top: {{ top }}; left: {{ left }};"
      {% if hide == 1 %}style="display: none;"{% endif %} data-rel="popup"
         class=" {%- if type == 'icon' -%} /**- display as icon -*/
         switch ui-link absolutepos
      {%- else -%} /**- display as button -*/
         ui-btn ui-{{ type|default('mini') }} ui-corner-all ui-btn-inline absolutepos
         {%- if not pic is empty -%}
            {{ not txt is empty ? ' ui-btn-icon-top' }} ui-nodisc-icon
         {%- endif -%}
      {%- endif -%}"
   >
      {{ window.complete(uid~'-icon', gad_pos, gad_window_r, gad_window_l, min, max, color) }}
   </a>

   <div id="{{ uid }}-popup" data-role="popup" style="min-width:200px;">
      <div>
         {{ device.smallshut(uid~'-smallshut', txt, gad_move, gad_stop, gad_position, gad_saved, type) }}
      </div>
      <a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Schließen</a>
   </div>
{% endmacro %}

Ein zweites Popup geht wie gesagt nicht. Stattdessen kannst Du weitere stateswitches für die Positionen hinzufügen.

Gruß
Wolfram

[himself]

Alles klar. Vielen Dank Wolfram. Hatte befürchtet dass es nicht geht. Werde mal deinen Lösungsansatz mit den 2 Slidern versuchen.

Servus

Alfons