mumuki-emojis 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: c21a2c7b6a89e484b1801c5481a5a72d5a91ca3950fdef2bd52ef0625f2ac9dc
+  data.tar.gz: dea746935d7d2ea88563f984babaca356b93a75685f5883829ca849c97e457ed
+SHA512:
+  metadata.gz: 153d54ff710652e872b42da4dc196569522c713452e4a5dbc172a79ff0fa57545d16db03e603d8b47ea254ea47061c024d67075e54d294eb1f6762ed40327bf3
+  data.tar.gz: f628a8fc43411e880df50ffca49caa18eb27eaf690d54185a559c9e050f25aa36218b5ad6690d6060d2f1262d54efd3001eee90f09e9055be2746fd81b85e674

data/README.md

@@ -0,0 +1,38 @@
+# Mumuki Emojis
+
+Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/mumuki/emojis`. To experiment with that code, run `bin/console` for an interactive prompt.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'mumuki-emojis'
+```
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install mumuki-emojis
+
+## Usage
+
+TODO: Write usage instructions here
+
+## Development
+
+After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/mumuki/mumuki-emojis.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,22 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec
+
+namespace :wrapper do
+  desc 'Wrap emojis assets into this gem'
+  task wrap: :clean do
+    cp_r '../assets', 'app'
+    cp '../mumuki-emojis-shortnames.json', 'app/assets/json'
+  end
+
+  task :clean do
+    rm_rf 'app'
+    mkdir_p 'app/assets/json'
+    mkdir_p 'app/assets/images'
+    mkdir_p 'app/assets/javascripts'
+    mkdir_p 'app/assets/stylesheets'
+  end
+end

data/app/assets/javascripts/mumuki-emojis-availables.js

@@ -0,0 +1,31 @@
+(function (window) {
+
+  window.muEmojis = window.muEmojis || {};
+
+  window.muEmojis.object = {};
+
+  function compareEmojis(a, b) {
+    return a.order < b.order ? -1 : (a.order == b.order ? 0 : 1);
+  }
+
+  function fullEmoji(emoji) {
+    return {
+      name: emoji.n,
+      category: emoji.ca,
+      sprite_category: emoji.sc,
+      order: emoji.o,
+      shortname: emoji.s,
+      shortname_alternates: emoji.ss,
+      diversity: emoji.d,
+      diversities: emoji.ds,
+      keywords: emoji.k,
+      code_points: {
+        base: emoji.co
+      }
+    }
+  }
+
+  window.muEmojis.fullEmoji = fullEmoji;
+  window.muEmojis.list = Object.values(window.muEmojis.object).map(fullEmoji).sort(compareEmojis);
+
+})(window);

data/app/assets/javascripts/mumuki-emojis-categories.js

@@ -0,0 +1,146 @@
+(function (window) {
+
+  window.muEmojis = window.muEmojis || {};
+
+  var availableLanguages = ['en', 'es', 'pt'];
+
+  function currentLanguage() {
+    var _language = window.navigator.languages && window.navigator.languages[0] ||
+                    window.navigator.language ||
+                    window.navigator.browserLanguage ||
+                    window.navigator.systemLanguage ||
+                    window.navigator.userLanguage;
+
+    var language = _language.split("-")[0];
+
+    return availableLanguages.indexOf(language) >= 0 ? language : "en";
+  }
+
+  window.muEmojis._inputPlaceholder_ = {
+    en: "Search emojis",
+    es: "Buscar emoticón",
+    pt: "Emoticon de busca",
+  }
+
+  window.muEmojis._categories_ = [
+    {
+      name: "mumoji",
+      icon_class: "da da-mumuki-circle",
+      caption: {
+        en: "Mumoji",
+        es: "Mumoji",
+        pt: "Mumoji",
+      }
+    },
+    {
+      name: "people",
+      icon_class: "fa fa-fw fa-smile-o",
+      caption: {
+        en: "Smileys & People",
+        es: "Sonrisas y gente",
+        pt: "Sorrisos e pessoas",
+      }
+    },
+    {
+      name: "nature",
+      icon_class: "fa fa-fw fa-leaf",
+      caption: {
+        en: "Animals & Nature",
+        es: "Animales y naturaleza",
+        pt: "Animais e natureza",
+      }
+    },
+    {
+      name: "food",
+      icon_class: "fa fa-fw fa-cutlery",
+      caption: {
+        en: "Food & Drink",
+        es: "Comida y bebida",
+        pt: "Comida e bebida",
+      }
+    },
+    {
+      name: "activity",
+      icon_class: "fa fa-fw fa-futbol-o",
+      caption: {
+        en: "Activity",
+        es: "Actividad",
+        pt: "Atividade",
+      }
+    },
+    {
+      name: "travel",
+      icon_class: "fa fa-fw fa-plane",
+      caption: {
+        en: "Travel & Places",
+        es: "Viajes y lugares",
+        pt: "Viagens e lugares",
+      }
+    },
+    {
+      name: "objects",
+      icon_class: "fa fa-fw fa-wrench",
+      caption: {
+        en: "Objects",
+        es: "Objetos",
+        pt: "Objetos",
+      }
+    },
+    {
+      name: "symbols",
+      icon_class: "fa fa-fw fa-hashtag",
+      caption: {
+        en: "Symbols",
+        es: "Símbolos",
+        pt: "Símbolos",
+      }
+    },
+    {
+      name: "flags",
+      icon_class: "fa fa-fw fa-flag-o",
+      caption: {
+        en: "Flags",
+        es: "Banderas",
+        pt: "Bandeiras",
+      }
+    }
+  ]
+
+  window._searchEmojiPlaceholder = {
+    en: 'Search emoji',
+    es: 'Buscar emoticón',
+    pt: 'Pesquisar emoji',
+  }
+
+  function compareEmojis(a, b) {
+    return a.order < b.order ? -1 : (a.order == b.order ? 0 : 1);
+  }
+
+  function fromCategory(category, jsCriteria, emoji) {
+    return emoji.category === category.name && jsCriteria(emoji);
+  }
+
+  function filterEmojisBy(category, jsCriteria) {
+    return window.muEmojis.list.filter(fromCategory.bind(window.muEmojis, category, jsCriteria));
+  }
+
+  function alwaysTrue(_emoji) {
+    return true;
+  }
+
+  window.muEmojis.filterEmojisBy = filterEmojisBy;
+
+  window.muEmojis.categories = window.muEmojis._categories_.map(function (category, index) {
+    return {
+      name: category.name,
+      icon_class: category.icon_class,
+      order: index + 1,
+      caption: category.caption[currentLanguage()],
+      list: filterEmojisBy(category, alwaysTrue),
+    };
+  })
+
+  window.muEmojis.inputPlaceholder = window.muEmojis._inputPlaceholder_[currentLanguage()];
+  window.searchEmojiPlaceholder = window._searchEmojiPlaceholder[currentLanguage()];
+
+})(window);

data/app/assets/javascripts/mumuki-emojis.js

@@ -0,0 +1,509 @@
+function renderMumukiEmojis() {
+
+  var ESCAPE_KEY = 27;
+
+  var OPEN_CLASS = 'open';
+  var ACTIVE_CLASS = 'active';
+  var DISABLED_CLASS = 'disabled';
+
+  function noop() {}
+  function id(x) { return x }
+  function $class(clazz) { return '.' + clazz }
+
+  function $$(array) {
+    return $(array.join('\n'));
+  }
+
+  MuEmoji.DROPDOWN = 'mu-emoji-dropdown';
+
+  MuEmoji.DROPDOWN_MENU = MuEmoji.DROPDOWN + '-menu';
+
+  MuEmoji.DROPDOWN_TOGGLE = MuEmoji.DROPDOWN + '-toggle';
+
+  MuEmoji.DROPDOWN_MENU_ALIGNMENT = MuEmoji.DROPDOWN_MENU + '-alignment';
+  MuEmoji.DROPDOWN_MENU_ALIGNMENT_LEFT = MuEmoji.DROPDOWN_MENU_ALIGNMENT + '-left';
+  MuEmoji.DROPDOWN_MENU_ALIGNMENT_RIGHT = MuEmoji.DROPDOWN_MENU_ALIGNMENT + '-right';
+  MuEmoji.DROPDOWN_MENU_ALIGNMENT_CENTER = MuEmoji.DROPDOWN_MENU_ALIGNMENT + '-center';
+
+  MuEmoji.DROPDOWN_MENU_TABS = MuEmoji.DROPDOWN_MENU + '-tabs';
+  MuEmoji.DROPDOWN_MENU_TAB = MuEmoji.DROPDOWN_MENU_TABS + '-item';
+
+  MuEmoji.DROPDOWN_MENU_SEARCH = MuEmoji.DROPDOWN_MENU + '-search';
+  MuEmoji.DROPDOWN_MENU_SEARCH_ICON = MuEmoji.DROPDOWN_MENU_SEARCH + '-icon';
+  MuEmoji.DROPDOWN_MENU_SEARCH_INPUT = MuEmoji.DROPDOWN_MENU_SEARCH + '-input';
+
+  MuEmoji.DROPDOWN_MENU_EMOJIS = MuEmoji.DROPDOWN_MENU + '-emojis';
+  MuEmoji.DROPDOWN_MENU_EMOJIS_CATEGORIES = MuEmoji.DROPDOWN_MENU_EMOJIS + '-categories';
+  MuEmoji.DROPDOWN_MENU_EMOJIS_CATEGORY = MuEmoji.DROPDOWN_MENU_EMOJIS_CATEGORIES + '-item';
+
+  MuEmoji.DROPDOWN_MENU_EMOJI = MuEmoji.DROPDOWN_MENU_EMOJIS + '-item';
+
+  MuEmoji.DROPDOWN_MENU_FOOTER = 'mu-emojis-footer';
+
+  function hideAllDropdownMenues() {
+    $($class(MuEmoji.DROPDOWN_MENU)).removeClass(OPEN_CLASS);
+  }
+
+  $(document).keydown(function (e) {
+    if (e.keyCode === ESCAPE_KEY) hideAllDropdownMenues();
+  });
+
+  $(document).click(function (e) {
+    var clazz = $class(MuEmoji.DROPDOWN_MENU);
+    if (!$(e.target).is(clazz + ', ' + clazz + ' *')) hideAllDropdownMenues();
+  });
+
+  function MuEmoji($element, index) {
+    this.$element = $element;
+    this.index = index;
+  }
+
+  MuEmoji.prototype = {
+
+    create: function () {
+      this.$element.empty();
+      this.createDropdownToggle();
+      this.createDropdownMenu();
+    },
+
+    createDropdownToggle: function () {
+      this.toggle = new MuEmojiDropdownToggle(this);
+      this.$element.append(this.toggle.create());
+    },
+
+    createDropdownMenu: function () {
+      this.menu = new MuEmojiDropdownMenu(this);
+      this.$element.append(this.menu.create());
+    },
+
+    dropdownToggleIconClass: function () {
+      return this.$element.data('icon-class') || 'fa fa-fw fa-smile-o';
+    },
+
+    dropdownMenuAlignmentClass: function () {
+      switch (this.$element.data('dropdown-alignment')) {
+        case 'right': return MuEmoji.DROPDOWN_MENU_ALIGNMENT_RIGHT;
+        case 'center': return MuEmoji.DROPDOWN_MENU_ALIGNMENT_CENTER;
+        default: return MuEmoji.DROPDOWN_MENU_ALIGNMENT_LEFT;
+      }
+    },
+
+    openDropdown: function () {
+      this.menu.open();
+    },
+
+    closeDropdown: function () {
+      this.menu.close();
+    },
+
+    toggleDropdown: function (event) {
+      this.menu.toggleDropdown(event);
+    },
+
+    clickedOnEmoji: function (emoji) {
+      eval(this.$element.data('on-emoji-click'))(emoji);
+      this.closeDropdown();
+    },
+
+  }
+
+
+
+  function MuEmojiDropdownToggle(parent) {
+    this.parent = parent;
+  }
+
+  MuEmojiDropdownToggle.prototype = {
+
+    create: function () {
+      return this.$element = $('<a>', {
+        class: MuEmoji.DROPDOWN_TOGGLE,
+        html: this.icon(),
+        click: this.parent.toggleDropdown.bind(this.parent)
+      });
+    },
+
+    icon: function () {
+      return $('<i>', {
+        class: this.parent.dropdownToggleIconClass()
+      });
+    }
+
+  }
+
+
+
+  function MuEmojiDropdownMenu(parent) {
+    this.parent = parent;
+    this.categories = JSON.parse(JSON.stringify(window.window.muEmojis.categories));
+  }
+
+  MuEmojiDropdownMenu.prototype = {
+
+    create: function () {
+      this.$element = $('<div>', {
+        class: [MuEmoji.DROPDOWN_MENU, this.alignmentClass()].join(' '),
+      });
+      this.createTabs();
+      this.createSearch();
+      this.createEmojis();
+      this.createFooter();
+      return this.$element;
+    },
+
+    alignmentClass: function () {
+      return this.parent.dropdownMenuAlignmentClass();
+    },
+
+    createTabs: function () {
+      this.tabs = new MuEmojiDropdownMenuTabs(this);
+      this.$element.append(this.tabs.create());
+    },
+
+    createSearch: function () {
+      this.search = new MuEmojiDropdownMenuSearch(this);
+      this.$element.append(this.search.create());
+    },
+
+    createEmojis: function () {
+      this.emojis = new MuEmojiDropdownMenuEmojis(this);
+      this.$element.append(this.emojis.create());
+    },
+
+    createFooter: function () {
+      this.footer = new MuEmojiDropdownMenuFooter(this);
+      this.$element.append(this.footer.create());
+    },
+
+    open: function () {
+      this.$element.addClass(OPEN_CLASS);
+      this.search.$input.focus();
+    },
+
+    isOpen: function () {
+      return this.$element.hasClass(OPEN_CLASS);
+    },
+
+    close: function () {
+      this.$element.removeClass(OPEN_CLASS);
+    },
+
+    isClosed: function () {
+      return !this.isOpen();
+    },
+
+    toggleDropdown: function (event) {
+      hideAllDropdownMenues();
+      if (this.isClosed()) {
+        this.open();
+        event.stopPropagation();
+      }
+    },
+
+    clickedOnEmoji: function (emoji) {
+      this.parent.clickedOnEmoji(emoji);
+    },
+
+    scrollToCategory(category) {
+      this.emojis.scrollToCategory(category);
+    },
+
+    updateEmojis: function () {
+      this.emojis.createEmojis();
+    },
+
+    updateActiveTabs: function () {
+      this.tabs.updateActiveTabs();
+    }
+  }
+
+
+  function MuEmojiDropdownMenuTabs(parent) {
+    this.parent = parent;
+    this.tabs = [];
+  }
+
+  MuEmojiDropdownMenuTabs.prototype = {
+
+    create: function () {
+      this.$element = $('<ul>', {
+        class: MuEmoji.DROPDOWN_MENU_TABS
+      });
+      this.createCategories();
+      return this.$element;
+    },
+
+    createCategories: function () {
+      var self = this;
+      this.parent.categories.forEach(function (category, index) {
+        var tab = new MuEmojiDropdownMenuTab(self, category, index);
+        self.tabs.push(tab);
+        self.$element.append(tab.create());
+      });
+    },
+
+    clickedOnTab: function (clickedTab) {
+      this.tabs.forEach(function (tab) {
+        tab.deactivate();
+      });
+      this.parent.scrollToCategory(clickedTab.category);
+    },
+
+    updateActiveTabs: function () {
+      var self = this;
+      self.tabs.forEach(function (tab, i) {
+        self.parent.categories[i].list.length === 0 ?
+          tab.disable() : tab.enable();
+      });
+      var tab = self.tabs.find(function (tab) { return tab.isEnable() });
+      self.tabs.forEach(function (tab) {
+        tab.deactivate();
+      });
+      tab && tab.activate();
+    },
+
+  }
+
+
+  function MuEmojiDropdownMenuTab(parent, category, index) {
+    this.parent = parent;
+    this.category = category;
+    this.index = index;
+  }
+
+  MuEmojiDropdownMenuTab.prototype = {
+
+    create: function () {
+      var self = this
+      return self.$element = $('<li>', {
+        class: [MuEmoji.DROPDOWN_MENU_TAB, self.index === 0 && 'active'].filter(id).join(' '),
+        title: self.category.description,
+        html: self.icon(),
+        click: function (event) {
+          self.parent.clickedOnTab(self);
+          self.activate();
+          event.stopPropagation();
+        }
+      });
+    },
+
+    icon: function () {
+      return $('<i>', {
+        class: this.category.icon_class
+      });
+    },
+
+    deactivate: function () {
+      this.$element.removeClass(ACTIVE_CLASS);
+    },
+
+    activate: function () {
+      this.$element.addClass(ACTIVE_CLASS);
+    },
+
+    enable: function () {
+      this.$element.removeClass(DISABLED_CLASS);
+    },
+
+    isEnable: function () {
+      return !this.$element.hasClass(DISABLED_CLASS);
+    },
+
+    disable: function () {
+      this.$element.addClass(DISABLED_CLASS);
+    }
+
+  }
+
+
+  function MuEmojiDropdownMenuSearch(parent) {
+    this.parent = parent;
+    this.searchTimeout = setTimeout(noop);
+  }
+
+  MuEmojiDropdownMenuSearch.prototype = {
+
+    create: function () {
+      this.$element = $('<div>', {
+        class: MuEmoji.DROPDOWN_MENU_SEARCH
+      });
+      this.createIcon();
+      this.createInput();
+      return this.$element;
+    },
+
+    createIcon: function () {
+      this.$icon = $('<i>', {
+        class: [MuEmoji.DROPDOWN_MENU_SEARCH_ICON, 'fa fa-fw fa-search'].join(' '),
+      });
+      this.$element.append(this.$icon);
+    },
+
+    createInput: function () {
+      var self = this;
+      this.$input = $('<input>', {
+        class: MuEmoji.DROPDOWN_MENU_SEARCH_INPUT,
+        placeholder: window.searchEmojiPlaceholder,
+        keyup: function (event) {
+          self.search();
+        }
+      });
+      this.$element.append(this.$input);
+    },
+
+    search: function () {
+      var self = this;
+      clearTimeout(this.searchTimeout);
+      this.searchTimeout = setTimeout(function () {
+        self._doSearch(self.$input.val().trim());
+      }, 500);
+    },
+
+    _doSearch: function (query) {
+      this.parent.categories.forEach(function (category) {
+        category.list = window.muEmojis.filterEmojisBy(category, function (emoji) {
+          return !query ? true :
+            [emoji.name, emoji.shortname].concat(emoji.shortname_alternates).concat(emoji.keywords).some(function (s) {
+              return s && s.toLowerCase().indexOf(query.toLowerCase()) >= 0;
+            });
+        });
+      });
+      this.parent.updateEmojis();
+    },
+
+  }
+
+
+  function MuEmojiDropdownMenuEmojis(parent) {
+    this.parent = parent;
+    this.categories = [];
+  }
+
+  MuEmojiDropdownMenuEmojis.prototype = {
+
+    create: function () {
+      this.$element = $('<ul>', {
+        class: MuEmoji.DROPDOWN_MENU_EMOJIS
+      });
+      this.createEmojis();
+      return this.$element;
+    },
+
+    createEmojis: function () {
+      var self = this
+      self.$element.empty();
+      self.categories = [];
+      self.parent.updateActiveTabs();
+      this.parent.categories.forEach(function (cat) {
+        if (cat.list.length === 0) return;
+        var category = new MuEmojiDropdownMenuEmojisCategory(self, cat);
+        self.categories.push(category);
+        self.$element.append(category.create());
+      });
+    },
+
+    scrollToCategory(category) {
+      var firstCategory = this.categories[0];
+      var categoryToScroll = this.categories.find(function (cat) {
+        return cat.category.name === category.name;
+      });
+      var scrollTop = categoryToScroll.$element.position().top - firstCategory.$element.position().top;
+      this.$element.scrollTop(scrollTop);
+    },
+
+    clickedOnEmoji: function (emoji) {
+      this.parent.clickedOnEmoji(emoji)
+    },
+
+  }
+
+
+  function MuEmojiDropdownMenuEmojisCategory(parent, category) {
+    this.parent = parent;
+    this.category = category;
+  }
+
+  MuEmojiDropdownMenuEmojisCategory.prototype = {
+
+    create: function () {
+      this.$element = $('<li>', {
+        class: MuEmoji.DROPDOWN_MENU_EMOJIS_CATEGORIES,
+      });
+      this.createTitle();
+      this.createEmojis();
+      return this.$element;
+    },
+
+    createTitle: function () {
+      this.$title = $('<h4>', {
+        text: this.category.caption
+      });
+      this.$element.append(this.$title);
+    },
+
+    createEmojis: function () {
+      this.$emojis = $('<ul>', {
+        class: MuEmoji.DROPDOWN_MENU_EMOJIS_CATEGORY
+      });
+      this.populate();
+      this.$element.append(this.$emojis);
+    },
+
+    populate: function () {
+      var self = this
+      self.category.list.forEach(function (emoji) {
+        if (emoji.diversity) return;
+        var $emoji = $('<li>', {
+          class: MuEmoji.DROPDOWN_MENU_EMOJI,
+          html: self.icon(emoji.category, emoji),
+          click: function () {
+            self.parent.clickedOnEmoji(emoji);
+          }
+        });
+        self.$emojis.append($emoji);
+      });
+    },
+
+    icon: function (categoryName, emoji) {
+      return $('<i>', {
+        class: ['mu-emoji', 'px24', categoryName,  '_' + emoji.code_points.base].join(' '),
+        title: emoji.name,
+        data: {
+          code: emoji.shortname
+        }
+      });
+    },
+
+  }
+
+
+  function MuEmojiDropdownMenuFooter(parent) {
+    this.parent = parent;
+  }
+
+  MuEmojiDropdownMenuFooter.prototype = {
+
+    create: function () {
+      this.$element = $('<div>', {
+        class: MuEmoji.DROPDOWN_MENU_FOOTER,
+      });
+      return this.$element;
+    },
+
+  }
+
+
+
+  $.fn.renderEmojis = function () {
+    var self = this;
+    self.each(function (i) {
+      var $element = $(self[i]);
+      $element.empty();
+      new MuEmoji($element, i).create();
+    });
+    return self;
+  }
+
+  $($class(MuEmoji.DROPDOWN)).renderEmojis();
+
+}