Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Refactor client init

  • Loading branch information...
commit b862290606e9555c98cb27e33a49f984d977dcd6 1 parent e30007d
@ixti ixti authored
View
57 assets/javascripts/app.js
@@ -1,5 +1,3 @@
-/*global nodeca, _, $, Modernizr, window, document*/
-
//= require store
//= require jquery/jquery
//= require jquery-ui/jquery-ui
@@ -14,58 +12,3 @@
//= require i18n
//= require views
//= require api
-//= require_self
-
-$(function () {
- "use strict";
- nodeca.client.init();
-});
-
-//
-// Social buttons defered load - after all
-//
-
-$(window).load(function() {
- 'use strict';
-
- setTimeout(function () {
-
- // Twitter buttons
-
- (function(d,s,id) {
- var js, fjs = d.getElementsByTagName(s)[0];
-
- if (!d.getElementById(id)) {
- js = d.createElement(s);
- js.id = id;
- js.src = "//platform.twitter.com/widgets.js";
-
- fjs.parentNode.insertBefore(js,fjs);
- }
- }(document, "script", "twitter-wjs"));
-
- // Google +1
-
- (function() {
- var po = document.createElement('script');
-
- po.type = 'text/javascript';
- po.async = true;
- po.src = 'https://apis.google.com/js/plusone.js';
-
- var s = document.getElementsByTagName('script')[0];
- s.parentNode.insertBefore(po, s);
- }());
-
- // Flattr
-
- (function() {
- var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
- s.type = 'text/javascript';
- s.async = true;
- s.src = '//api.flattr.com/js/0.6/load.js?mode=auto';
- t.parentNode.insertBefore(s, t);
- }());
-
- }, 1000);
-});
View
7 assets/javascripts/loader.js.ejs
@@ -4,7 +4,7 @@
/*jshint browser:true,node:false*/
-/*global yepnope*/
+/*global yepnope, window*/
yepnope([
@@ -15,7 +15,10 @@ yepnope([
nope: <%- JSON.stringify(asset_path('json2.js')) %>
},
{
- load: <%- JSON.stringify(asset_path('app.js')) %>
+ load: <%- JSON.stringify(asset_path('app.js')) %>,
+ complete: function () {
+ window.nodeca.client.init();
+ }
}
]);
View
303 client/init.js
@@ -1,289 +1,56 @@
-/*global nodeca, _, $, Modernizr, Backbone, window, Faye*/
+/*global $, nodeca*/
"use strict";
module.exports = function () {
- var
- // jQuery $elements
- $fontname, $users_count, $glyphs, $import,
- // models
- fonts, result, session,
- // ui views
- toolbar, tabs, selector, preview, editor;
+ $(function () {
+ nodeca.client.init.app();
+ //
+ // Social buttons defered load - after all
+ //
- // check browser's capabilities
- if (!Modernizr.fontface) {
- nodeca.logger.error("bad browser");
- $('#err-bad-browser').modal({backdrop: 'static', keyboard: false});
- return;
- }
+ setTimeout(function () {
+ // Twitter buttons
- //
- // Models
- //
+ (function(d,s,id) {
+ var js, fjs = d.getElementsByTagName(s)[0];
+ if (!d.getElementById(id)) {
+ js = d.createElement(s);
+ js.id = id;
+ js.src = "//platform.twitter.com/widgets.js";
- // list of all fonts
- fonts = new (Backbone.Collection.extend({
- model: nodeca.client.models.font
- }))(nodeca.shared.embedded_fonts);
+ fjs.parentNode.insertBefore(js,fjs);
+ }
+ }(document, "script", "twitter-wjs"));
- // special collection of selected glyphs (cache) with
- // extra model logic (validate, config creation and
- // download requesting), but which can still be used
- // as a normal collection for the views
- result = new nodeca.client.models.result;
+ // Google +1
+ (function() {
+ var po = document.createElement('script');
- //
- // Views (UI)
- //
+ po.type = 'text/javascript';
+ po.async = true;
+ po.src = 'https://apis.google.com/js/plusone.js';
+ var s = document.getElementsByTagName('script')[0];
+ s.parentNode.insertBefore(po, s);
+ }());
- toolbar = new nodeca.client.ui.toolbar;
- tabs = new nodeca.client.ui.tabs;
- selector = new nodeca.client.ui.panes.selector({model: fonts});
- preview = new nodeca.client.ui.panes.preview({model: result});
- editor = new nodeca.client.ui.panes.codes_editor({model: result});
+ // Flattr
+ (function() {
+ var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
+ s.type = 'text/javascript';
+ s.async = true;
+ s.src = '//api.flattr.com/js/0.6/load.js?mode=auto';
+ t.parentNode.insertBefore(s, t);
+ }());
- //
- // Initialization
- //
-
-
- fonts.each(function (f) {
- f.eachGlyph(function (g) {
- toolbar.addKeywords(g.get('source').search || []);
- g.on('change:selected', function (g, val) {
- result[val ? 'add' : 'remove'](g);
- });
- });
- });
-
-
- toolbar.on('click:download', function () {
- result.startDownload($('#result-fontname').val());
- });
-
-
- toolbar.on('change:glyph-size', _.debounce(function (size) {
- selector.changeGlyphSize(size);
- preview.changeGlyphSize(size);
- }, 250));
-
-
- $('#glyph-3d').change(function () {
- var val = 'checked' === $(this).attr('checked');
- selector.$el.toggleClass('_3d', val);
- preview.$el.toggleClass('_3d', val);
- }).trigger('change');
-
-
- // perform glyphs search
- $glyphs = $('.glyph');
- toolbar.on('change:search', function (q) {
- q = $.trim(q);
-
- if (0 === q.length) {
- $glyphs.show();
- return;
- }
-
- $glyphs.hide().filter(function () {
- var model = $(this).data('model');
- return model && 0 <= model.keywords.indexOf(q);
- }).show();
- });
-
-
- // update selected glyphs count
- result.on('add remove', function () {
- var count = result.length;
-
- toolbar.setGlyphsCount(count);
- tabs.setGlyphsCount(count);
- });
-
-
- // show selector tab after load complete
- tabs.activate('#selector');
-
-
- // Attach tooltip handler to matching elements
- $('._tip').tooltip();
-
-
- // Attach collapse handler to matching elements
- $('._collapser').ndCollapser();
-
-
- //
- // Fontname
- //
-
-
- $fontname = $('#result-fontname');
- $fontname.on('keyup change', function () {
- var $el = $(this);
- $el.val($el.val().replace(/[^a-z0-9\-_]+/g, ''));
- });
-
-
- //
- // Sessions
- //
-
-
- // Session manager instance
- session = new nodeca.client.sessions({
- fontnameElement: $fontname,
- fontsList: fonts
- });
-
-
- var save_session = _.debounce(function () {
- session.save();
- }, 2000);
-
-
- // save current state upon fontname change
- $fontname.change(save_session);
-
-
- // change current state when some of glyph properties were changed
- fonts.each(function (f) {
- f.on('before:batch-select', function () {
- nodeca.client.sessions.disable();
- });
-
- f.on('after:batch-select', function () {
- nodeca.client.sessions.enable();
- save_session();
- });
-
- f.eachGlyph(function (g) {
- g.on('change:selected change:code change:css', save_session);
- });
- });
-
-
- session.load();
-
-
- //
- // Initialize clear (selections) button
- //
-
-
- $('#reset-app-selections').click(function (event) {
- // do not change location
- event.preventDefault();
-
- fonts.each(function (f) {
- f.eachGlyph(function (g) {
- g.toggle('selected', false);
- });
- });
-
- save_session();
- });
-
-
- //
- // Initialize reset everything button
- //
-
-
- $('#reset-app-all').click(function (event) {
- // do not change location
- event.preventDefault();
-
- fonts.each(function (f) {
- f.eachGlyph(function (g) {
- g.toggle('selected', false);
- g.unset('code');
- g.unset('css');
- });
- });
-
- $fontname.val('');
- save_session();
- });
-
-
- if ('development' === nodeca.runtime.env) {
- // export some internal collections for debugging
- window.fontello_fonts = fonts;
- window.fontello_result = result;
- }
-
-
- //
- // Initialize config reader
- //
-
-
- $import = $('#import-app-config');
-
- $import.click(function (event) {
- event.preventDefault();
-
- if (!window.FileReader) {
- nodeca.client.util.notify('error',
- nodeca.client.render('errors.no-file-reader'));
- return false;
- }
-
- $('#import-app-config-file').click();
- return false;
- });
-
- // handle file upload
- $('#import-app-config-file').change(function (event) {
- var file = (event.target.files || [])[0], reader;
-
- nodeca.logger.debug('Import config requested', file);
-
- // file.type is empty on Chromium, so we allow upload anything
- // and will get real error only if JSON.parse fails
-
- if (!file) {
- // Unexpected behavior. Should not happen in real life.
- nodeca.client.util.notify('error',
- 'You must choose a file.');
- return;
- }
-
- // we must "reset" value of input field, otherwise Chromium will
- // not fire change event if the same file will be chosen twice, e.g.
- // import config -> made changes -> import config
-
- $(this).val('');
-
- reader = new window.FileReader();
-
- reader.onload = function (event) {
- var config;
-
- try {
- config = JSON.parse(event.target.result);
- } catch (err) {
- nodeca.client.util.notify('error',
- nodeca.client.render('errors.read-config', {
- error: (err.message || err.toString())
- }));
- return;
- }
-
- nodeca.logger.debug('Config successfully parsed', config);
- session.readConfig(config);
- };
-
- reader.readAsBinaryString(file);
+ }, 2000);
});
};
View
289 client/init/app.js
@@ -0,0 +1,289 @@
+/*global nodeca, _, $, Modernizr, Backbone, window, Faye*/
+
+
+"use strict";
+
+
+module.exports = function () {
+ var
+ // jQuery $elements
+ $fontname, $users_count, $glyphs, $import,
+ // models
+ fonts, result, session,
+ // ui views
+ toolbar, tabs, selector, preview, editor;
+
+
+ // check browser's capabilities
+ if (!Modernizr.fontface) {
+ nodeca.logger.error("bad browser");
+ $('#err-bad-browser').modal({backdrop: 'static', keyboard: false});
+ return;
+ }
+
+
+ //
+ // Models
+ //
+
+
+ // list of all fonts
+ fonts = new (Backbone.Collection.extend({
+ model: nodeca.client.models.font
+ }))(nodeca.shared.embedded_fonts);
+
+ // special collection of selected glyphs (cache) with
+ // extra model logic (validate, config creation and
+ // download requesting), but which can still be used
+ // as a normal collection for the views
+ result = new nodeca.client.models.result;
+
+
+ //
+ // Views (UI)
+ //
+
+
+ toolbar = new nodeca.client.ui.toolbar;
+ tabs = new nodeca.client.ui.tabs;
+ selector = new nodeca.client.ui.panes.selector({model: fonts});
+ preview = new nodeca.client.ui.panes.preview({model: result});
+ editor = new nodeca.client.ui.panes.codes_editor({model: result});
+
+
+ //
+ // Initialization
+ //
+
+
+ fonts.each(function (f) {
+ f.eachGlyph(function (g) {
+ toolbar.addKeywords(g.get('source').search || []);
+ g.on('change:selected', function (g, val) {
+ result[val ? 'add' : 'remove'](g);
+ });
+ });
+ });
+
+
+ toolbar.on('click:download', function () {
+ result.startDownload($('#result-fontname').val());
+ });
+
+
+ toolbar.on('change:glyph-size', _.debounce(function (size) {
+ selector.changeGlyphSize(size);
+ preview.changeGlyphSize(size);
+ }, 250));
+
+
+ $('#glyph-3d').change(function () {
+ var val = 'checked' === $(this).attr('checked');
+ selector.$el.toggleClass('_3d', val);
+ preview.$el.toggleClass('_3d', val);
+ }).trigger('change');
+
+
+ // perform glyphs search
+ $glyphs = $('.glyph');
+ toolbar.on('change:search', function (q) {
+ q = $.trim(q);
+
+ if (0 === q.length) {
+ $glyphs.show();
+ return;
+ }
+
+ $glyphs.hide().filter(function () {
+ var model = $(this).data('model');
+ return model && 0 <= model.keywords.indexOf(q);
+ }).show();
+ });
+
+
+ // update selected glyphs count
+ result.on('add remove', function () {
+ var count = result.length;
+
+ toolbar.setGlyphsCount(count);
+ tabs.setGlyphsCount(count);
+ });
+
+
+ // show selector tab after load complete
+ tabs.activate('#selector');
+
+
+ // Attach tooltip handler to matching elements
+ $('._tip').tooltip();
+
+
+ // Attach collapse handler to matching elements
+ $('._collapser').ndCollapser();
+
+
+ //
+ // Fontname
+ //
+
+
+ $fontname = $('#result-fontname');
+ $fontname.on('keyup change', function () {
+ var $el = $(this);
+ $el.val($el.val().replace(/[^a-z0-9\-_]+/g, ''));
+ });
+
+
+ //
+ // Sessions
+ //
+
+
+ // Session manager instance
+ session = new nodeca.client.sessions({
+ fontnameElement: $fontname,
+ fontsList: fonts
+ });
+
+
+ var save_session = _.debounce(function () {
+ session.save();
+ }, 2000);
+
+
+ // save current state upon fontname change
+ $fontname.change(save_session);
+
+
+ // change current state when some of glyph properties were changed
+ fonts.each(function (f) {
+ f.on('before:batch-select', function () {
+ nodeca.client.sessions.disable();
+ });
+
+ f.on('after:batch-select', function () {
+ nodeca.client.sessions.enable();
+ save_session();
+ });
+
+ f.eachGlyph(function (g) {
+ g.on('change:selected change:code change:css', save_session);
+ });
+ });
+
+
+ session.load();
+
+
+ //
+ // Initialize clear (selections) button
+ //
+
+
+ $('#reset-app-selections').click(function (event) {
+ // do not change location
+ event.preventDefault();
+
+ fonts.each(function (f) {
+ f.eachGlyph(function (g) {
+ g.toggle('selected', false);
+ });
+ });
+
+ save_session();
+ });
+
+
+ //
+ // Initialize reset everything button
+ //
+
+
+ $('#reset-app-all').click(function (event) {
+ // do not change location
+ event.preventDefault();
+
+ fonts.each(function (f) {
+ f.eachGlyph(function (g) {
+ g.toggle('selected', false);
+ g.unset('code');
+ g.unset('css');
+ });
+ });
+
+ $fontname.val('');
+ save_session();
+ });
+
+
+ if ('development' === nodeca.runtime.env) {
+ // export some internal collections for debugging
+ window.fontello_fonts = fonts;
+ window.fontello_result = result;
+ }
+
+
+ //
+ // Initialize config reader
+ //
+
+
+ $import = $('#import-app-config');
+
+ $import.click(function (event) {
+ event.preventDefault();
+
+ if (!window.FileReader) {
+ nodeca.client.util.notify('error',
+ nodeca.client.render('errors.no-file-reader'));
+ return false;
+ }
+
+ $('#import-app-config-file').click();
+ return false;
+ });
+
+ // handle file upload
+ $('#import-app-config-file').change(function (event) {
+ var file = (event.target.files || [])[0], reader;
+
+ nodeca.logger.debug('Import config requested', file);
+
+ // file.type is empty on Chromium, so we allow upload anything
+ // and will get real error only if JSON.parse fails
+
+ if (!file) {
+ // Unexpected behavior. Should not happen in real life.
+ nodeca.client.util.notify('error',
+ 'You must choose a file.');
+ return;
+ }
+
+ // we must "reset" value of input field, otherwise Chromium will
+ // not fire change event if the same file will be chosen twice, e.g.
+ // import config -> made changes -> import config
+
+ $(this).val('');
+
+ reader = new window.FileReader();
+
+ reader.onload = function (event) {
+ var config;
+
+ try {
+ config = JSON.parse(event.target.result);
+ } catch (err) {
+ nodeca.client.util.notify('error',
+ nodeca.client.render('errors.read-config', {
+ error: (err.message || err.toString())
+ }));
+ return;
+ }
+
+ nodeca.logger.debug('Config successfully parsed', config);
+ session.readConfig(config);
+ };
+
+ reader.readAsBinaryString(file);
+ });
+};
Please sign in to comment.
Something went wrong with that request. Please try again.