internationalization & embedding

itechnology · May 20, 2014 · a24514f · a24514f
1 parent 86d9601
commit a24514f
Show file tree

Hide file tree

Showing 15 changed files with 320 additions and 98 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@
 /_site
 /_exclude
 *.sln
-*.suo
+*.suo
+Web.config
diff --git a/tools/coil/cache.manifest b/tools/coil/cache.manifest
@@ -1,7 +1,8 @@
 CACHE MANIFEST
 # https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
-# version 20140414
+# version 20140520-1
 CACHE:
+embed.html
 ../content/css/bootstrap.min.css
 ../content/js/angular.min.js
 ../content/js/ui-bootstrap-custom-tpls-0.10.0.min.js
@@ -10,6 +11,8 @@ CACHE:
 ../content/fonts/glyphicons-halflings-regular.ttf
 ../content/fonts/glyphicons-halflings-regular.woff
 content/js/app.js
+content/js/res.fr.json
+content/js/res.en.json
 content/js/wire.json
 content/css/app.css
 content/img/apple-touch-icon.png
@@ -18,4 +21,4 @@ content/img/apple-touch-icon-120x120.png
 content/img/apple-touch-icon-152x152.png
 # These are allowed to load when a connection is availiable
 NETWORK:
-http://www.google-analytics.com/analytics.js
+*
diff --git a/tools/coil/content/css/app.css b/tools/coil/content/css/app.css
@@ -19,6 +19,11 @@ input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
+
+.navbar-brand {
+    font-size: small;
+}
+
 /* Mobile Overrides*/
 @media (max-width: 768px) {
     .navbar {

diff --git a/tools/coil/content/js/app.js b/tools/coil/content/js/app.js
@@ -3,7 +3,45 @@
 /* App Module */
 var coilApp = angular.module("coil", ['ui.bootstrap', 'ui.bootstrap.collapse']);
 
-coilApp.controller("CoilCtrl", function ($scope, $http, $filter) {    
+/* Modal Code */
+var ModalCtrl = function ($scope, $modalInstance, res) {
+    $scope.res = res;
+    $scope.ok = function () {
+        $modalInstance.close();
+    };
+};
+
+coilApp.controller("CoilCtrl", function ($scope, $http, $modal) {
+
+    // Iframe behavior
+    $scope.iframe = (window.top !== window.self);
+    $scope.target = $scope.iframe ? "_blank" : "_self";
+
+    //#region Translations, 
+    var supported = { "en": "en", "fr": "fr" };
+    var current   = navigator.language.substr(0, 2);
+
+    $http.get("content/js/res." + (supported[current] || "fr") + ".json")
+        .success(function (data) {
+            $scope.res = angular.fromJson(data);
+        });
+    //#endregion
+
+    //#region Modal
+    $scope.embed =  function() {
+        $modal.open({
+            templateUrl: "embed.html",
+            controller: ModalCtrl,
+            size: 400,
+            resolve: {
+                res: function () {
+                    return $scope.res;
+                }
+            }
+        });
+    }
+    //#endregion
+
     // default model
     $scope.model = {
         wire: {

diff --git a/tools/coil/content/js/res.en.json b/tools/coil/content/js/res.en.json
@@ -0,0 +1,25 @@
+{
+    "ConsumptionTitle": "E-Liquid Consumption",
+    "CalculatorTitle" : "Micro-Coil Calculator ",
+    "Social"          : "Sociaux Networks",
+    "EmbedLink"       : "Embed",
+    "EmbedTitle"      : "Propose it on your site",
+    "EmbedPreview"    : "Preview",
+
+    "WireType"    : "Wire: Type",
+    "WireHeight"  : "Wire: Height",
+    "WireWidth"   : "Wire: Width",
+    "WireDiameter": "Wire: Diametre",
+    "CoilDiameter": "Coil: Diametre",
+    "CoilTurns"   : "Coil: Turns",
+    "CoilFeet"    : "Coil: Feet",
+    "Resistance"  : "Resistance",
+    "Coefficient" : "Heating Coefficient",
+    "Power"       : "Power",
+    "Amperes"     : "Amperes",
+    "Voltage"     : "Tension",
+    "CoilCount"   : "Coil: Count",
+    "WireCount"   : "Wire: Count",
+    "WireLength"  : "Length of a Wire",
+    "CoilWidth"   : "Width of a Coil"
+}
diff --git a/tools/coil/content/js/res.fr.json b/tools/coil/content/js/res.fr.json
@@ -0,0 +1,25 @@
+{
+    "ConsumptionTitle": "Consommation E-Liquide",
+    "CalculatorTitle" : "Calculateur Micro-Coil",
+    "Social"          : "Réseaux Sociaux",
+    "EmbedLink"       : "Intégrer",
+    "EmbedTitle"      : "Proposez le sur votre site",
+    "EmbedPreview"    : "Aperçu",
+
+    "WireType"    : "Fil: Type",
+    "WireHeight"  : "Fil: Hauteur",
+    "WireWidth"   : "Fil: Largeur",
+    "WireDiameter": "Fil: Diamètre",
+    "CoilDiameter": "Coil: Diamètre",
+    "CoilTurns"   : "Coil: Spires",
+    "CoilFeet"    : "Coil: Pattes",
+    "Resistance"  : "Résistance",
+    "Coefficient" : "Coefficient de Chauffe",
+    "Power"       : "Puissance",
+    "Amperes"     : "Intensité",
+    "Voltage"     : "Tension",
+    "CoilCount"   : "Coil: Nombres",
+    "WireCount"   : "Fils: Nombres",
+    "WireLength"  : "Longeur d'un Fil",
+    "CoilWidth"   : "Largeur d'une Coil"
+}
diff --git a/tools/coil/embed.html b/tools/coil/embed.html
@@ -0,0 +1,10 @@
+<div class="modal-header">
+    <h3 class="modal-title">{{res.EmbedTitle}}</h3>
+</div>
+<div class="modal-body">
+    <textarea style="width: 100%"><iframe src="http://vapez.fr/tools/coil/" height="800" width="495" frameborder="0" scrolling="no"></iframe></textarea>
+    <a href="http://jsfiddle.net/23J8E/embedded/result/" target="_blank">{{ res.EmbedPreview }}</a>
+</div>
+<div class="modal-footer">
+    <button class="btn btn-primary" ng-click="ok()">OK</button>
+</div>
diff --git a/tools/coil/index.html b/tools/coil/index.html
@@ -55,36 +55,41 @@
     </head>
     <body ng-controller="CoilCtrl">
         <nav class="navbar navbar-inverse" role="navigation">
-          <div class="navbar-header">
-            <button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-              <span class="sr-only">Toggle navigation</span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-              <span class="icon-bar"></span>
-            </button>
-            <a class="navbar-brand" href="http://vapez.fr">Vapez.FR</a>
-          </div>
-
-          <div class="collapse navbar-collapse" collapse="!isCollapsed" id="bs-example-navbar-collapse-1">
-              <ul class="nav navbar-nav">
-                  <li class="active"><a href="#">Caculateur Micro-Coil</a></li>
-                  <li><a href="../consommation/">Consommation E-Liquide </a></li>
-              </ul>
-
-              <ul class="nav navbar-nav navbar-right">                  
-                  <li><a href="http://facebook.com/vapez">FaceBook</a></li>
-                  <li><a href="http://plus.google.com/+VapezFr">Google+</a></li>
-                  <li><a href="https://twitter.com/vapezfr">Twitter</a></li>
-                  <li><a href="https://github.com/itechnology/vapez">GitHub</a></li>
-              </ul>
-          </div>
-        </nav>   
-
-        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="http://vapez.fr" target="{{ target }}"><small>by Vapez.FR</small></a>
+            </div>
+
+            <div class="collapse navbar-collapse" collapse="!isCollapsed" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li class="active"><a href="#">{{ res.CalculatorTitle }}</a></li>
+                    <li><a href="../consommation/">{{ res.ConsumptionTitle }}</a></li>
+                </ul>
+
+                <ul class="nav navbar-nav navbar-right" ng-hide="iframe">
+                    <li class="hidden-xs"><a href="#" ng-click="embed()"><i class="glyphicon glyphicon-share"></i> {{ res.EmbedLink }}</a></li>
+                    <li class="dropdown">
+                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ res.Social }}<b class="caret"></b></a>
+                        <ul class="dropdown-menu">
+                            <li><a href="http://facebook.com/vapez" target="blank">FaceBook</a></li>
+                            <li><a href="http://plus.google.com/+VapezFr" target="blank">Google+</a></li>
+                            <li><a href="https://twitter.com/vapezfr" target="blank">Twitter</a></li>
+                            <li><a href="http://www.pinterest.com/vapezfr/?change_language=fr" target="blank">Pinterest</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+        </nav>                        
+        <div class="container">        
             <br/>                               
             <div class="row">
                 <div class="col-xs-8">
-                    <label>Fil: Type</label>
+                    <label>{{ res.WireType }}</label>
                     <select class="form-control" ng-change="changed()" ng-model="model.wire" ng-options="c.category for c in data"></select>
                 </div>
                 <div class="col-xs-4">
@@ -95,15 +100,15 @@
 
             <div class="row" ng-show="model.wire.flat">
                 <div class="col-xs-6">
-                    <label>Fil: Hauteur (mm)</label>
+                    <label>{{ res.WireHeight }} (mm)</label>
                     <div class="input-group">
                         <span type="button" class="btn btn-default btn-lg input-group-addon" ng-click="down('wire', 'height', 0.01)"><span class="glyphicon glyphicon-minus"></span></span>
                         <span class="form-control center">{{ model.wire.height | number:2 }}</span>
                         <span type="button" class="btn btn-default btn-lg input-group-addon"  ng-click="up('wire', 'height', 0.01)"><span class="glyphicon glyphicon-plus"></span></span>
                     </div>
                 </div>
                 <div class="col-xs-6">
-                    <label>Fil: Largeur (mm)</label>
+                    <label>{{ res.WireWidth }} (mm)</label>
                     <div class="input-group">
                         <span type="button" class="btn btn-default btn-lg input-group-addon" ng-click="down('wire', 'width', 0.01)"><span class="glyphicon glyphicon-minus"></span></span>
                         <span class="form-control center">{{ model.wire.width | number:2 }}</span>
@@ -114,7 +119,7 @@
 
             <div class="row" ng-hide="model.wire.flat">
                 <div class="col-xs-12">
-                    <label>Fil: Diamètre (mm)</label>
+                    <label>{{ res.WireWidth }} (mm)</label>
                     <div class="input-group">
                         <span type="button" class="btn btn-default btn-lg input-group-addon" ng-click="down('wire', 'width', 0.01)"><span class="glyphicon glyphicon-minus"></span></span>
                         <span class="form-control center">{{ model.wire.width | number:2 }}</span>
@@ -125,7 +130,7 @@
 
             <div class="row">
                 <div class="col-xs-12">
-                    <label>Coil: Diamètre (mm)</label>
+                    <label>{{ res.CoilDiameter }} (mm)</label>
                     <div class="input-group">
                         <span type="button" class="btn btn-default btn-lg input-group-addon" ng-click="down('coil','diameter', 0.1)"><span class="glyphicon glyphicon-minus"></span></span>
                         <span class="form-control center">{{ model.coil.diameter | number:1 }}</span>
@@ -137,7 +142,7 @@
             <!-- http://html5doctor.com/html5-forms-input-types/ -->
             <div class="row">
                 <div class="col-xs-12">
-                    <label>Coil: Spires</label>
+                    <label>{{ res.CoilTurns }}</label>
                     <div class="input-group">
                         <span type="button" class="btn btn-default btn-lg input-group-addon" ng-click="down('coil', 'turns', 0.5)"><span class="glyphicon glyphicon-minus"></span></span>
                         <span class="form-control center">{{ model.coil.turns }}</span>
@@ -148,7 +153,7 @@
 
             <div class="row">
                 <div class="col-xs-12">
-                    <label>Coil: Pattes (mm)</label>
+                    <label>{{ res.CoilFeet }} (mm)</label>
                     <div class="input-group">
                         <span type="button" class="btn btn-default btn-lg input-group-addon" ng-click="down('coil', 'stubs', 1)"><span class="glyphicon glyphicon-minus"></span></span>
                         <span class="form-control center"><small><em>2x</em></small> {{ model.coil.stubs }}</span>
@@ -164,21 +169,21 @@
                     <table class="table table-bordered">
                         <tr>
                             <td width="5%"><a href="../../content/img/safe-vape-chart.jpg" target="_blank"><span class="glyphicon glyphicon-info-sign"></span></a></td>
-                            <td width="55%">Résistance</td>
+                            <td width="55%">{{ res.Resistance }}</td>
                             <td ng-class="{'ohms': result.cssOhms}"><strong>{{ result.ohms | number:2 }} &#8486</strong></td>
                         </tr>
                         <tr><td></td>
-                            <td>Coeff. de Chauffe</td>
+                            <td>{{ res.Coefficient }}</td>
                             <td ng-class="{'coeffG': result.cssCoeffG, 'coeffY': result.cssCoeffY}">{{ result.coeff | number:2 }} W/mm²</td>
                         </tr>
                         <tr>
                             <td><a href="../../content/img/safe-vape-chart.jpg" target="_blank"><span class="glyphicon glyphicon-info-sign"></span></a></td>
-                            <td>Puissance</td>
+                            <td>{{ res.Power }}</td>
                             <td ng-class="{'watts': result.cssWatts}">{{ result.watts | number:2 }} W</td>
                         </tr>
                         <tr>
                             <td><a href="https://docs.google.com/spreadsheet/ccc?key=0As_VvItYH013dDhWYmFGS04tazhiUVlHSHdNeTlSNGc" target="_blank"><span class="glyphicon glyphicon-warning-sign"></span></a></td>
-                            <td>Intensité</td>
+                            <td>{{ res.Amperes }}</td>
                             <td ng-class="{'amps': result.cssAmps}">{{ result.amps | number:2 }} A</td>
                         </tr>                        
                     </table>
@@ -187,7 +192,7 @@
 
             <div class="row">
                 <div class="col-xs-12">
-                    <label>Tension</label>
+                    <label>{{ res.Voltage }}</label>
                     <div class="input-group">
                         <span type="button" class="btn btn-default btn-lg input-group-addon" ng-click="down('coil', 'volts', 0.1)"><span class="glyphicon glyphicon-minus"></span></span>
                         <span class="form-control center">{{ model.coil.volts | number:2 }} V</span>
@@ -198,15 +203,15 @@
 
             <div class="row">
                 <div class="col-xs-6">
-                    <label>Coil: Nombres</label>
+                    <label>{{ res.CoilCount }}</label>
                     <div class="input-group">
                         <span type="button" class="btn btn-default btn-lg input-group-addon" ng-click="down('coil', 'count', 1)"><span class="glyphicon glyphicon-minus"></span></span>
                         <span class="form-control center">{{ model.coil.count }}</span>
                         <span type="button" class="btn btn-default btn-lg input-group-addon"  ng-click="up('coil' ,'count', 1)"><span class="glyphicon glyphicon-plus"></span></span>
                     </div>
                 </div>
                 <div class="col-xs-6" ng-hide="model.wire.flat">
-                    <label>Fils: Nombres</label>
+                    <label>{{ res.WireCount }}</label>
                     <div class="input-group">
                         <span type="button" class="btn btn-default btn-lg input-group-addon" ng-click="down('wire', 'count', 1)"><span class="glyphicon glyphicon-minus"></span></span>
                         <span class="form-control center">{{ model.wire.count }}</span>
@@ -221,17 +226,16 @@
                 <div class="col-md-12">
                     <table class="table table-bordered">
                         <tr>
-                            <td>Longeur d'un Fil</td>
+                            <td>{{ res.WireLength }}</td>
                             <td>{{ result.length | number:2 }} cm</td>
                         </tr>                        
                         <tr>
-                            <td>Largeur d'une Coil</td>
+                            <td>{{ res.CoilWidth }}</td>
                             <td>{{ result.width | number:2 }} cm</td>
                         </tr>
                     </table>
                 </div>
-            </div>
-
+            </div>                
         </div>       
 
         <!-- scripts -->
@@ -243,7 +247,7 @@
         <script>
             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+                    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
             })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
             ga('create', 'UA-15567888-9', 'vapez.fr');

diff --git a/tools/consommation/cache.manifest b/tools/consommation/cache.manifest
@@ -1,7 +1,8 @@
 CACHE MANIFEST
 # https://developer.mozilla.org/en/docs/HTML/Using_the_application_cache
-# version 20140414
+# version 20140520-1
 CACHE:
+embed.html
 ../content/css/bootstrap.min.css
 ../content/js/angular.min.js
 ../content/js/ui-bootstrap-custom-tpls-0.10.0.min.js
@@ -10,11 +11,13 @@ CACHE:
 ../content/fonts/glyphicons-halflings-regular.ttf
 ../content/fonts/glyphicons-halflings-regular.woff
 content/js/app.js
+content/js/res.fr.json
+content/js/res.en.json
 content/css/app.css
 content/img/apple-touch-icon.png
 content/img/apple-touch-icon-76x76.png
 content/img/apple-touch-icon-120x120.png
 content/img/apple-touch-icon-152x152.png
 # These are allowed to load when a connection is availiable
 NETWORK:
-http://www.google-analytics.com/analytics.js
+*
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,5 @@ @@
     /_site
     /_exclude
     *.sln
-    *.suo
+    *.suo
+    Web.config