* refactor tabs and tabpane.
This commit is contained in:
dingyongliang
+3
-7
@@ -907,13 +907,7 @@ function modalDialog()
|
||||
/**
|
||||
* Tabs widget.
|
||||
*
|
||||
* array items
|
||||
* ?string direction='h'
|
||||
* ?string activeId
|
||||
*
|
||||
* ====== blocks ======
|
||||
* tabPanes = array()
|
||||
* ====================
|
||||
*/
|
||||
function tabs()
|
||||
{
|
||||
@@ -923,7 +917,9 @@ function tabs()
|
||||
/**
|
||||
* Tab pane widget.
|
||||
*
|
||||
* ?bool isActive
|
||||
* ?bool active
|
||||
* string key
|
||||
* string title
|
||||
*/
|
||||
function tabPane()
|
||||
{
|
||||
|
||||
@@ -4,17 +4,21 @@ namespace zin;
|
||||
class tabPane extends wg
|
||||
{
|
||||
protected static $defineProps = array(
|
||||
'isActive?:bool=false',
|
||||
'key: string',
|
||||
'title: string',
|
||||
'active?: bool=false',
|
||||
);
|
||||
|
||||
protected function build()
|
||||
{
|
||||
$isActive = $this->prop('isActive');
|
||||
$className = $isActive ? 'tab-pane active' : 'tab-pane';
|
||||
$key = $this->prop('key');
|
||||
$active = $this->prop('active');
|
||||
|
||||
return div
|
||||
(
|
||||
setID($key),
|
||||
setClass('tab-pane', $active ? 'active' : null),
|
||||
set($this->props->skip(array_keys(static::getDefinedProps()))),
|
||||
setClass($className),
|
||||
$this->children()
|
||||
);
|
||||
}
|
||||
|
||||
+47
-51
@@ -6,15 +6,16 @@ require_once dirname(__DIR__) . DS . 'tabpane' . DS . 'v1.php';
|
||||
|
||||
class tabs extends wg
|
||||
{
|
||||
private $children = array();
|
||||
|
||||
/**
|
||||
* @var tabPane[]
|
||||
*/
|
||||
private $tabPanes = array();
|
||||
|
||||
protected static $defineProps = array(
|
||||
/* Tabs direction: h - horizontal, v - vertical */
|
||||
'direction?:string="h"',
|
||||
'items:array',
|
||||
'activeID?:string'
|
||||
);
|
||||
|
||||
protected static $defineBlocks = array(
|
||||
'tabPanes' => array()
|
||||
);
|
||||
|
||||
public static function getPageCSS(): string|false
|
||||
@@ -22,58 +23,42 @@ class tabs extends wg
|
||||
return file_get_contents(__DIR__ . DS . 'css' . DS . 'v1.css');
|
||||
}
|
||||
|
||||
protected function getItemID(array $item): string
|
||||
protected function buildTitleView(string $key, string $title, bool $active): wg
|
||||
{
|
||||
return isset($item['id']) ? $item['id'] : $this->gid;
|
||||
}
|
||||
|
||||
protected function buildLabelView(string $id, array $item): wg|null
|
||||
{
|
||||
if(!isset($item['label'])) return null;
|
||||
$isActive = $this->prop('activeID') == $id || (isset($item['active']) && $item['active']);
|
||||
return li
|
||||
(
|
||||
setClass('nav-item'),
|
||||
$isActive ? setClass('active') : null,
|
||||
setClass('nav-item', $active ? 'active' : null),
|
||||
a
|
||||
(
|
||||
set('data-toggle', 'tab'),
|
||||
setClass('font-medium'),
|
||||
set::href("#$id"),
|
||||
$item['label']
|
||||
set::href("#$key"),
|
||||
$title
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
protected function buildContentView(string $id, array $item): wg|null
|
||||
/**
|
||||
* @param wg[] $titleViews
|
||||
* @return wg
|
||||
*/
|
||||
protected function buildTabHeader(array $titleViews): wg
|
||||
{
|
||||
if(!isset($item['data'])) return null;
|
||||
$isActive = $this->prop('activeID') == $id || (isset($item['active']) && $item['active']);
|
||||
return new tabPane
|
||||
(
|
||||
setID($id),
|
||||
set::isActive($isActive),
|
||||
is_callable($item['data']) ? $item['data']() : $item['data']
|
||||
);
|
||||
}
|
||||
|
||||
protected function buildTabHeader($labelViews): wg|null
|
||||
{
|
||||
if(empty($labelViews)) return null;
|
||||
|
||||
$isVertical = $this->prop('direction') === 'v';
|
||||
return ul
|
||||
(
|
||||
setClass('nav nav-tabs gap-x-5'),
|
||||
$isVertical ? setClass('nav-stacked') : null,
|
||||
$labelViews
|
||||
$titleViews
|
||||
);
|
||||
}
|
||||
|
||||
protected function buildTabBody($contentViews): wg|null
|
||||
/**
|
||||
* @param wg[] $titleViews
|
||||
* @return wg
|
||||
*/
|
||||
protected function buildTabBody(array $contentViews): wg
|
||||
{
|
||||
if(empty($contentViews)) return null;
|
||||
|
||||
return div
|
||||
(
|
||||
setClass('tab-content'),
|
||||
@@ -81,25 +66,36 @@ class tabs extends wg
|
||||
);
|
||||
}
|
||||
|
||||
private function filterChildren()
|
||||
{
|
||||
foreach ($this->children() as $child)
|
||||
{
|
||||
if($child instanceof tabPane)
|
||||
{
|
||||
$this->tabPanes[] = $child;
|
||||
continue;
|
||||
}
|
||||
|
||||
$this->children[] = $child;
|
||||
}
|
||||
}
|
||||
|
||||
protected function build(): wg
|
||||
{
|
||||
$items = $this->prop('items');
|
||||
$isVertical = $this->prop('direction') === 'v';
|
||||
$tabPanes = $this->block('tabPanes');
|
||||
|
||||
$labelViews = array();
|
||||
$this->filterChildren();
|
||||
|
||||
$titleViews = array();
|
||||
$contentViews = array();
|
||||
if(is_array($tabPanes)) $contentViews = array_merge($contentViews, $tabPanes);
|
||||
|
||||
foreach($items as $item)
|
||||
foreach($this->tabPanes as $tabPane)
|
||||
{
|
||||
$id = $this->getItemID($item);
|
||||
|
||||
$labelView = $this->buildLabelView($id, $item);
|
||||
$contentView = $this->buildContentView($id, $item);
|
||||
if(!empty($labelView)) $labelViews[] = $labelView;
|
||||
if(!empty($contentView)) $contentViews[] = $contentView;
|
||||
$key = $tabPane->prop('key');
|
||||
$title = $tabPane->prop('title');
|
||||
$active = $tabPane->prop('active');
|
||||
|
||||
$titleViews[] = $this->buildTitleView($key, $title, $active);
|
||||
$contentViews[] = $tabPane;
|
||||
}
|
||||
|
||||
return div
|
||||
@@ -107,9 +103,9 @@ class tabs extends wg
|
||||
set($this->props->skip(array_keys(static::getDefinedProps()))),
|
||||
$isVertical ? setClass('flex') : null,
|
||||
|
||||
$this->buildTabHeader($labelViews),
|
||||
$this->buildTabHeader($titleViews),
|
||||
$this->buildTabBody($contentViews),
|
||||
$this->children()
|
||||
$this->children
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,75 +20,6 @@ $sectionSubtitle = function() use($task)
|
||||
);
|
||||
};
|
||||
|
||||
$legendBasicData = function() use($lang, $task, $execution)
|
||||
{
|
||||
return tableData
|
||||
(
|
||||
set::items
|
||||
(
|
||||
array(
|
||||
array('name' => $lang->task->execution, 'value' => $execution->name),
|
||||
array('name' => $lang->task->module, 'value' => ''),
|
||||
array('name' => $lang->task->assignedTo, 'value' => $task->assignedTo ? $task->assignedToRealName : $lang->noData),
|
||||
array('name' => $lang->task->type, 'value' => zget($this->lang->task->typeList, $task->type, $task->type)),
|
||||
array('name' => $lang->task->status, 'value' => $this->processStatus('task', $task)),
|
||||
array('name' => $lang->task->progress, 'value' => $task->progress . ' %'),
|
||||
array('name' => $lang->task->pri, 'value' => array('wg' => 'priLabel', 'pri' => '1'))
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
$legendLifeData = function() use($lang, $task, $users)
|
||||
{
|
||||
return tableData
|
||||
(
|
||||
set::items
|
||||
(
|
||||
array(
|
||||
array('name' => $lang->task->openedBy, 'value' => $task->openedBy ? zget($users, $task->openedBy, $task->openedBy) . $lang->at . $task->openedDate : $lang->noData),
|
||||
array('name' => $lang->task->finishedBy, 'value' => $task->finishedBy ? zget($users, $task->finishedBy, $task->finishedBy) . $lang->at . $task->finishedDate : $lang->noData),
|
||||
array('name' => $lang->task->canceledBy, 'value' => $task->canceledBy ? zget($users, $task->canceledBy, $task->canceledBy) . $lang->at . $task->canceledDate : $lang->noData),
|
||||
array('name' => $lang->task->closedBy, 'value' => $task->closedBy ? zget($users, $task->closedBy, $task->closedBy) . $lang->at . $task->closedDate : $lang->noData),
|
||||
array('name' => $lang->task->closedReason, 'value' => $task->closedReason ? $lang->task->reasonList[$task->closedReason] : $lang->noData),
|
||||
array('name' => $lang->task->lastEdited, 'value' => $task->lastEditedBy ? zget($users, $task->lastEditedBy, $task->lastEditedBy) . $lang->at . $task->lastEditedDate : $lang->noData)
|
||||
)
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
$legendEffortData = function() use($lang, $task)
|
||||
{
|
||||
return tableData
|
||||
(
|
||||
set::items
|
||||
(
|
||||
array(
|
||||
array('name' => $lang->task->estimate, 'value' => $task->estimate . $lang->workingHour),
|
||||
array('name' => $lang->task->consumed, 'value' => round($task->consumed, 2) . $lang->workingHour),
|
||||
array('name' => $lang->task->left, 'value' => $task->left . $lang->workingHour),
|
||||
array('name' => $lang->task->estStarted, 'value' => $task->estStarted),
|
||||
array('name' => $lang->task->realStarted, 'value' => helper::isZeroDate($task->realStarted) ? '' : substr($task->realStarted, 0, 19)),
|
||||
array('name' => $lang->task->deadline, 'value' => $task->deadline),
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
$legendMiscData = function() use($lang, $task, $users)
|
||||
{
|
||||
return tableData
|
||||
(
|
||||
set::items
|
||||
(
|
||||
array(
|
||||
array('name' => $lang->task->linkMR, 'value' => $task->openedBy ? zget($users, $task->openedBy, $task->openedBy) . $lang->at . $task->openedDate : $lang->noData),
|
||||
array('name' => $lang->task->linkCommit, 'value' => $task->finishedBy ? zget($users, $task->finishedBy, $task->finishedBy) . $lang->at . $task->finishedDate : $lang->noData),
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
$sectionListItems = array(
|
||||
array('title' => $lang->task->legendDesc, 'content' => empty($task->desc) ? $lang->noData : $task->desc),
|
||||
array(
|
||||
@@ -113,21 +44,82 @@ detailBody
|
||||
(
|
||||
tabs
|
||||
(
|
||||
set::items
|
||||
tabPane
|
||||
(
|
||||
array(
|
||||
array('id' => 'legend-basic', 'label' => $lang->task->legendBasic, 'data' => $legendBasicData, 'active' => true),
|
||||
array('id' => 'legend-life', 'label' => $lang->task->legendLife, 'data' => $legendLifeData),
|
||||
set::key('legend-basic'),
|
||||
set::title($lang->task->legendBasic),
|
||||
set::active(true),
|
||||
tableData
|
||||
(
|
||||
set::items
|
||||
(
|
||||
array(
|
||||
array('name' => $lang->task->execution, 'value' => $execution->name),
|
||||
array('name' => $lang->task->module, 'value' => ''),
|
||||
array('name' => $lang->task->assignedTo, 'value' => $task->assignedTo ? $task->assignedToRealName : $lang->noData),
|
||||
array('name' => $lang->task->type, 'value' => zget($this->lang->task->typeList, $task->type, $task->type)),
|
||||
array('name' => $lang->task->status, 'value' => $this->processStatus('task', $task)),
|
||||
array('name' => $lang->task->progress, 'value' => $task->progress . ' %'),
|
||||
array('name' => $lang->task->pri, 'value' => array('wg' => 'priLabel', 'pri' => '1'))
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
tabPane
|
||||
(
|
||||
set::key('legend-life'),
|
||||
set::title($lang->task->legendLife),
|
||||
tableData
|
||||
(
|
||||
set::items
|
||||
(
|
||||
array(
|
||||
array('name' => $lang->task->openedBy, 'value' => $task->openedBy ? zget($users, $task->openedBy, $task->openedBy) . $lang->at . $task->openedDate : $lang->noData),
|
||||
array('name' => $lang->task->finishedBy, 'value' => $task->finishedBy ? zget($users, $task->finishedBy, $task->finishedBy) . $lang->at . $task->finishedDate : $lang->noData),
|
||||
array('name' => $lang->task->canceledBy, 'value' => $task->canceledBy ? zget($users, $task->canceledBy, $task->canceledBy) . $lang->at . $task->canceledDate : $lang->noData),
|
||||
array('name' => $lang->task->closedBy, 'value' => $task->closedBy ? zget($users, $task->closedBy, $task->closedBy) . $lang->at . $task->closedDate : $lang->noData),
|
||||
array('name' => $lang->task->closedReason, 'value' => $task->closedReason ? $lang->task->reasonList[$task->closedReason] : $lang->noData),
|
||||
array('name' => $lang->task->lastEdited, 'value' => $task->lastEditedBy ? zget($users, $task->lastEditedBy, $task->lastEditedBy) . $lang->at . $task->lastEditedDate : $lang->noData)
|
||||
)
|
||||
),
|
||||
)
|
||||
),
|
||||
),
|
||||
tabs
|
||||
(
|
||||
set::items
|
||||
tabPane
|
||||
(
|
||||
array(
|
||||
array('id' => 'legend-effort', 'label' => $lang->task->legendEffort, 'data' => $legendEffortData, 'active' => true),
|
||||
array('id' => 'legend-misc', 'label' => $lang->task->legendMisc, 'data' => $legendMiscData)
|
||||
set::key('legend-effort'),
|
||||
set::title($lang->task->legendEffort),
|
||||
set::active(true),
|
||||
tableData
|
||||
(
|
||||
set::items
|
||||
(
|
||||
array(
|
||||
array('name' => $lang->task->estimate, 'value' => $task->estimate . $lang->workingHour),
|
||||
array('name' => $lang->task->consumed, 'value' => round($task->consumed, 2) . $lang->workingHour),
|
||||
array('name' => $lang->task->left, 'value' => $task->left . $lang->workingHour),
|
||||
array('name' => $lang->task->estStarted, 'value' => $task->estStarted),
|
||||
array('name' => $lang->task->realStarted, 'value' => helper::isZeroDate($task->realStarted) ? '' : substr($task->realStarted, 0, 19)),
|
||||
array('name' => $lang->task->deadline, 'value' => $task->deadline),
|
||||
)
|
||||
)
|
||||
)
|
||||
),
|
||||
tabPane
|
||||
(
|
||||
set::key('legend-misc'),
|
||||
set::title($lang->task->legendMisc),
|
||||
tableData
|
||||
(
|
||||
set::items
|
||||
(
|
||||
array(
|
||||
array('name' => $lang->task->linkMR, 'value' => $task->openedBy ? zget($users, $task->openedBy, $task->openedBy) . $lang->at . $task->openedDate : $lang->noData),
|
||||
array('name' => $lang->task->linkCommit, 'value' => $task->finishedBy ? zget($users, $task->finishedBy, $task->finishedBy) . $lang->at . $task->finishedDate : $lang->noData),
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user