Skip to content

Commit

Permalink
Merge pull request #29 from ldmarz/vertialScrollDuplex
Browse files Browse the repository at this point in the history
Vertial scroll duplex
  • Loading branch information
ldmarz authored Jul 2, 2018
2 parents 4f77ff4 + d247e8b commit 668e872
Show file tree
Hide file tree
Showing 21 changed files with 1,684 additions and 1,415 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
# New features
- ## Core scroll is upgraded to Scroll Duplex
When a scroll is performed over any "scroll duplex" element becomes master and all other duplex receivers
- ## Scroll to date softly

sroll to a specific date position in the gantt
Expand Down
2 changes: 1 addition & 1 deletion demo.le/demo.controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default function ($scope, $timeout) {
$scope.width = true
$scope.scale = 'day'
$scope.algo = 'aksks'
$scope.selectedRow = undefined;
$scope.selectedRow = undefined

$scope.templateRows = [{
type: 'tree',
Expand Down
2 changes: 1 addition & 1 deletion dist/angular-gantt-core.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

587 changes: 341 additions & 246 deletions dist/angular-gantt-core.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/angular-gantt-core.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions dist/angular-gantt-core.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/angular-gantt-plugins.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1,152 changes: 605 additions & 547 deletions dist/angular-gantt-plugins.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/angular-gantt-plugins.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 7 additions & 7 deletions dist/angular-gantt-plugins.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/angular-gantt.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1,154 changes: 606 additions & 548 deletions dist/angular-gantt.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/angular-gantt.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 7 additions & 7 deletions dist/angular-gantt.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "le-angular-gantt",
"version": "3.3.11",
"version": "3.4.0",
"description": "Gantt chart component for AngularJS",
"author": "Rémi Alvergnat <[email protected]> (https://www.pragmasphere.com)",
"contributors": [
Expand Down
28 changes: 28 additions & 0 deletions src/core/ui/scroll/scrollManager.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ export default function () {
$scope.horizontal = []
$scope.vertical = []
$scope.verticalSender = undefined
$scope.registerAsVerticalScrollDuplexSender = undefined
$scope.registerAsVerticalScrollDuplexReceiver = []
$scope.verticalScrollDuplexIsSending = false

this.registerVerticalReceiver = function (element) {
element.css('position', 'relative')
Expand All @@ -36,6 +39,31 @@ export default function () {
this.getVerticalSender = function () {
return $scope.verticalSender
}

this.registerAsVerticalScrollDuplexSender = function (element) {
$scope.registerAsVerticalScrollDuplexSender = element
}

this.registerAsVerticalScrollDuplexReceiver = function (element) {
$scope.registerAsVerticalScrollDuplexReceiver.push(element)
}

this.getVerticalScrollDuplexSender = function (element) {
return $scope.registerAsVerticalScrollDuplexSender
}

this.getVerticalScrollDuplexReceivers = function (element) {
return $scope.registerAsVerticalScrollDuplexReceiver
}

this.isVerticalScrollDuplexSending = function () {
return $scope.verticalScrollDuplexIsSending
}

this.setVerticalScrollDuplexSending = function (val) {
$scope.verticalScrollDuplexIsSending = val
}

}
}
}
67 changes: 67 additions & 0 deletions src/core/ui/scroll/verticalScrollDuplex.directive.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import $ from 'jquery'
import { remove, throttle, debounce } from 'lodash'

export default function () {
'ngInject'
return {
restrict: 'A',
require: '^ganttScrollManager',
scope: {
selector: '@'
},
link: function (scope, element, attrs, ganttScrollManagerCtrl) {
const el = (attrs.selector)
? $(scope.selector)
: $(element)

bindings(el)
ganttScrollManagerCtrl.registerAsVerticalScrollDuplexReceiver(el)

function bindings (element) {
element.scroll(scrollHandler)
}

function scrollHandler () {

const isDuplexSending = ganttScrollManagerCtrl.isVerticalScrollDuplexSending()

if (!isDuplexSending) {
setAsSender()
ganttScrollManagerCtrl.setVerticalScrollDuplexSending(true)

const receivers = ganttScrollManagerCtrl.getVerticalScrollDuplexReceivers()

receivers.forEach(receiver => {
receiver.scrollTop(el.scrollTop())
})

ganttScrollManagerCtrl.setVerticalScrollDuplexSending(false)
}
}

function setAsSender () {
const sender = ganttScrollManagerCtrl.getVerticalScrollDuplexSender()
const receivers = ganttScrollManagerCtrl.getVerticalScrollDuplexReceivers()

if (sender === el) {
return
}

if (sender) {
unbindings(sender)
ganttScrollManagerCtrl.registerAsVerticalScrollDuplexReceiver(sender)
}

remove(receivers, receiver => receiver === el)
ganttScrollManagerCtrl.registerAsVerticalScrollDuplexSender(el)

bindings(el)
}

function unbindings (element) {
element.unbind('scroll', scrollHandler)
}

}
}
}
2 changes: 2 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import ganttScrollManagerDirective from './core/ui/scroll/scrollManager.directiv
import ganttScrollSenderDirective from './core/ui/scroll/scrollSender.directive'
import ganttVerticalScrollReceiver from './core/ui/scroll/verticalScrollReceiver.directive'
import ganttVerticalScrollListener from './core/ui/scroll/verticalScrollListener.directive'
import ganttVerticalScrollDuplex from './core/ui/scroll/verticalScrollDuplex.directive'
import ganttBodyDirective from './core/ui/template/body.directive'
import ganttBodyBackgroundDirective from './core/ui/template/bodyBackground.directive'
import ganttBodyColumnsDirective from './core/ui/template/bodyColumns.directive'
Expand Down Expand Up @@ -100,6 +101,7 @@ angular
.directive('ganttScrollSender', ganttScrollSenderDirective)
.directive('ganttVerticalScrollReceiver', ganttVerticalScrollReceiver)
.directive('ganttVerticalScrollListener', ganttVerticalScrollListener)
.directive('ganttVerticalScrollDuplex', ganttVerticalScrollDuplex)
.directive('ganttBindCompileHtml', ganttBindCompileHtmlDirective)
.directive('ganttBody', ganttBodyDirective)
.directive('ganttBodyBackground', ganttBodyBackgroundDirective)
Expand Down
45 changes: 0 additions & 45 deletions src/plugins/recycler/recycler.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -120,51 +120,6 @@ export default function (GanttDirectiveBuilder, ganttLayout, $timeout) {
return _.indexOf(pool, row) % 2
}

function SyncRows () {
const $element = $(element[0])
const $ganttSide = $element.parents('.gantt-side')

const $recyclerScroll = $element.find('.md-virtual-repeat-scroller')
const $ganttSideScroll = $ganttSide.siblings('.gantt-scrollable')

let listenRecyclerScroll = false

const scrollHandler = _.throttle(() => {
if (listenRecyclerScroll) {
$ganttSideScroll.scrollTop($recyclerScroll.scrollTop())
}
}, 100)

function enableGanttSideScrollSender () {
$scope.gantt.api.scroll.disableSender(false)
}

$recyclerScroll.mouseenter(() => {
listenRecyclerScroll = true
$scope.gantt.api.scroll.disableSender(true)
})

$(window).blur(() => {
$ganttSideScroll.css('overflow-y', 'hidden')
$recyclerScroll.css('overflow-y', 'hidden')
})

$(window).focus(() => {
$ganttSideScroll.css('overflow-y', 'initial')
$recyclerScroll.css('overflow-y', 'initial')
})

$recyclerScroll.mouseleave(() => {
listenRecyclerScroll = false
enableGanttSideScrollSender()
})

$recyclerScroll.scroll(scrollHandler)

}

SyncRows()

$scope.gantt.api.registerMethod('recycler', 'goToRow', goToRow, $scope.gantt.api)

}
Expand Down
8 changes: 6 additions & 2 deletions src/plugins/recycler/recycler.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@
</div>


<md-virtual-repeat-container md-top-index="topIndex" id="vertical-container" gantt-vertical-scroll-receiver gantt-vertical-scroll-listener
gantt-vertical-scroll-listener-options="verticalScrollOpts" ng-style="getLabelsCss()" class="grid-container">
<md-virtual-repeat-container
md-top-index="topIndex"
id="vertical-container"
ng-style="getLabelsCss()"
class="grid-container"
gantt-vertical-scroll-duplex selector=".md-virtual-repeat-scroller">
<div md-item-size md-virtual-repeat="row in gantt.rowsManager.visibleRows" ng-class="getClasses(row, gantt.rowsManager.visibleRows)"
ng-class="row.model.classes" class="gantt-row-height grid-row row-repeated" ng-controller="rowController" row-id="{{row.model.id}}"
ng-style="{'grid-template-columns': getTemplateWidth(), 'background-color': row.model.color}">
Expand Down
2 changes: 1 addition & 1 deletion src/template/gantt.tmpl.html
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@

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

<script type="text/ng-template" id="template/ganttScrollableHeader.tmpl.html">
Expand Down

0 comments on commit 668e872

Please sign in to comment.