From 2f0a62820af8458d74c7ca5cf1cffa803592fc78 Mon Sep 17 00:00:00 2001
From: Nicola Knight <nk1g09@soton.ac.uk>
Date: Mon, 17 Dec 2018 21:22:28 +0000
Subject: [PATCH] international encoding for remaining header/footer elements

---
 .../AttachSubdeck/AttachSlidesModal.js        | 56 +++++++++++++------
 .../AttachSubdeck/AttachSubdeckModal.js       | 45 +++++++++++----
 .../ContentActions/DownloadModal.js           | 10 +++-
 .../ContentPanel/ContentActions/EmbedModal.js |  6 +-
 intl/default.json                             | 12 ++++
 5 files changed, 99 insertions(+), 30 deletions(-)

diff --git a/components/Deck/ContentPanel/AttachSubdeck/AttachSlidesModal.js b/components/Deck/ContentPanel/AttachSubdeck/AttachSlidesModal.js
index dd4bbdaa9..872ba4354 100644
--- a/components/Deck/ContentPanel/AttachSubdeck/AttachSlidesModal.js
+++ b/components/Deck/ContentPanel/AttachSubdeck/AttachSlidesModal.js
@@ -51,6 +51,29 @@ class AttachSubdeckModal extends React.Component{
         this.handleNextButton = this.handleNextButton.bind(this);
         this.handlePreviousButton = this.handlePreviousButton.bind(this);
 
+        this.messages = defineMessages({
+            attachText:{
+                id: 'attachSlidesModal.attachText',
+                defaultMessage: 'Attach Slides'
+            },
+            attach:{
+                id: 'attachSlidesModal.attach',
+                defaultMessage: 'Attach'
+            },
+            next:{
+                id: 'attachSlidesModal.next',
+                defaultMessage: 'Next'
+            },
+            previous:{
+                id: 'attachSlidesModal.previous',
+                defaultMessage: 'Previous'
+            },
+            cancel:{
+                id: 'attachSlidesModal.cancel',
+                defaultMessage: 'Cancel'    
+            }
+
+        });
 
     }
 
@@ -239,9 +262,9 @@ class AttachSubdeckModal extends React.Component{
             }
 
             actionButton = <Button id="nextAttachModal" color="green" icon tabIndex="0" type="button" aria-label="Next Select slides"
-                              data-tooltip="Attach" disabled={this.state.selectedDeckId===-1} onClick={this.handleNextButton}>
+                              data-tooltip={this.context.intl.formatMessage(this.messages.next)} disabled={this.state.selectedDeckId===-1} onClick={this.handleNextButton}>
                                <Icon name="arrow right"/>
-                                Next
+                               {this.context.intl.formatMessage(this.messages.next)}
                                <Icon name="arrow right"/>
                             </Button>;
             actionButton2='';
@@ -253,23 +276,23 @@ class AttachSubdeckModal extends React.Component{
             //<TextArea className="sr-only" id="attachSlidesDescription" value="Select slides to attach" tabIndex ='-1'/>;
 
             segmentPanelContent = <AttachSlides numColumns="3" />;
-            actionButton = <Button id="attachAttachModal" color="green" icon tabIndex="0" type="button" aria-label="Attach"
-                            data-tooltip="Attach" disabled={this.state.selectedSlides.length===0} onClick={this.handleAttachButton}>
+            actionButton = <Button id="attachAttachModal" color="green" icon tabIndex="0" type="button" aria-label={this.context.intl.formatMessage(this.messages.attach)}
+                            data-tooltip={this.context.intl.formatMessage(this.messages.attach)} disabled={this.state.selectedSlides.length===0} onClick={this.handleAttachButton}>
                              <Icon name="attach"/>
-                              Attach
+                             {this.context.intl.formatMessage(this.messages.attach)}
                              <Icon name="attach"/>
                           </Button>;
-            actionButton2 =<Button id="previousAttachModal" color="green" icon tabIndex="0" type="button" aria-label="Previos"
-                            data-tooltip="Previous" onClick={this.handlePreviousButton}>
+            actionButton2 =<Button id="previousAttachModal" color="green" icon tabIndex="0" type="button" aria-label={this.context.intl.formatMessage(this.messages.previous)}
+                            data-tooltip={this.context.intl.formatMessage(this.messages.previous)} onClick={this.handlePreviousButton}>
                              <Icon name="arrow left"/>
-                              Previous
+                             {this.context.intl.formatMessage(this.messages.previous)}
                              <Icon name="arrow left"/>
                           </Button>;
 
         }
 
         let attachSlideBtn = <Popup trigger={<Button as="button" className={this.props.buttonStyle.classNames}
-                                                     type="button" aria-label="Attach slides"
+                                                     type="button" aria-label={this.context.intl.formatMessage(this.messages.attachText)}
                                                      aria-hidden={this.state.modalOpen}
                                                      basic onClick={this.handleOpen}
                                                      tabIndex={this.props.buttonStyle.noTabIndex ? -1 : 0}>
@@ -277,7 +300,7 @@ class AttachSubdeckModal extends React.Component{
                 <Icon className="grey" name="file alternate outline"/>
                 <Icon className="corner black" name="attach"/>
             </Icon.Group>
-        </Button>} content='Attach slides' on='hover'/>;
+        </Button>} content={this.context.intl.formatMessage(this.messages.attachText)} on='hover'/>;
 
 
         return (
@@ -285,13 +308,13 @@ class AttachSubdeckModal extends React.Component{
                 open={this.state.modalOpen}
                 onClose={this.handleClose}
                 role="dialog"
-                id="attachSubDeckModal"
+                id="attachSlidesModal"
                 aria-labelledby="attachModalHeader"
                 aria-describedby="attachSlidesDescriptionSR"
                 aria-hidden = {!this.state.modalOpen}
                 tabIndex="0">
                 <FocusTrap
-                        id="focus-trap-attachSubdeckModal"
+                        id="focus-trap-attachSlidesModal"
                         focusTrapOptions={{
                             onDeactivate: this.unmountTrap,
                             clickOutsideDeactivates: true,
@@ -301,7 +324,7 @@ class AttachSubdeckModal extends React.Component{
                         className = "header">
 
                 <Modal.Header className="ui center aligned" as="h1" id="attachModalHeader">
-                     Attach slides
+                    {this.context.intl.formatMessage(this.messages.attachText)}
                 </Modal.Header>
                 <Modal.Content>
                     <Container text>
@@ -316,8 +339,8 @@ class AttachSubdeckModal extends React.Component{
                             <Modal.Actions>
                               {actionButton}
                               {actionButton2}
-                              <Button id="cancelAttachModal" color="red" tabIndex="0" type="button" aria-label="Cancel" data-tooltip="Cancel" onClick={this.handleClose} >
-                                Cancel
+                              <Button id="cancelAttachModal" color="red" tabIndex="0" type="button" aria-label={this.context.intl.formatMessage(this.messages.cancel)} data-tooltip={this.context.intl.formatMessage(this.messages.cancel)} onClick={this.handleClose} >
+                              {this.context.intl.formatMessage(this.messages.cancel)}
                               </Button>
                             </Modal.Actions>
                          </Segment>
@@ -334,7 +357,8 @@ class AttachSubdeckModal extends React.Component{
 
 
 AttachSubdeckModal.contextTypes = {
-    executeAction: PropTypes.func.isRequired
+    executeAction: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
 };
 
 AttachSubdeckModal = connectToStores(AttachSubdeckModal,[UserProfileStore,AttachSubdeckModalStore,DeckTreeStore],(context,props) => {
diff --git a/components/Deck/ContentPanel/AttachSubdeck/AttachSubdeckModal.js b/components/Deck/ContentPanel/AttachSubdeck/AttachSubdeckModal.js
index e1766ab42..b6b3db324 100644
--- a/components/Deck/ContentPanel/AttachSubdeck/AttachSubdeckModal.js
+++ b/components/Deck/ContentPanel/AttachSubdeck/AttachSubdeckModal.js
@@ -45,6 +45,30 @@ class AttachSubdeckModal extends React.Component{
         this.unmountTrap = this.unmountTrap.bind(this);
         this.handleAttachButton = this.handleAttachButton.bind(this);
 
+        this.messages = defineMessages({
+            attachText:{
+                id: 'attachSubdeckModal.attachText',
+                defaultMessage: 'Attach Sub-deck'
+            },
+            attach:{
+                id: 'attachSubdeckModal.attach',
+                defaultMessage: 'Attach'
+            },
+            next:{
+                id: 'attachSubdeckModal.next',
+                defaultMessage: 'Next'
+            },
+            previous:{
+                id: 'attachSubdeckModal.previous',
+                defaultMessage: 'Previous'
+            },
+            cancel:{
+                id: 'attachSubdeckModal.cancel',
+                defaultMessage: 'Cancel'    
+            }
+
+        });
+
     }
 
     componentWillReceiveProps(nextProps){
@@ -185,7 +209,7 @@ class AttachSubdeckModal extends React.Component{
 
         let attachDeckBtn = <Popup trigger={<Button as="button" className={this.props.buttonStyle.classNames}
                                                     type="button"
-                                                    aria-label="Attach sub-deck"
+                                                    aria-label={this.context.intl.formatMessage(this.messages.attachText)}
                                                     aria-hidden={this.state.modalOpen}
                                                     basic icon onClick={this.handleOpen}
                                                     tabIndex={this.props.buttonStyle.noTabIndex?-1:0} >
@@ -193,7 +217,7 @@ class AttachSubdeckModal extends React.Component{
                 <Icon className="yellow" name="folder" />
                 <Icon className="corner" name="attach" />
             </Icon.Group>
-        </Button>} content='Attach sub-deck' on='hover'/>;
+        </Button>} content={this.context.intl.formatMessage(this.messages.attachText)} on='hover'/>;
 
         return (
            <Modal trigger={attachDeckBtn}
@@ -216,7 +240,7 @@ class AttachSubdeckModal extends React.Component{
                         className = "header">
 
                 <Modal.Header className="ui center aligned" as="h1" id="attachSubdeckModalHeader">
-                     Attach sub-deck
+                    {this.context.intl.formatMessage(this.messages.attachText)}
                 </Modal.Header>
                 <Modal.Content>
                     <Container text>
@@ -229,14 +253,14 @@ class AttachSubdeckModal extends React.Component{
                                {segmentPanelContent}
                             </Segment>
                             <Modal.Actions>
-                              <Button id="attachAttachDeckModal" color="green" icon tabIndex="0" type="button" aria-label="Attach"
-                                  data-tooltip="Attach" disabled={this.state.selectedDeckId===-1} onClick={this.handleAttachButton}>
+                              <Button id="attachAttachDeckModal" color="green" icon tabIndex="0" type="button" aria-label={this.context.intl.formatMessage(this.messages.attach)}
+                                  data-tooltip={this.context.intl.formatMessage(this.messages.attach)} disabled={this.state.selectedDeckId===-1} onClick={this.handleAttachButton}>
+                                <Icon name="attach"/>
+                                    {this.context.intl.formatMessage(this.messages.attach)}
                                 <Icon name="attach"/>
-                                  Attach
-                                  <Icon name="attach"/>
                               </Button>
-                              <Button id="cancelAttachModal" color="red" tabIndex="0" type="button" aria-label="Cancel" data-tooltip="Cancel" onClick={this.handleClose} >
-                                Cancel
+                              <Button id="cancelAttachModal" color="red" tabIndex="0" type="button" aria-label={this.context.intl.formatMessage(this.messages.cancel)} data-tooltip={this.context.intl.formatMessage(this.messages.cancel)} onClick={this.handleClose} >
+                              {this.context.intl.formatMessage(this.messages.cancel)}
                               </Button>
                             </Modal.Actions>
                          </Segment>
@@ -253,7 +277,8 @@ class AttachSubdeckModal extends React.Component{
 
 
 AttachSubdeckModal.contextTypes = {
-    executeAction: PropTypes.func.isRequired
+    executeAction: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired
 };
 
 AttachSubdeckModal = connectToStores(AttachSubdeckModal,[UserProfileStore,AttachSubdeckModalStore,DeckTreeStore],(context,props) => {
diff --git a/components/Deck/ContentPanel/ContentActions/DownloadModal.js b/components/Deck/ContentPanel/ContentActions/DownloadModal.js
index c6dcbd2e2..37dfaedba 100644
--- a/components/Deck/ContentPanel/ContentActions/DownloadModal.js
+++ b/components/Deck/ContentPanel/ContentActions/DownloadModal.js
@@ -47,6 +47,10 @@ class DownloadModal extends React.Component{
             downloadModal_HTML:{
                 id:'downloadModal.downloadModal_HTML',
                 defaultMessage: 'HTML (unzip and open index.html to access off-line presentation)'
+            },
+            downloadModal_button:{
+                id:'downloadModal.downloadModal_button',
+                defaultMessage:'Download'
             }
         });
     }
@@ -167,12 +171,12 @@ class DownloadModal extends React.Component{
 
               <Modal
                   trigger={ !this.props.textOnly ?
-                        <Button icon aria-hidden="false" className="ui button" type="button" aria-label="Download" data-tooltip="Download" onClick={this.handleOpen} >
+                        <Button icon aria-hidden="false" className="ui button" type="button" aria-label={this.context.intl.formatMessage(this.messages.downloadModal_button)} data-tooltip={this.context.intl.formatMessage(this.messages.downloadModal_button)} onClick={this.handleOpen} >
                               <Icon name='download' size='large'/>
                         </Button>
                         :
-                        <div className={this.props.className} aria-label="Download" data-tooltip="Download" onClick={this.handleOpen}>
-                            <span><Icon name='download' size='large'/> Download</span>
+                        <div className={this.props.className} aria-label={this.context.intl.formatMessage(this.messages.downloadModal_button)} data-tooltip={this.context.intl.formatMessage(this.messages.downloadModal_button)} onClick={this.handleOpen}>
+                            <span><Icon name='download' size='large'/> {this.context.intl.formatMessage(this.messages.downloadModal_button)}</span>
                         </div>
                   }
 
diff --git a/components/Deck/ContentPanel/ContentActions/EmbedModal.js b/components/Deck/ContentPanel/ContentActions/EmbedModal.js
index 7c94ca740..d856fa037 100644
--- a/components/Deck/ContentPanel/ContentActions/EmbedModal.js
+++ b/components/Deck/ContentPanel/ContentActions/EmbedModal.js
@@ -68,6 +68,10 @@ class EmbedModal extends React.Component {
                 id:'embedModal.other',
                 defaultMessage: 'Other'
             },
+            buttonText:{
+                id:'embedModal.buttonText',
+                defaultMessage: 'Embed'
+            }
         });
     }
     
@@ -183,7 +187,7 @@ class EmbedModal extends React.Component {
         return(
             <Modal
                     trigger={
-                        <div className="item" data-value="Embed" role="menuitem" aria-label="Embed" data-tooltip="Embed" tabIndex="0" onClick={this.handleEmbed.bind(this)} onKeyPress={this.handleKeyPress.bind(this)}>
+                        <div className="item" data-value="Embed" role="menuitem" aria-label={this.context.intl.formatMessage(this.messages.buttonText)} data-tooltip={this.context.intl.formatMessage(this.messages.buttonText)} tabIndex="0" onClick={this.handleEmbed.bind(this)} onKeyPress={this.handleKeyPress.bind(this)}>
                             <div role="button" className="SocialMediaShareButton Demo__some-network__share-button">
                                 <div style={{width: this.props.size + 'px', height: this.props.size + 'px', fontSize: this.props.fontSize + 'px'}}>
                                     <Icon name="share square" style={{
diff --git a/intl/default.json b/intl/default.json
index 9ed14db57..baa3987b3 100644
--- a/intl/default.json
+++ b/intl/default.json
@@ -517,8 +517,18 @@
   "TagsPanel.aria.cancel": "Cancel tags",
   "TagsPanel.TagInput.placeholder": "Insert new tags",
   "editpanel.handleAddQuestionsClick": "Add questions",
+  "attachSlidesModal.attachText": "Attach Slides",
+  "attachSlidesModal.attach": "Attach",
+  "attachSlidesModal.next": "Next",
+  "attachSlidesModal.previous": "Previous",
+  "attachSlidesModal.cancel": "Cancel",
   "slidesModal.attachSlidesDescriptionStep1": "You can attach one or more slides from another deck. First select your deck containing the slides or search SlideWiki for a deck. We advise a maximum of 50 slides per (sub)deck for maximal performance/speed for viewing your presentation. You can also separate a large presentation, for example, a series of lectures, into a deck collection.",
   "slidesModal.attachSlidesDescriptionStep2": "Select slides to attach. We advise a maximum of 50 slides per (sub)deck for maximal performance/speed for viewing your presentation. You can also separate a large presentation, for example, a series of lectures, into a deck collection.",
+  "attachSubdeckModal.attachText": "Attach Sub-deck",
+  "attachSubdeckModal.attach": "Attach",
+  "attachSubdeckModal.next": "Next",
+  "attachSubdeckModal.previous": "Previous",
+  "attachSubdeckModal.cancel": "Cancel",
   "subDeckModal.attachSubdeckModalDescription": "Select a deck to attach from your My Decks list or search SlideWiki. We recommend that decks have a maximum of 50 slides per (sub)deck for optimum performance when viewing your presentation. If you wish to collate lots of decks then we recommend creating a playlist.",
   "ContentActionsFooter.followButtonText": "Subscribe to this deck",
   "ContentActionsFooter.followButtonTextAlternate": "You are subscribed to this deck, click to unsubscribe",
@@ -549,6 +559,7 @@
   "downloadModal.downloadModal_downloadButton": "Download",
   "downloadModal.downloadModal_cancelButton": "Cancel",
   "downloadModal.downloadModal_HTML": "HTML (unzip and open index.html to access off-line presentation)",
+  "downloadModal.downloadModal_button": "Download",
   "embedModal.closeButton": "Close",
   "embedModal.deckRadio": "Deck",
   "embedModal.slideshowRadio": "Slideshow",
@@ -557,6 +568,7 @@
   "embedModal.medium": "Medium",
   "embedModal.large": "Large",
   "embedModal.other": "Other",
+  "embedModal.buttonText": "Embed",
   "embedModal.embedHeader": "Embed SlideWiki deck \"{title}\"",
   "embedModal.description": "Use the options to select how this deck will be displayed. Then copy the generated code into your site.",
   "embedModal.embed": "Embed:",