@@ -409,6 +409,34 @@ describe('$mdPanel', function() {
409
409
} ) ;
410
410
} ) ;
411
411
412
+ describe ( 'should cause the propagation of events' , function ( ) {
413
+ var config , wrapper ;
414
+
415
+ it ( 'to be stopped when propagateContainerEvents=false' , function ( ) {
416
+ config = {
417
+ propagateContainerEvents : false ,
418
+ template : DEFAULT_TEMPLATE
419
+ } ;
420
+
421
+ openPanel ( config ) ;
422
+
423
+ wrapper = angular . element ( document . querySelector ( PANEL_WRAPPER_CLASS ) ) ;
424
+ expect ( wrapper . css ( 'pointer-events' ) ) . not . toEqual ( 'none' ) ;
425
+ } ) ;
426
+
427
+ it ( 'to NOT be stopped when propagateContainerEvents=true' , function ( ) {
428
+ config = {
429
+ propagateContainerEvents : true ,
430
+ template : DEFAULT_TEMPLATE
431
+ } ;
432
+
433
+ openPanel ( config ) ;
434
+
435
+ wrapper = angular . element ( document . querySelector ( PANEL_WRAPPER_CLASS ) ) ;
436
+ expect ( wrapper . css ( 'pointer-events' ) ) . toEqual ( 'none' ) ;
437
+ } ) ;
438
+ } ) ;
439
+
412
440
it ( 'should apply a custom css class to the panel' , function ( ) {
413
441
var customClass = 'custom-class' ;
414
442
@@ -815,7 +843,6 @@ describe('$mdPanel', function() {
815
843
expect ( onRemovingCalled ) . toBe ( true ) ;
816
844
} ) ;
817
845
818
-
819
846
it ( 'should call onDomRemoved if provided when removing the panel from ' +
820
847
'the DOM' , function ( ) {
821
848
var onDomRemovedCalled = false ;
@@ -868,6 +895,87 @@ describe('$mdPanel', function() {
868
895
} ) ;
869
896
} ) ;
870
897
898
+ describe ( 'CSS class logic:' , function ( ) {
899
+ it ( 'should add a class to the container/wrapper when toElement=false' ,
900
+ function ( ) {
901
+ openPanel ( DEFAULT_CONFIG ) ;
902
+
903
+ panelRef . addClass ( 'my-class' ) ;
904
+
905
+ expect ( PANEL_WRAPPER_CLASS ) . toHaveClass ( 'my-class' ) ;
906
+ expect ( PANEL_EL ) . not . toHaveClass ( 'my-class' ) ;
907
+ } ) ;
908
+
909
+ it ( 'should add a class to the element when toElement=true' , function ( ) {
910
+ openPanel ( DEFAULT_CONFIG ) ;
911
+
912
+ panelRef . addClass ( 'my-class' , true ) ;
913
+
914
+ expect ( PANEL_WRAPPER_CLASS ) . not . toHaveClass ( 'my-class' ) ;
915
+ expect ( PANEL_EL ) . toHaveClass ( 'my-class' ) ;
916
+ } ) ;
917
+
918
+ it ( 'should remove a class from the container/wrapper when fromElement=false' ,
919
+ function ( ) {
920
+ openPanel ( DEFAULT_CONFIG ) ;
921
+
922
+ panelRef . addClass ( 'my-class' ) ;
923
+
924
+ expect ( PANEL_WRAPPER_CLASS ) . toHaveClass ( 'my-class' ) ;
925
+ expect ( PANEL_EL ) . not . toHaveClass ( 'my-class' ) ;
926
+
927
+ panelRef . removeClass ( 'my-class' ) ;
928
+
929
+ expect ( PANEL_WRAPPER_CLASS ) . not . toHaveClass ( 'my-class' ) ;
930
+ expect ( PANEL_EL ) . not . toHaveClass ( 'my-class' ) ;
931
+ } ) ;
932
+
933
+ it ( 'should remove a class from the element when fromElement=true' ,
934
+ function ( ) {
935
+ openPanel ( DEFAULT_CONFIG ) ;
936
+
937
+ panelRef . addClass ( 'my-class' , true ) ;
938
+
939
+ expect ( PANEL_WRAPPER_CLASS ) . not . toHaveClass ( 'my-class' ) ;
940
+ expect ( PANEL_EL ) . toHaveClass ( 'my-class' ) ;
941
+
942
+ panelRef . removeClass ( 'my-class' , true ) ;
943
+
944
+ expect ( PANEL_WRAPPER_CLASS ) . not . toHaveClass ( 'my-class' ) ;
945
+ expect ( PANEL_EL ) . not . toHaveClass ( 'my-class' ) ;
946
+ } ) ;
947
+
948
+ it ( 'should toggle a class on the container/wrapper when onElement=false' ,
949
+ function ( ) {
950
+ openPanel ( DEFAULT_CONFIG ) ;
951
+
952
+ panelRef . toggleClass ( 'my-class' ) ;
953
+
954
+ expect ( PANEL_WRAPPER_CLASS ) . toHaveClass ( 'my-class' ) ;
955
+ expect ( PANEL_EL ) . not . toHaveClass ( 'my-class' ) ;
956
+
957
+ panelRef . toggleClass ( 'my-class' ) ;
958
+
959
+ expect ( PANEL_WRAPPER_CLASS ) . not . toHaveClass ( 'my-class' ) ;
960
+ expect ( PANEL_EL ) . not . toHaveClass ( 'my-class' ) ;
961
+ } ) ;
962
+
963
+ it ( 'should toggle a class on the element when onElement=true' ,
964
+ function ( ) {
965
+ openPanel ( DEFAULT_CONFIG ) ;
966
+
967
+ panelRef . toggleClass ( 'my-class' , true ) ;
968
+
969
+ expect ( PANEL_WRAPPER_CLASS ) . not . toHaveClass ( 'my-class' ) ;
970
+ expect ( PANEL_EL ) . toHaveClass ( 'my-class' ) ;
971
+
972
+ panelRef . toggleClass ( 'my-class' , true ) ;
973
+
974
+ expect ( PANEL_WRAPPER_CLASS ) . not . toHaveClass ( 'my-class' ) ;
975
+ expect ( PANEL_EL ) . not . toHaveClass ( 'n-class' ) ;
976
+ } ) ;
977
+ } ) ;
978
+
871
979
describe ( 'should focus on the origin element on' , function ( ) {
872
980
var myButton ;
873
981
var detachFocusConfig ;
@@ -1115,6 +1223,106 @@ describe('$mdPanel', function() {
1115
1223
mdPanelPosition = $mdPanel . newPanelPosition ( ) ;
1116
1224
} ) ;
1117
1225
1226
+ describe ( 'should update the position of an open panel' , function ( ) {
1227
+ var xPosition , yPosition , myButton , myButtonRect ;
1228
+
1229
+ beforeEach ( function ( ) {
1230
+ xPosition = $mdPanel . xPosition ;
1231
+ yPosition = $mdPanel . yPosition ;
1232
+
1233
+ myButton = '<button>myButton</button>' ;
1234
+ attachToBody ( myButton ) ;
1235
+ myButton = angular . element ( document . querySelector ( 'button' ) ) ;
1236
+ myButtonRect = myButton [ 0 ] . getBoundingClientRect ( ) ;
1237
+ } ) ;
1238
+
1239
+ it ( 'between two absolute positions' , function ( ) {
1240
+ var top = '50px' ;
1241
+ var left = '30px' ;
1242
+ var position = $mdPanel . newPanelPosition ( )
1243
+ . absolute ( )
1244
+ . top ( top )
1245
+ . left ( left ) ;
1246
+
1247
+ config [ 'position' ] = position ;
1248
+
1249
+ openPanel ( config ) ;
1250
+
1251
+ var panelRect = document . querySelector ( PANEL_EL )
1252
+ . getBoundingClientRect ( ) ;
1253
+ expect ( panelRect . top ) . toBeApproximately ( parseInt ( top ) ) ;
1254
+ expect ( panelRect . left ) . toBeApproximately ( parseInt ( left ) ) ;
1255
+
1256
+ var newTop = '500px' ;
1257
+ var newLeft = '300px' ;
1258
+ var newPosition = $mdPanel . newPanelPosition ( )
1259
+ . absolute ( )
1260
+ . top ( newTop )
1261
+ . left ( newLeft ) ;
1262
+
1263
+ panelRef . updatePosition ( newPosition ) ;
1264
+
1265
+ var newPanelRect = document . querySelector ( PANEL_EL )
1266
+ . getBoundingClientRect ( ) ;
1267
+ expect ( newPanelRect . top ) . toBeApproximately ( parseInt ( newTop ) ) ;
1268
+ expect ( newPanelRect . left ) . toBeApproximately ( parseInt ( newLeft ) ) ;
1269
+ } ) ;
1270
+
1271
+ it ( 'between two relative positions' , function ( ) {
1272
+ var position = $mdPanel . newPanelPosition ( )
1273
+ . relativeTo ( myButton [ 0 ] )
1274
+ . addPanelPosition ( xPosition . ALIGN_START , yPosition . ALIGN_TOPS ) ;
1275
+
1276
+ config [ 'position' ] = position ;
1277
+
1278
+ openPanel ( config ) ;
1279
+
1280
+ var panelRect = document . querySelector ( PANEL_EL )
1281
+ . getBoundingClientRect ( ) ;
1282
+ expect ( panelRect . top ) . toBeApproximately ( myButtonRect . top ) ;
1283
+ expect ( panelRect . left ) . toBeApproximately ( myButtonRect . left ) ;
1284
+
1285
+ var newPosition = $mdPanel . newPanelPosition ( )
1286
+ . relativeTo ( myButton )
1287
+ . addPanelPosition ( null , yPosition . ABOVE ) ;
1288
+
1289
+ panelRef . updatePosition ( newPosition ) ;
1290
+
1291
+ var newPanelRect = document . querySelector ( PANEL_EL )
1292
+ . getBoundingClientRect ( ) ;
1293
+ expect ( newPanelRect . bottom ) . toBeApproximately ( myButtonRect . top ) ;
1294
+ } ) ;
1295
+
1296
+ it ( 'from an absolute to a relative position' , function ( ) {
1297
+ var top = '250px' ;
1298
+ var left = '400px' ;
1299
+ var position = $mdPanel . newPanelPosition ( )
1300
+ . absolute ( )
1301
+ . top ( top )
1302
+ . left ( left ) ;
1303
+
1304
+ config [ 'position' ] = position ;
1305
+
1306
+ openPanel ( config ) ;
1307
+
1308
+ var panelRect = document . querySelector ( PANEL_EL )
1309
+ . getBoundingClientRect ( ) ;
1310
+ expect ( panelRect . top ) . toBeApproximately ( parseInt ( top ) ) ;
1311
+ expect ( panelRect . left ) . toBeApproximately ( parseInt ( left ) ) ;
1312
+
1313
+ var newPosition = $mdPanel . newPanelPosition ( )
1314
+ . relativeTo ( myButton [ 0 ] )
1315
+ . addPanelPosition ( xPosition . ALIGN_START , yPosition . ALIGN_TOPS ) ;
1316
+
1317
+ panelRef . updatePosition ( newPosition ) ;
1318
+
1319
+ var newPanelRect = document . querySelector ( PANEL_EL )
1320
+ . getBoundingClientRect ( ) ;
1321
+ expect ( newPanelRect . top ) . toBeApproximately ( myButtonRect . top ) ;
1322
+ expect ( newPanelRect . left ) . toBeApproximately ( myButtonRect . left ) ;
1323
+ } ) ;
1324
+ } ) ;
1325
+
1118
1326
describe ( 'should offset the panel' , function ( ) {
1119
1327
it ( 'horizontally' , function ( ) {
1120
1328
var left = '50px' ;
0 commit comments