[MocaUi] Qualcuno utilizza mochaui?

[WebFil]

Salve a tutti,

volevo sapere se qualcuno utilizza mochaui http://mochaui.com/ una UI basata sul framework mootools...

Io la sto utilizzando per una mia applicazione basata sul web (un gestore delle chiamate in assistenza per una intranet aziendale). Ho qualche problema in alcune modifiche che voglio apportare.... :master:

Se c'è qualcuno che sta sperimentando come me....

[artorius]

Beh, non l'ho mai usata, ma se posso darti una mano...

Io personalmente non uso quasi mai le UI, dato che non hanno un alto livello di customizzazione, quando cominci a fare cose particolari, ti rendi conto che facevi prima a rifarlo da 0.

[WebFil]

Si.. non è del tutto sbagliato quello che dici.... cerco di capirne il funzionamento anche come metodo per imparare....

Ti spiego:
In mochaui esistono, tra gli elementi disponibili, finestre e pannelli, i pannelli in particolare sono quei classici elementi dell'interfaccia di una applicazione che dividono lo "spazio disponibile" per contenere varie tipologie di informazioni.

Vorrei che l'utente potesse dare massimo spazio ad un pannello con un semplice click, esiste infatti il pulsante per fare il collapse (e far poitornare aperto il pannello) ma non esiste un pulsante che massimizza il pannello all'interno della finestra.

Per gli elementi finestra per esempio esiste...

Vorrei che la funzione rendesse minimi gli altri pannelli e finestre e riducesse le colonne (tranne la propria).

Bello sarebbe poter mettere un pulsante all'interno dell'header del pannello (dove sta quello per ridurre/riaprire) per lanciare questo comando.

Veniamo al pratico:

Esiste una funzione per minimizzare tutte le finestre aperte:

MochaUI.extend({
    /*

    Function: minimizeAll
        minimizeAll: Minimize all windows that are minimizable.

    */    
    minimizeAll: function() {
        $$('div.mocha').each(function(windowEl){
        var currentInstance = MochaUI.Windows.instances.get(windowEl.id);
            if (!currentInstance.isMinimized && currentInstance.options.minimizable == true){
                MochaUI.Dock.minimizeWindow(windowEl);
            }
        }.bind(this));
    }
}); 

Le finestre in mochaui hanno tutte classe "mocha" e quindi le riesco a minimizzare così.

Vorrei ora minimizzare le colonne...

Nella mia app. la colonna left vorrei sparisse... e faccio così:

//Minimize column1 (left column) using columnToggle
      var currentColumn = MochaUI.Columns.instances.get($('sideColumn1').id);
            if (currentColumn.isCollapsed != true){
          currentColumn.columnToggle();
      } 

Primo problema... vorrei ridurre le colonne senza passare l'id ma chiuderle tutte tranne quella del pannello che voglio massimizzare.. ovviamente, quante e quali esse siano...

Non capisco come rilevare la classe o comunque un altro metodo per avere la lista delle colonne della mia app.. per poi chiudere quelle che non sono la colonna "genitore" del mio pannello da massimizzare...

Stesso problema in pratica con i pannelli, vorrei poter elencarli per minimizzare tutti "gli altri"...

Un tentativo di codice:

MochaUI.extend({
    /*

    Function: expandPanel(pan)
  minimize all panels and windows and expand panel passed in argument

    */    
  expandPanel: function(pan){
      //Minimize all windows using minimizeAll
      MochaUI.minimizeAll();
      
      //Minimize column1 (left column) using columnToggle
      var currentColumn = MochaUI.Columns.instances.get($('sideColumn1').id);
            if (currentColumn.isCollapsed != true){
          currentColumn.columnToggle();
      }
      
      $$('div.panel').each(function(panelEl){
      // Shorten object chain
          var instances = MochaUI.Panels.instances;
          var currentInstance = instances.get(panelEl.id);
          //alert (currentInstance);
          
      if (currentIstance != pan && !currentInstance.isMinimized && currentInstance.options.minimizable == true){
                    currentIstance.oldHeight = currentIstance.getStyle('height').toInt();
                    if (currentIstance.oldHeight < 10) currentIstance.oldHeight = 20;
                    currentIstance.setStyle('height', 0);
                    currentIstance.isCollapsed = true;
                    currentIstance.addClass('collapsed');
                    currentIstance.removeClass('expanded');
                    MochaUI.panelHeight(currentIstance.options.column, currentIstance, 'collapsing');
                    currentIstance.collapseToggleEl.removeClass('panel-collapsed');
                    currentIstance.collapseToggleEl.addClass('panel-expand');
                    currentIstance.collapseToggleEl.setProperty('title','Espandi il pannello');  //Expand Panel
                    currentIstance.fireEvent('onCollapse');
               }

          }.bind(this));
            
    } 
}); 

In sostanza, non so come instanziare correttamente l'elemento pannello che sto iterando qui: var currentInstance = instances.get(panelEl.id);

Mi ritorna che currentInstance è null

Non sono neanche sicuro che si possano ricavare i div che sono un pannello con $$('div.panel') infatti sembra che la classe cambi se il pannello è aperto o chiuso...non riesco a capire...

Come mettere il bottoncino nel pannello ... alla prossima.. c'è già troppa carne al fuoco...

[artorius]

io lo farei con Fx.Elements.

All'apertura, per ogni colonna dove inserisci questa funzione, crei un Fx.Elements con parametro l'array di Elementi.

Poi all'azione fai che per ogni elemento dell'array se, l'elemento è il chiamante, gli dai la massima ampiezza, altrimenti, gli dai la minima. Ovviamente, questo presuppone che tu possa calcolare l'altezza massima e minima o che tu la conosca.

Hai qualche esperienza con quello che ti ho indicato? (Fx.Elements, Calcolo altezza minima o massima.)

Un altra domanda: come identifichi gli elementi che devi resiziare?