@ -16,7 +16,7 @@ angular.module('myApp.directives', ['myApp.filters'])
restrict : 'AE' , restrict : 'AE' ,
scope : true , scope : true ,
translude : false , translude : false ,
templateUrl : 'partials/dialog.html' templateUrl : 'partials/dialog.html?1 '
} ; } ;
} ) } )
@ -25,7 +25,7 @@ angular.module('myApp.directives', ['myApp.filters'])
restrict : 'AE' , restrict : 'AE' ,
scope : true , scope : true ,
translude : false , translude : false ,
templateUrl : 'partials/message.html?1 ' templateUrl : 'partials/message.html?2 '
} ; } ;
} ) } )
@ -97,6 +97,7 @@ angular.module('myApp.directives', ['myApp.filters'])
function link ( scope , element , attrs ) { function link ( scope , element , attrs ) {
var historyWrap = $ ( '.im_history_wrap' ) [ 0 ] , var historyWrap = $ ( '.im_history_wrap' ) [ 0 ] ,
historyEl = $ ( '.im_history' ) [ 0 ] ,
scrollableWrap = $ ( '.im_history_scrollable_wrap' ) [ 0 ] , scrollableWrap = $ ( '.im_history_scrollable_wrap' ) [ 0 ] ,
scrollable = $ ( '.im_history_scrollable' ) [ 0 ] , scrollable = $ ( '.im_history_scrollable' ) [ 0 ] ,
panelWrap = $ ( '.im_history_panel_wrap' , element ) [ 0 ] , panelWrap = $ ( '.im_history_panel_wrap' , element ) [ 0 ] ,
@ -104,33 +105,52 @@ angular.module('myApp.directives', ['myApp.filters'])
moreNotified = false ; moreNotified = false ;
onContentLoaded ( function ( ) { onContentLoaded ( function ( ) {
$ ( historyWrap ) . nanoScroller ( { preventPageScrolling : true , scroll : 'bottom' , tabIndex : - 1 } ) ; scrollableWrap . scrollTop = scrollableWrap . scrollHeight ;
$ ( historyWrap ) . nanoScroller ( { preventPageScrolling : true , tabIndex : - 1 } ) ;
} ) ; } ) ;
var updateScroller = function ( delay ) { var updateScroller = function ( delay ) {
$timeout ( function ( ) { $timeout ( function ( ) {
if ( ! $ ( scrollableWrap ) . hasClass ( 'im_history_to_bottom' ) ) {
$ ( historyWrap ) . nanoScroller ( ) ; $ ( historyWrap ) . nanoScroller ( ) ;
}
} , delay || 0 ) ; } , delay || 0 ) ;
} }
var animated = true ,
curAnimation = false ;
scope . $on ( 'ui_history_append' , function ( ) { scope . $on ( 'ui_history_append' , function ( ) {
// var st = scrollableWrap.scrollTop;
if ( ! atBottom ) {
$ ( scrollableWrap ) . addClass ( 'im_history_to_bottom' ) ; return ;
}
if ( animated ) {
$ ( scrollableWrap ) . stop ( ) ;
} else {
$ ( scrollable ) . css ( { bottom : 0 } ) ; $ ( scrollable ) . css ( { bottom : 0 } ) ;
$ ( scrollableWrap ) . addClass ( 'im_history_to_bottom' ) ;
}
if ( atBottom ) {
onContentLoaded ( function ( ) { onContentLoaded ( function ( ) {
$ ( scrollableWrap ) . removeClass ( 'im_history_to_bottom' ) ; if ( animated ) {
$ ( scrollable ) . css ( { bottom : '' } ) ; curAnimation = true ;
// updateSizes(true);
$ ( scrollableWrap ) . stop ( ) . animate ( {
$ ( historyWrap ) . nanoScroller ( { scrollBottom : 0 } ) ; scrollTop : scrollableWrap . scrollHeight - scrollableWrap . clientHeight
// scrollableWrap.scrollTop = st;
} , {
// $(scrollableWrap).animate({
duration : 200 ,
// scrollTop: scrollableWrap.scrollHeight - scrollableWrap.clientHeight
always : function ( ) {
// }, 200);
curAnimation = false ;
updateScroller ( ) ; updateScroller ( ) ;
}
} ) ; } ) ;
updateScroller ( ) ;
} else {
$ ( scrollableWrap ) . removeClass ( 'im_history_to_bottom' ) ;
$ ( scrollable ) . css ( { bottom : '' } ) ;
scrollableWrap . scrollTop = scrollableWrap . scrollHeight ;
$ ( historyWrap ) . nanoScroller ( ) ;
} }
} ) ;
} ) ; } ) ;
scope . $on ( 'ui_history_change' , function ( ) { scope . $on ( 'ui_history_change' , function ( ) {
@ -140,9 +160,8 @@ angular.module('myApp.directives', ['myApp.filters'])
$ ( scrollableWrap ) . removeClass ( 'im_history_to_bottom' ) ; $ ( scrollableWrap ) . removeClass ( 'im_history_to_bottom' ) ;
$ ( scrollable ) . css ( { bottom : '' } ) ; $ ( scrollable ) . css ( { bottom : '' } ) ;
updateSizes ( ) ; updateSizes ( ) ;
$ ( historyWrap ) . nanoScroller ( ) ; scrollableWrap . scrollTop = scrollableWrap . scrollHeight ;
$ ( historyWrap ) . nanoScroller ( { scrollBottom : 0 } ) ; updateScroller ( ) ;
updateScroller ( 100 ) ;
moreNotified = false ; moreNotified = false ;
} ) ; } ) ;
} ) ; } ) ;
@ -159,17 +178,21 @@ angular.module('myApp.directives', ['myApp.filters'])
onContentLoaded ( function ( ) { onContentLoaded ( function ( ) {
$ ( scrollableWrap ) . removeClass ( 'im_history_to_bottom' ) ; $ ( scrollableWrap ) . removeClass ( 'im_history_to_bottom' ) ;
$ ( scrollable ) . css ( { bottom : '' } ) ; $ ( scrollable ) . css ( { bottom : '' } ) ;
$ ( historyWrap ) . nanoScroller ( ) ; scrollableWrap . scrollTop = st + scrollableWrap . scrollHeight - sh ;
$ ( historyWrap ) . nanoScroller ( { scrollTop : st + scrollableWrap . scrollHeight - sh } ) ;
// updateScroller();
updateScroller ( ) ;
updateScroller ( 50 ) ;
moreNotified = false ; moreNotified = false ;
} ) ; } ) ;
} ) ; } ) ;
var atBottom = true ; var atBottom = true ;
$ ( scrollableWrap ) . on ( 'scroll' , function ( e ) { $ ( scrollableWrap ) . on ( 'scroll' , function ( e ) {
if ( $ ( scrollableWrap ) . hasClass ( 'im_history_to_bottom' ) ) {
return cancelEvent ( e ) ;
}
if ( curAnimation ) {
return ;
}
atBottom = scrollableWrap . scrollTop >= scrollableWrap . scrollHeight - scrollableWrap . clientHeight ; atBottom = scrollableWrap . scrollTop >= scrollableWrap . scrollHeight - scrollableWrap . clientHeight ;
if ( ! moreNotified && scrollableWrap . scrollTop <= 300 ) { if ( ! moreNotified && scrollableWrap . scrollTop <= 300 ) {
@ -182,11 +205,16 @@ angular.module('myApp.directives', ['myApp.filters'])
$ ( historyWrap ) . css ( { $ ( historyWrap ) . css ( {
height : $ ( $window ) . height ( ) - panelWrap . offsetHeight - sendFormWrap . offsetHeight - 90 height : $ ( $window ) . height ( ) - panelWrap . offsetHeight - sendFormWrap . offsetHeight - 90
} ) ; } ) ;
$ ( historyEl ) . css ( {
minHeight : $ ( $window ) . height ( ) - panelWrap . offsetHeight - sendFormWrap . offsetHeight - 90 - 44
} ) ;
if ( heightOnly ) return ; if ( heightOnly ) return ;
if ( atBottom ) { if ( atBottom ) {
onContentLoaded ( function ( ) { onContentLoaded ( function ( ) {
$ ( historyWrap ) . nanoScroller ( { scroll : 'bottom' } ) ; scrollableWrap . scrollTop = scrollableWrap . scrollHeight ;
updateScroller ( ) ;
// $(historyWrap).nanoScroller({scroll: 'bottom'});
} ) ; } ) ;
} }
updateScroller ( 100 ) ; updateScroller ( 100 ) ;
@ -248,7 +276,6 @@ angular.module('myApp.directives', ['myApp.filters'])
if ( submit ) { if ( submit ) {
$ ( element ) . trigger ( 'submit' ) ; $ ( element ) . trigger ( 'submit' ) ;
// dLog('after submit');
return cancelEvent ( e ) ; return cancelEvent ( e ) ;
} }
} ) ; } ) ;
@ -266,7 +293,10 @@ angular.module('myApp.directives', ['myApp.filters'])
$ ( 'body' ) . on ( 'dragenter dragleave dragover drop' , onDragDropEvent ) ; $ ( 'body' ) . on ( 'dragenter dragleave dragover drop' , onDragDropEvent ) ;
scope . $on ( 'ui_peer_change ui_history_change ui_message_send' , focusField ) ; scope . $on ( 'ui_peer_change' , focusField ) ;
scope . $on ( 'ui_history_change' , focusField ) ;
scope . $on ( 'ui_message_send' , focusField ) ;
scope . $on ( '$destroy' , function cleanup ( ) { scope . $on ( '$destroy' , function cleanup ( ) {
$ ( 'body' ) . off ( 'dragenter dragleave dragover drop' , onDragDropEvent ) ; $ ( 'body' ) . off ( 'dragenter dragleave dragover drop' , onDragDropEvent ) ;
} ) ; } ) ;
@ -329,10 +359,10 @@ angular.module('myApp.directives', ['myApp.filters'])
} ; } ;
function link ( scope , element , attrs ) { function link ( scope , element , attrs ) {
element . src = 'img/blank.gif' ;
scope . $watch ( 'thumb.location' , function ( newVal ) { scope . $watch ( 'thumb.location' , function ( newVal ) {
if ( ! scope . thumb || ! scope . thumb . location ) { if ( ! scope . thumb || ! scope . thumb . location ) {
element . attr ( 'src' , scope . thumb . placeholder || '' ) ; element . attr ( 'src' , scope . thumb && scope . thumb . placeholder || '' ) ;
return ; return ;
} }
Igor Zhukov
11 years ago
