Skip to content

Commit b2a6c7d

Browse files
committed
smarter about when to switch copy and show annotations
1 parent 9b7c8cc commit b2a6c7d

File tree

7 files changed

+146
-113
lines changed

7 files changed

+146
-113
lines changed

dist/styleguide/js/patternlab-pattern.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -408,6 +408,8 @@ var modalStyleguide = {
408408
if ((modalStyleguide.active[patternPartial] === undefined) || !modalStyleguide.active[patternPartial]) {
409409
var el = document.getElementById('sg-pattern-data-'+patternPartial);
410410
var patternData = JSON.parse(el.innerHTML);
411+
patternMarkupEl = document.querySelector('#'+patternData.patternPartial+' > .sg-pattern-example');
412+
patternData.patternMarkup = (patternMarkupEl !== null) ? patternMarkupEl.innerHTML : document.querySelector('body').innerHTML;
411413
modalStyleguide.patternQueryInfo(patternData, true);
412414
} else {
413415
modalStyleguide.close(patternPartial);
@@ -466,11 +468,11 @@ var modalStyleguide = {
466468
/**
467469
* return the pattern info to the top level
468470
*/
469-
patternQueryInfo: function(patternData, iframePassback) {
471+
patternQueryInfo: function(patternData, iframePassback, switchText) {
470472

471473
// send a message to the pattern
472474
try {
473-
var obj = JSON.stringify({ 'event': 'patternLab.patternQueryInfo', 'patternData': patternData, 'iframePassback': iframePassback});
475+
var obj = JSON.stringify({ 'event': 'patternLab.patternQueryInfo', 'patternData': patternData, 'iframePassback': iframePassback, 'switchText': switchText});
474476
parent.postMessage(obj, modalStyleguide.targetOrigin);
475477
} catch(e) {}
476478

@@ -509,7 +511,7 @@ var modalStyleguide = {
509511
patternData = JSON.parse(els[i].innerHTML);
510512
patternMarkupEl = document.querySelector('#'+patternData.patternPartial+' > .sg-pattern-example');
511513
patternData.patternMarkup = (patternMarkupEl !== null) ? patternMarkupEl.innerHTML : document.querySelector('body').innerHTML;
512-
modalStyleguide.patternQueryInfo(patternData, iframePassback);
514+
modalStyleguide.patternQueryInfo(patternData, iframePassback, data.switchText);
513515
}
514516

515517
} else if ((data.event !== undefined) && (data.event == 'patternLab.patternModalInsert')) {

dist/styleguide/js/patternlab-pattern.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/styleguide/js/patternlab-viewer.js

Lines changed: 64 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -378,13 +378,15 @@ window.onpopstate = function (event) {
378378
* Licensed under the MIT license
379379
*
380380
* @requires url-handler.js
381+
* @requires data-saver.js
381382
*
382383
*/
383384

384385
var modalViewer = {
385386

386387
// set up some defaults
387388
active: false,
389+
switchText: true,
388390
template: 'info',
389391
patternData: {},
390392
targetOrigin: (window.location.protocol === 'file:') ? '*' : window.location.protocol+'//'+window.location.host,
@@ -394,9 +396,14 @@ var modalViewer = {
394396
*/
395397
onReady: function() {
396398

399+
if (DataSaver.findValue('modalActive') === 'true') {
400+
modalViewer.active = true;
401+
$('#sg-t-patterninfo').html("Hide Pattern Info");
402+
}
403+
397404
// watch for resizes and hide the modal container as appropriate when the modal is already hidden
398405
$(window).on('resize', function() {
399-
if (modalViewer.active === false) {
406+
if (DataSaver.findValue('modalActive') === 'false') {
400407
modalViewer.slide($('#sg-modal-container').outerHeight());
401408
}
402409
});
@@ -412,13 +419,6 @@ var modalViewer = {
412419
modalViewer.toggle();
413420
});
414421

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-
422422
// make sure the modal viewer is not viewable
423423
modalViewer.hide();
424424

@@ -439,19 +439,13 @@ var modalViewer = {
439439
// review the query strings in case there is something the modal viewer is supposed to handle by default
440440
var queryStringVars = urlHandler.getRequestVars();
441441

442-
// code panel related query string info
442+
// show the modal if code view is called via query string
443443
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';
446444
modalViewer.queryPattern();
447445
}
448446

449-
// annotation panel related query string info
447+
// show the modal if the old annotations view is called via query string
450448
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';
455449
modalViewer.queryPattern();
456450
}
457451

@@ -461,18 +455,13 @@ var modalViewer = {
461455
* toggle the modal window open and closed
462456
*/
463457
toggle: function() {
464-
var message;
465458
if (modalViewer.active === false) {
466-
message = "Hide Pattern Info";
467-
modalViewer.active = true;
468459
modalViewer.queryPattern();
469460
} else {
470-
message = "Show Pattern Info";
471461
obj = JSON.stringify({ 'event': 'patternLab.annotationsHighlightHide' });
472462
document.getElementById('sg-viewport').contentWindow.postMessage(obj, modalViewer.targetOrigin);
473463
modalViewer.close();
474464
}
475-
476465
},
477466

478467
/**
@@ -484,6 +473,7 @@ var modalViewer = {
484473
modalViewer.close();
485474

486475
// note it's turned on in the viewer
476+
DataSaver.updateValue('modalActive', 'true');
487477
modalViewer.active = true;
488478

489479
// add an active class to the button that matches this template
@@ -505,6 +495,7 @@ var modalViewer = {
505495
var obj;
506496

507497
// not that the modal viewer is no longer active
498+
DataSaver.updateValue('modalActive', 'false');
508499
modalViewer.active = false;
509500

510501
//Add active class to modal
@@ -529,7 +520,7 @@ var modalViewer = {
529520
modalViewer.slide($('#sg-modal-container').outerHeight());
530521
},
531522

532-
insert: function(templateRendered, patternPartial, iframePassback) {
523+
insert: function(templateRendered, patternPartial, iframePassback, switchText) {
533524

534525
if (iframePassback) {
535526

@@ -547,15 +538,17 @@ var modalViewer = {
547538

548539
}
549540

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+
}
552545

553546
},
554547

555548
/**
556549
* refresh the modal if a new pattern is loaded and the modal is active
557550
*/
558-
refresh: function(patternData, iframePassback) {
551+
refresh: function(patternData, iframePassback, switchText) {
559552

560553
// if this is a styleguide view close the modal
561554
if (iframePassback) {
@@ -566,7 +559,7 @@ var modalViewer = {
566559
panelsViewer.clear();
567560

568561
// gather the data that will fill the modal window
569-
panelsViewer.gatherPanels(patternData, iframePassback);
562+
panelsViewer.gatherPanels(patternData, iframePassback, switchText);
570563

571564
},
572565

@@ -578,6 +571,24 @@ var modalViewer = {
578571
$('#sg-modal-container').css('bottom',pos);
579572
},
580573

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+
581592
/**
582593
* alias for slide
583594
*/
@@ -588,10 +599,17 @@ var modalViewer = {
588599
/**
589600
* ask the pattern for info so we can open the modal window and populate it
590601
*/
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+
}
592610

593611
// send a message to the pattern
594-
var obj = JSON.stringify({ 'event': 'patternLab.patternQuery' });
612+
var obj = JSON.stringify({ 'event': 'patternLab.patternQuery', 'switchText': switchText });
595613
document.getElementById('sg-viewport').contentWindow.postMessage(obj, modalViewer.targetOrigin);
596614

597615
},
@@ -615,26 +633,22 @@ var modalViewer = {
615633
data = (typeof event.data !== 'string') ? event.data : JSON.parse(event.data);
616634
} catch(e) {}
617635

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')) {
619645

620646
// 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);
622648

623649
} else if ((data.event !== undefined) && (data.event == 'patternLab.annotationNumberClicked')) {
624650

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);
638652

639653
}
640654

@@ -838,7 +852,7 @@ var panelsViewer = {
838852
* @param {String} the data from the pattern
839853
* @param {Boolean} if this is going to be passed back to the styleguide
840854
*/
841-
checkPanels: function(panels, patternData, iframePassback) {
855+
checkPanels: function(panels, patternData, iframePassback, switchText) {
842856

843857
// count how many panels have rendered content
844858
var panelContentCount = 0;
@@ -850,7 +864,7 @@ var panelsViewer = {
850864

851865
// see if the count of panels with content matches number of panels
852866
if (panelContentCount === Panels.count()) {
853-
panelsViewer.renderPanels(panels, patternData, iframePassback);
867+
panelsViewer.renderPanels(panels, patternData, iframePassback, switchText);
854868
}
855869

856870
},
@@ -860,7 +874,7 @@ var panelsViewer = {
860874
* @param {String} the data from the pattern
861875
* @param {Boolean} if this is going to be passed back to the styleguide
862876
*/
863-
gatherPanels: function(patternData, iframePassback) {
877+
gatherPanels: function(patternData, iframePassback, switchText) {
864878

865879
Dispatcher.addListener('checkPanels', panelsViewer.checkPanels);
866880

@@ -889,7 +903,7 @@ var panelsViewer = {
889903
templateCompiled = Hogan.compile(template.innerHTML);
890904
templateRendered = templateCompiled.render({ 'language': panels[i].language, 'code': prismedContent });
891905
panels[i].content = templateRendered;
892-
Dispatcher.trigger('checkPanels', [panels, patternData, iframePassback]);
906+
Dispatcher.trigger('checkPanels', [panels, patternData, iframePassback, switchText]);
893907
};
894908
})(i, panels, patternData, iframePassback);
895909
e.open('GET', fileName.replace(/\.html/,panel.httpRequestReplace)+'?'+(new Date()).getTime(), true);
@@ -902,7 +916,7 @@ var panelsViewer = {
902916
templateCompiled = Hogan.compile(template.innerHTML);
903917
templateRendered = templateCompiled.render(patternData);
904918
panels[i].content = templateRendered;
905-
Dispatcher.trigger('checkPanels', [panels, patternData, iframePassback]);
919+
Dispatcher.trigger('checkPanels', [panels, patternData, iframePassback, switchText]);
906920

907921
}
908922

@@ -918,7 +932,7 @@ var panelsViewer = {
918932
* @param {String} the data from the pattern
919933
* @param {Boolean} if this is going to be passed back to the styleguide
920934
*/
921-
renderPanels: function(panels, patternData, iframePassback) {
935+
renderPanels: function(panels, patternData, iframePassback, switchText) {
922936

923937
// set-up defaults
924938
var template, templateCompiled, templateRendered;
@@ -1040,7 +1054,7 @@ var panelsViewer = {
10401054
});
10411055

10421056
// gather panels from plugins
1043-
Dispatcher.trigger('insertPanels', [templateRendered, patternPartial, iframePassback]);
1057+
Dispatcher.trigger('insertPanels', [templateRendered, patternPartial, iframePassback, switchText]);
10441058

10451059
},
10461060

dist/styleguide/js/patternlab-viewer.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/js/modal-styleguide.js

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,7 @@ var modalStyleguide = {
3939
toggle: function(patternPartial) {
4040
if ((modalStyleguide.active[patternPartial] === undefined) || !modalStyleguide.active[patternPartial]) {
4141
var el = document.getElementById('sg-pattern-data-'+patternPartial);
42-
var patternData = JSON.parse(el.innerHTML);
43-
modalStyleguide.patternQueryInfo(patternData, true);
42+
modalStyleguide.collectAndSend(el, true, false);
4443
} else {
4544
modalStyleguide.close(patternPartial);
4645
}
@@ -95,14 +94,21 @@ var modalStyleguide = {
9594

9695
},
9796

97+
collectAndSend: function(el, iframePassback, switchText) {
98+
var patternData = JSON.parse(el.innerHTML);
99+
patternMarkupEl = document.querySelector('#'+patternData.patternPartial+' > .sg-pattern-example');
100+
patternData.patternMarkup = (patternMarkupEl !== null) ? patternMarkupEl.innerHTML : document.querySelector('body').innerHTML;
101+
modalStyleguide.patternQueryInfo(patternData, iframePassback, switchText);
102+
},
103+
98104
/**
99105
* return the pattern info to the top level
100106
*/
101-
patternQueryInfo: function(patternData, iframePassback) {
107+
patternQueryInfo: function(patternData, iframePassback, switchText) {
102108

103109
// send a message to the pattern
104110
try {
105-
var obj = JSON.stringify({ 'event': 'patternLab.patternQueryInfo', 'patternData': patternData, 'iframePassback': iframePassback});
111+
var obj = JSON.stringify({ 'event': 'patternLab.patternQueryInfo', 'patternData': patternData, 'iframePassback': iframePassback, 'switchText': switchText});
106112
parent.postMessage(obj, modalStyleguide.targetOrigin);
107113
} catch(e) {}
108114

@@ -138,10 +144,7 @@ var modalStyleguide = {
138144

139145
// send each up to the parent to be read and compiled into panels
140146
for (i = 0; i < els.length; i++) {
141-
patternData = JSON.parse(els[i].innerHTML);
142-
patternMarkupEl = document.querySelector('#'+patternData.patternPartial+' > .sg-pattern-example');
143-
patternData.patternMarkup = (patternMarkupEl !== null) ? patternMarkupEl.innerHTML : document.querySelector('body').innerHTML;
144-
modalStyleguide.patternQueryInfo(patternData, iframePassback);
147+
modalStyleguide.collectAndSend(els[i], iframePassback, data.switchText);
145148
}
146149

147150
} else if ((data.event !== undefined) && (data.event == 'patternLab.patternModalInsert')) {

0 commit comments

Comments
 (0)