a
This commit is contained in:
Orkun Tunç Bilgiç
parent
0bac0147b5
commit
f6a33db42c
1036
plugin_files/dom-autoscroller.js
Normal file
1036
plugin_files/dom-autoscroller.js
Normal file
File diff suppressed because it is too large
Load Diff
1
plugin_files/dom-autoscroller.min.js
vendored
Normal file
1
plugin_files/dom-autoscroller.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
22
plugin_files/dragula.css
Normal file
22
plugin_files/dragula.css
Normal file
@ -0,0 +1,22 @@
|
||||
.gu-mirror {
|
||||
position: fixed !important;
|
||||
margin: 0 !important;
|
||||
z-index: 9999 !important;
|
||||
opacity: 0.8;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
|
||||
filter: alpha(opacity=80);
|
||||
}
|
||||
.gu-hide {
|
||||
display: none !important;
|
||||
}
|
||||
.gu-unselectable {
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
.gu-transit {
|
||||
opacity: 0.2;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
|
||||
filter: alpha(opacity=20);
|
||||
}
|
||||
1181
plugin_files/dragula.js
Normal file
1181
plugin_files/dragula.js
Normal file
File diff suppressed because one or more lines are too long
1
plugin_files/dragula.min.css
vendored
Normal file
1
plugin_files/dragula.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.gu-mirror {position: fixed !important;margin: 0 !important;z-index: 9999 !important;opacity: 0.8;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter: alpha(opacity=80);}.gu-hide {display: none !important;}.gu-unselectable {-webkit-user-select: none !important;-moz-user-select: none !important;-ms-user-select: none !important;user-select: none !important;}.gu-transit {opacity: 0.2;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter: alpha(opacity=20);}
|
||||
1
plugin_files/dragula.min.js
vendored
Normal file
1
plugin_files/dragula.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
147
plugin_files/responsive-grid.css
Normal file
147
plugin_files/responsive-grid.css
Normal file
@ -0,0 +1,147 @@
|
||||
.s-g-container {
|
||||
width: 98%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.s-g-row {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.s-g-row [class^="s-g-col"] {
|
||||
float: left;
|
||||
margin: 0.5rem 2%;
|
||||
min-height: 0.125rem;
|
||||
}
|
||||
.s-g-col-1,
|
||||
.s-g-col-2,
|
||||
.s-g-col-3,
|
||||
.s-g-col-4,
|
||||
.s-g-col-5,
|
||||
.s-g-col-6,
|
||||
.s-g-col-7,
|
||||
.s-g-col-8,
|
||||
.s-g-col-9,
|
||||
.s-g-col-10,
|
||||
.s-g-col-11,
|
||||
.s-g-col-12 {
|
||||
width: 96%;
|
||||
}
|
||||
.s-g-col-1-sm {
|
||||
width: 4.33%;
|
||||
}
|
||||
.s-g-col-2-sm {
|
||||
width: 12.66%;
|
||||
}
|
||||
.s-g-col-3-sm {
|
||||
width: 21%;
|
||||
}
|
||||
.s-g-col-4-sm {
|
||||
width: 29.33%;
|
||||
}
|
||||
.s-g-col-5-sm {
|
||||
width: 37.66%;
|
||||
}
|
||||
.s-g-col-6-sm {
|
||||
width: 46%;
|
||||
}
|
||||
.s-g-col-7-sm {
|
||||
width: 54.33%;
|
||||
}
|
||||
.s-g-col-8-sm {
|
||||
width: 62.66%;
|
||||
}
|
||||
.s-g-col-9-sm {
|
||||
width: 71%;
|
||||
}
|
||||
.s-g-col-10-sm {
|
||||
width: 79.33%;
|
||||
}
|
||||
.s-g-col-11-sm {
|
||||
width: 87.66%;
|
||||
}
|
||||
.s-g-col-12-sm {
|
||||
width: 96%;
|
||||
}
|
||||
.s-g-row::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.hidden-sm {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (min-width: 33.75em) {
|
||||
/* 540px */
|
||||
.s-g-container {
|
||||
width: 98%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 60em) {
|
||||
/* was 45em */
|
||||
/* 720px */
|
||||
.s-g-col-1,
|
||||
.s-g-col-2,
|
||||
.s-g-col-3,
|
||||
.s-g-col-4,
|
||||
.s-g-col-5,
|
||||
.s-g-col-6 {
|
||||
width: 46%;
|
||||
}
|
||||
.s-g-col-7,
|
||||
.s-g-col-8,
|
||||
.s-g-col-9,
|
||||
.s-g-col-10,
|
||||
.s-g-col-11,
|
||||
.s-g-col-12 {
|
||||
width: 96%;
|
||||
}
|
||||
.hidden-sm {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 66em) {
|
||||
/* was 60em */
|
||||
/* 960px */
|
||||
.s-g-container {
|
||||
width: 98%;
|
||||
}
|
||||
.s-g-col-1 {
|
||||
width: 4.33%;
|
||||
}
|
||||
.s-g-col-2 {
|
||||
width: 12.66%;
|
||||
}
|
||||
.s-g-col-3 {
|
||||
width: 21%;
|
||||
}
|
||||
.s-g-col-4 {
|
||||
width: 29.33%;
|
||||
}
|
||||
.s-g-col-5 {
|
||||
width: 37.66%;
|
||||
}
|
||||
.s-g-col-6 {
|
||||
width: 46%;
|
||||
}
|
||||
.s-g-col-7 {
|
||||
width: 54.33%;
|
||||
}
|
||||
.s-g-col-8 {
|
||||
width: 62.66%;
|
||||
}
|
||||
.s-g-col-9 {
|
||||
width: 71%;
|
||||
}
|
||||
.s-g-col-10 {
|
||||
width: 79.33%;
|
||||
}
|
||||
.s-g-col-11 {
|
||||
width: 87.66%;
|
||||
}
|
||||
.s-g-col-12 {
|
||||
width: 96%;
|
||||
}
|
||||
.hidden-sm {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
22
plugin_files/responsive-grid.min.css
vendored
Normal file
22
plugin_files/responsive-grid.min.css
vendored
Normal file
@ -0,0 +1,22 @@
|
||||
.s-g-container {width: 98%;margin-left: auto;margin-right: auto;}.s-g-row {position: relative;width: 100%;}.s-g-row [class^="s-g-col"] {float: left;margin: 0.5rem 2%;min-height: 0.125rem;}.s-g-col-1,
|
||||
.s-g-col-2,
|
||||
.s-g-col-3,
|
||||
.s-g-col-4,
|
||||
.s-g-col-5,
|
||||
.s-g-col-6,
|
||||
.s-g-col-7,
|
||||
.s-g-col-8,
|
||||
.s-g-col-9,
|
||||
.s-g-col-10,
|
||||
.s-g-col-11,
|
||||
.s-g-col-12 {width: 96%;}.s-g-col-1-sm {width: 4.33%;}.s-g-col-2-sm {width: 12.66%;}.s-g-col-3-sm {width: 21%;}.s-g-col-4-sm {width: 29.33%;}.s-g-col-5-sm {width: 37.66%;}.s-g-col-6-sm {width: 46%;}.s-g-col-7-sm {width: 54.33%;}.s-g-col-8-sm {width: 62.66%;}.s-g-col-9-sm {width: 71%;}.s-g-col-10-sm {width: 79.33%;}.s-g-col-11-sm {width: 87.66%;}.s-g-col-12-sm {width: 96%;}.s-g-row::after {content: "";display: table;clear: both;}.hidden-sm {display: none;}@media only screen and (min-width: 33.75em) { .s-g-container {width: 98%;}}@media only screen and (min-width: 60em) {.s-g-col-1,
|
||||
.s-g-col-2,
|
||||
.s-g-col-3,
|
||||
.s-g-col-4,
|
||||
.s-g-col-5,
|
||||
.s-g-col-6 {width: 46%;}.s-g-col-7,
|
||||
.s-g-col-8,
|
||||
.s-g-col-9,
|
||||
.s-g-col-10,
|
||||
.s-g-col-11,
|
||||
.s-g-col-12 {width: 96%;}.hidden-sm {display: block;}}@media only screen and (min-width: 66em) {.s-g-container {width: 98%;}.s-g-col-1 {width: 4.33%;}.s-g-col-2 {width: 12.66%;}.s-g-col-3 {width: 21%;}.s-g-col-4 {width: 29.33%;}.s-g-col-5 {width: 37.66%;}.s-g-col-6 {width: 46%;}.s-g-col-7 {width: 54.33%;}.s-g-col-8 {width: 62.66%;}.s-g-col-9 {width: 71%;}.s-g-col-10 {width: 79.33%;}.s-g-col-11 {width: 87.66%;}.s-g-col-12 {width: 96%;}.hidden-sm {display: block;}}
|
||||
517
plugin_files/script.js
Normal file
517
plugin_files/script.js
Normal file
@ -0,0 +1,517 @@
|
||||
apex.jQuery( apex.gPageContext$ ).on( "apexreadyend", function( e ) {
|
||||
$('.s-g-container').each(function(){
|
||||
kanban.initialize('#'+this.id,this.getAttribute('dropitemajax'),this.getAttribute('dropgroupajax'))
|
||||
});
|
||||
} );
|
||||
|
||||
|
||||
var kanban = (function ($) {
|
||||
var kanbancount = $('.s-g-container').length
|
||||
var initialized = false;
|
||||
/* get model */
|
||||
|
||||
return {
|
||||
initialize: function ( parentID,dropitemajax,dropgroupajax) {
|
||||
|
||||
var drakeItems = null;
|
||||
var drakeGroups = null;
|
||||
var lastItemsData = [];
|
||||
kanbancount -= 1;
|
||||
|
||||
if (initialized){
|
||||
return;
|
||||
}
|
||||
initialized = kanbancount == 0 ? true:false;
|
||||
var parent = $( parentID);
|
||||
let tc$ = parent.find('.kb-group-container').parent();
|
||||
let viewInstance = tc$.tableModelView('instance');
|
||||
let model = tc$.tableModelView('getModel');
|
||||
|
||||
//model.setOption('editable',true)
|
||||
|
||||
function relocate(itemsToFind,sourceItemIndex){
|
||||
parent = $( parentID);
|
||||
$(parentID).find(itemsToFind?itemsToFind:'[relocationneed]').each(function(){
|
||||
var $itemContainer = $(this);
|
||||
|
||||
var colId = $itemContainer.attr('datastatus');
|
||||
var dataid = $itemContainer.attr('data-id');
|
||||
|
||||
var groupid = null;
|
||||
|
||||
|
||||
if(colId){
|
||||
var $group;
|
||||
/* Not needed because model.setRecord using instead of overwrite behaviour */
|
||||
/*var cardData = lastItemsData.filter(function(e) {
|
||||
return e.id == dataid
|
||||
});
|
||||
if(cardData?.length > 0 ){
|
||||
colId = cardData[0].status;
|
||||
groupid = cardData[0].groupid;
|
||||
$group = parent.find('[data-group-id="'+groupid+'"]');
|
||||
}
|
||||
else{
|
||||
$group = $itemContainer.closest('.reportgroup');
|
||||
} */
|
||||
|
||||
var dataGroupId = model.getRecordValue(dataid,'APEX$CONTROL_BREAK_VALUE')
|
||||
$group = parent.find('[data-group-id='+dataGroupId+']')
|
||||
var $targetRegion = ($group && $group.length)
|
||||
? $group.find('.kb-item-container[datastatus="' + colId + '"]')
|
||||
: parent.find('.kb-item-container[datastatus="' + colId + '"]');
|
||||
|
||||
if($targetRegion.length){
|
||||
|
||||
var $children = $targetRegion.children();
|
||||
if ($children.length > sourceItemIndex) {
|
||||
$itemContainer.insertBefore($children.eq(sourceItemIndex));
|
||||
} else {
|
||||
$targetRegion.append($itemContainer);
|
||||
}
|
||||
|
||||
|
||||
|
||||
var cardicon = $(parentID).find('[parentheaderid="'+colId+'"]').attr('card-icon');
|
||||
var cardcolor = $(parentID).find('[parentheaderid="'+colId+'"]').attr('card-icon-color');
|
||||
|
||||
var $icon = $(this).find('.card-header > i');
|
||||
|
||||
if (!$icon.hasClass('specific_icon')) {
|
||||
$icon.addClass(cardicon);
|
||||
}
|
||||
|
||||
var $cardHeader = $(this).find('.card-header');
|
||||
|
||||
if (!$cardHeader.hasClass('specific_color')) {
|
||||
$cardHeader.css('background', cardcolor);
|
||||
}
|
||||
|
||||
$itemContainer.removeAttr('relocationneed')
|
||||
$itemContainer.css('display', '');
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/* model.subscribe( {
|
||||
onChange: function( changeType, change ) {
|
||||
console.log(changeType,change)
|
||||
relocate()
|
||||
},
|
||||
} ); */
|
||||
|
||||
relocate();
|
||||
|
||||
addDragulaToItems();
|
||||
addDragulaToGroups();
|
||||
$(parentID).on( "tablemodelviewpagechange", function( event, data ) {
|
||||
relocate();
|
||||
if (drakeItems) {
|
||||
drakeItems.destroy();
|
||||
}
|
||||
if (drakeGroups) {
|
||||
drakeGroups.destroy();
|
||||
}
|
||||
addDragulaToItems();
|
||||
addDragulaToGroups();
|
||||
|
||||
} );
|
||||
|
||||
function addDragulaToItems() {
|
||||
|
||||
var sourceItemIndex = 0;
|
||||
var sourceItemSibling = null;
|
||||
drakeItems = dragula($(parent.find('.kb-item-container')).toArray(), {
|
||||
direction: 'vertical',
|
||||
revertOnSpill: true,
|
||||
accepts: function (el, target, source, sibling) {
|
||||
//if (configJSON.allowDragItemsBetweenGroups) {
|
||||
return true;
|
||||
//}
|
||||
return $(source).closest('.kb-row').attr("data-group-id") == $(target).closest('.kb-row').attr("data-group-id");
|
||||
}
|
||||
});
|
||||
$(parent).find('.kb-items').each(function() {
|
||||
var dataId = $(this).attr('data-id');
|
||||
var status = $(this).attr('datastatus');
|
||||
var groupid = $(this).closest('.reportgroup').attr('data-group-id');
|
||||
// If id not exist in lastItemsData then add
|
||||
if (dataId && !lastItemsData?.some(item => item.id === dataId)) {
|
||||
lastItemsData.push({
|
||||
"id": dataId,
|
||||
"status": status,
|
||||
"groupid":groupid
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var containers = Array.from(document.querySelectorAll('.kb-item-container'));
|
||||
var scroll = autoScroll(
|
||||
[window].concat(containers),
|
||||
{
|
||||
maxSpeed: 15,
|
||||
margin: 150,
|
||||
pixels: 7,
|
||||
scrollWhenOutside: true,
|
||||
autoScroll: function(){
|
||||
return this.down && drakeItems.dragging;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/*
|
||||
On mobile this prevents the default page scrolling while dragging an item.
|
||||
https://github.com/bevacqua/dragula/issues/487
|
||||
*/
|
||||
parent.find(".kb-group-container").on('click', '.kb-collapsable', function(event) {
|
||||
console.log($(this).parent().find(".card-footer"))
|
||||
toggleGroup($(this).parent(), true);
|
||||
});
|
||||
parent.find('.kb-item-container').on('touchmove', '.kb-items', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
drakeItems.on("drag", function (el, source) {
|
||||
var _el = $(el);
|
||||
var _source = $(source);
|
||||
|
||||
sourceItemIndex = _el.index();
|
||||
var next = _el.next();
|
||||
sourceItemSibling = next.length > 0 ? $(next[0]) : null;
|
||||
|
||||
var cardData = lastItemsData.filter(function(e) {
|
||||
|
||||
return e.id == _el.attr("data-id")
|
||||
});
|
||||
|
||||
if(cardData.length == 0){
|
||||
apex.message.clearErrors();
|
||||
apex.message.showErrors( [
|
||||
{
|
||||
type: "error",
|
||||
location: [ "page"],
|
||||
message: apex.lang.getMessage('SYSTEM_MANIPULATION_DETECTED'),
|
||||
unsafe: false
|
||||
}
|
||||
] );
|
||||
$(parent[0]).remove();
|
||||
return;
|
||||
}
|
||||
|
||||
var dragData = {
|
||||
"itemId": _el.attr("data-id"),
|
||||
"sourceGroupId": _source.closest('.kb-row').attr("data-group-id"),
|
||||
"sourceColumnId": _source.attr("datastatus"),
|
||||
"sourceItemIndex": sourceItemIndex
|
||||
};
|
||||
parent.trigger('kanbandrag', [dragData]);
|
||||
});
|
||||
drakeItems.on("drop", function (el, target, source, sibling) {
|
||||
var _el = $(el);
|
||||
var _target = $(target);
|
||||
var _source = $(source);
|
||||
|
||||
var dropData = {
|
||||
"itemId": _el.attr("data-id"),
|
||||
"sourceGroupId": _source.closest('.kb-row').attr("data-group-id"),
|
||||
"sourceColumnId": _source.attr("datastatus"),
|
||||
"sourceItemIndex": sourceItemIndex,
|
||||
"targetGroupId": _target.closest('.kb-row').attr("data-group-id"),
|
||||
"targetColumnId": _target.attr("datastatus"),
|
||||
"targetItemIndex": _el.index()
|
||||
};
|
||||
|
||||
var cardData = lastItemsData.filter(function(e) {
|
||||
return e.id == _el.attr("data-id")
|
||||
});
|
||||
|
||||
if(cardData.length == 0){
|
||||
apex.message.clearErrors();
|
||||
apex.message.showErrors( [
|
||||
{
|
||||
type: "error",
|
||||
location: [ "page"],
|
||||
message: apex.lang.getMessage('SYSTEM_MANIPULATION_DETECTED'),
|
||||
unsafe: false
|
||||
}
|
||||
] );
|
||||
$(parent[0]).remove();
|
||||
return;
|
||||
}
|
||||
|
||||
/* console.log("moved item " +
|
||||
dropData.itemId + " from " +
|
||||
dropData.sourceGroupId + "/" +
|
||||
dropData.sourceColumnId + "/" +
|
||||
dropData.sourceItemIndex + " to " +
|
||||
dropData.targetGroupId + "/" +
|
||||
dropData.targetColumnId + "/" +
|
||||
dropData.targetItemIndex
|
||||
); */
|
||||
if(dropitemajax){
|
||||
try {
|
||||
apex.server.process(dropitemajax,
|
||||
{
|
||||
x01: dropData.itemId,
|
||||
x02: dropData.sourceGroupId,
|
||||
x03: dropData.sourceColumnId,
|
||||
x04: dropData.sourceItemIndex,
|
||||
x05: dropData.targetGroupId,
|
||||
x06: dropData.targetColumnId,
|
||||
x07: dropData.targetItemIndex
|
||||
}, {
|
||||
success: function (d) {
|
||||
if(d.success){
|
||||
parent.trigger('kanbanafterdrop', [dropData]);
|
||||
}
|
||||
else{
|
||||
/* if (sourceItemSibling) {
|
||||
_el.insertBefore(sourceItemSibling);
|
||||
} else {
|
||||
_source.append(_el);
|
||||
} */
|
||||
|
||||
updateCardHeader(_el, dropData,true);
|
||||
relocate('[data-id='+dropData.itemId+']',sourceItemIndex);
|
||||
dropData.sqlcode = d.sqlcode;
|
||||
parent.trigger('kanbandroperror', [dropData]);
|
||||
}
|
||||
/* model.addChangesToSaveRequest(model.getChanges());
|
||||
model.save(); */
|
||||
},
|
||||
error: function (d) {
|
||||
/* if (sourceItemSibling) {
|
||||
_el.insertBefore(sourceItemSibling);
|
||||
} else {
|
||||
_source.append(_el);
|
||||
} */
|
||||
updateCardHeader(_source, dropData,true);
|
||||
relocate('[data-id='+dropData.itemId+']',sourceItemIndex);
|
||||
parent.trigger('kanbandroperror', [dropData]);
|
||||
},
|
||||
dataType: "json"
|
||||
});
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
|
||||
updateCardHeader(_el, dropData);
|
||||
|
||||
parent.trigger('kanbandrop', [dropData]);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
function updateCardHeader(_card,dropData,err) {
|
||||
|
||||
var new_groupid = dropData.targetGroupId;
|
||||
var sourceGroupId = dropData.sourceGroupId;
|
||||
var cardid = dropData.itemId;
|
||||
|
||||
var groupid
|
||||
var new_status;
|
||||
|
||||
if (err){
|
||||
new_status = dropData.sourceColumnId;
|
||||
groupid = dropData.sourceGroupId;
|
||||
} else{
|
||||
groupid = dropData.targetGroupId;
|
||||
new_status = dropData.targetColumnId;
|
||||
}
|
||||
|
||||
var cardicon = $(parentID).find('[parentheaderid="'+new_status+'"]').attr('card-icon');
|
||||
var cardcolor = $(parentID).find('[parentheaderid="'+new_status+'"]').attr('card-icon-color');
|
||||
var $cardHeader = _card.find('.card-header');
|
||||
var $iconElement = $cardHeader.find('i');
|
||||
|
||||
_card.attr('datastatus', new_status);
|
||||
|
||||
if (!$iconElement.hasClass('specific_icon')) {
|
||||
$iconElement.attr('class', '');
|
||||
$iconElement.addClass('fa ' + cardicon);
|
||||
}
|
||||
|
||||
if (!$cardHeader.hasClass('specific_color')) {
|
||||
$cardHeader.css('background', cardcolor);
|
||||
}
|
||||
|
||||
_card.removeClass('gu-transit');
|
||||
_card.attr('relocationneed','')
|
||||
var cardid = dropData.itemId;
|
||||
var modelnewvalue = _card[0].outerHTML;
|
||||
|
||||
/* Update model in order to keep changes for pagination changes.
|
||||
Also, if ajax defined and user trying to refresh the page before saving finished,
|
||||
then user gets page unsaved browser warning as default apex behaviour.
|
||||
*/
|
||||
|
||||
model.setOption('editable',true)
|
||||
model.setRecordValue(cardid,'APEX$ROW_CONTENT',modelnewvalue);
|
||||
sourceGroupId != new_groupid?
|
||||
model.setRecordValue(cardid,'APEX$CONTROL_BREAK_VALUE',groupid):null;
|
||||
model.setOption('editable',false)
|
||||
model.clearChanges()
|
||||
|
||||
//console.log(model.getChanges())
|
||||
//console.log(model.getRecord(cardid))
|
||||
|
||||
|
||||
lastItemsData.forEach(function(e) {
|
||||
if (e.id == cardid) {
|
||||
e.status = new_status; // example "IN_PROGRESS"
|
||||
e.groupid = new_groupid;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
function addDragulaToGroups() {
|
||||
|
||||
var sourceItemIndex = 0;
|
||||
var sourceItemSibling = null;
|
||||
|
||||
drakeGroups = dragula($(parent.find('.kb-group-container')).toArray(), {
|
||||
direction: 'vertical',
|
||||
revertOnSpill: true,
|
||||
moves: function (el, container, handle) {
|
||||
var groupcard = $(handle).closest('.kb-group-card');
|
||||
return groupcard.length > 0;
|
||||
}
|
||||
});
|
||||
|
||||
var containers = Array.from(document.querySelectorAll('.kb-group-container'));
|
||||
var scroll = autoScroll(
|
||||
[window].concat(containers),
|
||||
{
|
||||
maxSpeed: 15,
|
||||
margin: 150,
|
||||
pixels: 7,
|
||||
scrollWhenOutside: true,
|
||||
autoScroll: function(){
|
||||
return this.down && drakeGroups.dragging;
|
||||
}
|
||||
}
|
||||
);
|
||||
/*
|
||||
On mobile this prevents the default page scrolling while dragging an item.
|
||||
https://github.com/bevacqua/dragula/issues/487
|
||||
*/
|
||||
$('.kb-group-region > .kb-card').each(function (index, card) {
|
||||
/* $(card).addClass("kb-card-draggable"); */
|
||||
card.addEventListener('touchmove', function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
drakeGroups.on("drag", function (el, source) {
|
||||
var _el = $(el);
|
||||
sourceItemIndex = _el.index();
|
||||
var next = _el.next();
|
||||
sourceItemSibling = next.length > 0 ? $(next[0]) : null;
|
||||
|
||||
var dragData = {
|
||||
"groupId": _el.attr("data-group-id"),
|
||||
"sourceGroupIndex": sourceItemIndex
|
||||
};
|
||||
|
||||
/*
|
||||
console.log("drag group " +
|
||||
dragData.groupId + " from " +
|
||||
dragData.sourceGroupIndex
|
||||
);
|
||||
*/
|
||||
|
||||
parent.trigger('kanbandraggroup', [dragData]);
|
||||
});
|
||||
drakeGroups.on("drop", function (el, target, source, sibling) {
|
||||
var _el = $(el);
|
||||
var _target = $(target);
|
||||
var _source = $(source);
|
||||
|
||||
var dropData = {
|
||||
"groupId": _el.attr("data-group-id"),
|
||||
"sourceGroupIndex": sourceItemIndex,
|
||||
"targetGroupIndex": _el.index()
|
||||
};
|
||||
|
||||
/*
|
||||
console.log("moved group " +
|
||||
dropData.groupId + " from " +
|
||||
dropData.sourceGroupIndex + " to " +
|
||||
dropData.targetGroupIndex
|
||||
);
|
||||
*/
|
||||
if(dropgroupajax){
|
||||
try {
|
||||
apex.server.process(dropgroupajax,
|
||||
{
|
||||
x01: dropData.groupId,
|
||||
x02: dropData.sourceGroupIndex,
|
||||
x03: dropData.targetGroupIndex
|
||||
}, {
|
||||
success: function (d) {
|
||||
/*console.log(d);*/
|
||||
if(!d.success){
|
||||
if (sourceItemSibling) {
|
||||
_el.insertBefore(sourceItemSibling);
|
||||
} else {
|
||||
_source.append(_el);
|
||||
}
|
||||
//console.error(d.responseText);
|
||||
dropData.sqlcode = d.sqlcode;
|
||||
parent.trigger('kanbandropgrouperror', [dropData]);
|
||||
}
|
||||
else{
|
||||
parent.trigger('kanbanafterdropgroup', [dropData]);
|
||||
}
|
||||
},
|
||||
error: function (d) {
|
||||
/* move item back to last known position */
|
||||
if (sourceItemSibling) {
|
||||
_el.insertBefore(sourceItemSibling);
|
||||
} else {
|
||||
_source.append(_el);
|
||||
}
|
||||
parent.trigger('kanbandropgrouperror', [dropData]);
|
||||
},
|
||||
dataType: "json"
|
||||
});
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
parent.trigger('kanbandropgroup', [dropData]);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* parent.find(".kb-group-card > .kb-collapsable").click(function () {
|
||||
console.log(this)
|
||||
toggleGroup(this, true);
|
||||
}); */
|
||||
|
||||
function toggleGroup(groupRow, triggerEvent) {
|
||||
groupRow.find(".kb-collapsable").toggle();
|
||||
groupRow.find(".card-footer").toggle();
|
||||
groupRow.parent().parent().find(".kb-item-region").toggle();
|
||||
var group = groupRow.parent();
|
||||
group.toggleClass("kb-collapsed");
|
||||
|
||||
if (triggerEvent) {
|
||||
var collapsedData = {
|
||||
"groupId": groupRow.attr("data-group-id"),
|
||||
"collapsed": group.hasClass("kb-collapsed")
|
||||
};
|
||||
parent.trigger('kanbangroupcollapsed', [collapsedData]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})(apex.jQuery);
|
||||
1
plugin_files/script.min.js
vendored
Normal file
1
plugin_files/script.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
331
plugin_files/style.css
Normal file
331
plugin_files/style.css
Normal file
@ -0,0 +1,331 @@
|
||||
.ct-loader {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.kb-col {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
border-radius: 5px;
|
||||
border: 3px solid var(--ut-component-highlight-background-color);
|
||||
}
|
||||
|
||||
.kb-col-content {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.kb-col-header {}
|
||||
|
||||
.kb-col-header-content {
|
||||
border-radius: 5px;
|
||||
border-top: 5px solid #AAA;
|
||||
height: 30px;
|
||||
margin: 5px 5px 0px 5px;
|
||||
}
|
||||
|
||||
.kb-col-header-content .title {
|
||||
position: relative;
|
||||
left: 15px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.card-title{
|
||||
/* text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 75px; */
|
||||
}
|
||||
|
||||
.kb-col-inner-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.kb-col-inner-header .title {
|
||||
position: relative;
|
||||
font-size: 1.3em;
|
||||
margin: 5px 10px 0px 10px;
|
||||
}
|
||||
|
||||
.kb-row {
|
||||
display: -ms-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.kb-item-region {
|
||||
background: var(--ut-component-background-color);
|
||||
min-height: 160px;
|
||||
}
|
||||
|
||||
.kb-group-region {}
|
||||
|
||||
.kb-card {
|
||||
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
||||
/* box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.44); */
|
||||
border-radius: 1px;
|
||||
/* color: rgba(0, 0, 0, 0.87); */
|
||||
transition: all 0.4s ease;
|
||||
|
||||
/* background: var(--ut-component-badge-background-color); */
|
||||
background-color:var(--ut-component-inner-border-color);
|
||||
box-shadow:var(--ut-shadow-sm);
|
||||
margin: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.kb-card-draggable {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.kb-card:hover {
|
||||
background: var(--ut-component-highlight-background-color);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.kb-card .card-header {
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 6px 0px 6px 6px;
|
||||
box-shadow: 0 12px 20px -10px rgba(230, 230, 230, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(230, 230, 230, 0.2);
|
||||
transition: all 1.0s ease;
|
||||
}
|
||||
|
||||
.kb-card .card-header i {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: white;
|
||||
transition: all 1.0s ease;
|
||||
}
|
||||
|
||||
.kb-card .card-content {
|
||||
text-align: left;
|
||||
padding: 0 6px;
|
||||
overflow: hidden;
|
||||
min-height: 40px;
|
||||
/* display: table; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* overflow-wrap: anywhere; */
|
||||
}
|
||||
|
||||
.kb-card .title {
|
||||
font-size: 1em;
|
||||
/* display: table-cell; */
|
||||
vertical-align: middle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow-wrap: anywhere;
|
||||
|
||||
}
|
||||
|
||||
.kb-card .card-footer {
|
||||
margin: 0 20px 6px;
|
||||
padding-top: 3px;
|
||||
border-top: 1px solid #eeeeee;
|
||||
color: var(--ut-component-text-muted-color);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.kb-card .card-footer > div {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.kb-new-item-region {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.kb-item-container {
|
||||
height: 100%;
|
||||
min-height: 10px;
|
||||
padding: 5px;
|
||||
max-height: 520px;
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
|
||||
.kb-item-container .kb-card {
|
||||
float: left;
|
||||
margin: 5px 5px;
|
||||
min-height: 0.125rem;
|
||||
width: calc(100% - 10px);
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.kb-item-container-with-new-card {
|
||||
height: calc(100% - 40px);
|
||||
|
||||
}
|
||||
|
||||
.kb-new-card {
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 3px 10px 10px 10px;
|
||||
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
background: #55c555;
|
||||
}
|
||||
|
||||
.kb-new-card:hover {
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.kb-new-card i {
|
||||
font-size: 18px;
|
||||
line-height: 28px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.kb-group-region .card-header {
|
||||
background: #39a6da;
|
||||
}
|
||||
|
||||
.kb-collapsable {
|
||||
float: left;
|
||||
text-align: center;
|
||||
margin: 6px 1px 6px 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.kb-collapsable i {
|
||||
font-size: 15px;
|
||||
line-height: 28px;
|
||||
width: 18px;
|
||||
/*height: 28px;*/
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.kb-collapsable:hover {
|
||||
margin: 5px 0px 5px 6px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.kb-collapsed {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/*
|
||||
@media only screen and (max-width: 1279px) {
|
||||
|
||||
.kb-item-region,
|
||||
.kb-group-region,
|
||||
.kb-col-header {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.kb-card {
|
||||
max-width: none !important;
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.kb-row {
|
||||
display: -ms-inline-box;
|
||||
display: -webkit-inline-box;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.kb-col-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.kb-item-region,
|
||||
.kb-group-region,
|
||||
.kb-col-header {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* .kb-card {
|
||||
max-width: 200px !important;
|
||||
} */
|
||||
|
||||
.kb-item-container {
|
||||
height: 100%;
|
||||
min-height: 10px;
|
||||
padding: 5px;
|
||||
max-height: 320px;
|
||||
overflow: auto;
|
||||
|
||||
}
|
||||
|
||||
.kb-item-region {
|
||||
display: -ms-flex;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.kb-col-content {
|
||||
border-radius: 5px;
|
||||
border-left: 5px solid #AAA;
|
||||
}
|
||||
|
||||
.kb-col-inner-header {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.kb-group-region {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.kb-group-region > div {
|
||||
margin: 3px !important;
|
||||
width: calc(100% - 6px);
|
||||
border-radius: 5px;
|
||||
/* border-top: 5px solid #aaa;
|
||||
border-left: 5px solid #aaa; */
|
||||
}
|
||||
|
||||
.kb-new-group-region > div {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.kb-group-region .kb-card {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.kb-row::after {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dragula CSS */
|
||||
.gu-mirror {
|
||||
position: fixed !important;
|
||||
margin: 0 !important;
|
||||
z-index: 9999 !important;
|
||||
opacity: 0.8;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
|
||||
filter: alpha(opacity=80);
|
||||
}
|
||||
|
||||
.gu-hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.gu-unselectable {
|
||||
-webkit-user-select: none !important;
|
||||
-moz-user-select: none !important;
|
||||
-ms-user-select: none !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.gu-transit {
|
||||
opacity: 0.2;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
|
||||
filter: alpha(opacity=20);
|
||||
}
|
||||
10
plugin_files/style.min.css
vendored
Normal file
10
plugin_files/style.min.css
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
.ct-loader {position: absolute;top: 70px;width: 100%;z-index: 1;text-align: center;}.kb-col {display: inline-block;position: relative;width: 100%;vertical-align: top;border-radius: 5px;border: 3px solid var(--ut-component-highlight-background-color);}.kb-col-content {height: 100%;width: 100%;}.kb-col-header {}.kb-col-header-content {border-radius: 5px;border-top: 5px solid #AAA;height: 30px;margin: 5px 5px 0px 5px;}.kb-col-header-content .title {position: relative;left: 15px;font-size: 1.3em;}.card-title{}.kb-col-inner-header {display: none;}.kb-col-inner-header .title {position: relative;font-size: 1.3em;margin: 5px 10px 0px 10px;}.kb-row {display: -ms-flex;display: -webkit-flex;display: flex;}.kb-item-region {background: var(--ut-component-background-color);min-height: 160px;}.kb-group-region {}.kb-card {display: inline-block;width: 100%; border-radius: 1px; transition: all 0.4s ease; background-color:var(--ut-component-inner-border-color);box-shadow:var(--ut-shadow-sm);margin: 0;position: relative;overflow: hidden;}.kb-card-draggable {cursor: grab;}.kb-card:hover {background: var(--ut-component-highlight-background-color);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);}.kb-card .card-header {float: left;text-align: center;margin: 6px 0px 6px 6px;box-shadow: 0 12px 20px -10px rgba(230, 230, 230, 0.28), 0 4px 20px 0px rgba(0, 0, 0, 0.12), 0 7px 8px -5px rgba(230, 230, 230, 0.2);transition: all 1.0s ease;}.kb-card .card-header i {font-size: 18px;line-height: 28px;width: 28px;height: 28px;color: white;transition: all 1.0s ease;}.kb-card .card-content {text-align: left;padding: 0 6px;overflow: hidden;min-height: 40px; display: flex;align-items: center;}.kb-card .title {font-size: 1em; vertical-align: middle;display: flex;align-items: center;overflow-wrap: anywhere;}.kb-card .card-footer {margin: 0 20px 6px;padding-top: 3px;border-top: 1px solid #eeeeee;color: var(--ut-component-text-muted-color);overflow-wrap: anywhere;}.kb-card .card-footer > div {display: inline-block;width: 100%;}.kb-new-item-region {clear: both;}.kb-item-container {height: 100%;min-height: 10px;padding: 5px;max-height: 520px;overflow: auto;}.kb-item-container .kb-card {float: left;margin: 5px 5px;min-height: 0.125rem;width: calc(100% - 10px);max-width: 200px;}.kb-item-container-with-new-card {height: calc(100% - 40px);}.kb-new-card {float: left;text-align: center;margin: 3px 10px 10px 10px;transition: all 0.3s cubic-bezier(.25, .8, .25, 1);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);background: #55c555;}.kb-new-card:hover {box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);}.kb-new-card i {font-size: 18px;line-height: 28px;width: 28px;height: 28px;color: white;}.kb-group-region .card-header {background: #39a6da;}.kb-collapsable {float: left;text-align: center;margin: 6px 1px 6px 7px;cursor: pointer;}.kb-collapsable i {font-size: 15px;line-height: 28px;width: 18px; color: #000;}.kb-collapsable:hover {margin: 5px 0px 5px 6px;border: 1px solid #eee;}.kb-collapsed {width: 100% !important;}/*
|
||||
@media only screen and (max-width: 1279px) {.kb-item-region,
|
||||
.kb-group-region,
|
||||
.kb-col-header {width: 100% !important;}.kb-card {max-width: none !important;}}*/
|
||||
|
||||
@media only screen and (max-width: 1200px) {.kb-row {display: -ms-inline-box;display: -webkit-inline-box;display: inline-block;}.kb-col-header {display: none;}.kb-item-region,
|
||||
.kb-group-region,
|
||||
.kb-col-header {width: 100% !important;}/* .kb-card {max-width: 200px !important;} */
|
||||
|
||||
.kb-item-container {height: 100%;min-height: 10px;padding: 5px;max-height: 320px;overflow: auto; }.kb-item-region {display: -ms-flex;display: -webkit-flex;display: flex;}.kb-col-content {border-radius: 5px;border-left: 5px solid #AAA;}.kb-col-inner-header {display: inline-block;}.kb-group-region {border: none;}.kb-group-region > div {margin: 3px !important;width: calc(100% - 6px);border-radius: 5px; }.kb-new-group-region > div {border-top: none;}.kb-group-region .kb-card {display: inherit;}.kb-row::after {margin-bottom: 20px;}}.gu-mirror {position: fixed !important;margin: 0 !important;z-index: 9999 !important;opacity: 0.8;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter: alpha(opacity=80);}.gu-hide {display: none !important;}.gu-unselectable {-webkit-user-select: none !important;-moz-user-select: none !important;-ms-user-select: none !important;user-select: none !important;}.gu-transit {opacity: 0.2;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter: alpha(opacity=20);}
|
||||
Loading…
x
Reference in New Issue
Block a user