angular-gantt/src/template/gantt.tmpl.html

Gantt chart component for AngularJS

<div class="gantt unselectable" ng-cloak gantt-scroll-manager
     gantt-container-height-listener="ganttContainerHeight"
     gantt-container-width-listener="ganttContainerWidth"
     gantt-element-height-listener="ganttElementHeight"
     gantt-element-width-listener="ganttElementWidth">
    <gantt-side>
        <gantt-side-background>
        </gantt-side-background>
        <gantt-side-content>
        </gantt-side-content>
        <div gantt-resizer="gantt.side.$element" gantt-resizer-event-topic="side" gantt-resizer-enabled="{{$parent.gantt.options.value('allowSideResizing')}}" resizer-width="sideWidth" class="gantt-resizer">
            <div ng-show="$parent.gantt.options.value('allowSideResizing')" class="gantt-resizer-display"></div>
        </div>
    </gantt-side>
    <gantt-scrollable-header>
        <gantt-header gantt-element-height-listener="$parent.ganttHeaderHeight">
            <gantt-header-columns>
                <div ng-repeat="header in gantt.columnsManager.visibleHeaders track by $index">
                    <div class="gantt-header-row" ng-class="{'gantt-header-row-last': $last, 'gantt-header-row-first': $first}">
                        <gantt-column-header ng-repeat="column in header"></gantt-column-header>
                    </div>
                </div>
            </gantt-header-columns>
        </gantt-header>
    </gantt-scrollable-header>
    <gantt-scrollable>
        <gantt-body>
            <gantt-body-background>
                <gantt-row-background ng-repeat="row in gantt.rowsManager.visibleRows track by row.model.id"></gantt-row-background>
            </gantt-body-background>
            <gantt-body-foreground>
                <div class="gantt-current-date-line" ng-show="currentDate === 'line' && gantt.currentDateManager.position >= 0 && gantt.currentDateManager.position <= gantt.width" ng-style="{'left': gantt.currentDateManager.position + 'px' }"></div>
            </gantt-body-foreground>
            <gantt-body-columns>
                <gantt-column ng-repeat="column in gantt.columnsManager.visibleColumns">
                    <gantt-time-frame ng-repeat="timeFrame in column.visibleTimeFrames"></gantt-time-frame>
                </gantt-column>
            </gantt-body-columns>
            <div ng-if="gantt.columnsManager.visibleColumns == 0" style="background-color: #808080"></div>
            <gantt-body-rows>
                <gantt-timespan ng-repeat="timespan in gantt.timespansManager.timespans track by timespan.model.id"></gantt-timespan>
                <gantt-row ng-repeat="row in gantt.rowsManager.visibleRows track by row.model.id">
                    <gantt-task ng-repeat="task in row.visibleTasks track by task.model.id">
                    </gantt-task>
                </gantt-row>
            </gantt-body-rows>
        </gantt-body>
    </gantt-scrollable>

    <!-- Plugins -->
    <ng-transclude></ng-transclude>

    <!--
    ******* Inline templates *******
    You can specify your own templates by either changing the default ones below or by
    adding an attribute template-url="<url to your template>" on the specific element.
    -->

    <!-- Body template -->
    <script type="text/ng-template" id="template/ganttBody.tmpl.html">
        <div ng-transclude class="gantt-body" ng-style="{'width': gantt.width > 0 ? gantt.width +'px' : undefined}"></div>
    </script>

    <!-- Header template -->
    <script type="text/ng-template" id="template/ganttHeader.tmpl.html">
        <div ng-transclude class="gantt-header"
             ng-show="gantt.columnsManager.columns.length > 0 && gantt.columnsManager.headers.length > 0"></div>
    </script>

    <!-- Side template -->
    <script type="text/ng-template" id="template/ganttSide.tmpl.html">
        <div ng-transclude class="gantt-side" style="width: auto;"></div>
    </script>

    <!-- Side content template-->
    <script type="text/ng-template" id="template/ganttSideContent.tmpl.html">
        <div class="gantt-side-content" ng-style="getSideCss()">
        </div>
    </script>

    <!-- Header columns template -->
    <script type="text/ng-template" id="template/ganttHeaderColumns.tmpl.html">
        <div ng-transclude class="gantt-header-columns"
              gantt-horizontal-scroll-receiver></div>
    </script>

    <script type="text/ng-template" id="template/ganttColumnHeader.tmpl.html">
        <div class="gantt-column-header" ng-class="{'gantt-column-header-last': $last, 'gantt-column-header-first': $first}">{{::column.label}}</div>
    </script>

    <!-- Body background template -->
    <script type="text/ng-template" id="template/ganttBodyBackground.tmpl.html">
        <div ng-transclude class="gantt-body-background"></div>
    </script>

    <!-- Body foreground template -->
    <script type="text/ng-template" id="template/ganttBodyForeground.tmpl.html">
        <div ng-transclude class="gantt-body-foreground"></div>
    </script>

    <!-- Body columns template -->
    <script type="text/ng-template" id="template/ganttBodyColumns.tmpl.html">
        <div ng-transclude class="gantt-body-columns"></div>
    </script>

    <script type="text/ng-template" id="template/ganttColumn.tmpl.html">
        <div ng-transclude class="gantt-column gantt-foreground-col" ng-class="{'gantt-column-last': $last, 'gantt-column-first': $first}"></div>
    </script>

    <script type="text/ng-template" id="template/ganttTimeFrame.tmpl.html">
        <div class="gantt-timeframe"></div>
    </script>

    <!-- Scrollable template -->
    <script type="text/ng-template" id="template/ganttScrollable.tmpl.html">
        <div ng-transclude class="gantt-scrollable" gantt-scroll-sender ng-style="getScrollableCss()"></div>
    </script>

    <script type="text/ng-template" id="template/ganttScrollableHeader.tmpl.html">
        <div ng-transclude class="gantt-scrollable-header" ng-style="getScrollableHeaderCss()"></div>
    </script>

    <!-- Rows template -->
    <script type="text/ng-template" id="template/ganttBodyRows.tmpl.html">
        <div ng-transclude class="gantt-body-rows"></div>
    </script>

    <!-- Timespan template -->
    <script type="text/ng-template" id="template/ganttTimespan.tmpl.html">
        <div class="gantt-timespan" ng-class="timespan.model.classes">
        </div>
    </script>

    <!-- Task template -->
    <script type="text/ng-template" id="template/ganttTask.tmpl.html">
        <div class="gantt-task" ng-class="task.model.classes">
            <gantt-task-background></gantt-task-background>
            <gantt-task-foreground></gantt-task-foreground>
            <gantt-task-content></gantt-task-content>
        </div>
    </script>

    <script type="text/ng-template" id="template/ganttTaskBackground.tmpl.html">
        <div class="gantt-task-background" ng-style="{'background-color': task.model.color}"></div>
    </script>

    <script type="text/ng-template" id="template/ganttTaskForeground.tmpl.html">
        <div class="gantt-task-foreground">
            <div ng-if="task.truncatedRight" class="gantt-task-truncated-right" ng-style="{'padding-right': task.truncatedRightOffset + 'px'}">&gt;</div>
            <div ng-if="task.truncatedLeft" class="gantt-task-truncated-left" ng-style="{'padding-left': task.truncatedLeftOffset + 'px'}">&lt;</div>
        </div>
    </script>

    <!-- Task content template -->
    <script type="text/ng-template" id="template/ganttTaskContent.tmpl.html">
        <div class="gantt-task-content" unselectable="on"><span unselectable="on" gantt-bind-compile-html="getTaskContent()"/></div>
    </script>


    <!-- Row background template -->
    <script type="text/ng-template" id="template/ganttRowBackground.tmpl.html">
        <div class="gantt-row gantt-row-height"
             ng-class="row.model.classes"
             ng-class-odd="'gantt-row-odd'"
             ng-class-even="'gantt-row-even'"
             ng-style="{'height': row.model.height}">
            <div class="gantt-row-background"
                 ng-style="{'background-color': row.model.color}">
            </div>
        </div>
    </script>

    <!-- Row template -->
    <script type="text/ng-template" id="template/ganttRow.tmpl.html">
        <div class="gantt-row gantt-row-height"
             ng-class="row.model.classes"
             ng-class-odd="'gantt-row-odd'"
             ng-class-even="'gantt-row-even'"
             ng-style="{'height': row.model.height}">
            <div ng-transclude class="gantt-row-content"></div>
        </div>
    </script>

    <!-- Side background template -->
    <script type="text/ng-template" id="template/ganttSideBackground.tmpl.html">
        <div class="gantt-side-background">
            <div class="gantt-side-background-header" ng-style="{height: $parent.ganttHeaderHeight + 'px'}">
                <div ng-show="$parent.ganttHeaderHeight" class="gantt-header-row gantt-side-header-row"></div>
            </div>
            <div class="gantt-side-background-body" ng-style="getMaxHeightCss()">
                <div gantt-vertical-scroll-receiver>
                    <div class="gantt-row gantt-row-height "
                         ng-class-odd="'gantt-row-odd'"
                         ng-class-even="'gantt-row-even'"
                         ng-class="row.model.classes"
                         ng-repeat="row in gantt.rowsManager.visibleRows track by row.model.id"
                         ng-style="{'height': row.model.height}">
                        <div class="gantt-row-label gantt-row-background"
                             ng-style="{'background-color': row.model.color}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>
</div>