Commit

www-root/js/page.js

@@ -0,0 +1,221 @@
+var set = new NameGeneratorSet();
+var categories = {};
+var backgrounds = {};
+var previous = null;
+var generator = null;
+var big = true;
+var gender = null;
+var format = null;
+
+function selectGenerator(id) {
+  var gen = set.getGenerator(id);
+
+  var element = $('div.item:hover');
+  var index = element.index();
+  var parent = element.parent();
+
+  element.detach();
+  element = element.clone();
+
+  if(index > 0) {
+    element.insertAfter(parent.children().eq(index - 1));
+  } else {
+    parent.prepend(element);
+  }
+
+  if(gen != null) {
+    setGenerator(id, gen);
+  } else {
+    setMode(0);
+
+    $.get('/d/' + id, {}, function(data) {
+      var fullId = data.catId + '/' + data.id;
+      setGenerator(fullId, set.addGenerator(fullId, data, true));
+    });
+  }
+}
+
+function setMode(mode) {
+  $('#loading-screen').hide();
+  $('#generator-screen').hide();
+
+  switch(mode) {
+    case 0: $('#loading-screen').show(); break;
+    case 1: $('#generator-screen').show(); break;
+  }
+}
+
+function setGenerator(id, gen) {
+  setCookie('last_generator', id, 14);
+  $('#gi-header').html(gen.name);
+
+  $('#gi-genders').html('');
+  $('#gi-formats').html('');
+
+  if(gen.genders.length > 1) {
+    for(var i = 0; i < gen.genders.length; ++i) {
+      var className = '';
+      if(i == 0) {
+        className = "selected";
+      }
+
+      $('#gi-genders').append($('<a class="'+className+'" onclick="selectGender(this);">'+gen.genders[i]+'</a>'));
+    }
+  }
+
+  var prev = null;
+  var keys = Object.keys(gen.formats);
+  if(keys.length > 1) {
+    for(var i = 0; i < keys.length; ++i) {
+      var className = '';
+      if(i == 0) {
+        className = "selected";
+      }
+
+      $('#gi-formats').append($('<a class="'+className+'" onclick="selectFormat(this);" data-id="'+keys[i]+'">'+gen.formats[keys[i]].name+'</a>'));
+    }
+  }
+
+  setMode(1);
+  selectBackground(id);
+
+  gender = gen.genders[0];
+  format = keys[i];
+  generator = gen;
+
+  $('#gi-button').focus();
+  if(previous != id) {
+    generate();
+  }
+  previous = id;
+}
+
+function selectBackground(id) {
+  if(backgrounds.hasOwnProperty(id)) {
+    setBackground(backgrounds[id]);
+  } else {
+    $.get('/b/' + id, {}, function(data) {
+      backgrounds[id] = data;
+      setBackground(backgrounds[id]);
+    });
+  }
+}
+
+function setBackground(fileName) {
+  $('#generator-style').html('body { background-image: url(' + fileName + '); }');
+}
+
+function hideFooter() {
+  $('.ngn4-footer').hide();
+  setCookie('hide_footer', 'yes', 60);
+}
+
+function generate() {
+  if(generator != null) {
+    $('#gi-name').html(generator.generate(format, gender));
+  }
+}
+
+function updateLists() {
+  $('#menu-items').html("Loading...");
+
+  $.get('/l/generators', function(data, err) {
+    // 1. Categories
+    var keys = Object.keys(data.categories);
+    var items = {};
+    $('#menu-items').html('');
+    for(var i = 0; i < keys.length; ++i) {
+      var key = keys[i];
+      var item = $('<div class="item" data-id="'+key+'"><span>'+data.categories[key]+'</span><div class="ngn4-panel"></div></div>');
+
+      items[key] = item;
+      $('#menu-items').append(item);
+
+      categories[key] = data.categories[key];
+    }
+
+    // 2. Sub menus
+    keys = Object.keys(data.generators);
+    for(var i = 0; i < keys.length; ++i) {
+      var key = keys[i];
+      var item = $('<a href="javascript:selectGenerator(\''+key+'\')">'+data.generators[key]+'</a>');
+
+      $('div', items[key.split('/')[0]]).append(item);
+    }
+
+    applyMediaQueries(true);
+  });
+}
+
+function applyMediaQueries(force) {
+  var mq = window.matchMedia("(max-width: 980px)");
+
+  if(typeof(force) !== 'boolean') {
+    force = false;
+  }
+
+  if (mq.matches && (!big || force)) {
+    $('#menu-items .item').each(function(index) {
+      $('span', this).html($(this).data('id').toUpperCase());
+    });
+
+    big = true;
+  }
+
+  if (!mq.matches && (big || force)) {
+    $('#menu-items .item').each(function(index) {
+      $('span', this).html(categories[$(this).data('id')]);
+    });
+
+    big = false;
+  }
+}
+
+function selectGender(elem) {
+  gender = $(elem).text();
+
+  $('#gi-genders a.selected').attr('class', '');
+  $(elem).attr('class', 'selected');
+}
+
+function selectFormat(elem) {
+  format = $(elem).data('id');
+
+  $('#gi-formats a.selected').attr('class', '');
+  $(elem).attr('class', 'selected');
+}
+
+$(document).ready(function() {
+  if(getCookie('hide_footer') === 'yes') {
+    $('.ngn4-footer').hide();
+  }
+
+  var lastGenerator = getCookie('last_generator');
+  if(lastGenerator.length > 0) {
+    selectGenerator(lastGenerator);
+  } else {
+    selectGenerator('default');
+  }
+
+  updateLists();
+});
+
+$(window).resize(applyMediaQueries);
+
+// http://www.w3schools.com/js/js_cookies.asp
+function getCookie(cname) {
+    var name = cname + "=";
+    var ca = document.cookie.split(';');
+    for(var i=0; i<ca.length; i++) {
+        var c = ca[i];
+        while (c.charAt(0)==' ') c = c.substring(1);
+        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
+    }
+    return "";
+}
+function setCookie(cname, cvalue, exdays) {
+    var d = new Date();
+    d.setTime(d.getTime() + (exdays*24*60*60*1000));
+    var expires = "expires="+d.toUTCString();
+    document.cookie = cname + "=" + cvalue + "; " + expires;
+}