@@ -378,13 +378,15 @@ window.onpopstate = function (event) {
378
378
* Licensed under the MIT license
379
379
*
380
380
* @requires url-handler.js
381
+ * @requires data-saver.js
381
382
*
382
383
*/
383
384
384
385
var modalViewer = {
385
386
386
387
// set up some defaults
387
388
active : false ,
389
+ switchText : true ,
388
390
template : 'info' ,
389
391
patternData : { } ,
390
392
targetOrigin : ( window . location . protocol === 'file:' ) ? '*' : window . location . protocol + '//' + window . location . host ,
@@ -394,9 +396,14 @@ var modalViewer = {
394
396
*/
395
397
onReady : function ( ) {
396
398
399
+ if ( DataSaver . findValue ( 'modalActive' ) === 'true' ) {
400
+ modalViewer . active = true ;
401
+ $ ( '#sg-t-patterninfo' ) . html ( "Hide Pattern Info" ) ;
402
+ }
403
+
397
404
// watch for resizes and hide the modal container as appropriate when the modal is already hidden
398
405
$ ( window ) . on ( 'resize' , function ( ) {
399
- if ( modalViewer . active === false ) {
406
+ if ( DataSaver . findValue ( 'modalActive' ) === ' false' ) {
400
407
modalViewer . slide ( $ ( '#sg-modal-container' ) . outerHeight ( ) ) ;
401
408
}
402
409
} ) ;
@@ -412,13 +419,6 @@ var modalViewer = {
412
419
modalViewer . toggle ( ) ;
413
420
} ) ;
414
421
415
- // if the iframe loads a new page query the pattern for its info if the modal is active
416
- $ ( '#sg-viewport' ) . on ( 'load' , function ( ) {
417
- if ( modalViewer . active ) {
418
- modalViewer . queryPattern ( ) ;
419
- }
420
- } ) ;
421
-
422
422
// make sure the modal viewer is not viewable
423
423
modalViewer . hide ( ) ;
424
424
@@ -439,19 +439,13 @@ var modalViewer = {
439
439
// review the query strings in case there is something the modal viewer is supposed to handle by default
440
440
var queryStringVars = urlHandler . getRequestVars ( ) ;
441
441
442
- // code panel related query string info
442
+ // show the modal if code view is called via query string
443
443
if ( ( queryStringVars . view !== undefined ) && ( ( queryStringVars . view === 'code' ) || ( queryStringVars . view === 'c' ) ) ) {
444
- panelsViewer . initCopy = ( ( queryStringVars . copy !== undefined ) && ( queryStringVars . copy === 'true' ) ) ? true : false ;
445
- modalViewer . template = 'info' ;
446
444
modalViewer . queryPattern ( ) ;
447
445
}
448
446
449
- // annotation panel related query string info
447
+ // show the modal if the old annotations view is called via query string
450
448
if ( ( queryStringVars . view !== undefined ) && ( ( queryStringVars . view === 'annotations' ) || ( queryStringVars . view === 'a' ) ) ) {
451
- if ( queryStringVars . number !== undefined ) {
452
- panelsViewer . initMoveTo = queryStringVars . number ;
453
- }
454
- modalViewer . template = 'comments' ;
455
449
modalViewer . queryPattern ( ) ;
456
450
}
457
451
@@ -461,18 +455,13 @@ var modalViewer = {
461
455
* toggle the modal window open and closed
462
456
*/
463
457
toggle : function ( ) {
464
- var message ;
465
458
if ( modalViewer . active === false ) {
466
- message = "Hide Pattern Info" ;
467
- modalViewer . active = true ;
468
459
modalViewer . queryPattern ( ) ;
469
460
} else {
470
- message = "Show Pattern Info" ;
471
461
obj = JSON . stringify ( { 'event' : 'patternLab.annotationsHighlightHide' } ) ;
472
462
document . getElementById ( 'sg-viewport' ) . contentWindow . postMessage ( obj , modalViewer . targetOrigin ) ;
473
463
modalViewer . close ( ) ;
474
464
}
475
-
476
465
} ,
477
466
478
467
/**
@@ -484,6 +473,7 @@ var modalViewer = {
484
473
modalViewer . close ( ) ;
485
474
486
475
// note it's turned on in the viewer
476
+ DataSaver . updateValue ( 'modalActive' , 'true' ) ;
487
477
modalViewer . active = true ;
488
478
489
479
// add an active class to the button that matches this template
@@ -505,6 +495,7 @@ var modalViewer = {
505
495
var obj ;
506
496
507
497
// not that the modal viewer is no longer active
498
+ DataSaver . updateValue ( 'modalActive' , 'false' ) ;
508
499
modalViewer . active = false ;
509
500
510
501
//Add active class to modal
@@ -529,7 +520,7 @@ var modalViewer = {
529
520
modalViewer . slide ( $ ( '#sg-modal-container' ) . outerHeight ( ) ) ;
530
521
} ,
531
522
532
- insert : function ( templateRendered , patternPartial , iframePassback ) {
523
+ insert : function ( templateRendered , patternPartial , iframePassback , switchText ) {
533
524
534
525
if ( iframePassback ) {
535
526
@@ -547,15 +538,17 @@ var modalViewer = {
547
538
548
539
}
549
540
550
- // update the wording
551
- $ ( '#sg-t-patterninfo' ) . html ( "Hide Pattern Info" ) ;
541
+ // update the wording unless this is a default viewall opening
542
+ if ( switchText === true ) {
543
+ $ ( '#sg-t-patterninfo' ) . html ( "Hide Pattern Info" ) ;
544
+ }
552
545
553
546
} ,
554
547
555
548
/**
556
549
* refresh the modal if a new pattern is loaded and the modal is active
557
550
*/
558
- refresh : function ( patternData , iframePassback ) {
551
+ refresh : function ( patternData , iframePassback , switchText ) {
559
552
560
553
// if this is a styleguide view close the modal
561
554
if ( iframePassback ) {
@@ -566,7 +559,7 @@ var modalViewer = {
566
559
panelsViewer . clear ( ) ;
567
560
568
561
// gather the data that will fill the modal window
569
- panelsViewer . gatherPanels ( patternData , iframePassback ) ;
562
+ panelsViewer . gatherPanels ( patternData , iframePassback , switchText ) ;
570
563
571
564
} ,
572
565
@@ -578,6 +571,24 @@ var modalViewer = {
578
571
$ ( '#sg-modal-container' ) . css ( 'bottom' , pos ) ;
579
572
} ,
580
573
574
+ slideToAnnotation : function ( pos ) {
575
+
576
+ // remove active class
577
+ els = document . querySelectorAll ( '#sg-annotations > .sg-annotations-list > li' ) ;
578
+ for ( i = 0 ; i < els . length ; ++ i ) {
579
+ els [ i ] . classList . remove ( 'active' ) ;
580
+ }
581
+
582
+ // add active class to called element and scroll to it
583
+ for ( i = 0 ; i < els . length ; ++ i ) {
584
+ if ( ( i + 1 ) == pos ) {
585
+ els [ i ] . classList . add ( 'active' ) ;
586
+ $ ( '.sg-pattern-extra-info' ) . animate ( { scrollTop : els [ i ] . offsetTop - 10 } , 600 ) ;
587
+ }
588
+ }
589
+
590
+ } ,
591
+
581
592
/**
582
593
* alias for slide
583
594
*/
@@ -588,10 +599,17 @@ var modalViewer = {
588
599
/**
589
600
* ask the pattern for info so we can open the modal window and populate it
590
601
*/
591
- queryPattern : function ( ) {
602
+ queryPattern : function ( switchText ) {
603
+
604
+ // note that the modal is active and set switchText
605
+ if ( ( switchText === undefined ) || ( switchText ) ) {
606
+ switchText = true ;
607
+ DataSaver . updateValue ( 'modalActive' , 'true' ) ;
608
+ modalViewer . active = true ;
609
+ }
592
610
593
611
// send a message to the pattern
594
- var obj = JSON . stringify ( { 'event' : 'patternLab.patternQuery' } ) ;
612
+ var obj = JSON . stringify ( { 'event' : 'patternLab.patternQuery' , 'switchText' : switchText } ) ;
595
613
document . getElementById ( 'sg-viewport' ) . contentWindow . postMessage ( obj , modalViewer . targetOrigin ) ;
596
614
597
615
} ,
@@ -615,26 +633,22 @@ var modalViewer = {
615
633
data = ( typeof event . data !== 'string' ) ? event . data : JSON . parse ( event . data ) ;
616
634
} catch ( e ) { }
617
635
618
- if ( ( data . event !== undefined ) && ( data . event == 'patternLab.patternQueryInfo' ) ) {
636
+ if ( ( data . event !== undefined ) && ( data . event == "patternLab.pageLoad" ) ) {
637
+
638
+ if ( ( modalViewer . active === false ) && ( data . patternpartial !== undefined ) && ( data . patternpartial . indexOf ( 'viewall-' ) === 0 ) && ( config . defaultShowPatternInfo !== undefined ) && ( config . defaultShowPatternInfo ) ) {
639
+ modalViewer . queryPattern ( false ) ;
640
+ } else if ( modalViewer . active === true ) {
641
+ modalViewer . queryPattern ( ) ;
642
+ }
643
+
644
+ } else if ( ( data . event !== undefined ) && ( data . event == 'patternLab.patternQueryInfo' ) ) {
619
645
620
646
// refresh the modal if a new pattern is loaded and the modal is active
621
- modalViewer . refresh ( data . patternData , data . iframePassback ) ;
647
+ modalViewer . refresh ( data . patternData , data . iframePassback , data . switchText ) ;
622
648
623
649
} else if ( ( data . event !== undefined ) && ( data . event == 'patternLab.annotationNumberClicked' ) ) {
624
650
625
- // remove active class
626
- els = document . querySelectorAll ( '#sg-annotations > .sg-annotations-list > li' ) ;
627
- for ( i = 0 ; i < els . length ; ++ i ) {
628
- els [ i ] . classList . remove ( 'active' ) ;
629
- }
630
-
631
- // add active class to called element and scroll to it
632
- for ( i = 0 ; i < els . length ; ++ i ) {
633
- if ( ( i + 1 ) == data . displayNumber ) {
634
- els [ i ] . classList . add ( 'active' ) ;
635
- $ ( '.sg-pattern-extra-info' ) . animate ( { scrollTop : els [ i ] . offsetTop - 10 } , 600 ) ;
636
- }
637
- }
651
+ modalViewer . slideToAnnotation ( data . displayNumber ) ;
638
652
639
653
}
640
654
@@ -838,7 +852,7 @@ var panelsViewer = {
838
852
* @param {String } the data from the pattern
839
853
* @param {Boolean } if this is going to be passed back to the styleguide
840
854
*/
841
- checkPanels : function ( panels , patternData , iframePassback ) {
855
+ checkPanels : function ( panels , patternData , iframePassback , switchText ) {
842
856
843
857
// count how many panels have rendered content
844
858
var panelContentCount = 0 ;
@@ -850,7 +864,7 @@ var panelsViewer = {
850
864
851
865
// see if the count of panels with content matches number of panels
852
866
if ( panelContentCount === Panels . count ( ) ) {
853
- panelsViewer . renderPanels ( panels , patternData , iframePassback ) ;
867
+ panelsViewer . renderPanels ( panels , patternData , iframePassback , switchText ) ;
854
868
}
855
869
856
870
} ,
@@ -860,7 +874,7 @@ var panelsViewer = {
860
874
* @param {String } the data from the pattern
861
875
* @param {Boolean } if this is going to be passed back to the styleguide
862
876
*/
863
- gatherPanels : function ( patternData , iframePassback ) {
877
+ gatherPanels : function ( patternData , iframePassback , switchText ) {
864
878
865
879
Dispatcher . addListener ( 'checkPanels' , panelsViewer . checkPanels ) ;
866
880
@@ -889,7 +903,7 @@ var panelsViewer = {
889
903
templateCompiled = Hogan . compile ( template . innerHTML ) ;
890
904
templateRendered = templateCompiled . render ( { 'language' : panels [ i ] . language , 'code' : prismedContent } ) ;
891
905
panels [ i ] . content = templateRendered ;
892
- Dispatcher . trigger ( 'checkPanels' , [ panels , patternData , iframePassback ] ) ;
906
+ Dispatcher . trigger ( 'checkPanels' , [ panels , patternData , iframePassback , switchText ] ) ;
893
907
} ;
894
908
} ) ( i , panels , patternData , iframePassback ) ;
895
909
e . open ( 'GET' , fileName . replace ( / \. h t m l / , panel . httpRequestReplace ) + '?' + ( new Date ( ) ) . getTime ( ) , true ) ;
@@ -902,7 +916,7 @@ var panelsViewer = {
902
916
templateCompiled = Hogan . compile ( template . innerHTML ) ;
903
917
templateRendered = templateCompiled . render ( patternData ) ;
904
918
panels [ i ] . content = templateRendered ;
905
- Dispatcher . trigger ( 'checkPanels' , [ panels , patternData , iframePassback ] ) ;
919
+ Dispatcher . trigger ( 'checkPanels' , [ panels , patternData , iframePassback , switchText ] ) ;
906
920
907
921
}
908
922
@@ -918,7 +932,7 @@ var panelsViewer = {
918
932
* @param {String } the data from the pattern
919
933
* @param {Boolean } if this is going to be passed back to the styleguide
920
934
*/
921
- renderPanels : function ( panels , patternData , iframePassback ) {
935
+ renderPanels : function ( panels , patternData , iframePassback , switchText ) {
922
936
923
937
// set-up defaults
924
938
var template , templateCompiled , templateRendered ;
@@ -1040,7 +1054,7 @@ var panelsViewer = {
1040
1054
} ) ;
1041
1055
1042
1056
// gather panels from plugins
1043
- Dispatcher . trigger ( 'insertPanels' , [ templateRendered , patternPartial , iframePassback ] ) ;
1057
+ Dispatcher . trigger ( 'insertPanels' , [ templateRendered , patternPartial , iframePassback , switchText ] ) ;
1044
1058
1045
1059
} ,
1046
1060
0 commit comments