Breite von widgets 100% statt auto

[coolrunnings]

Hallo,

seit der Umstellung habe ich ein "Problemchen".

Ich habe folgendes Element:

    <group class="timeclass" name="Aktuelle Zeit" align="center">
      <layout colspan="4" rowspan="3" width="100%"/>
      <strftime lang="de" class="timebig" format="%H:%M">
        <layout colspan="4" rowspan="2" width="100%"/>
      </strftime>
    </group>

Bisher entstand daraus folgender Code:

<div class="widget_container rowspan rowspan3" id="id_0" style="width: 33.3333333333333%;">
  <div class="widget clearfix group innerrowspan custom_timeclass">
    <div class="clearfix">
      <h2 style="text-align:center;">Aktuelle Zeit</h2>
      <div class="widget_container rowspan rowspan2" id="id_0_0" style="width: 100%;">
        <div class="widget clearfix text strftime custom_timebig innerrowspan">
          <div id="strftime_0" class="strftime_value">11:47</div>
        </div>
      </div>
    </div>
  </div>
</div>

und das ganze sieht aus wie im ersten Bild.

Nach der Umstellung ensteht aber folgender Code:

<div class="widget_container rowspan rowspan3" id="id_0" style="width: 33.3333333333333%;">
  <div class="widget clearfix group innerrowspan custom_timeclass">
    <div class="clearfix">
    <h2 style="text-align:center;">Aktuelle Zeit</h2>
      <div class="widget_container " id="id_0_0" style="width: auto;">
        <div class="widget clearfix text strftime custom_timebig">
          <div id="strftime_0" class="strftime_value">11:50</div>
        </div>
      </div>
    </div>
  </div>
</div>

Sieht dann nicht mehr ganz so schön aus. Ich konnte schon ausmachen, dass es am width: auto statt width: 100% lieht. Das ganze kommt aus der templateengine.js:923. Die colspan info fehlt hier um die korrekte Breite anzuzeigen.

Hat irgendwer eine Idee woran das liegt?

[coolrunnings]

Ich beantworte mir meine Frage mal selber.
Ich musste den Code der structure_plugin.js anpassen.

Diff:

--- structure_plugin.js (Revision 2364)
+++ structure_plugin.js (Arbeitskopie)
@@ -25,22 +25,27 @@

 (function() {
   VisuDesign_Custom.prototype.addCreator("strftime", {
-    create : function(page, path) {
-      var $p = $(page);
+    create : function(element, path, flavour, type) {
+      var $e = $(element);
       var id = "strftime_" + uniqid();
+
+      var layout = $e.children('layout')[0];
+      var style = layout ? 'style="' + templateEngine.design.extractLayout(layout, type) + '"' : '';

-      var ret_val = $('<div class="widget clearfix text strftime"/>');
-      if ($p.attr('class')) {
-        ret_val.addClass('custom_'+$p.attr('class'));
+      var classes = templateEngine.design.setWidgetLayout( $e, path );
+      var ret_val = $('<div class="widget clearfix text strftime '+(classes?classes:'')+'" ' + style + '/>');
+
+      if ($e.attr('class')) {
+        ret_val.addClass('custom_'+$e.attr('class'));
       }

-      templateEngine.design.setWidgetLayout(ret_val, $p, path);
+      templateEngine.design.setWidgetLayout(ret_val, $e, path);
       var actor = $('<div id="' + id + '" class="strftime_value"></div>');
       ret_val.append(actor);

       actor.data({
-        'locale' : $p.attr('lang'),
-        'format' : $p.attr('format') || '%c'
+        'locale' : $e.attr('lang'),
+        'format' : $e.attr('format') || '%c'
       });

       elements[id] = actor;

Komplett:

/* structure_plugin.js (c) 2012 by Michael Hausl [michael@hausl.com]
 *
 * This program is free software; you can redistribute it and/or modify it
 * under the terms of the GNU General Public License as published by the Free
 * Software Foundation; either version 3 of the License, or (at your option)
 * any later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 * more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program; if not, write to the Free Software Foundation, Inc.,
 * 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA
 */

/**
 * This plugins integrates formated date and clock strings into based on strftime.
 * 
 * Thanks to Michael Markstaller for implementing the jqclock plugin as reference.
 */

define( ['structure_custom', 'css!plugins/strftime/strftime' ], function( VisuDesign_Custom ) {

(function() {
  VisuDesign_Custom.prototype.addCreator("strftime", {
    create : function(element, path, flavour, type) {
      var $e = $(element);
      var id = "strftime_" + uniqid();
      
      var layout = $e.children('layout')[0];
      var style = layout ? 'style="' + templateEngine.design.extractLayout(layout, type) + '"' : '';

      var classes = templateEngine.design.setWidgetLayout( $e, path );
      var ret_val = $('<div class="widget clearfix text strftime '+(classes?classes:'')+'" ' + style + '/>');
      
      if ($e.attr('class')) {
        ret_val.addClass('custom_'+$e.attr('class'));
      }

      templateEngine.design.setWidgetLayout(ret_val, $e, path);
      var actor = $('<div id="' + id + '" class="strftime_value"></div>');
      ret_val.append(actor);

      actor.data({
        'locale' : $e.attr('lang'),
        'format' : $e.attr('format') || '%c'
      });

      elements[id] = actor;
      startTimer();

      return ret_val;
    }
  });

  var internalCounter = 0;
  function uniqid() {
    return internalCounter++;
  }
  var elements = {};
  var timerStarted = false;

  function startTimer() {
    if (!timerStarted) {
      var f = function() {
        var d = new Date();
        $.each(elements, function(index, actor) {
          d.locale = actor.data('locale');
          actor.html(d.strftime(actor.data('format')));
        });
        window.setTimeout(f, 1000);
      };
      f();
      timerStarted = true;
    }
  }

  // extend locales by German and French
  Date.ext.locales['de'] = {
      a: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
      A: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
      b: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
      B: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
      c: '%a %d %b %Y %T %Z',
      p: ['', ''],
      P: ['', ''],
      x: '%d.%m.%Y',
      X: '%T'
  };
  Date.ext.locales['fr'] = {
      a: ['dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam'],
      A: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
      b: ['jan', 'fév', 'mar', 'avr', 'mai', 'jun', 'jui', 'aoû', 'sep', 'oct', 'nov', 'déc'],
      B: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
      c: '%a %d %b %Y %T %Z',
      p: ['', ''],
      P: ['', ''],
      x: '%d.%m.%Y',
      X: '%T'
  };
})();

});

Evtl. kann das jemand mit den nötigen Rechten im git einpflegen.

Gruß

[Chris M.]

Danke für den Hinweis.

Sollte jetzt in CometVisu/CometVisu:develop gefixt sein (da ich gleichzeitig das $.data() umgestellt habe, sieht der Fix allerdings anders aus)

[Dirk42]

Hallo Chris,

ich vermute das ist die gleiche Stelle, an der ich grade auch wegen rsslog rumsuche, das jetzt auch anders ausgegeben wird.

Config:

<rsslog src="plugins/rsslog/rsslog.php?state=0" refresh="300" mode="last" timeformat="%d.%m. %H:%M:%S">
    <layout rowspan="6" colspan="6"/>
</rsslog>

ergab vorher:

<div style="width: 100%;" class="widget_container rowspan rowspan6" id="id_8_0">
    <div class="widget clearfix rsslog innerrowspan">
        <div class="actor rsslogBody">

Jetzt kommt dabei raus:

<div style="width: auto;" class="widget_container " id="id_8_0">
    <div class="widget clearfix rsslog">
        <div class="actor rsslogBody">

Damit ist das rsslog nur noch eine Zeile hoch und eine Spalte breit. Oder muss ich meine Config anpassen?

Viele Grüße

Dirk

[Chris M.]

Sehr gut möglich - das Plugin wurde noch nicht umgestellt. Willst Du oder soll ich schaun?

[Dirk42]

Wäre gut wenn Du das machst. Ich habe grade versucht herauszufinden wie das rsslog gerendert wird, konnte aber noch nicht finden wo der widget-container herkommt.
Dafür tüftel ich weiter am WireGate Dachfenster-Plugin

[Chris M.]

Schau mal ob CometVisu/CometVisu:develop jetzt besser ist

[Dirk42]

Perfekt, passt. Vielen Dank!