Themes: Added automatic font inclusion (#79)

os-js · Feb 8, 2015 · e534f2c · e534f2c
1 parent cf055eb
commit e534f2c
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 69 deletions.
diff --git a/dist-dev/index.html b/dist-dev/index.html
@@ -41,6 +41,7 @@
     <link rel="apple-touch-icon-precomposed" href="/favicon.png" />
 
     <!-- Styles -->
+    <link type="text/css" rel="stylesheet" href="/themes/fonts.css" />
     <link type="text/css" rel="stylesheet" href="/css/init.css" />
     <link type="text/css" rel="stylesheet" href="/css/api.css" />
     <link type="text/css" rel="stylesheet" href="/css/session.css" />

diff --git a/dist/index.html b/dist/index.html
@@ -42,6 +42,7 @@
 
     <!-- OS.js Sources -->
     <link type="text/css" rel="stylesheet" href="/osjs.css" />
+    <link type="text/css" rel="stylesheet" href="/themes/fonts.css" />
     <script type="text/javascript" charset="utf-8" src="/settings.js"></script>
     <script type="text/javascript" charset="utf-8" src="/osjs.js"></script>
   </head>

diff --git a/src/conf/110-frontend.json b/src/conf/110-frontend.json
@@ -48,9 +48,8 @@
       "Sounds"  : {},
       "Icons"   : {},
       "Fonts"   : {
-        "default" : "OSjsFont",
+        "default" : "Karla",
         "list"    : [
-          "OSjsFont",
           "Arial",
           "Arial Black",
           "Sans-serif",

diff --git a/src/packages/default/CoreWM/main.js b/src/packages/default/CoreWM/main.js
@@ -44,7 +44,7 @@
       desktopMargin       : 5,
       wallpaper           : 'osjs:///themes/wallpapers/wallpaper.jpg',
       backgroundColor     : '#0B615E',
-      fontFamily          : 'OSjsFont',
+      fontFamily          : 'Karla',
       theme               : 'default',
       icons               : 'default',
       sounds              : 'default',
@@ -82,6 +82,7 @@
     if ( defaults ) {
       cfg = Utils.mergeObject(cfg, defaults);
     }
+
     return cfg;
   }
 

diff --git a/src/stylesheets/theme.less b/src/stylesheets/theme.less
@@ -82,66 +82,9 @@
 /**
  * Base
  */
-@font-face {
-  font-family:OSjsFont;
-  src: url('/themes/fonts/Karla/Regular.eot');
-  src: url('/themes/fonts/Karla/Regular.eot?#iefix') format('embedded-opentype'),
-       url('/themes/fonts/Karla/Regular.svg#karla') format('svg'),
-       url('/themes/fonts/Karla/Regular.woff') format('woff'),
-       url('/themes/fonts/Karla/Regular.ttf') format('truetype');
-  font-weight:normal;
-  font-style:normal;
-}
-@font-face {
-  font-family:OSjsFont;
-  src: url('/themes/fonts/Karla/Bold.eot');
-  src: url('/themes/fonts/Karla/Bold.eot?#iefix') format('embedded-opentype'),
-       url('/themes/fonts/Karla/Bold.svg#karla_bold') format('svg'),
-       url('/themes/fonts/Karla/Bold.woff') format('woff'),
-       url('/themes/fonts/Karla/Bold.ttf') format('truetype');
-  font-weight:bold;
-}
-@font-face {
-  font-family:OSjsFont;
-  src: url('/themes/fonts/Karla/Italic.eot');
-  src: url('/themes/fonts/Karla/Italic.eot?#iefix') format('embedded-opentype'),
-       url('/themes/fonts/Karla/Italic.svg#karla_italic') format('svg'),
-       url('/themes/fonts/Karla/Italic.woff') format('woff'),
-       url('/themes/fonts/Karla/Italic.ttf') format('truetype');
-  font-style:italic;
-}
-@font-face {
-  font-family:OSjsFont;
-  src: url('/themes/fonts/Karla/Italic.eot');
-  src: url('/themes/fonts/Karla/Italic.eot?#iefix') format('embedded-opentype'),
-       url('/themes/fonts/Karla/Italic.svg#karla_italic') format('svg'),
-       url('/themes/fonts/Karla/Italic.woff') format('woff'),
-       url('/themes/fonts/Karla/Italic.ttf') format('truetype');
-  font-style:oblique;
-}
-@font-face {
-  font-family:OSjsFont;
-  src: url('/themes/fonts/Karla/BoldItalic.eot');
-  src: url('/themes/fonts/Karla/BoldItalic.eot?#iefix') format('embedded-opentype'),
-       url('/themes/fonts/Karla/BoldItalic.svg#karla_bolditalic') format('svg'),
-       url('/themes/fonts/Karla/BoldItalic.woff') format('woff'),
-       url('/themes/fonts/Karla/BoldItalic.ttf') format('truetype');
-  font-style:italic;
-  font-style:italic;
-}
-@font-face {
-  font-family:OSjsFont;
-  src: url('/themes/fonts/Karla/BoldItalic.eot');
-  src: url('/themes/fonts/Karla/BoldItalic.eot?#iefix') format('embedded-opentype'),
-       url('/themes/fonts/Karla/BoldItalic.svg#karla_bolditalic') format('svg'),
-       url('/themes/fonts/Karla/BoldItalic.woff') format('woff'),
-       url('/themes/fonts/Karla/BoldItalic.ttf') format('truetype');
-  font-style:italic;
-  font-style:oblique;
-}
 
 body, input, button, textarea, label, select {
-  font-family:OSjsFont, Sans-serif;
+  font-family:Karla, Sans-serif;
   font-weight:normal;
   font-style:normal;
   color: @theme_base_fg_color;

diff --git a/src/themes/fonts/Karla/style.css b/src/themes/fonts/Karla/style.css
@@ -0,0 +1,57 @@
+@font-face {
+  font-family:Karla;
+  src: url('/themes/fonts/Karla/Regular.eot');
+  src: url('/themes/fonts/Karla/Regular.eot?#iefix') format('embedded-opentype'),
+       url('/themes/fonts/Karla/Regular.svg#karla') format('svg'),
+       url('/themes/fonts/Karla/Regular.woff') format('woff'),
+       url('/themes/fonts/Karla/Regular.ttf') format('truetype');
+  font-weight:normal;
+  font-style:normal;
+}
+@font-face {
+  font-family:Karla;
+  src: url('/themes/fonts/Karla/Bold.eot');
+  src: url('/themes/fonts/Karla/Bold.eot?#iefix') format('embedded-opentype'),
+       url('/themes/fonts/Karla/Bold.svg#karla_bold') format('svg'),
+       url('/themes/fonts/Karla/Bold.woff') format('woff'),
+       url('/themes/fonts/Karla/Bold.ttf') format('truetype');
+  font-weight:bold;
+}
+@font-face {
+  font-family:Karla;
+  src: url('/themes/fonts/Karla/Italic.eot');
+  src: url('/themes/fonts/Karla/Italic.eot?#iefix') format('embedded-opentype'),
+       url('/themes/fonts/Karla/Italic.svg#karla_italic') format('svg'),
+       url('/themes/fonts/Karla/Italic.woff') format('woff'),
+       url('/themes/fonts/Karla/Italic.ttf') format('truetype');
+  font-style:italic;
+}
+@font-face {
+  font-family:Karla;
+  src: url('/themes/fonts/Karla/Italic.eot');
+  src: url('/themes/fonts/Karla/Italic.eot?#iefix') format('embedded-opentype'),
+       url('/themes/fonts/Karla/Italic.svg#karla_italic') format('svg'),
+       url('/themes/fonts/Karla/Italic.woff') format('woff'),
+       url('/themes/fonts/Karla/Italic.ttf') format('truetype');
+  font-style:oblique;
+}
+@font-face {
+  font-family:Karla;
+  src: url('/themes/fonts/Karla/BoldItalic.eot');
+  src: url('/themes/fonts/Karla/BoldItalic.eot?#iefix') format('embedded-opentype'),
+       url('/themes/fonts/Karla/BoldItalic.svg#karla_bolditalic') format('svg'),
+       url('/themes/fonts/Karla/BoldItalic.woff') format('woff'),
+       url('/themes/fonts/Karla/BoldItalic.ttf') format('truetype');
+  font-style:italic;
+  font-style:italic;
+}
+@font-face {
+  font-family:Karla;
+  src: url('/themes/fonts/Karla/BoldItalic.eot');
+  src: url('/themes/fonts/Karla/BoldItalic.eot?#iefix') format('embedded-opentype'),
+       url('/themes/fonts/Karla/BoldItalic.svg#karla_bolditalic') format('svg'),
+       url('/themes/fonts/Karla/BoldItalic.woff') format('woff'),
+       url('/themes/fonts/Karla/BoldItalic.ttf') format('truetype');
+  font-style:italic;
+  font-style:oblique;
+}
diff --git a/src/tools/obt b/src/tools/obt
@@ -344,17 +344,18 @@ String.prototype.replaceAll = function(stringToFind,stringToReplace){
    */
   function buildThemes() {
     var dir   = _path.join(ROOT, 'src', 'themes', 'styles');
+    var dir2  = _path.join(ROOT, 'src', 'themes', 'fonts');
 
     var q = new AQ();
 
-    function aq(iter, name) {
+    function aq(name) {
       q.add(function(cb) {
         console.log("\033[1;32mBuilding theme \033[0;33m%s\033[0m", name);
         cb();
       });
 
       q.add(function(cb) {
-        var src = _path.join(dir, iter, 'style.less');
+        var src = _path.join(dir, name, 'style.less');
         var dest = _path.join(ROOT, 'dist', 'themes', 'styles', name + '.css');
 
         console.log('less', src, dest);
@@ -381,15 +382,26 @@ String.prototype.replaceAll = function(stringToFind,stringToReplace){
       });
     }
 
-    var name;
-    var dirs = getDirs(dir);
-    for ( var i = 0; i < dirs.length; i++ ) {
-      name = dirs[i];
+    console.log("\033[1;32mBuilding fonts\033[0m");
+    var fontStyles = [];
+    getDirs(dir2).forEach(function(name) {
       if ( !name.match(/^\.|\_/) ) {
-        aq(dirs[i], name);
+        var stylesheet = _path.join(dir2, name, 'style.css');
+        if ( _fs.existsSync(stylesheet) ) {
+          console.log('Found', name);
+          fontStyles.push(_fs.readFileSync(stylesheet).toString());
+        }
       }
-    }
+    });
+    var dest = _path.join(ROOT, 'dist', 'themes', 'fonts.css');
+    _fs.writeFileSync(dest, fontStyles.join("\n"));
 
+
+    getDirs(dir).forEach(function(name) {
+      if ( !name.match(/^\.|\_/) ) {
+        aq(name);
+      }
+    });
     q.run(function() {
     });
   }
@@ -655,10 +667,22 @@ String.prototype.replaceAll = function(stringToFind,stringToReplace){
       return scan_themes(src, 'icon', true);
     })();
 
+    var fonts = (function() {
+      var list = [];
+      var src = _path.join(ROOT, 'src', 'themes', 'fonts');
+      getDirs(src).forEach(function(name) {
+        if ( !name.match(/^\.|\_/) ) {
+          list.push(name);
+        }
+      });
+      return list;
+    })();
+
 
     settings.Styles = styles;
     settings.Icons = icons;
     settings.Sounds = sounds;
+    settings.Fonts.list = fonts.concat(settings.Fonts.list);
     settings.MIME = MIMES.descriptions;
     settings.EXTMIME = MIMES.mapping;
     settings.Core.Repositories = REPOS;

diff --git a/src/tools/templates/index.html b/src/tools/templates/index.html
@@ -41,6 +41,7 @@
     <link rel="apple-touch-icon-precomposed" href="/favicon.png" />
 
     <!-- Styles -->
+    <link type="text/css" rel="stylesheet" href="/themes/fonts.css" />
 %STYLES%
 
     <!-- Scripts -->