Skip to content
This repository

Client Side Localization #53

Closed
wants to merge 9 commits into from

3 participants

Clochix Atul Varma goofy-framoz
Clochix

Localize UI content with webL10n.
See https://github.com/mozilla/webpagemaker/issues/234

Provide a sample french translation and a language selector.

This is just a first prototype to see if this solution fits the l10n needs.

Atul Varma
Collaborator

Hey @clochix, thanks for this pull request and really sorry for not getting back to you in 8 months. However, we're currently taking a different approach via requirejs' i18n module--see #163--so we won't be using this right now. :/

Atul Varma toolness closed this January 17, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
3  .gitmodules 100755 → 100644
... ...
@@ -1,3 +1,6 @@
1 1
 [submodule "slowparse"]
2 2
 	path = slowparse
3 3
 	url = git://github.com/toolness/slowparse.git
  4
+[submodule "js/webL10n"]
  5
+	path = js/webL10n
  6
+	url = https://github.com/fabi1cazenave/webL10n.git
53  friendlyCode.properties
... ...
@@ -0,0 +1,53 @@
  1
+[en]
  2
+busyPublishing=[we're busy publishing your page…]
  3
+confirmPublish=Are you sure you want to publish your project to the web?
  4
+confirmPublishMore= When you click the publish button it means your page will be visible to everyone on the web. If you're sure you want to publish to the web, click "yes", otherwise click "no".
  5
+copyThisLink=Copy this link by right clicking on it and selecting "copy link location".
  6
+editor=Editor
  7
+getTheLink=Get the link to edit your published page:
  8
+grabURL=Grab the url for your webpage:
  9
+largeTextSize=Large
  10
+langSelection=Language
  11
+noButton=No
  12
+normalTextSize=Normal
  13
+previewSpan=Preview
  14
+publishButton=Publish
  15
+rescuedRedo=Redo
  16
+rescuedRedo.title=Redo changes
  17
+rescuedUndo=Undo
  18
+rescuedUndo.data-restore-help=We've rescued your very recent changes to this page, but you can click this button to undo them.
  19
+rescuedUndo.title=Undo changes
  20
+shareThisVia=Share this via…
  21
+smallTextSize=Small
  22
+textSize=Text size
  23
+textSize.title=Change text size
  24
+turnHintsOff=Turn hints off
  25
+turnHintsOff.title=Disable HTML and CSS hints and suggestions
  26
+yesButton=Yes
  27
+
  28
+[fr]
  29
+busyPublishing=[nous sommes en train de publier votre page…]
  30
+confirmPublish=Voulez-vous vraiment publier votre projet sur le Web ?
  31
+confirmPublishMore=Si vous cliquez sur le bouton Publier elle sera visible par tous sur le Web. Si c'est bien ce que vous voulez, alors cliquez sur « oui » sinon cliquez sur « non ».
  32
+copyThisLink=Pour copier ce lien cliquez-droit sur lui puis choisissez « copier l'adresse du lien »
  33
+editor=Éditeur
  34
+getTheLink=Voici le lien nécessaire pour modifier votre page publiée :
  35
+grabURL=Prenez l'URL de votre page Web
  36
+largeTextSize=grande
  37
+langSelection=Langue
  38
+noButton=Non
  39
+normalTextSize=moyenne
  40
+previewSpan=Aperçu
  41
+publishButton=Publier
  42
+rescuedRedo=Rétablir
  43
+rescuedRedo.title=Rétablir vos modifications
  44
+rescuedUndo=Annuler
  45
+rescuedUndo.data-restore-help=Nous avons sauvegardé vos plus récentes modifications de cette page, mais vous pouvez cliquer sur ce bouton pour revenir en arrière.
  46
+rescuedUndo.title=Annuler vos modifications
  47
+shareThisVia=Partagez cette page avec…
  48
+smallTextSize=petite
  49
+textSize=Taille du texte
  50
+textSize.title=Modifiez la taille du texte
  51
+turnHintsOff=Désactiver les astuces
  52
+turnHintsOff.title=Désactiver les astuces et les suggestions HTML et CSS
  53
+yesButton=Oui
68  index.html
@@ -18,6 +18,8 @@
18 18
     <link rel="stylesheet" href="css/opensans/stylesheet.css">
19 19
     <link rel="stylesheet" href="css/editor.css">
20 20
     <link rel="stylesheet" href="css/modals.css">
  21
+    <!-- Translations -->
  22
+    <link rel="resource" type="application/l10n" href="friendlyCode.properties" />
21 23
   </head>
22 24
   <body>
23 25
      <a href="http://www.mozilla.org/" id="tabzilla">mozilla</a>
@@ -28,42 +30,51 @@
28 30
           <img src="img/thimble-logo.png" alt="Mozilla Thimble">
29 31
         </a>
30 32
       </div>
31  
- 
  33
+
32 34
       <div id="nav-options">
33 35
         <div id="editor-pane-nav-options">
34 36
           <!-- editor, undo, redo, text size, hinting -->
35  
-          <div id="editor-nav-item" class="nav-item enabled">
  37
+          <div id="editor-nav-item" data-l10n-id="editor" class="nav-item enabled">
36 38
             <span class="icon">&nbsp;</span>Editor
37 39
             <div class="pane-indicator enabled"></div>
38 40
           </div>
39 41
           <div id="undo-nav-item" class="nav-item responsive"
40 42
                data-restore-help="We've rescued your very recent changes to this page, but you can click this button to undo them."
  43
+               data-l10n-id="rescuedUndo"
41 44
                title="Undo changes">
42 45
                <span class="icon">&nbsp;</span>Undo</div>
43  
-          <div id="redo-nav-item" class="nav-item responsive" title="Redo changes">
  46
+          <div id="redo-nav-item" class="nav-item responsive" title="Redo changes" data-l10n-id="rescuedRedo">
44 47
             <span class="icon">&nbsp;</span>Redo
45 48
           </div>
46  
-          <div id="text-nav-item" class="nav-item responsive" title="Change text size">
  49
+          <div id="text-nav-item" class="nav-item responsive" title="Change text size" data-l10n-id="textSize">
47 50
             <span class="icon">&nbsp;</span> Text size
48 51
             <ul id="text-size-options">
49  
-              <li data-size="small">Small</li>
50  
-              <li data-size="normal">Normal</li>
51  
-              <li data-size="large">Large</li>
  52
+              <li data-size="small" data-l10n-id="smallTextSize">Small</li>
  53
+              <li data-size="normal" data-l10n-id="normalTextSize">Normal</li>
  54
+              <li data-size="large" data-l10n-id="largeTextSize">Large</li>
52 55
             </ul>
53 56
           </div>
54  
-          <div id="hints-nav-item"  class="nav-item on" title="Disable HTML and CSS hints and suggestions">Turn hints off</div>
  57
+          <div id="hints-nav-item" class="nav-item on" title="Disable HTML and CSS hints and suggestions" data-l10n-id="turnHintsOff">Turn hints off</div>
55 58
         </div>
56 59
         <div id="preview-pane-nav-options">
57 60
           <!-- previous, save draft, publish -->
58 61
            <div id="preview-nav-item" class="nav-item enabled">
59  
-             <span class="icon">&nbsp;</span>Preview<span class="preview-title"></span><div class="pane-indicator enabled"></div>
  62
+             <span class="icon">&nbsp;</span><span data-l10n-id="previewSpan">Preview</span><span class="preview-title"></span><div class="pane-indicator enabled"></div>
60 63
            </div>
  64
+             <div class="nav-item responsive">
  65
+               <span data-l10n-id="langSelection">language selection</span>
  66
+               <select onchange="document.webL10n.getLanguage().setCode(this.value || this.options[this.selectedIndex].text);">
  67
+                 <option disabled selected> </option>
  68
+                 <option>en</option>
  69
+                 <option>fr</option>
  70
+               </select>
  71
+             </div>
61 72
            <div class="nav-item buttons">
62  
-             <div id="publish-button" class="nav-button">Publish <span id="publish-pulldown">&nbsp;</span></div>
  73
+             <div id="publish-button" class="nav-button" data-l10n-id="publishButton">Publish<span id="publish-pulldown">&nbsp;</span></div>
63 74
            </div>
64 75
         </div>
65 76
       </div>
66  
-      
  77
+
67 78
     </header>
68 79
 
69 80
     <section id="editor" class="loading">
@@ -77,38 +88,38 @@
77 88
     <footer>
78 89
     </footer>
79 90
 
80  
- 
  91
+
81 92
     <!-- save/publish modal dialogs -->
82 93
     <div id="confirm-dialog" class="modal-overlay" style="display: none;">
83 94
       <div class="thimble-modal-menu thimble-blue-bar">
84 95
         <div class="thimble-branding"></div>
85 96
         <div class="thimble-menu-content">
86 97
            <div id="publication-confirmation">
87  
-             <!-- CONFIRM PUBLICATION -->           
88  
-             <div class="thimble-title">Are you sure you want to publish your project to the web?</div>
89  
-             <div class="thimble-additionals">
  98
+             <!-- CONFIRM PUBLICATION -->
  99
+             <div data-l10n-id="confirmPublish" class="thimble-title" >Are you sure you want to publish your project to the web?</div>
  100
+             <div data-l10n-id="confirmPublishMore" class="thimble-additionals">
90 101
                When you click the publish button it means your page will be visible
91 102
                to everyone on the web. If you're sure you want to publish to the web, click "yes", otherwise
92 103
                click "no".
93 104
                <div class="confirmation-buttons">
94  
-                 <span id="confirm-publication" class="confirmation-button yes-button">Yes <span class="mark">&nbsp;</span></span>
95  
-                 <span id="cancel-publication" class="confirmation-button no-button">No <span class="mark">&nbsp;</span></span>
  105
+                 <span id="confirm-publication" data-l10n-id="yesButton" class="confirmation-button yes-button">Yes <span class="mark">&nbsp;</span></span>
  106
+                 <span id="cancel-publication" data-l10n-id="noButton" class="confirmation-button no-button">No <span class="mark">&nbsp;</span></span>
96 107
                </div>
97 108
              </div>
98  
-             <!-- CONFIRM PUBLICATION -->           
  109
+             <!-- CONFIRM PUBLICATION -->
99 110
            </div>
100 111
          </div>
101 112
        </div>
102 113
      </div>
103  
-     
  114
+
104 115
     <div id="publish-dialog" class="modal-overlay" style="display: none;">
105 116
       <div class="thimble-modal-menu thimble-grey-bar ">
106 117
         <div class="thimble-branding"></div>
107  
-        <div id="modal-close-button">&nbsp;</div>   
  118
+        <div id="modal-close-button">&nbsp;</div>
108 119
         <div class="thimble-menu-content">
109 120
            <!-- SHARE YOUR WORK -->
110 121
            <div id="share-result" class="accordion collapsed">
111  
-             <div class="thimble-title" id="share-trigger">Share this via...</div>
  122
+             <div class="thimble-title" id="share-trigger" data-l10n-id="shareThisVia" >Share this via...</div>
112 123
              <div class="thimble-additionals">
113 124
                <ul>
114 125
                  <li data-medium="twitter">Twitter</li>
@@ -121,21 +132,21 @@
121 132
 
122 133
            <!-- PUBLISH YOUR WORK -->
123 134
            <div id="publication-result" class="accordion">
124  
-             <div class="thimble-title">Grab the URL for your webpage:</div>
  135
+             <div class="thimble-title" data-l10n-id="grabURL" >Grab the url for your webpage:</div>
125 136
              <div class="thimble-url-box">
126  
-               <a href="#" class="view">[we're busy publishing your page...]</a>
  137
+               <a href="#" data-l10n-id="busyPublishing" class="view">[we're busy publishing your page...]</a>
127 138
              </div>
128  
-             <div class="thimble-additionals">
  139
+             <div data-l10n-id="copyThisLink" class="thimble-additionals">
129 140
                Copy this link by right clicking on it and selecting "copy link location".
130 141
              </div>
131 142
            </div>
132  
-           
  143
+
133 144
            <div id="remix-it" class="accordion collapsed">
134  
-             <div class="thimble-title">Get the link to edit your published page:</div>
  145
+             <div class="thimble-title" data-l10n-id="getTheLink">Get the link to edit your published page:</div>
135 146
              <div class="thimble-url-box">
136  
-               <a href="#" class="remix">[we're busy publishing your page...]</a>
  147
+               <a href="#" data-l10n-id="busyPublishing" class="remix">[we're busy publishing your page...]</a>
137 148
              </div>
138  
-             <div class="thimble-additionals">
  149
+             <div data-l10n-id="copyThisLink" class="thimble-additionals">
139 150
                Copy this link by right clicking on it and selecting "copy link location".
140 151
              </div>
141 152
            </div>
@@ -147,6 +158,7 @@
147 158
 
148 159
 
149 160
     <!-- page script section, at the end of body to prevent them holding up the page -->
  161
+    <script type="text/javascript" src="js/webL10n/l10n.js"></script>
150 162
     <script src="js/jquery.min.js"></script>
151 163
     <script src="js/jquery.tipsy.js"></script>
152 164
     <script src="js/underscore.min.js"></script>
1  js/webL10n
... ...
@@ -0,0 +1 @@
  1
+Subproject commit 09191dc6869f328d89a93344443d321d6442b622
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.