Hot Towel ccWidgetHeader

Question

Ich habe eine einfache Frage in Bezug auf die Hot Towel ccWidgetHeader-Anweisung, die einen Kollaps auf einem Div ermöglicht. Im Grunde ist meine Frage, wie man das Widget in einen kollabierten Zustand versetzt? Unten ist mein widget:

<!-- List of Parent Categories --> 
       <div data-ng-repeat="category in vm.categories"> 
        <div class="widget wviolet"> 
         <div data-cc-widget-header title="{{category.name}}" 
          allow-collapse="true"></div> 
         <!-- TODO: how to start these collapsed --> 
         <div class="widget-content text-center text-info"> 
          <table class="table table-hover table-condensed table-striped table-clickable table-responsive"> 
           <thead> 
            <tr> 
             <th>Category</th> 
             <th>Spot Number</th> 
             <th>Member</th> 
             <th>Member Website</th> 
            </tr> 
           </thead> 
           <tbody> 
            <tr data-ng-repeat="spot in vm.spotList | filter:{parentCategory: category.name}" 
             data-ng-click="vm.onSpot(spot)"> 
             <td align="left">{{spot.category}}</td> 
             <td align="left">{{spot.sequence}}</td> 
             <td align="left">{{spot.companyName}}</td> 
             <td align="left"><a href="http://{{spot.companyURL}}"><img ng-src="{{spot.companyIcon}}" /></a></td> 
            </tr> 
           </tbody> 
          </table> 
         </div> 
         <div class="widget-foot"> 
          <div class="clearfix"></div> 
         </div> 
        </div> 
       </div> 
       <!-- End list of parent categories --> 

Vielen Dank im Voraus für die Unterstützung ....

Eigentlich innerhalb der widgetheader.html es ist die ccWidgetMinimize Direktive, die die Hin- und Herschalten der Fall ist. Die ccWidgetMinimize Richtlinie lautet wie folgt:

app.directive('ccWidgetMinimize', function() { 
    // Usage: 
    // <a data-cc-widget-minimize></a> 
    // Creates: 
    // <a data-cc-widget-minimize="" href="#"><i class="fa fa-chevron-up"></i></a> 
    var directive = { 
     link: link, 
     template: '<i class="fa fa-chevron-up"></i>', 
     restrict: 'A' 
    }; 
    return directive; 

    function link(scope, element, attrs) { 
     //$('body').on('click', '.widget .wminimize', minimize); 
     attrs.$set('href', '#'); 
     attrs.$set('wminimize'); 
     element.click(minimize); 

     function minimize(e) { 
      e.preventDefault(); 
      var $wcontent = element.parent().parent().next('.widget-content'); 
      var iElement = element.children('i'); 
      if ($wcontent.is(':visible')) { 
       iElement.removeClass('fa fa-chevron-up'); 
       iElement.addClass('fa fa-chevron-down'); 
      } else { 
       iElement.removeClass('fa fa-chevron-down'); 
       iElement.addClass('fa fa-chevron-up'); 
      } 
      $wcontent.toggle(500); 
     } 
    } 
}); 

Ich bin eine Richtlinie Anfänger, ist jede Hilfe willkommen.

Answer 1

Ich habe eine Teilantwort, die den Inhalt Widget div eingestellt ist: hidden = „hidden“

dies mit Widget Inhalt kollabiert beginnen. Das ccWidgetMinimize startet das Symbol nach oben. Alles, was ich jetzt brauche, ist herauszufinden, wie man das Icon in die richtige Richtung startet, abhängig vom: sichtbaren Status des Inhalts-Widgets.

Ich habe das Start-State-Stück herausgefunden. Ich habe ein ccWidgetToggle erstellt, das das Element basierend auf der visible-Eigenschaft des Inhaltswidgets auf den richtigen Startzustand setzt. Außerdem habe ich die Bedeutung der Auf-/Ab-Pfeile umgekehrt; Pfeil nach oben, wenn der Inhalt minimiert ist; Pfeil nach unten, wenn der Inhalt erweitert wird. up bedeutet erweitern; Down bedeutet Zusammenbruch. Hier ist meine neue Direktive:

app.directive('ccWidgetToggle', function() { 
    // Usage: 
    // <a data-cc-widget-toggle></a> 
    var directive = { 
     link: link, 
     template: '<i></i>', 
     restrict: 'A' 
    }; 
    return directive; 

    function link(scope, element, attrs) { 
     //$('body').on('click', '.widget .wminimize', minimize); 
     attrs.$set('href', '#'); 
     attrs.$set('wminimize'); 
     element.click(minimize); 
     // Start state 
     // <i> element in the template 
     var iElement = element.children('i'); 
     var $wcontent = element.parent().parent().next('.widget-content'); 
     if ($wcontent.is(':visible')) { 
      iElement.removeClass('fa fa-chevron-up'); 
      iElement.addClass('fa fa-chevron-down'); 
     } else { 
      iElement.removeClass('fa fa-chevron-down'); 
      iElement.addClass('fa fa-chevron-up'); 
     } 

     function minimize(e) { 
      e.preventDefault(); 
      var $wcontent = element.parent().parent().next('.widget-content'); 
      // <i> element in the template 
      var iElement = element.children('i'); 
      // if content is visible; toggle below is going to make it not visible 
      if ($wcontent.is(':visible')) { 
       iElement.removeClass('fa fa-chevron-down'); 
       iElement.addClass('fa fa-chevron-up'); 
      } else { 
       iElement.removeClass('fa fa-chevron-up'); 
       iElement.addClass('fa fa-chevron-down'); 
      } 

      // toggle visibility 
      $wcontent.toggle(500); 
     } 
    } 
});