chat scoll works fairly well using scroll glue

This commit is contained in:
Henry Oswald 2014-07-08 11:56:44 +01:00
parent 6dc9d32104
commit 32b5e39681
4 changed files with 30 additions and 45 deletions

View file

@ -8,7 +8,7 @@ aside.chat(
infinite-scroll="loadMore()"
infinite-scroll-disabled="chat.loading || chat.atEnd"
infinite-scroll-initialize="ui.chatOpen"
scroll-to-bottom-on="message:new"
scroll-glue
)
.infinite-scroll-inner
ul.list-unstyled

View file

@ -1,14 +1,34 @@
define [
"base"
], (App) ->
App.directive 'scrollToBottomOn', () ->
fakeNgModel = (initValue) ->
$setViewValue: (value) ->
@$viewValue = value
return
$viewValue: initValue
App.directive "scrollGlue", ->
return {
link: (scope, element, attrs) ->
element = element[0]
eventToScrollOn = attrs.scrollToBottomOn
console.log eventToScrollOn
scope.$on eventToScrollOn, ()->
console.log element.scrollHeight, element.scrollTop
element.scrollTop = element.scrollHeight*4
console.log element.scrollHeight, element.scrollTop
priority: 1
require: ["?ngModel"]
restrict: "A"
link: (scope, $el, attrs, ctrls) ->
scrollToBottom = ->
el.scrollTop = el.scrollHeight
shouldActivateAutoScroll = ->
el.scrollTop + el.clientHeight + 10 >= el.scrollHeight
el = $el[0]
ngModel = ctrls[0] or fakeNgModel(true)
scope.$watch ->
scrollToBottom() if ngModel.$viewValue
$el.bind "scroll", ->
activate = shouldActivateAutoScroll()
scope.$apply ngModel.$setViewValue.bind(ngModel, activate) if activate isnt ngModel.$viewValue
}

View file

@ -1,34 +0,0 @@
define [
"base"
], (App) ->
fakeNgModel = (initValue) ->
$setViewValue: (value) ->
@$viewValue = value
return
$viewValue: initValue
App.directive "scrollGlue", ->
return {
priority: 1
require: ["?ngModel"]
restrict: "A"
link: (scope, $el, attrs, ctrls) ->
scrollToBottom = ->
el.scrollTop = el.scrollHeight
shouldActivateAutoScroll = ->
el.scrollTop + el.clientHeight + 1 >= el.scrollHeight
el = $el[0]
ngModel = ctrls[0] or fakeNgModel(true)
scope.$watch ->
scrollToBottom() if ngModel.$viewValue
$el.bind "scroll", ->
activate = shouldActivateAutoScroll()
scope.$apply ngModel.$setViewValue.bind(ngModel, activate) if activate isnt ngModel.$viewValue
}

View file

@ -6,7 +6,6 @@ define [
$scope.$on "project:joined", =>
@ide.socket.on "new-chat-message", (message) =>
$scope.$emit "message:new"
$scope.chat.messages.push(message)
$http.get(MESSAGES_URL).success (data, status, headers, config)->