mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
chat scoll works fairly well using scroll glue
This commit is contained in:
parent
6dc9d32104
commit
32b5e39681
4 changed files with 30 additions and 45 deletions
|
@ -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
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
|
@ -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)->
|
||||
|
|
Loading…
Reference in a new issue