scratchfoundation · chrisgarrity · Apr 24, 2017 · Apr 21, 2017
diff --git a/src/components/sectionitem/linkedsectionitem.jsx b/src/components/sectionitem/linkedsectionitem.jsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import {Link} from 'react-router';
 import './sectionitem.scss';
+import TxDiv from '../transifex/txdiv.jsx';
 
 export class LinkedSectionItem extends React.Component {
     render () {
         let thumb;
+        const txContent = this.props.translateUrls ? 'translate_urls' : '';
         if (typeof this.props.thumbnail === 'string') {
             thumb = (
                 <img
@@ -23,9 +25,12 @@ export class LinkedSectionItem extends React.Component {
                     </div>
                 </Link>
                 <Link to={this.props.linkURL}>
-                    <div className="content-section-item-thumbnail">
+                    <TxDiv
+                        className="content-section-item-thumbnail"
+                        txContent={txContent}
+                    >
                         {thumb}
-                    </div>
+                    </TxDiv>
                 </Link>
                 <div className="content-section-item-description">
                     {this.props.description || this.props.children}{' '}
@@ -44,5 +49,9 @@ LinkedSectionItem.propTypes = {
     description: React.PropTypes.string,
     linkURL: React.PropTypes.string.isRequired,
     linkText: React.PropTypes.string.isRequired,
+    translateUrls: React.PropTypes.bool,
     children: React.PropTypes.node
 };
+LinkedSectionItem.defaultProps = {
+    translateUrls: false
+};
diff --git a/src/components/sectionitem/section.jsx b/src/components/sectionitem/section.jsx
@@ -1,12 +1,15 @@
 import React from 'react';
 import './sectionitem.scss';
+import TxDiv from '../transifex/txdiv.jsx';
 
 export class Section extends React.Component {
     render () {
+        const txContent = this.props.translateUrls ? 'translate_urls' : '';
         return (
-            <div
+            <TxDiv
                 className="content-section content-subpage"
                 id={this.props.id}
+                txContent={txContent}
             >
                 <div className="content-section-title">
                     {this.props.title}
@@ -16,13 +19,14 @@ export class Section extends React.Component {
                     {this.props.children}
                 </div>
 
-            </div>
+            </TxDiv>
         );
     }
 }
 Section.propTypes = {
     id: React.PropTypes.string.isRequired,
     title: React.PropTypes.string.isRequired,
+    translateUrls: React.PropTypes.bool,
     description: React.PropTypes.string,
     children: React.PropTypes.node
 };
diff --git a/src/components/sectionitem/staticlinksectionitem.jsx b/src/components/sectionitem/staticlinksectionitem.jsx
@@ -1,9 +1,11 @@
 import React from 'react';
 import './sectionitem.scss';
+import TxDiv from '../transifex/txdiv.jsx';
 
 export class StaticLinkSectionItem extends React.Component {
     render () {
         let thumb;
+        const txContent = this.props.translateUrls ? 'translate_urls' : '';
         if (typeof this.props.thumbnail === 'string') {
             thumb = (<img
                 className="content-section-item-thumbnail-image"
@@ -13,7 +15,10 @@ export class StaticLinkSectionItem extends React.Component {
             thumb = this.props.thumbnail;
         }
         return (
-            <div className={`content-section-${this.props.format}-item`}>
+            <TxDiv
+                className={`content-section-${this.props.format}-item`}
+                txContent={txContent}
+            >
                 <a
                     href={this.props.linkURL}
                     rel="noopener noreferrer"
@@ -42,7 +47,7 @@ export class StaticLinkSectionItem extends React.Component {
                         {this.props.linkText}
                     </a>
                 </div>
-            </div>
+            </TxDiv>
         );
     }
 }
@@ -53,5 +58,6 @@ StaticLinkSectionItem.propTypes = {
     description: React.PropTypes.string,
     linkURL: React.PropTypes.string.isRequired,
     linkText: React.PropTypes.string.isRequired,
+    translateUrls: React.PropTypes.bool,
     children: React.PropTypes.node
 };
diff --git a/src/components/transifex/txdiv.jsx b/src/components/transifex/txdiv.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+export default class TxDiv extends React.Component {
+    render () {
+
+        return (
+            <div
+                className={this.props.className}
+                id={this.props.id}
+                ref={
+                    node => {
+                        if (node && this.props.txContent !== '') {
+                            node.setAttribute('tx-content', this.props.txContent);
+                        }
+
+                    }
+                }
+            >
+                {this.props.children}
+            </div>
+        );
+    }
+}
+TxDiv.propTypes = {
+    children: React.PropTypes.node,
+    className: React.PropTypes.string,
+    id: React.PropTypes.string,
+    txContent: React.PropTypes.string.isRequired
+};
diff --git a/src/components/transifex/txspan.jsx b/src/components/transifex/txspan.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+export default class TxSpan extends React.Component {
+    render () {
+
+        return (
+            <span
+                className={this.props.className}
+                id={this.props.id}
+                ref={node => node && node.setAttribute('tx-content', this.props.txContent)}
+            >
+                {this.props.children}
+            </span>
+        );
+    }
+}
+TxSpan.propTypes = {
+    children: React.PropTypes.node,
+    className: React.PropTypes.string,
+    id: React.PropTypes.string,
+    txContent: React.PropTypes.string.isRequired
+};
diff --git a/src/views/learn/blocks.jsx b/src/views/learn/blocks.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import BlockItem from '../../components/blockitem/blockitem.jsx';
 import blocks from './blocks.json';
+import TxSpan from '../../components/transifex/txspan.jsx';
 
 export default class BlocksSection extends React.Component {
     render () {
@@ -9,11 +10,16 @@ export default class BlocksSection extends React.Component {
                 className="content-section learn-blocks"
                 id="blocks-section"
             >
-                <a
+                <TxSpan
                     className="download-guide-link"
-                    href="/pdfs/block-descriptions.pdf"
+                    txContent="translate_urls block"
                 >
-                    <span className="download-icon">&#x2193;</span>Download guide as pdf</a>
+                    <a
+                        href="/pdfs/block-descriptions.pdf"
+                    >
+                        <span className="download-icon">&#x2193;</span>Download guide as pdf
+                    </a>
+                </TxSpan>
                 {/* Yellow Blocks */}
                 <div
                     className="block-category-header"

diff --git a/src/views/learn/interface.jsx b/src/views/learn/interface.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import GuideButton from '../../components/guidebutton/guidebutton.jsx';
 import GuideButtonLine from '../../components/guidebutton/guidebuttonline.jsx';
 import GuideKey from '../../components/guidekey/guidekey.jsx';
+import TxSpan from '../../components/transifex/txspan.jsx';
 
 import interfaceKey from './interface.json';
 import './interface.scss';
@@ -23,12 +24,16 @@ export default class InterfaceSection extends React.Component {
                 className="content-section learn-interface"
                 id="interface-section"
             >
-                <a
+                <TxSpan
                     className="download-guide-link"
-                    href="/pdfs/scratchjr-interface-guide.pdf"
+                    txContent="translate_urls block"
                 >
-                    <span className="download-icon">&#x2193;</span>Download guide as pdf
-                </a>
+                    <a
+                        href="/pdfs/scratchjr-interface-guide.pdf"
+                    >
+                        <span className="download-icon">&#x2193;</span>Download guide as pdf
+                    </a>
+                </TxSpan>
                 <div className="interface-container">
                     <img
                         className="ipad-project-view"

diff --git a/src/views/learn/paint.jsx b/src/views/learn/paint.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import GuideButton from '../../components/guidebutton/guidebutton.jsx';
 import GuideButtonLine from '../../components/guidebutton/guidebuttonline.jsx';
 import GuideKey from '../../components/guidekey/guidekey.jsx';
+import TxSpan from '../../components/transifex/txspan.jsx';
 
 import paintKey from './paint.json';
 import './paint.scss';
@@ -23,12 +24,16 @@ export default class PaintSection extends React.Component {
                 className="content-section learn-paint"
                 id="paint-section"
             >
-                <a
-                    href="/pdfs/paint-editor-guide.pdf"
+                <TxSpan
                     className="download-guide-link"
+                    txContent="translate_urls block"
                 >
-                    <span className="download-icon">&#x2193;</span>Download guide as pdf
-                </a>
+                    <a
+                        href="/pdfs/paint-editor-guide.pdf"
+                    >
+                        <span className="download-icon">&#x2193;</span>Download guide as pdf
+                    </a>
+                </TxSpan>
                 <div className="paint-container">
                     <img
                         className="ipad-project-view"

diff --git a/src/views/learn/tips/copyscripts.jsx b/src/views/learn/tips/copyscripts.jsx
@@ -7,6 +7,7 @@ export default class CopyScriptSection extends React.Component {
             <Section
                 id="copy-scripts-section"
                 title="Copying Scripts"
+                translateUrls
                 description=""
             >
                 <div className="content-section-item-description">

diff --git a/src/views/learn/tips/pages.jsx b/src/views/learn/tips/pages.jsx
@@ -7,6 +7,7 @@ export default class PagesSection extends React.Component {
             <Section
                 id="pages-section"
                 title="Multiple pages"
+                translateUrls
                 description=""
             >
                 <div className="content-section-item-description">

diff --git a/src/views/learn/tips/samples.jsx b/src/views/learn/tips/samples.jsx
@@ -7,6 +7,7 @@ export default class SamplesSection extends React.Component {
             <Section
                 id="sample-projects-section"
                 title="Sample Projects Library"
+                translateUrls
                 description="The Sample Projects Library is a collection of
                     eight pre-made ScratchJr projects that use a range of blocks
                     and features to show you the variety of projects you can make

diff --git a/src/views/learn/tips/share.jsx b/src/views/learn/tips/share.jsx
@@ -1,23 +1,28 @@
 import React from 'react';
 import {Section} from '../../../components/sectionitem/section.jsx';
+import TxDiv from '../../../components/transifex/txdiv.jsx';
 
 export default class ShareSection extends React.Component {
     render () {
         return (
             <Section
                 id="share-projects-section"
                 title="Sharing ScratchJr Projects"
+                translateUrls
                 description="You can share your ScratchJr projects in one of two ways: by email or by AirDrop."
             >
-                <div className="content-section-item-description">
+                <TxDiv
+                    className="content-section-item-description"
+                    txContent="notranslate_urls"
+                >
                     When the project you want to share is open, tap the yellow tab
                     in the top-right corner to go to the Project Information screen.
                     <img
                         alt="ScratchJr toprow icons"
                         className="content-section-image"
                         src="/images/tips/top-bar.png"
                     />
-                </div>
+                </TxDiv>
                 <div className="content-section-item-description">
                     Then select your sharing method: <em>Share by Email</em> or <em>Share
                     by AirDrop</em>. Regardless of which method you use

diff --git a/src/views/learn/tips/tipshome.jsx b/src/views/learn/tips/tipshome.jsx
@@ -58,13 +58,15 @@ export default class TipsHome extends React.Component {
                         description="You can share projects by email. On iPads you can also share project by AirDrop."
                         linkURL="/learn/tips/share-projects"
                         linkText="Read more"
+                        translateUrls
                     />
                     <LinkedSectionItem
                         title="Sample Projects"
                         format="full"
                         thumbnail="/images/tips/sample-projects.png"
                         linkURL="/learn/tips/sample-projects"
                         linkText="Read more"
+                        translateUrls
                     >
                         The Sample Projects library is a collection of
                         eight pre-made projects that use a range of blocks and

diff --git a/src/views/teach/activities.jsx b/src/views/teach/activities.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import {StaticLinkSectionItem} from '../../components/sectionitem/staticlinksectionitem.jsx';
+import TxDiv from '../../components/transifex/txdiv.jsx';
+
 import activities from './activities.json';
 
 export default class ActivitiesSection extends React.Component {
@@ -12,12 +14,15 @@ export default class ActivitiesSection extends React.Component {
                 <div className="content-section-title">
                     Activities
                 </div>
-                <div className="content-section-description">
+                <TxDiv
+                    txContent="translate_urls"
+                    className="content-section-description"
+                >
                     Each of these activities gives you a quick way to learn how
                     to do new things with ScratchJr. They are listed here in
                     order of simplest to hardest, but feel free to play around
                     in any order you&apos;d like!
-                </div>
+                </TxDiv>
                 <div className="content-section-items-container">
                     {activities.map((activity, index) => (
                         <StaticLinkSectionItem

diff --git a/src/views/teach/assessments/home.jsx b/src/views/teach/assessments/home.jsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import {StaticLinkSectionItem} from '../../../components/sectionitem/staticlinksectionitem.jsx';
 import {LinkedSectionItem} from '../../../components/sectionitem/linkedsectionitem.jsx';
+import TxDiv from '../../../components/transifex/txdiv.jsx';
 
 export default class AssessmentsHome extends React.Component {
     render () {
         return (
-            <div
+            <TxDiv
                 className="content-section teach-assessment"
                 id="assessments-section"
+                txContent="translate_urls"
             >
                 <div className="content-section-title">
                     Assessments
@@ -44,7 +46,7 @@ export default class AssessmentsHome extends React.Component {
                     programs. They then reconstruct the scripts of the project
                     using pre-printed blocks, provided at the end of the document...
                 </StaticLinkSectionItem>
-            </div>
+            </TxDiv>
         );
     }
 }
diff --git a/src/views/teach/assessments/solveit.jsx b/src/views/teach/assessments/solveit.jsx
@@ -7,6 +7,7 @@ export default class SolveitSection extends React.Component {
             <Section
                 id="solveit-section"
                 title="ScratchJr Solve-Its"
+                translateUrls
             >
                 <div className="content-section-description">
                     Assess students&apos; understanding of the relationship between the programming

diff --git a/src/views/teach/curricula/home.jsx b/src/views/teach/curricula/home.jsx
@@ -31,6 +31,7 @@ export default class HomeSection extends React.Component {
                         thumbnail="/images/rightandleft.png"
                         linkURL="/pdfs/blocks.pdf"
                         linkText="Download PDF"
+                        translateUrls
                     >
                         You can print high quality images of the ScratchJr blocks for classroom instruction...
                     </StaticLinkSectionItem>