webpackJsonp([0],{ /***/ 33: /***/ (function(module, exports, __webpack_require__) { __webpack_require__(42); var ProjectPlayer = __webpack_require__(3); var MatchingActivity = __webpack_require__(10); var AttemptsMatchingActivity = __webpack_require__(57); var InteractiveImage = __webpack_require__(59); var View3d = __webpack_require__(25); var Config3D = __webpack_require__(56); var buttonsElementsFocus = __webpack_require__(68); var createButtonsNextPrev = __webpack_require__(69); var TRANSPARENT_DIALOG_CLASSNAMES = { overlay: 'transparent-overlay', dialog: 'highlighted-dialog' }; var $dialog; var $dialogOverlay; var INTERACTIVE_IMAGES_PARAMS = { sixth: { id: 'interactive-image-1', containerSelector: '#digfir_section_5 [data-type="rawhtml"]', svgPath: 'ch2_1/section6_2.svg', elements: [ { selector: '#redNucleus', glossarySelector: '#red-nucleus', description: 'red nucleus: plays a role in coordinating movement of the arms and hands.' }, { selector: '#nigra', glossarySelector: '#substantia-nigra', description: 'substantia nigra: connects to the basal ganglia and is critical for the'+ ' initiation of voluntary motor movement. Parkinson disease is a movement disorder caused by the'+ ' deterioration of dopamine cells in this area of the tegmentum.' }, { selector: '#grayMatter', glossarySelector: '#periaqueductal-gray-matter', description: 'periaqueductal gray matter: is a collection of cells '+ ' that surrounds the cerebral aqueduct plays a role in both species-typical behaviors, '+ ' such as female sexual behavior, and the modulation of pain.' }, { selector: '#reticularFormation', glossarySelector: '#reticular-formation', description: 'reticular formation: extends from the medulla (caudally) '+ 'to the midbrain (rostrally) and is involved in arousal, attention, and wakefulness.' } ], width: 600, onDialogOpen: function (interactiveImage, options) { interactiveImage.freezeSVG(options); $dialog = $('.ui-dialog'); $dialogOverlay = $('.ui-widget-overlay'); if (options.from && interactiveImage.isImageGlossary(options.from)) { $dialog.length && $dialog.addClass(TRANSPARENT_DIALOG_CLASSNAMES.dialog); $dialogOverlay.length && $dialogOverlay.addClass(TRANSPARENT_DIALOG_CLASSNAMES.overlay); } }, onDialogClose: function (interactiveImage, options) { interactiveImage.defrostSVG(options); ($dialog.length && $dialog.hasClass(TRANSPARENT_DIALOG_CLASSNAMES.dialog)) && $dialog.removeClass(TRANSPARENT_DIALOG_CLASSNAMES.dialog); ($dialogOverlay.length && $dialogOverlay.hasClass(TRANSPARENT_DIALOG_CLASSNAMES.overlay)) && $dialogOverlay.removeClass(TRANSPARENT_DIALOG_CLASSNAMES.overlay); } } }; var MATCHING_PARAMS = { '3': { activityType: MatchingActivity, onFinish: function () { safe_log('onFinish()'); player.completeSectionTask(); }, dndSettings: { container: '#digfir_section_3 [data-type="rawhtml"]', bounds: '#digfir_section_3 [data-type="rawhtml"]', dragItems: [ { node: '#first-image-drag-item-1', data: 1, ariaLabel: 'drag item 1', }, { node: '#first-image-drag-item-2', data: 2, ariaLabel: 'drag item 2', }, { node: '#first-image-drag-item-3', data: 3, ariaLabel: 'drag item 3', }, { node: '#first-image-drag-item-4', data: 4, ariaLabel: 'drag item 4', } ], dropAreas: [ { node: '#first-image-drop-area-1', ariaLabel: 'medulla', data: 4, }, { node: '#first-image-drop-area-2', ariaLabel: 'pons', data: 2, }, { node: '#first-image-drop-area-3', ariaLabel: 'cerebellum', data: 3, }, { node: '#first-image-drop-area-4', ariaLabel: 'reticular formation', data: 1, } ], } }, '6': { activityType: AttemptsMatchingActivity, firstDragItemPrefix: 'Structure.', firstDropAreaPrefix: 'Feature.', maxTriesCount: 3, dndSettings: { container: '#digfir_section_6 [data-type="rawhtml"]', bounds: '#digfir_section_6 [data-type="rawhtml"]', possibleToReplaceDroppedItem: false, dragItems: [ { node: '#drag-item-7', data: 7, ariaLabel: 'inferior colliculi', }, { node: '#drag-item-5', data: 5, ariaLabel: 'midbrain', }, { node: '#drag-item-6', data: 6, ariaLabel: 'periaqueductal gray matter', }, { node: '#drag-item-2', data: 2, ariaLabel: 'red nucteus', }, { node: '#drag-item-9', data: 9, ariaLabel: 'reticular formation', }, { node: '#drag-item-4', data: 4, ariaLabel: 'substantia nigra', }, { node: '#drag-item-3', data: 3, ariaLabel: 'superior colliculi', }, { node: '#drag-item-1', data: 1, ariaLabel: 'tectum', }, { node: '#drag-item-8', data: 8, ariaLabel: 'tegmentum', } ], dropAreas: [ { node: '#drop-area-1', ariaLabel: 'initiation of moment', data: 4, }, { node: '#drop-area-2', ariaLabel: 'movement of arms/hands', data: 2, }, { node: '#drop-area-3', ariaLabel: 'dorsal component of midbrain; comprised of superior and inferior colliculi', data: 1, }, { node: '#drop-area-4', ariaLabel: 'arousal and wakefulness', data: 9, }, { node: '#drop-area-5', ariaLabel: 'regulation of pain', data: 6, }, { node: '#drop-area-6', ariaLabel: 'ventral component of midbrain', data: 8, }, { node: '#drop-area-7', ariaLabel: 'ireceives input from eyes; produces orienting movements to visual stimuli', data: 3, }, { node: '#drop-area-8', ariaLabel: 'comprised of tectum and tegmentum', data: 5, }, { node: '#drop-area-9', ariaLabel: 'receives input from ears; produces orienting movements to auditory stimuli', data: 7, } ], } }, '8': { activityType: MatchingActivity, onFinish: function () { safe_log('onFinish()'); player.completeSectionTask(); }, dndSettings: { container: '#digfir_section_8 [data-type="rawhtml"]', bounds: '#digfir_section_8 [data-type="rawhtml"]', dragItems: [ { node: '#second-image-drag-item-1', data: 1, ariaLabel: 'drag item 1', }, { node: '#second-image-drag-item-2', data: 2, ariaLabel: 'drag item 2', }, { node: '#second-image-drag-item-3', data: 3, ariaLabel: 'drag item 3', }, { node: '#second-image-drag-item-4', data: 4, ariaLabel: 'drag item 4', } ], dropAreas: [ { node: '#second-image-drop-area-1', ariaLabel: 'amygdala', data: 3, }, { node: '#second-image-drop-area-2', ariaLabel: 'basal ganglia', data: 2, }, { node: '#second-image-drop-area-3', ariaLabel: 'hippocampus', data: 4, }, { node: '#second-image-drop-area-4', ariaLabel: 'neocortex', data: 1, } ], } }, }; var ChapterPlayer = ProjectPlayer.extend({ matchingSlides: { '3': null, '6': null, '8': null, }, initialize2: function () { this._super(); /** 3D **********************************************/ // 03 /////////////////////////////// var viewTwo = new View3d({ arrModelsNamesToShow: Config3D.MODELS_03_01.names, viewConfig: Config3D.PARAMS_SCENE['brainstem-left'], ariaData: Config3D.ARIA.brainstem03 }); viewTwo.setSize(500, 500); var wrapper3d2 = document.getElementById('threeBrain_02'); wrapper3d2.appendChild(viewTwo.mainContainer); var buttons03Focus = buttonsElementsFocus( { title: null, groups: Config3D.MODELS_03_01.groups }, viewTwo, wrapper3d2 ); wrapper3d2.prepend(buttons03Focus.wrapper); // 05 /////////////////////////////// var viewFive = new View3d({ arrModelsNamesToShow: Config3D.MODELS_05_01.names, viewConfig: Config3D.PARAMS_SCENE['brainstem-left5'], ariaData: Config3D.ARIA.brainstem05 }); viewFive.setSize(500, 500); var wrapper3d5 = document.getElementById('threeBrain_05'); wrapper3d5.appendChild(viewFive.mainContainer); var buttons05Focus = buttonsElementsFocus( { title: null, groups: Config3D.MODELS_05_01.groups, }, viewFive, wrapper3d5 ); wrapper3d5.prepend(buttons05Focus.wrapper); // 08 ////////////////////////////// var viewEightTree = new View3d({ arrModelsNamesToShow: Config3D.MODELS_08_01.names, viewConfig: Config3D.PARAMS_SCENE['brain-left'], ariaData: Config3D.ARIA.brain08left, controlsData: Config3D.controlsButtonsConfig08.third }); viewEightTree.setSize(400, 400); var viewEightFour = new View3d({ arrModelsNamesToShow: Config3D.MODELS_08_01.names, viewConfig: Config3D.PARAMS_SCENE['brain-left-half'], ariaData: Config3D.ARIA.brain08leftHalf, controlsData: Config3D.controlsButtonsConfig08.fourth }); viewEightFour.setSize(400, 400); new View3d.SynchronizerViews([viewEightTree, viewEightFour]); var wrapperApp = document.createElement('div'); wrapperApp.style.display = 'flex'; wrapperApp.style.flexDirection = 'row'; wrapperApp.style.justifyContent = 'center'; wrapperApp.appendChild(viewEightTree.mainContainer); wrapperApp.appendChild(viewEightFour.mainContainer); var wrapper3d8 = document.getElementById('threeBrain_08'); wrapper3d8.appendChild(wrapperApp); // 08 BUTTONS var buttonsNextPrev = createButtonsNextPrev(); var buttons08Forebrain = buttonsElementsFocus( Config3D.setsGroups08['forebrain'], [viewEightTree, viewEightFour], wrapper3d8, buttonsNextPrev.update ); wrapper3d8.prepend(buttons08Forebrain.wrapper); var buttons08Neocortex = buttonsElementsFocus( Config3D.setsGroups08['neocortex'], [viewEightTree, viewEightFour], wrapper3d8, buttonsNextPrev.update ); var buttons08Allocortex = buttonsElementsFocus( Config3D.setsGroups08['allocortex'], [viewEightTree, viewEightFour], wrapper3d8, buttonsNextPrev.update ); var buttons08Basalganglia = buttonsElementsFocus( Config3D.setsGroups08['basalganglia'], [viewEightTree, viewEightFour], wrapper3d8, buttonsNextPrev.update ); buttonsNextPrev.setSets( [ { buttons: buttons08Forebrain, action: function () { buttons08Forebrain.setFocusFirstButton(); viewEightTree.clearStrokeAlways(); viewEightFour.clearStrokeAlways(); viewEightTree.focusItem(); viewEightFour.focusItem(); } }, { buttons: buttons08Neocortex, action: function () { buttons08Neocortex.setFocusFirstButton(); viewEightTree.clearStrokeAlways(); viewEightFour.clearStrokeAlways(); viewEightTree.focusItem(Config3D.MODELS_08_01.groupsForebrain[0], true); viewEightFour.focusItem(Config3D.MODELS_08_01.groupsForebrain[0], true); } }, { buttons: buttons08Allocortex, action: function () { buttons08Allocortex.setFocusFirstButton(); viewEightTree.setStrokeAlways(Config3D.MODELS_08_01.strokes.allocortex); viewEightFour.setStrokeAlways(Config3D.MODELS_08_01.strokes.allocortex); viewEightTree.focusItem(Config3D.MODELS_08_01.groupsForebrain[1], true); viewEightFour.focusItem(Config3D.MODELS_08_01.groupsForebrain[1], true); } }, { buttons: buttons08Basalganglia, action: function () { buttons08Basalganglia.setFocusFirstButton(); viewEightTree.setStrokeAlways(Config3D.MODELS_08_01.strokes.basalganglia); viewEightFour.setStrokeAlways(Config3D.MODELS_08_01.strokes.basalganglia); viewEightTree.focusItem(Config3D.MODELS_08_01.groupsForebrain[2], true); viewEightFour.focusItem(Config3D.MODELS_08_01.groupsForebrain[2], true); } } ], wrapper3d8 ); buttonsNextPrev.setCallbackAppComplete( function () { document.getElementById('next_button').style.display = 'block'; }); wrapper3d8.appendChild(buttonsNextPrev.wrapper); /** **********************************************/ /* this.matchingSlides = { '3': null, '6': null, '8': null, }; */ this.sixthInteractiveImage = new InteractiveImage(INTERACTIVE_IMAGES_PARAMS.sixth); $('#digfir_section_1 .coverBlock').html(''); }, show_section: function ( section_to_show ) { this._super(section_to_show); this.checkActivitiesExist(MATCHING_PARAMS, this.matchingSlides); var lasx = player.get_LASX(); if (this.section_currently_showing === 6) { if (lasx > 6) { this.matchingSlides['6'].showAnswers(); $('#digfir_section_6').find('button.match-button').remove(); } } /* if (this.section_currently_showing === 8) { if (lasx > 8) { this.matchingSlides['8'].dnd.dragItems.forEach(this.placeItemToCorrectPosition.bind(this)); this.dnd.dropAreas.forEach(function (area) { area.showStatusIcon(true); }); } } */ if (this.section_currently_showing === 3) { // if we have already solved this DnD feature then show the correct // answers if (player.get_LASX() > 3) { // show correct answers this.show_slide_3_correct_answers(); } } if (this.section_currently_showing === 8) { // if we have already solved this DnD feature then show the correct // answers if (player.get_LASX() > 8) { // show correct answers this.show_slide_8_correct_answers(); } } if (lasx > this.section_currently_showing) { $('#next_button').show(); } if (this.section_currently_showing === (this.sections.length - 1)) { $('#next_button').hide(); } }, show_slide_3_correct_answers: function() { var $sec = $('#digfir_section_3'); if ($sec.hasClass('answered')) { return; } var slide = player.matchingSlides[3]; // remove all handlers from buttons by replacing them with copies $('#first-image-drag-item-1').replaceWith('
'); $('#first-image-drag-item-2').replaceWith(''); $('#first-image-drag-item-3').replaceWith(''); $('#first-image-drag-item-4').replaceWith(''); $('#first-image-drop-area-1').replaceWith(''); $('#first-image-drop-area-2').replaceWith(''); $('#first-image-drop-area-3').replaceWith(''); $('#first-image-drop-area-4').replaceWith(''); // draw lines for correct matches // reticular formation slide.drawLinkTo(slide.dnd.dragItems[0], slide.dnd.dropAreas[3].coordinates.default); // medulla slide.drawLinkTo(slide.dnd.dragItems[3], slide.dnd.dropAreas[0].coordinates.default); // pons slide.drawLinkTo(slide.dnd.dragItems[1], slide.dnd.dropAreas[1].coordinates.default); // cerebellum slide.drawLinkTo(slide.dnd.dragItems[2], slide.dnd.dropAreas[2].coordinates.default); // make everything green $sec.find('.drag-circle').css('background', 'rgb(23,137,26)'); $sec.find('.drop-circle').css('background', 'rgb(23,137,26)'); $sec.find('.link').css('background', 'rgb(23,137,26)'); $sec.addClass('answered'); }, show_slide_8_correct_answers: function() { var $sec = $('#digfir_section_8'); if ($sec.hasClass('answered')) { return; } var slide = player.matchingSlides[8]; // remove all handlers from buttons by replacing them with copies $('#second-image-drag-item-1').replaceWith(''); $('#second-image-drag-item-2').replaceWith(''); $('#second-image-drag-item-3').replaceWith(''); $('#second-image-drag-item-4').replaceWith(''); $('#second-image-drop-area-1').replaceWith(''); $('#second-image-drop-area-2').replaceWith(''); $('#second-image-drop-area-3').replaceWith(''); $('#second-image-drop-area-4').replaceWith(''); // draw lines for correct matches // neocortex slide.drawLinkTo(slide.dnd.dragItems[0], slide.dnd.dropAreas[3].coordinates.default); // basal ganglia slide.drawLinkTo(slide.dnd.dragItems[1], slide.dnd.dropAreas[1].coordinates.default); // amygdala slide.drawLinkTo(slide.dnd.dragItems[2], slide.dnd.dropAreas[0].coordinates.default); // hippocampus slide.drawLinkTo(slide.dnd.dragItems[3], slide.dnd.dropAreas[2].coordinates.default); // make everything green $sec.find('.drag-circle').css('background', 'rgb(23,137,26)'); $sec.find('.drop-circle').css('background', 'rgb(23,137,26)'); $sec.find('.link').css('background', 'rgb(23,137,26)'); $sec.addClass('answered'); }}); window.player = new ChapterPlayer(); /***/ }), /***/ 42: /***/ (function(module, exports) { // removed by extract-text-webpack-plugin /***/ }), /***/ 56: /***/ (function(module, exports) { var ARIA = { default: { role: 'application', tabIndex: '0', title: 'Test title', label: 'Test label', ariaHidden: 'Test hidden', describe: 'Test describe' }, brainstem03: { role: 'application', tabIndex: '0', title: 'Hindbrain 3d view', label: 'Hindbrain 3d view', ariaHidden: 'For rotation model use buttons or keys: left, right, top, bottom', describe: 'Rotate the figure to view the hindbrain from various perspectives' + 'and to learn more about the hindbrain and its components' + 'For rotation model use buttons or keys: left, right, top, bottom', }, brainstem05: { role: 'application', tabIndex: '0', title: 'Hindbrain 3d view', label: 'Hindbrain 3d view', ariaHidden: 'For rotation model use buttons or keys: left, right, top, bottom', describe: 'Explore the diencephalon and midbrain, as well as their components.' + 'Click and drag the image to rotate and view the midbrain from various perspectives.' + 'For rotation model use buttons or keys: left, right, top, bottom' }, brain08left: { role: 'application', tabIndex: '0', title: 'Whole brain 3d view from left', label: 'Whole brain 3d view from left', ariaHidden: 'For rotation model use buttons or keys: left, right, top, bottom', describe: 'Now well explore each component of the forebrain' + 'For rotation model use buttons or keys: left, right, top, bottom' }, brain08leftHalf: { role: 'application', tabIndex: '0', title: 'Half brain 3d view from left', label: 'Half brain 3d view from left', ariaHidden: 'For rotation model use buttons or keys: left, right, top, bottom', describe: 'Now well explore each component of the forebrain' + 'For rotation model use buttons or keys: left, right, top, bottom' }, }; var PARAMS_SCENE = { 'default': { cameraPosition: [0, 0, 500], modelRotation: [0, -Math.PI/2, 0], modelPosition: [0, 0, 0], hideHalf: false, }, 'brainstem-left': { cameraPosition: [0, 0, 300], modelRotation: [0, -Math.PI / 2, 0], modelPosition: [0, 15, 0], hideHalf: false, }, 'brainstem-left5': { cameraPosition: [0, 0, 330], modelRotation: [0, -Math.PI / 2, 0], modelPosition: [0, 10, 0], hideHalf: false, }, 'brain-left': { cameraPosition: [0, 0, 470], modelRotation: [0, -Math.PI / 2, 0], modelPosition: [0, 0, 0], hideHalf: false, }, 'brain-left-half': { cameraPosition: [0, 0, 470], modelRotation: [0, -Math.PI / 2, 0], modelPosition: [0, 0, 0], hideHalf: 'left', }, }; var MODELS_03_01 = { names: [ 'pons', 'cerebellum', 'medulla', 'medulla_bottom', 'reticular', ], groups: [ { name: 'Hindbrain', models: ['pons', 'cerebellum', 'medulla', 'reticular'], renderTopFocus: false, description: 'Evolutionarily the older part of the brain, this structure contains the pons, medulla,' + ' reticular formation, and cerebellum—structures that coordinate and control most voluntary and' + ' involuntary movements, ranging from breathing to balance to fine movements.' }, { name: 'Medulla', models: ['medulla'], renderTopFocus: false, description: 'This structure, which marks the transition between the spinal cord and the brainstem,' + ' regulates vital autonomic functions, such as breathing and heart rate.' }, { name: 'Pons', models: ['pons'], renderTopFocus: false, description: 'This structure, immediately rostral to the medulla, forms a physical bridge between the' + ' cerebellum and the rest of the brain. The pons regulates various autonomic functions, receives' + ' sensory information from the head and neck, controls various involuntary movements, and plays an' + ' important role in the regulation of sleep.' }, { name: 'Cerebellum', models: ['cerebellum'], renderTopFocus: false, description: 'This major brainstem structure is perhaps best known for its role in coordination, control,' + ' and timing of complex movement. It also plays an important role in cognitive function.' }, { name: 'Reticular formation', models: ['reticular'], renderTopFocus: true, description: 'This diffuse collection of cells runs the length of the brainstem and is well known for its' + ' role in arousal, attention, and wakefulness.' }, ] }; var MODELS_05_01 = { names: [ 'pons', 'cerebellum', 'medulla', 'medulla_bottom', 'diencephalon', 'reticular', 'tegmentum', 'midbrain', 'superior', 'inferior', 'thalamus', 'hypothalamus', ], groups: [ { name: 'Midbrain', models: ['midbrain', 'tegmentum', 'inferior', 'superior'], renderTopFocus: false, description: 'Central part of the brain; contains neural circuits for hearing and seeing as well as for orienting' + ' movements.' }, { name: 'Tectum', models: ['superior', 'inferior'], renderTopFocus: false, description: ''+ this.getFeedbackMessage() + '
'); this.say(this.getFeedbackMessage()); this.disableButton(this.$checkButton); this.params.onFinish(); } else if (this.triesCount === this.params.maxTriesCount && !this.isActivityFinished()) { this.say(this.getFeedbackMessage()); this.$checkButton.attr('disabled', true); this.dnd.disable(); $('.feedback').remove(); this.params.onFinish(); } else { $('.feedback').remove(); if (this.triesCount === 2) { this.dnd.disable(); this.$checkButton.html('See correct answers'); } else { var count = (this.params.maxTriesCount - 1) - this.triesCount; $('.matching-buttons-container') .before(''+ this.getFeedbackMessage() +' '+ count + ' attempts left.'+'
'); this.say(this.getFeedbackMessage() +' '+ count + ' attempts left.'); $('.feedback').focus(); this.disableButton(this.$checkButton); } } this.triesCount++; }; AttemptsMatchingActivity.prototype.showAnswers = function () { ReusableMatchingActivity.prototype.showAnswers.apply(this, arguments); }; AttemptsMatchingActivity.prototype.resetItem = function (item) { this.drawLinkTo(item, item.coordinates.currentStart); item.reset(); }; AttemptsMatchingActivity.prototype.setItemStatus = function (item) { if (item.correct) { item.chosenDropArea.showStatusIcon(true); this.paintElements(item, item.chosenDropArea, this.params.correctColor); item.disable(); } else { item.reset(); this.drawLinkTo(item, item.coordinates.currentStart); } }; AttemptsMatchingActivity.prototype.addTransitionHandlers = function () { this.dnd.dragItems.forEach(function (item) { item.node.addEventListener('keydown', this.onHorizontalArrowKeyDown(item)); }.bind(this)); }; AttemptsMatchingActivity.prototype.onDragItemSelect = function (e, params) { this.selectedItem = this.selectedItem !== params.dragItem ? params.dragItem : null; if (!this.selectedItem) { this.resetSelection(params.dragItem); } else { params.dragItem.changeCurrentKeyboardDesc(function () { return this.params.a11yTexts.selectedItemDescription; }.bind(this)); this.enableDropAreas(); if (platform.ios || platform.android) { this.dnd.firstAllowedDropArea.focus(); } else { this.say(this.params.a11yTexts.selected + ' ' + this.params.a11yTexts.selectedItemDescription); } } }; module.exports = AttemptsMatchingActivity; /***/ }), /***/ 59: /***/ (function(module, exports, __webpack_require__) { var dialog = __webpack_require__(27); var DEFAULT_PARAMS = { elements: [ { selector: '', glossarySelector: '', description: '' } ], id: 'interactive-image', containerSelector: document.documentElement, pathPrefix: 'asset/images/', svgPath: '', width: 0, height: 0, highlightOpacity: 0.3, zIndex: 1002, disableOnImageHandlers: false, onDialogOpen: function (interactiveImage, options) {}, onDialogClose: function (interactiveImage, options) {} }; var InteractiveImage = function (params) { this.params = $.extend(true, {}, DEFAULT_PARAMS, params); this.$container = $(this.params.containerSelector); this.$descContainer = $('').hide(); this.highlightedNode = null; this.pressedElement = null; this.createSVGObject(); this.$container.append(this.$descContainer); // this.extendDialog(); }; InteractiveImage.prototype.extendDialog = function () { var ctx = this; window.Local_Dialog = $.extend(true, {}, dialog, { open: function (html, options) { dialog.open(html, options); ctx.params.onDialogOpen(ctx, options); }, close: function () { dialog.close(); ctx.params.onDialogClose(ctx); } }); }; InteractiveImage.prototype.getSVGPath = function () { return this.params.pathPrefix + this.params.svgPath; }; InteractiveImage.prototype.createSVGObject = function () { this.$svgObject = $(''); this.params.width && this.$svgObject.attr('width', this.params.width); this.params.height && this.$svgObject.attr('width', this.params.height); this.$container.append(this.$svgObject); this.svgObjectElement = document.getElementById(this.params.id); this.svgObjectElement.addEventListener('load', this.onSVGLoad.bind(this), false); }; InteractiveImage.prototype.onSVGLoad = function () { this.svgElement = this.svgObjectElement.contentDocument; this.initializeElements(); }; InteractiveImage.prototype.initializeElements = function () { this.elements = []; this.svgImageNode = this.svgElement.querySelector('image'); this.svgElement.querySelector('svg').setAttribute('focusable', false); this.params.elements.forEach(function (elem, index) { this.elements.push({ svgNode: this.svgElement.querySelector(elem.selector), glossaryNode: elem.glossarySelector ? document.querySelector(elem.glossarySelector) : null, description: elem.description }); this.elements[index].svgNode.style.cursor = this.params.disableOnImageHandlers ? 'auto' : 'pointer'; this.elements[index].glossaryNode.setAttribute('aria-pressed', false); this.elements[index].glossaryNode.classList.add('control_button'); // this.elements[index].glossaryNode && this.elements[index].glossaryNode.setAttribute('data-image-glossary', true); this.hideElement(this.elements[index].svgNode); this.addMouseHandlers(this.elements[index]); }.bind(this)); }; InteractiveImage.prototype.addMouseHandlers = function (element) { if (!this.params.disableOnImageHandlers) { element.svgNode.addEventListener('click', this.onSVGElementClick(element), false); element.svgNode.addEventListener('mouseenter', this.onSVGElementMouseEnter(element), false); element.svgNode.addEventListener('mouseleave', this.onSVGElementMouseLeave(element), false); } element.glossaryNode.addEventListener('click', this.onGlossaryClick(element), false); // element.glossaryNode.addEventListener('focus', this.onSVGElementMouseEnter(element), false); // element.glossaryNode.addEventListener('blur', this.onSVGElementBlur(element), false); }; InteractiveImage.prototype.onGlossaryClick = function (element) { return function () { if (element === this.pressedElement) { var currentPressedValue = JSON.parse(element.glossaryNode.getAttribute('aria-pressed')); if (currentPressedValue) { this.$descContainer.hide(); this.removeHighlight(element); } else { this.$descContainer.show(); this.highlight(element); } element.glossaryNode.setAttribute('aria-pressed', !currentPressedValue); } else { this.pressedElement && this.pressedElement.glossaryNode.setAttribute('aria-pressed', false); element.glossaryNode.setAttribute('aria-pressed', true); if (this.$descContainer.is(':hidden')) { this.$descContainer.show(); } this.$descContainer.html(element.description); this.highlight(element); } this.pressedElement = element; }.bind(this); }; InteractiveImage.prototype.onSVGElementClick = function (element) { return function () { var currentZIndex = this.$svgObject.css('z-index'); if (!currentZIndex || currentZIndex === 'auto') { this.$svgObject.css('z-index', this.params.zIndex); } element.glossaryNode && element.glossaryNode.click(); }.bind(this); }; InteractiveImage.prototype.onSVGElementMouseEnter = function (element) { return function () { this.highlight(element); }.bind(this); }; InteractiveImage.prototype.onSVGElementMouseLeave = function (element) { return function (e) { if (e.relatedTarget) { this.removeHighlight(element); } }.bind(this); }; InteractiveImage.prototype.onSVGElementBlur = function (element) { return function (e) { if (e.relatedTarget && !$(e.relatedTarget).closest('.ui-dialog').length) { this.removeHighlight(element); } }.bind(this); }; InteractiveImage.prototype.highlight = function (element) { if (this.highlightedNode && this.highlightedNode !== element.svgNode) { this.hideElement(this.highlightedNode); } this.svgImageNode.style.opacity = this.params.highlightOpacity; this.showElement(element.svgNode); this.highlightedNode = element.svgNode; }; InteractiveImage.prototype.removeHighlight = function (element) { this.svgImageNode.style.opacity = 1; this.hideElement(element.svgNode); }; InteractiveImage.prototype.showElement = function (element) { element.style.opacity = 1; }; InteractiveImage.prototype.hideElement = function (element) { element.style.opacity = 0; }; InteractiveImage.prototype.freezeSVG = function (dialogOptions) { if (dialogOptions.from && this.isImageGlossary(dialogOptions.from)) { this.$svgObject.css({ 'z-index': this.params.zIndex, 'pointer-events': 'none' }); } }; InteractiveImage.prototype.defrostSVG = function () { this.$svgObject.css({ 'z-index': 'auto', 'pointer-events': 'auto' }); }; InteractiveImage.prototype.isImageGlossary = function ($node) { return $node.attr('data-image-glossary'); }; module.exports = InteractiveImage; /***/ }), /***/ 68: /***/ (function(module, exports) { // prepend polyfill (function (arr) { arr.forEach(function (item) { if (item.hasOwnProperty('prepend')) { return; } Object.defineProperty(item, 'prepend', { configurable: true, enumerable: true, writable: true, value: function prepend () { // eslint-disable-next-line prefer-rest-params var argArr = Array.prototype.slice.call(arguments), docFrag = document.createDocumentFragment(); argArr.forEach(function (argItem) { var isNode = argItem instanceof Node; docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); }); this.insertBefore(docFrag, this.firstChild); } }); }); })([Element.prototype, Document.prototype, DocumentFragment.prototype]); var selectedButton = null; /** * Toggle button's aria-pressed attribute and set description * @param {HTMLElement} buttonNode * @param {string} itemDesc * @param {HTMLElement} descContainerNode */ function toggleButton (buttonNode, itemDesc, descContainerNode) { var currentValue = JSON.parse(buttonNode.getAttribute('aria-pressed')); buttonNode.setAttribute('aria-pressed', !currentValue); descContainerNode.innerHTML = '' + buttonNode.innerHTML + ': ' + itemDesc; window.player.setTermRefHandlers(descContainerNode); if (buttonNode !== selectedButton) { selectedButton && selectedButton.setAttribute('aria-pressed', false); selectedButton = buttonNode; } if (currentValue) { descContainerNode.style.display = 'none'; } else if ( descContainerNode.style.display === 'none' && itemDesc) { descContainerNode.style.display = 'block'; } } /** * Creates description html5 element * @return {HTMLElement} */ function createDescriptionContainer () { var descriptionContainer = document.createElement('div'); descriptionContainer.setAttribute('aria-live', 'polite'); descriptionContainer.classList.add('description3d-container'); descriptionContainer.style.display = 'none'; return descriptionContainer; } /** * Creates buttons for 3D activity, which highlight 3D-element's parts * @param {array} config * @param {object|object[]} app * @param {HTMLElement} parentNode * @param {function} clickCallback * @return {HTMLElement} */ function create3DButtons (config, app, parentNode, clickCallback) { var wrapper = document.createElement('div'); wrapper.classList.add('wrapper3dbuttons-container'); var descContainer = createDescriptionContainer(); var callback = clickCallback ? clickCallback : function () {}; var title = config.title ? document.createElement('div') : null; if (title) { title.style.textAlign = 'center'; title.innerText = config.title; wrapper.appendChild(title); } var buttContainer = document.createElement('div'); buttContainer.classList.add('buttons3d-container'); wrapper.appendChild(buttContainer); var dataSet = { itemsClicked: {}, isComplete: false }; var checkSetComplete = function (obj) { for (var key in obj) { if (!obj[key]) { return false; } } return true; }; config.groups.forEach( function (item) { dataSet.itemsClicked[item.name] = false; var butt = document.createElement('button'); butt.classList.add('control_button'); butt.setAttribute('aria-pressed', false); butt.innerHTML = item.name; buttContainer.appendChild(butt); butt.addEventListener('click', function () { toggleButton(butt, item.description, descContainer); if (app.length) { app.forEach( function (appItem) { appItem.focusItem(item); }); } else { app.focusItem(item); } if (!dataSet.isComplete) { dataSet.itemsClicked[item.name] = true; dataSet.isComplete = checkSetComplete(dataSet.itemsClicked); } callback(dataSet.isComplete); }); }); (parentNode || wrapper).appendChild(descContainer); /** * Set window focus on first button */ var setFocusFirstButton = function () { var buttons = wrapper.getElementsByTagName('button'); buttons[0].focus(); }; return { wrapper: wrapper, descContainer: descContainer, dataSet: dataSet, setFocusFirstButton: setFocusFirstButton, }; }; module.exports = create3DButtons; /***/ }), /***/ 69: /***/ (function(module, exports) { var dataButtons = { 'prev': { innerText: 'Prev', title: 'Previous', ariaLabel: 'previous structures', ariaHidden: 'false', }, 'next': { innerText: 'Next', title: 'Next', ariaLabel: 'next structures', ariaHidden: 'false', }, }; /** * Creates butoons Prev Next to show hide sets. * @return {{ * update: update, * wrapper: HTMLDivElement, * setSets: setSets, * setCallbackAppComplete: setCallbackAppComplete, * }} */ var buttonsNextPrev = function () { var state = 'started'; // || 'complete' var currentSetIndex = 0; var onComplete = function () {}; var wrapper = document.createElement('div'); wrapper.classList.add('buttons3dNextPrev-container'); var wrapperPrev = document.createElement('div'); wrapperPrev.classList.add('button3dPrev-container'); wrapper.appendChild(wrapperPrev); var wrapperNext = document.createElement('div'); wrapperNext.classList.add('button3dNext-container'); wrapper.appendChild(wrapperNext); var buttonPrev = document.createElement('button'); buttonPrev.classList.add('control_button'); buttonPrev.innerText = dataButtons['prev'].innerText; buttonPrev.title = dataButtons['prev'].title; buttonPrev.setAttribute('aria-label', dataButtons['prev'].ariaLabel); buttonPrev.setAttribute('aria-hidden', dataButtons['prev'].ariaHidden); buttonPrev.addEventListener('click', function () { currentSetIndex --; onClickButton(currentSetIndex, currentSetIndex+1); }); buttonPrev.style.display = 'none'; wrapperPrev.appendChild(buttonPrev); var buttonNext = document.createElement('button'); buttonNext.classList.add('control_button'); buttonNext.innerText = dataButtons['next'].innerText; buttonNext.title = dataButtons['next'].title; buttonNext.setAttribute('aria-label', dataButtons['next'].ariaLabel); buttonNext.setAttribute('aria-hidden', dataButtons['next'].ariaHidden); buttonNext.addEventListener('click', function () { currentSetIndex ++; onClickButton(currentSetIndex, currentSetIndex-1); }); buttonNext.style.display = 'none'; wrapperNext.appendChild(buttonNext); var onClickButton = function (newIndex, oldIndex) { targetWrapper.removeChild(arrSets[oldIndex].buttons.wrapper); arrSets[oldIndex].buttons.descContainer.style.display = 'none'; targetWrapper.prepend(arrSets[newIndex].buttons.wrapper); update(arrSets[newIndex].buttons.dataSet.isComplete); arrSets[newIndex].action(); }; var arrSets = null; var targetWrapper = null; /** * Save data sets to show/hide * @param {Array} sets { * action: {function} callback switch set, * dataSet: {object}, * descContainer: {HTMLDivElement}, * wrapper: {HTMLDivElement}, * } * @param {HTMLDivElement} tWrapper */ var setSets = function (sets, tWrapper) { arrSets = sets; targetWrapper = tWrapper; }; /** * Update Prev Next buttons * @param {boolean} isSetComplete */ var update = function (isSetComplete) { currentSetIndex > 0 ? buttonPrev.style.display = 'block' : buttonPrev.style.display = 'none'; currentSetIndex < arrSets.length - 1 ? buttonNext.style.display = 'block' : buttonNext.style.display = 'none'; if (!isSetComplete) { buttonNext.style.display = 'none'; } if ( currentSetIndex === arrSets.length - 1 && isSetComplete && state === 'started' ) { state = 'complete'; onComplete(); } }; /** * Save callback app complete * @param {function} callback */ var setCallbackAppComplete = function (callback) { onComplete = callback; }; return { wrapper: wrapper, update: update, setSets: setSets, setCallbackAppComplete: setCallbackAppComplete }; }; module.exports = buttonsNextPrev; /***/ }), /***/ 82: /***/ (function(module, exports, __webpack_require__) { module.exports = __webpack_require__(33); /***/ }) },[82]); //# sourceMappingURL=kolb_nia_winter2019_ch2_1.js.map