Make editor font size configurable. (#168)

admin/admin.js

@@ -11,305 +11,203 @@ var trash = require('./lib/pages/trash');
 var config = require('./lib/pages/config');
 
 // Errors binding.
-
 require('./lib/form_error');
 
 // Global to format dates.
-
 window.formatDate = function(ts) {
-
     return new Date(1000 * ts).toISOString().substring(0, 10);
 };
 
 // The page menu.
-
 var menu = {
-
     active: ko.observable(),
-
     types: ko.observable(),
-
     load: function() {
-
         if (menu.types()) {
-
             // Menu updated.
-
             return Promise.resolve(menu.types());
         }
 
         return api.types().then(function(types) {
-
             menu.types(types);
-
             return types;
         });
     }
 };
 
 // Binds menu.
-
 ko.applyBindings(menu,
     document.getElementById('menu'));
 
 // Returns true when user is authenticated.
 // Redirects user if he/she is not
 // authenticated.
-
 function authenticated() {
-
     if (api.hasKey()) {
-
         // If user is authenticated then
         // check if custom menu entries need
         // reloading.
-
         menu.load().catch(message.error);
-
         return true;
-
     } else {
-
         route.go('login');
     }
-
     return false;
 }
 
 var recovered;
 
 // Offers recovery option and returns
 // true when user accepts it.
-
 function recovery() {
-
     // Offer recover option to the user.
-
     var autosave = localStorage.getItem('autosave');
-
     if (autosave) {
-
         var data = JSON.parse(autosave);
-
         // Remove entry from localStorage.
-
         localStorage.removeItem('autosave');
-
         // Ask confirmation.
-
         if (confirm('You have unsaved entry "' + data.title + '",' +
             ' would you like to recover it?')) {
-
             // Assign global data that is used for
             // actual recovery.
-
             recovered = data;
-
             // Redirect to transient route.
-
             route.go('recover');
-
             return true;
         }
     }
-
     return false;
 }
 
 // Transient route for recovering
 // an entry.
-
 route(/^recover$/, function() {
-
     if (authenticated() && !recovery()) {
-
         if (recovered) {
-
             if (recovered.$id) {
-
                 // Recover existing post.
-
                 route.go('entry/' + recovered.type +
                     '/' + recovered.$id);
-
             } else {
-
                 // Recover new post.
-
                 route.go('new/' + recovered.type);
             }
-
         } else {
-
             route.go('landing');
         }
     }
 });
 
 route(/^config$/, function() {
-
     if (authenticated() && !recovery()) {
-
         menu.active('config');
-
         config.create().catch(message.error);
     }
 });
 
 route(/^entries\/([^\/]+)/, function(type) {
-
     if (authenticated() && !recovery()) {
-
         menu.active(type);
-
         posts.create(type).catch(message.error);
     }
 });
 
 route(/^entry\/([^\/]+)\/([^\/]+)/, function(type, id) {
-
     if (authenticated() && !recovery()) {
-
         menu.active(type);
-
         // Include recovery data (can be undefined).
-
         post.create(type, id, recovered).catch(message.error);
-
         recovered = undefined;
     }
 });
 
 route(/^new\/([^\/]+)/, function(type) {
-
     if (authenticated() && !recovery()) {
-
         menu.active(type);
-
         // Include recovery data (can be undefined).
-
         post.create(type, null, recovered).catch(message.error);
-
         recovered = undefined;
     }
 });
 
 route(/^comments\/([^\/]+)\/([^\/]+)/, function(type, id) {
-
     if (authenticated() && !recovery()) {
-
         menu.active(type);
-
         comments.create(type, id).catch(message.error);
     }
 });
 
 route(/^trash/, function() {
-
     if (authenticated() && !recovery()) {
-
         menu.active('trash');
-
         trash.create().catch(message.error);
     }
 });
 
 route(/^users/, function() {
-
     if (authenticated() && !recovery()) {
-
         menu.active('users');
-
         users.create().catch(message.error);
     }
 });
 
 route(/^user\/new/, function() {
-
     if (authenticated() && !recovery()) {
-
         menu.active('users');
-
         user.create().catch(message.error);
     }
 });
 
 route(/^user\/([^\/]+)/, function(id) {
-
     if (authenticated() && !recovery()) {
-
         menu.active('users');
-
         user.create(id).catch(message.error);
     }
 });
 
 route(/^login/, function() {
-
     menu.active(null);
-
     login.create().catch(message.error);
 });
 
 route(/^email/, function() {
-
     if (authenticated() && !recovery()) {
-
         menu.active('email');
-
         email.create().catch(message.error);
     }
 });
 
 route(/^logout/, function() {
-
     sessionStorage.removeItem('api-key');
-
     localStorage.removeItem('api-key');
-
     window.location = '/admin';
 });
 
 // Temporary route that decides
 // where to go.
-
 route(/^landing/, function() {
-
     menu.active(null);
-
     menu.load().then(function(types) {
-
         if (types.length > 0) {
-
             // Select first type.
-
             route.go('entries/' + types[0].name);
         }
-
     }).catch(message.error);
 });
 
 route(/.*/, function() {
-
     route.go(api.hasKey() ? 'landing' : 'login');
 });
 
 document.body.addEventListener('click', function(e) {
-
     if (e.target.href && e.target.href.match(/#logout$/)) {
-
         if (confirm('Do you want to log out?')) {
-
             return true;
-
         } else {
-
             e.stopPropagation();
-
             e.preventDefault();
-
             return false;
         }
     }
-
 }, false);

admin/lib/editor.js

@@ -32,6 +32,13 @@ exports.setSoftWrap = function(softWrap) {
     }
 };
 
+// Sets the font size used by the editor.
+exports.setFontSize = function(size) {
+    if (editor) {
+        editor.setOption('fontSize', size);
+    }
+};
+
 // Sets the editor content
 // and initial cursor position.
 exports.begin = function(content) {

admin/lib/pages/post.html

@@ -93,6 +93,24 @@ <h2 data-bind="text: title"></h2>
                     <option value="140">Soft wrap 140</option>
                 </select>
             </div>
+            <div class="col-md-2">
+                <select data-bind="value: $root.fontSize"
+                    class="form-control bc-margin-top-sm">
+                    <option value="12">12</option>
+                    <option value="13">13</option>
+                    <option value="14">14</option>
+                    <option value="15">15</option>
+                    <option value="16">16</option>
+                    <option value="17">17</option>
+                    <option value="18">18</option>
+                    <option value="19">19</option>
+                    <option value="20">20</option>
+                    <option value="21">21</option>
+                    <option value="22">22</option>
+                    <option value="23">23</option>
+                    <option value="24">24</option>                    
+                </select>
+            </div>
         </div>
         <hr>
     <!-- /ko -->

admin/lib/pages/post.js

@@ -23,7 +23,8 @@ exports.create = function(type, id, recovered) {
         softWrap: ko.observable('100'),
         settings: ko.observable(false),
         help: ko.observable(false),
-        actions: ko.observable([])
+        actions: ko.observable([]),
+        fontSize: ko.observable('14')
     };
 
     // Use stored softwrap value.
@@ -32,6 +33,12 @@ exports.create = function(type, id, recovered) {
         model.softWrap(softWrap);
     }
 
+    // Use stored font size value.
+    var fontSize = localStorage.getItem('fontsize');
+    if (fontSize) {
+        model.fontSize(fontSize);
+    }
+
     // Shows/hides the info section.
     model.toggleInfo = function() {
         model.info(!model.info());
@@ -202,13 +209,22 @@ exports.create = function(type, id, recovered) {
         // Set soft wrap on the editor.
         editor.setSoftWrap(parseInt(model.softWrap(), 10));
 
+        // Set font size in the editor.
+        editor.setFontSize(parseInt(model.fontSize(), 10));
+
         // Automatically set soft wrap when changed
         // in the UI controls.
         model.softWrap.subscribe(function(value) {
             localStorage.setItem('softwrap', value);
             editor.setSoftWrap(parseInt(value, 10));
         });
 
+        // Same as above for the editor font size.
+        model.fontSize.subscribe(function(value) {
+            localStorage.setItem('fontsize', value);
+            editor.setFontSize(parseInt(value, 10));
+        });
+
         if (id) {
             // Set initial editor content.
             if (recovered) {

pack.pl

@@ -1,5 +1,5 @@
 name('blog_core').
-version('1.2.1').
+version('1.3.0').
 title('Blog/CMS framework').
 author('Raivo Laanemets', 'https://rlaanemets.com/').
 home('http://blog-core.net/').