@@ -19,6 +19,7 @@ import Globals from './globals.mjs'
1919const mAvailableMimeTypes = [ ] ,
2020 mAvailableUploaderTypes = [ 'library' , 'personal-avatar' , 'personal-biographer' , 'resume' , ] ,
2121 botBar = document . getElementById ( 'bot-bar' ) ,
22+ mDefaultReliveMemoryButtonText = 'next' ,
2223 mDefaultTeam = 'memoir' ,
2324 mGlobals = new Globals ( ) ,
2425 mLibraries = [ 'entry' , 'experience' , 'file' , 'story' ] , // ['chat', 'conversation']
@@ -397,7 +398,6 @@ async function mMemoryShadow(event){
397398 throw new Error ( `Unimplemented shadow type: ${ type } )
398399 }
399400 /* close popup */
400- // @stub - minimize to header instead?
401401 const popupClose = document . getElementById ( `popup-close_${ itemId } )
402402 if ( popupClose )
403403 popupClose . click ( )
@@ -526,6 +526,7 @@ function mCreateCollectionPopup(collectionItem) {
526526 /* create popup close button */
527527 const popupClose = document . createElement ( 'button' )
528528 popupClose . classList . add ( 'fa-solid' , 'fa-close' , 'popup-close' , 'collection-popup-close' )
529+ popupClose . dataset . isClose = 'true'
529530 popupClose . id = `popup-close_${ id }
530531 popupClose . setAttribute ( 'aria-label' , 'Close' )
531532 popupClose . addEventListener ( 'click' , mTogglePopup )
@@ -628,108 +629,35 @@ function mCreateCollectionPopup(collectionItem) {
628629 improveMemory . classList . add ( `collection-popup-${ type } )
629630 improveMemory . id = `popup-${ type } ${ id }
630631 improveMemory . name = 'improve-memory-container'
631- /* shadows, share -memory panel */
632+ /* shadows, relive -memory panel */
632633 const improveMemoryLane = document . createElement ( 'div' )
633634 improveMemoryLane . classList . add ( 'improve-memory-lane' )
634635 /* story shadows */
635636 if ( mShadows ?. length )
636637 improveMemoryLane . appendChild ( mCreateMemoryShadows ( id ) )
637- /* share memory panel */
638- const shareMemory = document . createElement ( 'div' )
639- shareMemory . classList . add ( 'share-memory-container' )
640- shareMemory . id = `share-memory_${ id }
641- shareMemory . name = 'share-memory-container'
642- const shareMemoryActorSelect = document . createElement ( 'div' )
643- shareMemoryActorSelect . classList . add ( 'share-memory-select' )
644- shareMemoryActorSelect . title = `Select the actor or narrator for the story. Who should tell your story? Or who will play "you"?`
645- /* actor */
646- const actorList = [ 'Biographer' , 'My Avatar' , 'Member avatar' , 'Q' , 'MyLife Professional Actor' , 'Custom' ]
647- const actor = document . createElement ( 'select' )
648- actor . classList . add ( 'share-memory-actor-select' )
649- actor . dataset . id = id
650- actor . dataset . type = `actor`
651- actor . id = `share-memory-actor-select_${ id }
652- actor . name = 'share-memory-actor-select'
653- /* actor/narrator label; **note**: for instance if member has tuned a specific bot of theirs to have an outgoing voice they like */
654- const actorLabel = document . createElement ( 'label' )
655- actorLabel . classList . add ( 'share-memory-actor-select-label' )
656- actorLabel . htmlFor = actor . id
657- actorLabel . id = `share-memory-actor-select-label_${ id }
658- actorLabel . textContent = 'Actor/Narrator:'
659- shareMemoryActorSelect . appendChild ( actorLabel )
660- const actorOption = document . createElement ( 'option' )
661- actorOption . disabled = true
662- actorOption . selected = true
663- actorOption . value = ''
664- actorOption . textContent = 'Select narrator...'
665- actor . appendChild ( actorOption )
666- actorList . forEach ( option => {
667- const actorOption = document . createElement ( 'option' )
668- actorOption . selected = false
669- actorOption . textContent = option
670- actorOption . value = option
671- actor . appendChild ( actorOption )
672- } )
673- actor . addEventListener ( 'change' , mStory )
674- shareMemoryActorSelect . appendChild ( actor )
675- shareMemory . appendChild ( shareMemoryActorSelect )
676- /* pov */
677- const shareMemoryPovSelect = document . createElement ( 'div' )
678- shareMemoryPovSelect . classList . add ( 'share-memory-select' )
679- shareMemoryPovSelect . title = `This refers to the position of the "listener" in the story. Who is the listener? Are they referred to as the protagonist? Antagonist? A particular person or character in your story?`
680- const povList = [ 'Me' , 'Protagonist' , 'Antagonist' , 'Character' , ]
681- const pov = document . createElement ( 'select' )
682- pov . classList . add ( 'share-memory-pov-select' )
683- pov . dataset . id = id
684- pov . dataset . type = `pov`
685- pov . id = `share-memory-pov-select_${ id }
686- pov . name = 'share-memory-pov-select'
687- /* pov label */
688- const povLabel = document . createElement ( 'label' )
689- povLabel . classList . add ( 'share-memory-pov-select-label' )
690- povLabel . htmlFor = pov . id
691- povLabel . id = `share-memory-pov-select-label_${ id }
692- povLabel . textContent = 'Point of View:'
693- shareMemoryPovSelect . appendChild ( povLabel )
694- const povOption = document . createElement ( 'option' )
695- povOption . disabled = true
696- povOption . selected = true
697- povOption . value = ''
698- povOption . textContent = 'Select listener vantage...'
699- pov . appendChild ( povOption )
700- povList . forEach ( option => {
701- const povOption = document . createElement ( 'option' )
702- povOption . value = option
703- povOption . textContent = option
704- pov . appendChild ( povOption )
705- } )
706- pov . addEventListener ( 'change' , mStory )
707- shareMemoryPovSelect . appendChild ( pov )
708- shareMemory . appendChild ( shareMemoryPovSelect )
709- /* narrative context */
710- const narrativeContext = document . createElement ( 'textarea' )
711- narrativeContext . classList . add ( 'share-memory-context' )
712- narrativeContext . dataset . id = id
713- narrativeContext . dataset . previousValue = ''
714- narrativeContext . dataset . type = `narrative`
715- narrativeContext . id = `share-memory-context_${ id }
716- narrativeContext . name = 'share-memory-context'
717- narrativeContext . placeholder = 'How should the story be told? Should it be scary? humorous? choose your own adventure?'
718- narrativeContext . title = `How should the story be told? Should it be scary? humorous? Will it be a choose your own adventure that deviates from the reality of your memory?`
719- narrativeContext . value = narrativeContext . dataset . previousValue
720- narrativeContext . addEventListener ( 'blur' , mStoryContext )
721- shareMemory . appendChild ( narrativeContext )
722- /* play memory */
723- const memoryPlay = document . createElement ( 'button' )
724- memoryPlay . classList . add ( 'relive-memory' )
725- memoryPlay . dataset . id = id
726- memoryPlay . id = `relive-memory_${ id }
727- memoryPlay . name = 'relive-memory'
728- memoryPlay . textContent = 'Relive Memory'
729- memoryPlay . addEventListener ( 'click' , mReliveMemory , { once : true } )
730- shareMemory . appendChild ( memoryPlay )
731- improveMemoryLane . appendChild ( shareMemory )
732- // play memory
638+ /* relive memory panel */
639+ const reliveMemory = document . createElement ( 'div' )
640+ reliveMemory . classList . add ( 'relive-memory-container' )
641+ reliveMemory . id = `relive-memory_${ id }
642+ reliveMemory . name = 'relive-memory-container'
643+ /* relive memory explanation */
644+ const reliveExplanation = document . createElement ( 'div' )
645+ reliveExplanation . classList . add ( 'relive-memory-explanation' )
646+ reliveExplanation . id = `relive-memory-explanation_${ id }
647+ reliveExplanation . name = 'relive-memory-explanation'
648+ reliveExplanation . textContent = 'Relive a memory by clicking the button below. This will bring up the memory in chat, where you can add to it, or simply enjoy reliving it!'
649+ /* relive memory button */
650+ const reliveButton = document . createElement ( 'button' )
651+ reliveButton . classList . add ( 'relive-memory-button' , 'button' )
652+ reliveButton . dataset . id = id /* required for triggering PATCH */
653+ reliveButton . id = `relive-memory-button_${ id }
654+ reliveButton . name = 'relive-memory-button'
655+ reliveButton . textContent = 'Relive Memory'
656+ reliveButton . addEventListener ( 'click' , mReliveMemory , { once : true } )
657+ /* append elements */
658+ reliveMemory . appendChild ( reliveExplanation )
659+ reliveMemory . appendChild ( reliveButton )
660+ improveMemoryLane . appendChild ( reliveMemory )
733661 /* memory media-carousel */
734662 const memoryCarousel = document . createElement ( 'div' )
735663 memoryCarousel . classList . add ( 'memory-carousel' )
@@ -1121,31 +1049,34 @@ async function mReliveMemory(event){
11211049 event . preventDefault ( )
11221050 event . stopPropagation ( )
11231051 const { id, inputContent, } = this . dataset
1052+ const previousInstance = document . getElementById ( `relive-memory-input-container_${ id } )
1053+ if ( previousInstance )
1054+ previousInstance . remove ( )
11241055 const popupClose = document . getElementById ( `popup-close_${ id } )
11251056 if ( popupClose )
11261057 popupClose . click ( )
11271058 const { command, parameters, messages, success, } = await mReliveMemoryRequest ( id , inputContent )
11281059 if ( success ) {
11291060 addMessages ( messages )
1130- // @todo - create this function in member, as it will display it in chat and pipe it back here as below
11311061 const input = document . createElement ( 'div' )
1132- // id alone is not unique!; input.id = `input_${ id }`
1133- input . name = `input_${ id }
11341062 input . classList . add ( 'memory-input-container' )
1063+ input . id = `relive-memory-input-container_${ id }
1064+ input . name = `input_${ id }
11351065 const inputContent = document . createElement ( 'textarea' )
11361066 inputContent . classList . add ( 'memory-input' )
11371067 inputContent . name = `memory-input_${ id }
11381068 const inputSubmit = document . createElement ( 'button' )
11391069 inputSubmit . classList . add ( 'memory-input-button' )
11401070 inputSubmit . dataset . id = id
1071+ inputSubmit . textContent = mDefaultReliveMemoryButtonText
11411072 input . appendChild ( inputContent )
11421073 input . appendChild ( inputSubmit )
11431074 inputContent . addEventListener ( 'input' , event => {
11441075 const { value, } = event . target
11451076 inputSubmit . dataset . inputContent = value
11461077 inputSubmit . textContent = value . length > 2
11471078 ? 'update'
1148- : 'next'
1079+ : mDefaultReliveMemoryButtonText
11491080 } )
11501081 inputSubmit . addEventListener ( 'click' , mReliveMemory , { once : true } )
11511082 addInput ( input )
@@ -1606,8 +1537,8 @@ function mTogglePopup(event){
16061537 if ( ! popup )
16071538 throw new Error ( `Popup not found: ${ popupId } )
16081539 const { active, } = popup . dataset
1609- if ( active === 'true' ) { /* close */
1610- console . log ( 'mTogglePopup::closing:' , popupId , popup . dataset , active )
1540+ const isClose = event . target ?. dataset ?. isClose
1541+ if ( active == 'true' || isClose ) { /* close */
16111542 popup . dataset . active = 'false'
16121543 hide ( popup )
16131544 } else { /* open */
0 commit comments