cfmgrv4 init...2
This commit is contained in:
parent
7d105401ef
commit
302d0f286b
@ -30,7 +30,7 @@ function getFieldForm_MapurlHelper(string $field, mixed $value, array $viewDatas
|
||||
$form = form_input($field, $value, [
|
||||
"placeholder" => "예)https://new.example.com",
|
||||
"style" =>
|
||||
"width:100%; ::placeholder{color:silver; opacity: 1;}",
|
||||
"width:100%; ::placeholder{color:silver; opacity: 1;}",
|
||||
"class" => "form-control",
|
||||
(strpos($viewDatas['field_rules'][$field], 'required') !== false) ? "required" : ""
|
||||
]);
|
||||
@ -51,7 +51,7 @@ function getFieldForm_MapurlHelper(string $field, mixed $value, array $viewDatas
|
||||
default:
|
||||
$form = form_input($field, $value, [
|
||||
"style" =>
|
||||
"width:100%;",
|
||||
"width:100%;",
|
||||
"class" => "form-control",
|
||||
(strpos($viewDatas['field_rules'][$field], 'required') !== false) ? "required" : ""
|
||||
]);
|
||||
@ -108,7 +108,7 @@ function getListLabel_MapurlHelper(string $field, array $viewDatas, array $extra
|
||||
$order_value = $viewDatas['order_value'] == 'DESC' ? "ASC" : "DESC";
|
||||
$viewDatas['uri']->addQuery('order_field', $field);
|
||||
$viewDatas['uri']->addQuery('order_value', $order_value);
|
||||
$label = anchor((string)$viewDatas['uri'], $label);
|
||||
$label = anchor((string) $viewDatas['uri'], $label);
|
||||
}
|
||||
switch ($field) {
|
||||
case MapurlModel::TITLE:
|
||||
@ -122,7 +122,7 @@ function getListButton_MapurlHelper(string $action, array $viewDatas, array $ext
|
||||
case 'create':
|
||||
$viewDatas['list_action_url'] = current_url() . '/' . $action;
|
||||
$extras = ["class" => "btn btn-outline btn-primary btn-circle", "target" => "_self", ...$extras];
|
||||
$action = getListButtonLabel_CommonHelper($action, '입력', $viewDatas, $extras);
|
||||
$action = getListButtonLabel_CommonHelper($action, '입력', $viewDatas, $extras);
|
||||
break;
|
||||
case 'modify':
|
||||
$pk = $viewDatas['entity']->getPK();
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
<script type="text/javascript" src="/js/<?= $viewDatas['layout'] ?>/content.js"></script>
|
||||
<?= $this->include('templates/' . $viewDatas['layout'] . '/index_top'); ?>
|
||||
<?= form_open(current_url() . '/batchjob', $viewDatas['forms']['attributes'], $viewDatas['forms']['hiddens']) ?>
|
||||
<table class="index_table table table-bordered table-hover table-striped">
|
||||
<table class="index_table data table table-bordered table-hover table-striped" data-rtc-resizable-table="table.account">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>번호</th>
|
||||
<th nowrap>번호</th>
|
||||
<?php foreach ($viewDatas['fields'] as $field): ?>
|
||||
<?= getListLabel_AccountHelper($field, $viewDatas) ?>
|
||||
<?= getListLabel_AccountHelper($field, $viewDatas, ["data-rtc-resizable=\"{$field}\""]) ?>
|
||||
<?php endforeach ?>
|
||||
<th>작업</th>
|
||||
<th nowrap>작업</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -22,13 +22,13 @@
|
||||
<?php $viewDatas['cnt'] = $viewDatas['total_count'] - (($viewDatas['page'] - 1) * $viewDatas['per_page'] + $cnt); ?>
|
||||
<?php $viewDatas['entity'] = $entity; ?>
|
||||
<?php $viewDatas['old_auth'] = $old_auth ?>
|
||||
<td class="text-center text-wrap">
|
||||
<td class="text-center" nowrap>
|
||||
<?= getListButton_AccountHelper('sync', $viewDatas, ["style" => "cursor:pointer"]) ?>
|
||||
</td>
|
||||
<?php foreach ($viewDatas['fields'] as $field): ?>
|
||||
<td><?= getFieldView_AccountHelper($field, $viewDatas) ?></td>
|
||||
<?php endforeach ?>
|
||||
<td>
|
||||
<td nowrap>
|
||||
<?= getListButton_AccountHelper('delete', $viewDatas) ?>
|
||||
</td>
|
||||
</tr>
|
||||
@ -48,4 +48,23 @@
|
||||
</div>
|
||||
<?= form_close() ?>
|
||||
<div class=" index_pagination"><?= $viewDatas['pagination'] ?></div>
|
||||
<link href="/css/resizeTable.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="/js/resizeTable.js"></script>
|
||||
<script>
|
||||
(function (window, ResizableTableColumns, undefined) {
|
||||
var store = window.store && window.store.enabled ? window.store : null;
|
||||
var els = document.querySelectorAll('table.data');
|
||||
for (var index = 0; index < els.length; index++) {
|
||||
var table = els[index];
|
||||
if (table['rtc_data_object']) {
|
||||
continue;
|
||||
}
|
||||
var options = { store: store };
|
||||
if (table.querySelectorAll('thead > tr').length > 1) {
|
||||
options.resizeFromBody = false;
|
||||
}
|
||||
new ResizableTableColumns(els[index], options);
|
||||
}
|
||||
})(window, window.validide_resizableTableColumns.ResizableTableColumns, void (0));
|
||||
</script>
|
||||
<?= $this->endSection() ?>
|
||||
@ -4,14 +4,14 @@
|
||||
<script type="text/javascript" src="/js/<?= $viewDatas['layout'] ?>/content.js"></script>
|
||||
<?= $this->include('templates/' . $viewDatas['layout'] . '/index_top'); ?>
|
||||
<?= form_open(current_url() . '/batchjob', $viewDatas['forms']['attributes'], $viewDatas['forms']['hiddens']) ?>
|
||||
<table class="index_table table table-bordered table-hover table-striped">
|
||||
<table class="index_table data table table-bordered table-hover table-striped" data-rtc-resizable-table="table.auth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>번호</th>
|
||||
<th nowrap>번호</th>
|
||||
<?php foreach ($viewDatas['fields'] as $field): ?>
|
||||
<?= getListLabel_AuthHelper($field, $viewDatas) ?>
|
||||
<?= getListLabel_AuthHelper($field, $viewDatas, ["data-rtc-resizable=\"{$field}\""]) ?>
|
||||
<?php endforeach ?>
|
||||
<th>작업</th>
|
||||
<th nowrap>작업</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -20,14 +20,14 @@
|
||||
<tr <?= $entity->status != DEFAULTS['STATUS'] ? 'class="table-danger" rowcolor="red"' : 'rowcolor="red"' ?>>
|
||||
<?php $viewDatas['cnt'] = $viewDatas['total_count'] - (($viewDatas['page'] - 1) * $viewDatas['per_page'] + $cnt); ?>
|
||||
<?php $viewDatas['entity'] = $entity; ?>
|
||||
<td class="text-center text-wrap">
|
||||
<td class="text-center" nowrap>
|
||||
<?= getListButton_AuthHelper('modify', $viewDatas, ["style" => "cursor:pointer"]) ?>
|
||||
</td>
|
||||
<?php foreach ($viewDatas['fields'] as $field): ?>
|
||||
<td><?= getFieldView_AuthHelper($field, $viewDatas) ?></td>
|
||||
<td><?= getFieldView_AuthHelper($field, $viewDatas) ?></td>
|
||||
<?php endforeach ?>
|
||||
<td>
|
||||
<?= getListButton_AuthHelper('delete', $viewDatas) ?>
|
||||
<td nowrap>
|
||||
<?= getListButton_AuthHelper('delete', $viewDatas) ?>
|
||||
</td>
|
||||
</tr>
|
||||
<?php $cnt++ ?>
|
||||
@ -49,4 +49,23 @@
|
||||
<?php if (in_array($viewDatas['action_form'], [FORMS['MODAL'], FORMS['IFRAME']])): ?>
|
||||
<?= $this->include('templates/' . $viewDatas['layout'] . '/' . $viewDatas['action_form']); ?>
|
||||
<?php endif ?>
|
||||
<link href="/css/resizeTable.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="/js/resizeTable.js"></script>
|
||||
<script>
|
||||
(function (window, ResizableTableColumns, undefined) {
|
||||
var store = window.store && window.store.enabled ? window.store : null;
|
||||
var els = document.querySelectorAll('table.data');
|
||||
for (var index = 0; index < els.length; index++) {
|
||||
var table = els[index];
|
||||
if (table['rtc_data_object']) {
|
||||
continue;
|
||||
}
|
||||
var options = { store: store };
|
||||
if (table.querySelectorAll('thead > tr').length > 1) {
|
||||
options.resizeFromBody = false;
|
||||
}
|
||||
new ResizableTableColumns(els[index], options);
|
||||
}
|
||||
})(window, window.validide_resizableTableColumns.ResizableTableColumns, void (0));
|
||||
</script>
|
||||
<?= $this->endSection() ?>
|
||||
@ -4,14 +4,14 @@
|
||||
<script type="text/javascript" src="/js/<?= $viewDatas['layout'] ?>/content.js"></script>
|
||||
<?= $this->include('templates/' . $viewDatas['layout'] . '/index_top'); ?>
|
||||
<?= form_open(current_url() . '/batchjob', $viewDatas['forms']['attributes'], $viewDatas['forms']['hiddens']) ?>
|
||||
<table class="index_table table table-bordered table-hover table-striped">
|
||||
<table class="index_table data table table-bordered table-hover table-striped" data-rtc-resizable-table="table.record">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>번호</th>
|
||||
<th nowrap>번호</th>
|
||||
<?php foreach ($viewDatas['fields'] as $field): ?>
|
||||
<?= getListLabel_RecordHelper($field, $viewDatas) ?>
|
||||
<?= getListLabel_RecordHelper($field, $viewDatas, ["data-rtc-resizable=\"{$field}\""]) ?>
|
||||
<?php endforeach ?>
|
||||
<th>작업</th>
|
||||
<th nowrap>작업</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -22,14 +22,14 @@
|
||||
<?php $viewDatas['cnt'] = $viewDatas['total_count'] - (($viewDatas['page'] - 1) * $viewDatas['per_page'] + $cnt); ?>
|
||||
<?php $viewDatas['entity'] = $entity; ?>
|
||||
<?php $viewDatas['old_zone'] = $old_zone ?>
|
||||
<td class="text-center text-wrap">
|
||||
<td class="text-center" nowrap>
|
||||
<?= getListButton_RecordHelper('sync', $viewDatas, ["style" => "cursor:pointer"]) ?>
|
||||
</td>
|
||||
<?php foreach ($viewDatas['fields'] as $field): ?>
|
||||
<td><?= getFieldView_RecordHelper($field, $viewDatas) ?></td>
|
||||
<td><?= getFieldView_RecordHelper($field, $viewDatas) ?></td>
|
||||
<?php endforeach ?>
|
||||
<td>
|
||||
<?= getListButton_RecordHelper('delete', $viewDatas) ?>
|
||||
<td nowrap>
|
||||
<?= getListButton_RecordHelper('delete', $viewDatas) ?>
|
||||
</td>
|
||||
</tr>
|
||||
<?php $old_zone = $entity->getParent() ?>
|
||||
@ -52,4 +52,23 @@
|
||||
<?php if (in_array($viewDatas['action_form'], [FORMS['MODAL'], FORMS['IFRAME']])): ?>
|
||||
<?= $this->include('templates/' . $viewDatas['layout'] . '/' . $viewDatas['action_form']); ?>
|
||||
<?php endif ?>
|
||||
<link href="/css/resizeTable.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="/js/resizeTable.js"></script>
|
||||
<script>
|
||||
(function (window, ResizableTableColumns, undefined) {
|
||||
var store = window.store && window.store.enabled ? window.store : null;
|
||||
var els = document.querySelectorAll('table.data');
|
||||
for (var index = 0; index < els.length; index++) {
|
||||
var table = els[index];
|
||||
if (table['rtc_data_object']) {
|
||||
continue;
|
||||
}
|
||||
var options = { store: store };
|
||||
if (table.querySelectorAll('thead > tr').length > 1) {
|
||||
options.resizeFromBody = false;
|
||||
}
|
||||
new ResizableTableColumns(els[index], options);
|
||||
}
|
||||
})(window, window.validide_resizableTableColumns.ResizableTableColumns, void (0));
|
||||
</script>
|
||||
<?= $this->endSection() ?>
|
||||
@ -4,14 +4,14 @@
|
||||
<script type="text/javascript" src="/js/<?= $viewDatas['layout'] ?>/content.js"></script>
|
||||
<?= $this->include('templates/' . $viewDatas['layout'] . '/index_top'); ?>
|
||||
<?= form_open(current_url() . '/batchjob', $viewDatas['forms']['attributes'], $viewDatas['forms']['hiddens']) ?>
|
||||
<table class="index_table table table-bordered table-hover table-striped">
|
||||
<table class="index_table data table table-bordered table-hover table-striped" data-rtc-resizable-table="table.zone">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>번호</th>
|
||||
<th nowrap>번호</th>
|
||||
<?php foreach ($viewDatas['fields'] as $field): ?>
|
||||
<?= getListLabel_ZoneHelper($field, $viewDatas) ?>
|
||||
<?= getListLabel_ZoneHelper($field, $viewDatas, ["data-rtc-resizable=\"{$field}\""]) ?>
|
||||
<?php endforeach ?>
|
||||
<th>작업</th>
|
||||
<th nowrap>작업</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -22,14 +22,14 @@
|
||||
<?php $viewDatas['cnt'] = $viewDatas['total_count'] - (($viewDatas['page'] - 1) * $viewDatas['per_page'] + $cnt); ?>
|
||||
<?php $viewDatas['entity'] = $entity ?>
|
||||
<?php $viewDatas['old_account'] = $old_account ?>
|
||||
<td class="text-center text-wrap">
|
||||
<td class="text-center" nowrap>
|
||||
<?= getListButton_ZoneHelper('sync', $viewDatas, ["style" => "cursor:pointer"]) ?>
|
||||
</td>
|
||||
<?php foreach ($viewDatas['fields'] as $field): ?>
|
||||
<td><?= getFieldView_ZoneHelper($field, $viewDatas) ?></td>
|
||||
<td><?= getFieldView_ZoneHelper($field, $viewDatas) ?></td>
|
||||
<?php endforeach ?>
|
||||
<td>
|
||||
<?= getListButton_ZoneHelper('delete', $viewDatas) ?>
|
||||
<td nowrap>
|
||||
<?= getListButton_ZoneHelper('delete', $viewDatas) ?>
|
||||
</td>
|
||||
</tr>
|
||||
<?php $old_account = $entity->getParent() ?>
|
||||
@ -52,4 +52,23 @@
|
||||
<?php if (in_array($viewDatas['action_form'], [FORMS['MODAL'], FORMS['IFRAME']])): ?>
|
||||
<?= $this->include('templates/' . $viewDatas['layout'] . '/' . $viewDatas['action_form']); ?>
|
||||
<?php endif ?>
|
||||
<link href="/css/resizeTable.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="/js/resizeTable.js"></script>
|
||||
<script>
|
||||
(function (window, ResizableTableColumns, undefined) {
|
||||
var store = window.store && window.store.enabled ? window.store : null;
|
||||
var els = document.querySelectorAll('table.data');
|
||||
for (var index = 0; index < els.length; index++) {
|
||||
var table = els[index];
|
||||
if (table['rtc_data_object']) {
|
||||
continue;
|
||||
}
|
||||
var options = { store: store };
|
||||
if (table.querySelectorAll('thead > tr').length > 1) {
|
||||
options.resizeFromBody = false;
|
||||
}
|
||||
new ResizableTableColumns(els[index], options);
|
||||
}
|
||||
})(window, window.validide_resizableTableColumns.ResizableTableColumns, void (0));
|
||||
</script>
|
||||
<?= $this->endSection() ?>
|
||||
@ -4,14 +4,14 @@
|
||||
<script type="text/javascript" src="/js/<?= $viewDatas['layout'] ?>/content.js"></script>
|
||||
<?= $this->include('templates/' . $viewDatas['layout'] . '/index_top'); ?>
|
||||
<?= form_open(current_url() . '/batchjob', $viewDatas['forms']['attributes'], $viewDatas['forms']['hiddens']) ?>
|
||||
<table class="index_table table table-bordered table-hover table-striped">
|
||||
<table class="index_table data table table-bordered table-hover table-striped" data-rtc-resizable-table="table.mapurl">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>번호</th>
|
||||
<th nowrap>번호</th>
|
||||
<?php foreach ($viewDatas['fields'] as $field): ?>
|
||||
<?= getListLabel_MapurlHelper($field, $viewDatas) ?>
|
||||
<?= getListLabel_MapurlHelper($field, $viewDatas, ["data-rtc-resizable=\"{$field}\""]) ?>
|
||||
<?php endforeach ?>
|
||||
<th>작업</th>
|
||||
<th nowrap>작업</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -20,14 +20,14 @@
|
||||
<tr <?= $entity->status != DEFAULTS['STATUS'] ? 'class="table-danger" rowcolor="red"' : 'rowcolor="red"' ?>>
|
||||
<?php $viewDatas['cnt'] = $viewDatas['total_count'] - (($viewDatas['page'] - 1) * $viewDatas['per_page'] + $cnt); ?>
|
||||
<?php $viewDatas['entity'] = $entity; ?>
|
||||
<td class="text-center text-wrap">
|
||||
<td class="text-center" nowrap>
|
||||
<?= getListButton_MapurlHelper('modify', $viewDatas, ["style" => "cursor:pointer"]) ?>
|
||||
</td>
|
||||
<?php foreach ($viewDatas['fields'] as $field): ?>
|
||||
<td><?= getFieldView_MapurlHelper($field, $viewDatas) ?></td>
|
||||
<td><?= getFieldView_MapurlHelper($field, $viewDatas) ?></td>
|
||||
<?php endforeach ?>
|
||||
<td>
|
||||
<?= getListButton_MapurlHelper('delete', $viewDatas) ?>
|
||||
<td nowrap>
|
||||
<?= getListButton_MapurlHelper('delete', $viewDatas) ?>
|
||||
</td>
|
||||
</tr>
|
||||
<?php $cnt++ ?>
|
||||
@ -49,4 +49,23 @@
|
||||
<?php if (in_array($viewDatas['action_form'], [FORMS['MODAL'], FORMS['IFRAME']])): ?>
|
||||
<?= $this->include('templates/' . $viewDatas['layout'] . '/' . $viewDatas['action_form']); ?>
|
||||
<?php endif ?>
|
||||
<link href="/css/resizeTable.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="/js/resizeTable.js"></script>
|
||||
<script>
|
||||
(function (window, ResizableTableColumns, undefined) {
|
||||
var store = window.store && window.store.enabled ? window.store : null;
|
||||
var els = document.querySelectorAll('table.data');
|
||||
for (var index = 0; index < els.length; index++) {
|
||||
var table = els[index];
|
||||
if (table['rtc_data_object']) {
|
||||
continue;
|
||||
}
|
||||
var options = { store: store };
|
||||
if (table.querySelectorAll('thead > tr').length > 1) {
|
||||
options.resizeFromBody = false;
|
||||
}
|
||||
new ResizableTableColumns(els[index], options);
|
||||
}
|
||||
})(window, window.validide_resizableTableColumns.ResizableTableColumns, void (0));
|
||||
</script>
|
||||
<?= $this->endSection() ?>
|
||||
@ -4,14 +4,14 @@
|
||||
<script type="text/javascript" src="/js/<?= $viewDatas['layout'] ?>/content.js"></script>
|
||||
<?= $this->include('templates/' . $viewDatas['layout'] . '/index_top'); ?>
|
||||
<?= form_open(current_url() . '/batchjob', $viewDatas['forms']['attributes'], $viewDatas['forms']['hiddens']) ?>
|
||||
<table class="index_table table table-bordered table-hover table-striped">
|
||||
<table class="index_table data table table-bordered table-hover table-striped" data-rtc-resizable-table="table.user">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>번호</th>
|
||||
<th nowrap>번호</th>
|
||||
<?php foreach ($viewDatas['fields'] as $field): ?>
|
||||
<?= getListLabel_UserHelper($field, $viewDatas) ?>
|
||||
<?= getListLabel_UserHelper($field, $viewDatas, ["data-rtc-resizable=\"{$field}\""]) ?>
|
||||
<?php endforeach ?>
|
||||
<th>작업</th>
|
||||
<th nowrap>작업</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -20,14 +20,14 @@
|
||||
<tr <?= $entity->status != DEFAULTS['STATUS'] ? 'class="table-danger" rowcolor="red"' : 'rowcolor="red"' ?>>
|
||||
<?php $viewDatas['cnt'] = $viewDatas['total_count'] - (($viewDatas['page'] - 1) * $viewDatas['per_page'] + $cnt); ?>
|
||||
<?php $viewDatas['entity'] = $entity; ?>
|
||||
<td class="text-center text-wrap">
|
||||
<td class="text-center" nowrap>
|
||||
<?= getListButton_UserHelper('modify', $viewDatas, ["style" => "cursor:pointer"]) ?>
|
||||
</td>
|
||||
<?php foreach ($viewDatas['fields'] as $field): ?>
|
||||
<td><?= getFieldView_UserHelper($field, $viewDatas) ?></td>
|
||||
<td><?= getFieldView_UserHelper($field, $viewDatas) ?></td>
|
||||
<?php endforeach ?>
|
||||
<td>
|
||||
<?= getListButton_UserHelper('delete', $viewDatas) ?>
|
||||
<td nowrap>
|
||||
<?= getListButton_UserHelper('delete', $viewDatas) ?>
|
||||
</td>
|
||||
</tr>
|
||||
<?php $cnt++ ?>
|
||||
@ -49,4 +49,23 @@
|
||||
<?php if (in_array($viewDatas['action_form'], [FORMS['MODAL'], FORMS['IFRAME']])): ?>
|
||||
<?= $this->include('templates/' . $viewDatas['layout'] . '/' . $viewDatas['action_form']); ?>
|
||||
<?php endif ?>
|
||||
<link href="/css/resizeTable.css" media="screen" rel="stylesheet" type="text/css" />
|
||||
<script type="text/javascript" src="/js/resizeTable.js"></script>
|
||||
<script>
|
||||
(function (window, ResizableTableColumns, undefined) {
|
||||
var store = window.store && window.store.enabled ? window.store : null;
|
||||
var els = document.querySelectorAll('table.data');
|
||||
for (var index = 0; index < els.length; index++) {
|
||||
var table = els[index];
|
||||
if (table['rtc_data_object']) {
|
||||
continue;
|
||||
}
|
||||
var options = { store: store };
|
||||
if (table.querySelectorAll('thead > tr').length > 1) {
|
||||
options.resizeFromBody = false;
|
||||
}
|
||||
new ResizableTableColumns(els[index], options);
|
||||
}
|
||||
})(window, window.validide_resizableTableColumns.ResizableTableColumns, void (0));
|
||||
</script>
|
||||
<?= $this->endSection() ?>
|
||||
@ -30,7 +30,7 @@
|
||||
<div class="left"><?= $this->include(LAYOUTS[$viewDatas['layout']]['path'] . '/left_menu'); ?></div>
|
||||
<div class="right">
|
||||
<div class="header"><?= $this->include("templates/{$viewDatas['layout']}/header"); ?></div>
|
||||
<div class="content"><?= $this->renderSection('content') ?></div>
|
||||
<div id="container" class="content"><?= $this->renderSection('content') ?></div>
|
||||
<div class="footer"><?= $this->include("templates/{$viewDatas['layout']}/footer"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content"><?= $this->renderSection('content') ?></div>
|
||||
<div id="container" class="content"><?= $this->renderSection('content') ?></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="header"><?= $this->include("templates/{$viewDatas['layout']}/header"); ?></div>
|
||||
<div class="content"><?= $this->renderSection('content') ?></div>
|
||||
<div id="container" class="content"><?= $this->renderSection('content') ?></div>
|
||||
<div class="footer"><?= $this->include("templates/{$viewDatas['layout']}/footer"); ?></div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
<div class="left"><?= $this->include(LAYOUTS[$viewDatas['layout']]['path'] . '/left_menu'); ?></div>
|
||||
<div class="center">
|
||||
<div class="header"><?= $this->include("templates/{$viewDatas['layout']}/header"); ?></div>
|
||||
<div class="content"><?= $this->renderSection('content') ?></div>
|
||||
<div id="container" class="content"><?= $this->renderSection('content') ?></div>
|
||||
<div class="footer"><?= $this->include("templates/{$viewDatas['layout']}/footer"); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -41,8 +41,8 @@ nav.index_top nav.pageinfo {
|
||||
/* Table 부분 */
|
||||
table.index_table {
|
||||
width: 100%;
|
||||
/* table-layout: fixed; 고정 레이아웃 */
|
||||
border-collapse: collapse; /* 테두리 결합 */
|
||||
/* table-layout: fixed; */
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table.index_table thead th {
|
||||
@ -57,11 +57,17 @@ table.index_table thead th {
|
||||
/* border:1px solid silver; */
|
||||
}
|
||||
|
||||
table.index_table thead th:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
div.index_bottom {
|
||||
padding-top: 15px;
|
||||
text-align: center;
|
||||
word-wrap: break-word; /* 긴 단어 강제 줄바꿈 */
|
||||
white-space: normal; /* 자동 줄바꿈 */
|
||||
word-wrap: break-word;
|
||||
/* 긴 단어 강제 줄바꿈 */
|
||||
white-space: normal;
|
||||
/* 자동 줄바꿈 */
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
@ -121,7 +127,8 @@ table.action_form {
|
||||
/* 자동 여백을 이용한 가로 가운데 정렬 */
|
||||
/* border: 1px solid blue; */
|
||||
/* table-layout: fixed; 고정 레이아웃 */
|
||||
border-collapse: collapse; /* 테두리 결합 */
|
||||
border-collapse: collapse;
|
||||
/* 테두리 결합 */
|
||||
}
|
||||
|
||||
table.action_form th {
|
||||
@ -131,8 +138,10 @@ table.action_form th {
|
||||
|
||||
table.action_form td {
|
||||
text-align: center;
|
||||
word-wrap: break-word; /* 긴 단어 강제 줄바꿈 */
|
||||
white-space: normal; /* 자동 줄바꿈 */
|
||||
word-wrap: break-word;
|
||||
/* 긴 단어 강제 줄바꿈 */
|
||||
white-space: normal;
|
||||
/* 자동 줄바꿈 */
|
||||
}
|
||||
|
||||
/* create,modify,view 페이지용 */
|
||||
78
public/css/resizeTable.css
Normal file
78
public/css/resizeTable.css
Normal file
@ -0,0 +1,78 @@
|
||||
.rtc-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.rtc-wrapper {
|
||||
position: relative;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.rtc-wrapper table.rtc-table {
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.rtc-wrapper table.rtc-table thead,
|
||||
.rtc-wrapper table.rtc-table tbody,
|
||||
.rtc-wrapper table.rtc-table tfoot {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rtc-wrapper table.rtc-table thead tr,
|
||||
.rtc-wrapper table.rtc-table tbody tr,
|
||||
.rtc-wrapper table.rtc-table tfoot tr {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.rtc-wrapper table.rtc-table thead tr th,
|
||||
.rtc-wrapper table.rtc-table thead tr td,
|
||||
.rtc-wrapper table.rtc-table tbody tr th,
|
||||
.rtc-wrapper table.rtc-table tbody tr td,
|
||||
.rtc-wrapper table.rtc-table tfoot tr th,
|
||||
.rtc-wrapper table.rtc-table tfoot tr td {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.rtc-wrapper table.rtc-table.rtc-table-resizing {
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.rtc-wrapper table.rtc-table.rtc-table-resizing thead,
|
||||
.rtc-wrapper table.rtc-table.rtc-table-resizing thead>th,
|
||||
.rtc-wrapper table.rtc-table.rtc-table-resizing thead>th>a {
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.rtc-wrapper table.rtc-table thead tr.invisible,
|
||||
.rtc-wrapper table.rtc-table thead tr.invisible th {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.rtc-wrapper .rtc-handle-container {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.rtc-wrapper .rtc-handle-container .rtc-handle {
|
||||
position: absolute;
|
||||
width: 6.5px;
|
||||
margin-left: -3.575px;
|
||||
z-index: 2;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.rtc-wrapper .rtc-handle-container .rtc-handle:last-of-type {
|
||||
width: 4.5px;
|
||||
margin-left: -4.95px;
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
function openWin( winName ) {
|
||||
var blnCookie = getCookie( winName );
|
||||
var obj = eval( "window." + winName );
|
||||
if( !blnCookie ) {
|
||||
obj.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
function closeWin(winName, expiredays) {
|
||||
setCookie( winName, "done" , expiredays);
|
||||
var obj = eval( "window." + winName );
|
||||
obj.style.display = "none";
|
||||
}
|
||||
function closeWinAt00(winName, expiredays) {
|
||||
setCookieAt00( winName, "done" , expiredays);
|
||||
var obj = eval( "window." + winName );
|
||||
obj.style.display = "none";
|
||||
}
|
||||
|
||||
function getCookie( name ) {
|
||||
var nameOfCookie = name + "=";
|
||||
var x = 0;
|
||||
while ( x <= document.cookie.length )
|
||||
{
|
||||
var y = (x+nameOfCookie.length);
|
||||
if ( document.cookie.substring( x, y ) == nameOfCookie ) {
|
||||
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
|
||||
endOfCookie = document.cookie.length;
|
||||
return unescape( document.cookie.substring( y, endOfCookie ) );
|
||||
}
|
||||
x = document.cookie.indexOf( " ", x ) + 1;
|
||||
if ( x == 0 )
|
||||
break;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
function setCookie( name, value, expiredays ) {
|
||||
var todayDate = new Date();
|
||||
todayDate.setDate( todayDate.getDate() + expiredays );
|
||||
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
|
||||
}
|
||||
|
||||
function setCookieAt00( name, value, expiredays ) {
|
||||
var todayDate = new Date();
|
||||
todayDate = new Date(parseInt(todayDate.getTime() / 86400000) * 86400000 + 54000000);
|
||||
if ( todayDate > new Date() )
|
||||
{
|
||||
expiredays = expiredays - 1;
|
||||
}
|
||||
todayDate.setDate( todayDate.getDate() + expiredays );
|
||||
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
|
||||
}
|
||||
825
public/js/resizeTable.js
Normal file
825
public/js/resizeTable.js
Normal file
@ -0,0 +1,825 @@
|
||||
(function (global, factory) {
|
||||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
||||
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
||||
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.validide_resizableTableColumns = {}));
|
||||
})(this, (function (exports) { 'use strict';
|
||||
|
||||
var ResizableConstants = /** @class */ (function () {
|
||||
function ResizableConstants() {
|
||||
}
|
||||
ResizableConstants.dataPropertyName = 'validide_rtc_data_object';
|
||||
ResizableConstants.classes = {
|
||||
table: 'rtc-table',
|
||||
wrapper: 'rtc-wrapper',
|
||||
handleContainer: 'rtc-handle-container',
|
||||
handle: 'rtc-handle',
|
||||
tableResizing: 'rtc-table-resizing',
|
||||
columnResizing: 'rtc-column-resizing',
|
||||
};
|
||||
ResizableConstants.attributes = {
|
||||
dataResizable: 'data-rtc-resizable',
|
||||
dataResizableTable: 'data-rtc-resizable-table'
|
||||
};
|
||||
ResizableConstants.data = {
|
||||
resizable: 'rtcResizable',
|
||||
resizableTable: 'rtcResizableTable'
|
||||
};
|
||||
ResizableConstants.events = {
|
||||
pointerDown: ['mousedown', 'touchstart'],
|
||||
pointerMove: ['mousemove', 'touchmove'],
|
||||
pointerUp: ['mouseup', 'touchend'],
|
||||
windowResize: ['resize'],
|
||||
eventResizeStart: 'eventResizeStart.rtc',
|
||||
eventResize: 'eventResize.rtc',
|
||||
eventResizeStop: 'eventResizeStop.rtc'
|
||||
};
|
||||
return ResizableConstants;
|
||||
}());
|
||||
|
||||
var WidthsData = /** @class */ (function () {
|
||||
function WidthsData() {
|
||||
this.column = 0;
|
||||
this.table = 0;
|
||||
}
|
||||
return WidthsData;
|
||||
}());
|
||||
var PointerData = /** @class */ (function () {
|
||||
function PointerData() {
|
||||
this.x = null;
|
||||
this.isDoubleClick = false;
|
||||
}
|
||||
return PointerData;
|
||||
}());
|
||||
var ResizableEventData = /** @class */ (function () {
|
||||
function ResizableEventData(column, dragHandler) {
|
||||
this.pointer = new PointerData();
|
||||
this.originalWidths = new WidthsData();
|
||||
this.newWidths = new WidthsData();
|
||||
this.column = column;
|
||||
this.dragHandler = dragHandler;
|
||||
}
|
||||
return ResizableEventData;
|
||||
}());
|
||||
|
||||
var Utilities = /** @class */ (function () {
|
||||
function Utilities() {
|
||||
}
|
||||
Utilities.kebabCaseToCamelCase = function (str) {
|
||||
return str.replace(Utilities.kebabCaseRegex, function (m) { return m[1].toUpperCase(); });
|
||||
};
|
||||
Utilities.parseStringToType = function (str) {
|
||||
if (str.length == 0 || Utilities.onlyWhiteSpace.test(str))
|
||||
return str;
|
||||
if (Utilities.trueRegex.test(str))
|
||||
return true;
|
||||
if (Utilities.falseRegex.test(str))
|
||||
return false;
|
||||
if (Utilities.notEmptyOrWhiteSpace.test(str)) {
|
||||
var temp = +str;
|
||||
if (!isNaN(temp))
|
||||
return temp;
|
||||
}
|
||||
return str;
|
||||
};
|
||||
Utilities.regexEscapeRegex = /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g;
|
||||
Utilities.kebabCaseRegex = /(\-\w)/g;
|
||||
Utilities.trueRegex = /^true$/i;
|
||||
Utilities.falseRegex = /^false$/i;
|
||||
Utilities.onlyWhiteSpace = /^\s$/;
|
||||
Utilities.notEmptyOrWhiteSpace = /\S/;
|
||||
return Utilities;
|
||||
}());
|
||||
|
||||
var UtilitiesDOM = /** @class */ (function () {
|
||||
function UtilitiesDOM() {
|
||||
}
|
||||
UtilitiesDOM.getDataAttributesValues = function (el) {
|
||||
if (!el)
|
||||
return null;
|
||||
var returnValue = {};
|
||||
if (el.dataset) {
|
||||
for (var prop in el.dataset) {
|
||||
if (el.dataset.hasOwnProperty(prop)) {
|
||||
returnValue[prop] = Utilities.parseStringToType(el.dataset[prop] || '');
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (var i = 0; i < el.attributes.length; i++) {
|
||||
if (!/^data\-/.test(el.attributes[i].name))
|
||||
continue;
|
||||
var name_1 = Utilities.kebabCaseToCamelCase(el.attributes[i].name.replace('data-', ''));
|
||||
returnValue[name_1] = Utilities.parseStringToType(el.attributes[i].value);
|
||||
}
|
||||
}
|
||||
return returnValue;
|
||||
};
|
||||
return UtilitiesDOM;
|
||||
}());
|
||||
|
||||
var ResizableOptions = /** @class */ (function () {
|
||||
function ResizableOptions(options, element) {
|
||||
if (options === void 0) { options = null; }
|
||||
if (element === void 0) { element = null; }
|
||||
this.resizeFromBody = true;
|
||||
this.minWidth = 40;
|
||||
this.maxWidth = null;
|
||||
this.doubleClickDelay = 500;
|
||||
this.maxInitialWidthHint = null;
|
||||
this.store = null;
|
||||
this.overrideValues(options);
|
||||
this.overrideValuesFromElement(element);
|
||||
}
|
||||
ResizableOptions.prototype.overrideValues = function (options) {
|
||||
if (options === void 0) { options = null; }
|
||||
if (!options)
|
||||
return;
|
||||
for (var prop in options) {
|
||||
if (this.hasOwnProperty(prop)) {
|
||||
this[prop] = options[prop];
|
||||
}
|
||||
}
|
||||
};
|
||||
ResizableOptions.prototype.overrideValuesFromElement = function (element) {
|
||||
if (element === void 0) { element = null; }
|
||||
if (!element)
|
||||
return;
|
||||
var elementOptions = UtilitiesDOM.getDataAttributesValues(element);
|
||||
this.overrideValues(elementOptions);
|
||||
};
|
||||
return ResizableOptions;
|
||||
}());
|
||||
|
||||
var ResizableTableColumns = /** @class */ (function () {
|
||||
function ResizableTableColumns(table, options) {
|
||||
if (typeof table !== 'object' || table === null || table.toString() !== '[object HTMLTableElement]')
|
||||
throw 'Invalid argument: "table".\nResizableTableColumns requires that the table element is a not null HTMLTableElement object!';
|
||||
if (typeof table[ResizableConstants.dataPropertyName] !== 'undefined')
|
||||
throw "Existing \"".concat(ResizableConstants.dataPropertyName, "\" property.\nTable element already has a '").concat(ResizableConstants.dataPropertyName, "' attached object!");
|
||||
this.id = ResizableTableColumns.getInstanceId();
|
||||
this.table = table;
|
||||
this.options = new ResizableOptions(options, table);
|
||||
this.wrapper = null;
|
||||
this.ownerDocument = table.ownerDocument;
|
||||
this.tableHeaders = [];
|
||||
this.dragHandlesContainer = null;
|
||||
this.originalWidths = [];
|
||||
this.eventData = null;
|
||||
this.lastPointerDown = 0;
|
||||
this.init();
|
||||
this.table[ResizableConstants.dataPropertyName] = this;
|
||||
}
|
||||
ResizableTableColumns.prototype.init = function () {
|
||||
this.validateMarkup();
|
||||
this.createHandlerReferences();
|
||||
this.wrapTable();
|
||||
this.assignTableHeaders();
|
||||
this.storeOriginalWidths();
|
||||
this.setHeaderWidths();
|
||||
this.createDragHandles();
|
||||
this.restoreColumnWidths();
|
||||
this.checkTableWidth();
|
||||
this.syncHandleWidths();
|
||||
this.registerWindowResizeHandler();
|
||||
};
|
||||
ResizableTableColumns.prototype.dispose = function () {
|
||||
this.destroyDragHandles();
|
||||
this.restoreOriginalWidths();
|
||||
this.unwrapTable();
|
||||
this.onPointerDownRef = null;
|
||||
this.onPointerMoveRef = null;
|
||||
this.onPointerUpRef = null;
|
||||
this.table[ResizableConstants.dataPropertyName] = void (0);
|
||||
};
|
||||
ResizableTableColumns.prototype.validateMarkup = function () {
|
||||
var theadCount = 0;
|
||||
var tbodyCount = 0;
|
||||
var thead = null;
|
||||
for (var index = 0; index < this.table.childNodes.length; index++) {
|
||||
var element = this.table.childNodes[index];
|
||||
if (element.nodeName === 'THEAD') {
|
||||
theadCount++;
|
||||
thead = element;
|
||||
}
|
||||
else if (element.nodeName === 'TBODY') {
|
||||
tbodyCount++;
|
||||
}
|
||||
}
|
||||
if (thead === null || theadCount !== 1)
|
||||
throw "Markup validation: thead count.\nResizableTableColumns requires that the table element has one(1) table head element. Current count: ".concat(theadCount);
|
||||
if (tbodyCount !== 1)
|
||||
throw "Markup validation: tbody count.\nResizableTableColumns requires that the table element has one(1) table body element. Current count: ".concat(tbodyCount);
|
||||
var theadRowCount = 0;
|
||||
var firstRow = null;
|
||||
for (var index = 0; index < thead.childNodes.length; index++) {
|
||||
var element = thead.childNodes[index];
|
||||
if (element.nodeName === 'TR') {
|
||||
theadRowCount++;
|
||||
if (firstRow === null) {
|
||||
firstRow = element;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (firstRow === null || theadRowCount < 1)
|
||||
throw "Markup validation: thead row count.\nResizableTableColumns requires that the table head element has at least one(1) table row element. Current count: ".concat(theadRowCount);
|
||||
var headerCellsCount = 0;
|
||||
var invalidHeaderCellsCount = 0;
|
||||
for (var index = 0; index < firstRow.childNodes.length; index++) {
|
||||
var element = firstRow.childNodes[index];
|
||||
if (element.nodeName === 'TH') {
|
||||
headerCellsCount++;
|
||||
}
|
||||
else if (element.nodeName === 'TD') {
|
||||
invalidHeaderCellsCount++;
|
||||
}
|
||||
}
|
||||
if (headerCellsCount < 1)
|
||||
throw "Markup validation: thead first row cells count.\nResizableTableColumns requires that the table head's first row element has at least one(1) table header cell element. Current count: ".concat(headerCellsCount);
|
||||
if (invalidHeaderCellsCount !== 0)
|
||||
throw "Markup validation: thead first row invalid.\nResizableTableColumns requires that the table head's first row element has no(0) table cell(TD) elements. Current count: ".concat(invalidHeaderCellsCount);
|
||||
};
|
||||
ResizableTableColumns.prototype.wrapTable = function () {
|
||||
if (this.wrapper)
|
||||
return;
|
||||
this.wrapper = this.ownerDocument.createElement('div');
|
||||
this.wrapper.classList.add(ResizableConstants.classes.wrapper);
|
||||
var tableOriginalParent = this.table.parentNode;
|
||||
tableOriginalParent.insertBefore(this.wrapper, this.table);
|
||||
tableOriginalParent.removeChild(this.table);
|
||||
this.wrapper.appendChild(this.table);
|
||||
this.table.classList.add(ResizableConstants.classes.table);
|
||||
};
|
||||
ResizableTableColumns.prototype.unwrapTable = function () {
|
||||
this.table.classList.remove(ResizableConstants.classes.table);
|
||||
if (!this.wrapper)
|
||||
return;
|
||||
var tableOriginalParent = this.wrapper.parentNode;
|
||||
tableOriginalParent.insertBefore(this.table, this.wrapper);
|
||||
tableOriginalParent.removeChild(this.wrapper);
|
||||
this.wrapper = null;
|
||||
};
|
||||
ResizableTableColumns.prototype.assignTableHeaders = function () {
|
||||
var tableHeader;
|
||||
var firstTableRow;
|
||||
for (var index = 0; index < this.table.childNodes.length; index++) {
|
||||
var element = this.table.childNodes[index];
|
||||
if (element.nodeName === 'THEAD') {
|
||||
tableHeader = element;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!tableHeader)
|
||||
return;
|
||||
for (var index = 0; index < tableHeader.childNodes.length; index++) {
|
||||
var element = tableHeader.childNodes[index];
|
||||
if (element.nodeName === 'TR') {
|
||||
firstTableRow = element;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!firstTableRow)
|
||||
return;
|
||||
for (var index = 0; index < firstTableRow.childNodes.length; index++) {
|
||||
var element = firstTableRow.childNodes[index];
|
||||
if (element.nodeName === 'TH') {
|
||||
this.tableHeaders.push(element);
|
||||
}
|
||||
}
|
||||
};
|
||||
ResizableTableColumns.prototype.storeOriginalWidths = function () {
|
||||
var _this = this;
|
||||
this.tableHeaders
|
||||
.forEach(function (el) {
|
||||
_this.originalWidths.push({
|
||||
el: el,
|
||||
detail: el.style.width
|
||||
});
|
||||
});
|
||||
this.originalWidths.push({
|
||||
el: this.table,
|
||||
detail: this.table.style.width
|
||||
});
|
||||
};
|
||||
ResizableTableColumns.prototype.restoreOriginalWidths = function () {
|
||||
this.originalWidths
|
||||
.forEach(function (itm) {
|
||||
itm.el.style.width = itm.detail;
|
||||
});
|
||||
};
|
||||
ResizableTableColumns.prototype.setHeaderWidths = function () {
|
||||
var _this = this;
|
||||
this.tableHeaders
|
||||
.forEach(function (el) {
|
||||
var width = el.offsetWidth;
|
||||
var constrainedWidth = _this.constrainWidth(el, width);
|
||||
if (typeof _this.options.maxInitialWidthHint === 'number') {
|
||||
constrainedWidth = Math.min(constrainedWidth, _this.options.maxInitialWidthHint);
|
||||
}
|
||||
_this.updateWidth(el, constrainedWidth, true, false);
|
||||
});
|
||||
};
|
||||
ResizableTableColumns.prototype.constrainWidth = function (el, width) {
|
||||
var result = width;
|
||||
result = Math.max(result, this.options.minWidth || -Infinity);
|
||||
result = Math.min(result, this.options.maxWidth || +Infinity);
|
||||
return result;
|
||||
};
|
||||
ResizableTableColumns.prototype.createDragHandles = function () {
|
||||
var _this = this;
|
||||
var _a;
|
||||
if (this.dragHandlesContainer != null)
|
||||
throw 'Drag handlers already created. Call <destroyDragHandles> if you wish to recreate them';
|
||||
this.dragHandlesContainer = this.ownerDocument.createElement('div');
|
||||
(_a = this.wrapper) === null || _a === void 0 ? void 0 : _a.insertBefore(this.dragHandlesContainer, this.table);
|
||||
this.dragHandlesContainer.classList.add(ResizableConstants.classes.handleContainer);
|
||||
this.getResizableHeaders()
|
||||
.forEach(function () {
|
||||
var _a;
|
||||
var handler = _this.ownerDocument.createElement('div');
|
||||
handler.classList.add(ResizableConstants.classes.handle);
|
||||
(_a = _this.dragHandlesContainer) === null || _a === void 0 ? void 0 : _a.appendChild(handler);
|
||||
});
|
||||
ResizableConstants.events.pointerDown
|
||||
.forEach(function (evt, evtIdx) {
|
||||
var _a;
|
||||
(_a = _this.dragHandlesContainer) === null || _a === void 0 ? void 0 : _a.addEventListener(evt, _this.onPointerDownRef, false);
|
||||
});
|
||||
};
|
||||
ResizableTableColumns.prototype.destroyDragHandles = function () {
|
||||
var _this = this;
|
||||
var _a, _b;
|
||||
if (this.dragHandlesContainer !== null) {
|
||||
ResizableConstants.events.pointerDown
|
||||
.forEach(function (evt, evtIdx) {
|
||||
var _a;
|
||||
(_a = _this.dragHandlesContainer) === null || _a === void 0 ? void 0 : _a.removeEventListener(evt, _this.onPointerDownRef, false);
|
||||
});
|
||||
(_b = (_a = this.dragHandlesContainer) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(this.dragHandlesContainer);
|
||||
}
|
||||
};
|
||||
ResizableTableColumns.prototype.getDragHandlers = function () {
|
||||
var nodes = this.dragHandlesContainer == null
|
||||
? null
|
||||
: this.dragHandlesContainer.querySelectorAll(".".concat(ResizableConstants.classes.handle));
|
||||
return nodes
|
||||
? Array.prototype.slice.call(nodes).filter(function (el) { return el.nodeName === 'DIV'; })
|
||||
: new Array();
|
||||
};
|
||||
ResizableTableColumns.prototype.restoreColumnWidths = function () {
|
||||
if (!this.options.store)
|
||||
return;
|
||||
var tableId = ResizableTableColumns.generateTableId(this.table);
|
||||
if (tableId.length === 0)
|
||||
return;
|
||||
var data = this.options.store.get(tableId);
|
||||
if (!data)
|
||||
return;
|
||||
this.getResizableHeaders()
|
||||
.forEach(function (el) {
|
||||
var width = data.columns[ResizableTableColumns.generateColumnId(el)];
|
||||
if (typeof width !== 'undefined') {
|
||||
ResizableTableColumns.setWidth(el, width);
|
||||
}
|
||||
});
|
||||
if (typeof data.table !== 'undefined') {
|
||||
ResizableTableColumns.setWidth(this.table, data.table);
|
||||
}
|
||||
};
|
||||
ResizableTableColumns.prototype.checkTableWidth = function () {
|
||||
var _a;
|
||||
var wrapperWidth = this.wrapper.clientWidth;
|
||||
var tableWidth = this.table.offsetWidth;
|
||||
var difference = wrapperWidth - tableWidth;
|
||||
if (difference <= 0)
|
||||
return;
|
||||
var resizableWidth = 0;
|
||||
var addedWidth = 0;
|
||||
var headersDetails = [];
|
||||
this.tableHeaders
|
||||
.forEach(function (el, idx) {
|
||||
if (el.hasAttribute(ResizableConstants.attributes.dataResizable)) {
|
||||
var detail = {
|
||||
el: el,
|
||||
detail: el.offsetWidth
|
||||
};
|
||||
headersDetails.push(detail);
|
||||
resizableWidth += detail.detail;
|
||||
}
|
||||
});
|
||||
var leftToAdd = 0;
|
||||
var lastResizableCell = null;
|
||||
var currentDetail;
|
||||
while ((currentDetail = headersDetails.shift())) {
|
||||
leftToAdd = difference - addedWidth;
|
||||
lastResizableCell = currentDetail.el;
|
||||
var extraWidth = Math.floor((currentDetail.detail / resizableWidth) * difference);
|
||||
extraWidth = Math.min(extraWidth, leftToAdd);
|
||||
var newWidth = this.updateWidth(currentDetail.el, currentDetail.detail + extraWidth, false, true);
|
||||
addedWidth += (newWidth - currentDetail.detail);
|
||||
if (addedWidth >= difference)
|
||||
break;
|
||||
}
|
||||
leftToAdd = difference - addedWidth;
|
||||
if (leftToAdd > 0) {
|
||||
var lastCell = ((_a = headersDetails[0]) === null || _a === void 0 ? void 0 : _a.el) || lastResizableCell || this.tableHeaders[this.tableHeaders.length - 1];
|
||||
var lastCellWidth = lastCell.offsetWidth;
|
||||
this.updateWidth(lastCell, lastCellWidth, true, true);
|
||||
}
|
||||
ResizableTableColumns.setWidth(this.table, wrapperWidth);
|
||||
};
|
||||
ResizableTableColumns.prototype.syncHandleWidths = function () {
|
||||
var _this = this;
|
||||
var tableWidth = this.table.clientWidth;
|
||||
ResizableTableColumns.setWidth(this.dragHandlesContainer, tableWidth);
|
||||
this.dragHandlesContainer.style.minWidth = "".concat(tableWidth, "px");
|
||||
var headers = this.getResizableHeaders();
|
||||
this.getDragHandlers()
|
||||
.forEach(function (el, idx) {
|
||||
var height = (_this.options.resizeFromBody ? _this.table : _this.table.tHead).clientHeight;
|
||||
if (idx < headers.length) {
|
||||
var th = headers[idx];
|
||||
var left = th.offsetWidth;
|
||||
left += ResizableTableColumns.getOffset(th).left;
|
||||
left -= ResizableTableColumns.getOffset(_this.dragHandlesContainer).left;
|
||||
el.style.left = "".concat(left, "px");
|
||||
el.style.height = "".concat(height, "px");
|
||||
}
|
||||
});
|
||||
};
|
||||
ResizableTableColumns.prototype.getResizableHeaders = function () {
|
||||
return this.tableHeaders
|
||||
.filter(function (el, idx) {
|
||||
return el.hasAttribute(ResizableConstants.attributes.dataResizable);
|
||||
});
|
||||
};
|
||||
ResizableTableColumns.prototype.handlePointerDown = function (event) {
|
||||
this.handlePointerUp();
|
||||
var target = event ? event.target : null;
|
||||
if (target == null)
|
||||
return;
|
||||
if (target.nodeName !== 'DIV' || !target.classList.contains(ResizableConstants.classes.handle))
|
||||
return;
|
||||
if (typeof event.button === 'number' && event.button !== 0)
|
||||
return; // this is not a left click
|
||||
var dragHandler = target;
|
||||
var gripIndex = this.getDragHandlers().indexOf(dragHandler);
|
||||
var resizableHeaders = this.getResizableHeaders();
|
||||
if (gripIndex >= resizableHeaders.length)
|
||||
return;
|
||||
var millisecondsNow = (new Date()).getTime();
|
||||
var isDoubleClick = (millisecondsNow - this.lastPointerDown) < this.options.doubleClickDelay;
|
||||
var column = resizableHeaders[gripIndex];
|
||||
var columnWidth = column.offsetWidth;
|
||||
var widths = {
|
||||
column: columnWidth,
|
||||
table: this.table.offsetWidth
|
||||
};
|
||||
var eventData = new ResizableEventData(column, dragHandler);
|
||||
eventData.pointer = {
|
||||
x: ResizableTableColumns.getPointerX(event),
|
||||
isDoubleClick: isDoubleClick
|
||||
};
|
||||
eventData.originalWidths = widths;
|
||||
eventData.newWidths = widths;
|
||||
this.detachHandlers(); //make sure we do not have extra handlers
|
||||
this.attachHandlers();
|
||||
this.table.classList.add(ResizableConstants.classes.tableResizing);
|
||||
this.wrapper.classList.add(ResizableConstants.classes.tableResizing);
|
||||
dragHandler.classList.add(ResizableConstants.classes.columnResizing);
|
||||
column.classList.add(ResizableConstants.classes.columnResizing);
|
||||
this.lastPointerDown = millisecondsNow;
|
||||
this.eventData = eventData;
|
||||
var eventToDispatch = new CustomEvent(ResizableConstants.events.eventResizeStart, {
|
||||
detail: {
|
||||
column: column,
|
||||
columnWidth: columnWidth,
|
||||
table: this.table,
|
||||
tableWidth: this.table.clientWidth
|
||||
}
|
||||
});
|
||||
this.table.dispatchEvent(eventToDispatch);
|
||||
event.preventDefault();
|
||||
};
|
||||
ResizableTableColumns.prototype.handlePointerMove = function (event) {
|
||||
if (!this.eventData || !event)
|
||||
return;
|
||||
var difference = (ResizableTableColumns.getPointerX(event) || 0) - (this.eventData.pointer.x || 0);
|
||||
if (difference === 0) {
|
||||
return;
|
||||
}
|
||||
var tableWidth = this.eventData.originalWidths.table + difference;
|
||||
var columnWidth = this.constrainWidth(this.eventData.column, this.eventData.originalWidths.column + difference);
|
||||
ResizableTableColumns.setWidth(this.table, tableWidth);
|
||||
ResizableTableColumns.setWidth(this.eventData.column, columnWidth);
|
||||
this.eventData.newWidths = {
|
||||
column: columnWidth,
|
||||
table: tableWidth
|
||||
};
|
||||
var eventToDispatch = new CustomEvent(ResizableConstants.events.eventResize, {
|
||||
detail: {
|
||||
column: this.eventData.column,
|
||||
columnWidth: columnWidth,
|
||||
table: this.table,
|
||||
tableWidth: tableWidth
|
||||
}
|
||||
});
|
||||
this.table.dispatchEvent(eventToDispatch);
|
||||
};
|
||||
ResizableTableColumns.prototype.handlePointerUp = function () {
|
||||
this.detachHandlers();
|
||||
if (!this.eventData)
|
||||
return;
|
||||
if (this.eventData.pointer.isDoubleClick) {
|
||||
this.handleDoubleClick();
|
||||
}
|
||||
this.table.classList.remove(ResizableConstants.classes.tableResizing);
|
||||
this.wrapper.classList.remove(ResizableConstants.classes.tableResizing);
|
||||
this.eventData.dragHandler.classList.remove(ResizableConstants.classes.columnResizing);
|
||||
this.eventData.column.classList.remove(ResizableConstants.classes.columnResizing);
|
||||
this.checkTableWidth();
|
||||
this.syncHandleWidths();
|
||||
this.refreshWrapperStyle();
|
||||
this.saveColumnWidths();
|
||||
var widths = this.eventData.newWidths || this.eventData.originalWidths;
|
||||
var eventToDispatch = new CustomEvent(ResizableConstants.events.eventResizeStop, {
|
||||
detail: {
|
||||
column: this.eventData.column,
|
||||
columnWidth: widths.column,
|
||||
table: this.table,
|
||||
tableWidth: widths.table
|
||||
}
|
||||
});
|
||||
this.table.dispatchEvent(eventToDispatch);
|
||||
this.eventData = null;
|
||||
};
|
||||
ResizableTableColumns.prototype.handleDoubleClick = function () {
|
||||
if (!this.eventData || !this.eventData.column)
|
||||
return;
|
||||
var column = this.eventData.column;
|
||||
var colIndex = this.tableHeaders.indexOf(column);
|
||||
var maxWidth = 0;
|
||||
var indicesToSkip = [];
|
||||
this.tableHeaders
|
||||
.forEach(function (el, idx) {
|
||||
if (!el.hasAttribute(ResizableConstants.attributes.dataResizable)) {
|
||||
indicesToSkip.push(idx);
|
||||
}
|
||||
});
|
||||
var span = this.ownerDocument.createElement('span');
|
||||
span.style.position = 'absolute';
|
||||
span.style.left = '-99999px';
|
||||
span.style.top = '-99999px';
|
||||
span.style.visibility = 'hidden';
|
||||
this.ownerDocument.body.appendChild(span);
|
||||
var rows = this.table.querySelectorAll('tr');
|
||||
for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
|
||||
var element = rows[rowIndex];
|
||||
var cells = element.querySelectorAll('td, th');
|
||||
var currentIndex = 0;
|
||||
for (var cellIndex = 0; cellIndex < cells.length; cellIndex++) {
|
||||
var cell = cells[cellIndex];
|
||||
var colSpan = 1;
|
||||
if (cell.hasAttribute('colspan')) {
|
||||
var colSpanString = cell.getAttribute('colspan') || '1';
|
||||
var parsed = parseInt(colSpanString);
|
||||
if (!isNaN(parsed)) {
|
||||
colSpan = parsed;
|
||||
}
|
||||
else {
|
||||
colSpan = 1;
|
||||
}
|
||||
}
|
||||
if (indicesToSkip.indexOf(cellIndex) === -1
|
||||
&& colSpan === 1
|
||||
&& currentIndex === colIndex) {
|
||||
maxWidth = Math.max(maxWidth, ResizableTableColumns.getTextWidth(cell, span));
|
||||
break;
|
||||
}
|
||||
currentIndex += colSpan;
|
||||
}
|
||||
}
|
||||
this.ownerDocument.body.removeChild(span);
|
||||
var difference = maxWidth - column.offsetWidth;
|
||||
if (difference === 0) {
|
||||
return;
|
||||
}
|
||||
var tableWidth = this.eventData.originalWidths.table + difference;
|
||||
var columnWidth = this.constrainWidth(this.eventData.column, this.eventData.originalWidths.column + difference);
|
||||
ResizableTableColumns.setWidth(this.table, tableWidth);
|
||||
ResizableTableColumns.setWidth(this.eventData.column, columnWidth);
|
||||
this.eventData.newWidths = {
|
||||
column: columnWidth,
|
||||
table: tableWidth,
|
||||
};
|
||||
var eventToDispatch = new CustomEvent(ResizableConstants.events.eventResize, {
|
||||
detail: {
|
||||
column: this.eventData.column,
|
||||
columnWidth: columnWidth,
|
||||
table: this.table,
|
||||
tableWidth: tableWidth
|
||||
}
|
||||
});
|
||||
this.table.dispatchEvent(eventToDispatch);
|
||||
this.checkTableWidth();
|
||||
this.syncHandleWidths();
|
||||
this.saveColumnWidths();
|
||||
};
|
||||
ResizableTableColumns.prototype.attachHandlers = function () {
|
||||
var _this = this;
|
||||
ResizableConstants.events.pointerMove
|
||||
.forEach(function (evt, evtIdx) {
|
||||
_this.ownerDocument.addEventListener(evt, _this.onPointerMoveRef, false);
|
||||
});
|
||||
ResizableConstants.events.pointerUp
|
||||
.forEach(function (evt, evtIdx) {
|
||||
_this.ownerDocument.addEventListener(evt, _this.onPointerUpRef, false);
|
||||
});
|
||||
};
|
||||
ResizableTableColumns.prototype.detachHandlers = function () {
|
||||
var _this = this;
|
||||
ResizableConstants.events.pointerMove
|
||||
.forEach(function (evt, evtIdx) {
|
||||
_this.ownerDocument.removeEventListener(evt, _this.onPointerMoveRef, false);
|
||||
});
|
||||
ResizableConstants.events.pointerUp
|
||||
.forEach(function (evt, evtIdx) {
|
||||
_this.ownerDocument.removeEventListener(evt, _this.onPointerUpRef, false);
|
||||
});
|
||||
};
|
||||
ResizableTableColumns.prototype.refreshWrapperStyle = function () {
|
||||
if (this.wrapper == null)
|
||||
return;
|
||||
var original = this.wrapper.style.overflowX;
|
||||
this.wrapper.style.overflowX = 'hidden';
|
||||
this.wrapper.style.overflowX = original;
|
||||
};
|
||||
ResizableTableColumns.prototype.saveColumnWidths = function () {
|
||||
if (!this.options.store)
|
||||
return;
|
||||
var tableId = ResizableTableColumns.generateTableId(this.table);
|
||||
if (tableId.length === 0)
|
||||
return;
|
||||
var data = {
|
||||
table: this.table.offsetWidth,
|
||||
columns: {}
|
||||
};
|
||||
this.getResizableHeaders()
|
||||
.forEach(function (el) {
|
||||
data.columns[ResizableTableColumns.generateColumnId(el)] = el.offsetWidth;
|
||||
});
|
||||
this.options.store.set(tableId, data);
|
||||
};
|
||||
ResizableTableColumns.prototype.createHandlerReferences = function () {
|
||||
var _this = this;
|
||||
if (!this.onPointerDownRef) {
|
||||
this.onPointerDownRef = ResizableTableColumns.debounce(function (evt) {
|
||||
_this.handlePointerDown(evt);
|
||||
}, 100, true);
|
||||
}
|
||||
if (!this.onPointerMoveRef) {
|
||||
this.onPointerMoveRef = ResizableTableColumns.debounce(function (evt) {
|
||||
_this.handlePointerMove(evt);
|
||||
}, 5, false);
|
||||
}
|
||||
if (!this.onPointerUpRef) {
|
||||
this.onPointerUpRef = ResizableTableColumns.debounce(function (evt) {
|
||||
_this.handlePointerUp();
|
||||
}, 100, true);
|
||||
}
|
||||
};
|
||||
ResizableTableColumns.prototype.registerWindowResizeHandler = function () {
|
||||
var win = this.ownerDocument.defaultView;
|
||||
if (ResizableTableColumns.windowResizeHandlerRef)
|
||||
return;
|
||||
ResizableTableColumns.windowResizeHandlerRef = ResizableTableColumns.debounce(ResizableTableColumns.onWindowResize, 50, false);
|
||||
ResizableConstants.events.windowResize
|
||||
.forEach(function (evt, idx) {
|
||||
win === null || win === void 0 ? void 0 : win.addEventListener(evt, ResizableTableColumns.windowResizeHandlerRef, false);
|
||||
});
|
||||
};
|
||||
ResizableTableColumns.prototype.handleWindowResize = function () {
|
||||
this.checkTableWidth();
|
||||
this.syncHandleWidths();
|
||||
this.saveColumnWidths();
|
||||
};
|
||||
ResizableTableColumns.prototype.updateWidth = function (cell, suggestedWidth, skipConstrainCheck, skipTableResize) {
|
||||
var originalCellWidth = cell.offsetWidth;
|
||||
var columnWidth = skipConstrainCheck
|
||||
? suggestedWidth
|
||||
: this.constrainWidth(cell, suggestedWidth);
|
||||
ResizableTableColumns.setWidth(cell, columnWidth);
|
||||
if (!skipTableResize) {
|
||||
var difference = columnWidth - originalCellWidth;
|
||||
var tableWidth = this.table.offsetWidth + difference;
|
||||
ResizableTableColumns.setWidth(this.table, tableWidth);
|
||||
}
|
||||
return columnWidth;
|
||||
};
|
||||
ResizableTableColumns.onWindowResize = function (event) {
|
||||
var win = event ? event.target : null;
|
||||
if (win == null)
|
||||
return;
|
||||
var tables = win.document.querySelectorAll(".".concat(ResizableConstants.classes.table));
|
||||
for (var index = 0; index < tables.length; index++) {
|
||||
var table = tables[index];
|
||||
if (typeof table[ResizableConstants.dataPropertyName] !== 'object')
|
||||
continue;
|
||||
table[ResizableConstants.dataPropertyName].handleWindowResize();
|
||||
}
|
||||
};
|
||||
ResizableTableColumns.generateColumnId = function (el) {
|
||||
var columnId = (el.getAttribute(ResizableConstants.attributes.dataResizable) || '')
|
||||
.trim()
|
||||
.replace(/\./g, '_');
|
||||
return columnId;
|
||||
};
|
||||
ResizableTableColumns.generateTableId = function (table) {
|
||||
var tableId = (table.getAttribute(ResizableConstants.attributes.dataResizableTable) || '')
|
||||
.trim()
|
||||
.replace(/\./g, '_');
|
||||
return tableId.length
|
||||
? "rtc/".concat(tableId)
|
||||
: tableId;
|
||||
};
|
||||
ResizableTableColumns.setWidth = function (element, width) {
|
||||
var strWidth = width.toFixed(2);
|
||||
strWidth = width > 0 ? strWidth : '0';
|
||||
element.style.width = "".concat(strWidth, "px");
|
||||
};
|
||||
ResizableTableColumns.getInstanceId = function () {
|
||||
return ResizableTableColumns.instancesCount++;
|
||||
};
|
||||
ResizableTableColumns.getPointerX = function (event) {
|
||||
if (event.type.indexOf('touch') === 0) {
|
||||
var tEvent = event;
|
||||
if (tEvent.touches && tEvent.touches.length) {
|
||||
return tEvent.touches[0].pageX;
|
||||
}
|
||||
if (tEvent.changedTouches && tEvent.changedTouches.length) {
|
||||
return tEvent.changedTouches[0].pageX;
|
||||
}
|
||||
}
|
||||
return event.pageX;
|
||||
};
|
||||
ResizableTableColumns.getTextWidth = function (contentElement, measurementElement) {
|
||||
var _a, _b;
|
||||
if (!contentElement || !measurementElement)
|
||||
return 0;
|
||||
var text = ((_a = contentElement.textContent) === null || _a === void 0 ? void 0 : _a.trim().replace(/\s/g, ' ')) + ' '; //add extra space to ensure we are not add the `...`
|
||||
var styles = (_b = contentElement.ownerDocument.defaultView) === null || _b === void 0 ? void 0 : _b.getComputedStyle(contentElement);
|
||||
['fontFamily', 'fontSize', 'fontWeight', 'padding', 'border', 'boxSizing']
|
||||
.forEach(function (prop) {
|
||||
measurementElement.style[prop] = styles[prop];
|
||||
});
|
||||
measurementElement.innerHTML = text;
|
||||
return measurementElement.offsetWidth;
|
||||
};
|
||||
ResizableTableColumns.getOffset = function (el) {
|
||||
if (!el)
|
||||
return { top: 0, left: 0 };
|
||||
var rect = el.getBoundingClientRect();
|
||||
return {
|
||||
top: rect.top + el.ownerDocument.body.scrollTop,
|
||||
left: rect.left + el.ownerDocument.body.scrollLeft
|
||||
};
|
||||
};
|
||||
ResizableTableColumns.instancesCount = 0;
|
||||
ResizableTableColumns.windowResizeHandlerRef = null;
|
||||
ResizableTableColumns.debounce = function (func, wait, immediate) {
|
||||
var timeout = null;
|
||||
var debounced = function () {
|
||||
var args = [];
|
||||
for (var _i = 0; _i < arguments.length; _i++) {
|
||||
args[_i] = arguments[_i];
|
||||
}
|
||||
var later = function () {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(void 0, args);
|
||||
}
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
if (timeout) {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(void 0, args);
|
||||
}
|
||||
};
|
||||
return debounced;
|
||||
};
|
||||
return ResizableTableColumns;
|
||||
}());
|
||||
|
||||
exports.PointerData = PointerData;
|
||||
exports.ResizableConstants = ResizableConstants;
|
||||
exports.ResizableEventData = ResizableEventData;
|
||||
exports.ResizableOptions = ResizableOptions;
|
||||
exports.ResizableTableColumns = ResizableTableColumns;
|
||||
exports.Utilities = Utilities;
|
||||
exports.UtilitiesDOM = UtilitiesDOM;
|
||||
exports.WidthsData = WidthsData;
|
||||
|
||||
}));
|
||||
//# sourceMappingURL=index.js.map
|
||||
Loading…
Reference in New Issue
Block a user