create MetacodeSelect component

app/assets/javascripts/lib/cloudcarousel.js

@@ -164,10 +164,12 @@ jQuery.browser = browser;
 		// Add code that makes tab and shift+tab scroll through metacodes
 		$('.new_topic').bind('keydown',this,function(event){
             if (event.keyCode == 9 && event.shiftKey) {
+        $(container).show()
 				event.data.rotate(-1);
                 event.preventDefault();
                 event.stopPropagation();
 			} else if (event.keyCode == 9) {
+				$(container).show()
 				event.data.rotate(1);
                 event.preventDefault();
                 event.stopPropagation();
@@ -178,12 +180,12 @@ jQuery.browser = browser;
 		if (options.mouseWheel)
 		{
 			// START METAMAPS CODE
-			$('body').bind('mousewheel',this,function(event, delta) {					 
+			/*$('body').bind('mousewheel',this,function(event, delta) {					 
 					 if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.isSwitchingSet) {
 					 	event.data.rotate(delta);
 					 	return false;
 					 }
-				 });
+				 });*/
 			// END METAMAPS CODE
 			/* ORIGINAL CODE
 			$(container).bind('mousewheel',this,function(event, delta) {					 
@@ -246,12 +248,10 @@ jQuery.browser = browser;
 		{	
 			if ( items[this.frontIndex] === undefined ) { return; }	// Images might not have loaded yet.
             // METAMAPS CODE
-			Metamaps.Create.newTopic.metacode = $(items[this.frontIndex].image).attr('data-id');
+			Metamaps.Create.newTopic.setMetacode($(items[this.frontIndex].image).attr('data-id'))
-        //$('img.cloudcarousel').css({"background":"none", "width":"","height":""});
-        //$(items[this.frontIndex].image).css({"width":"45px","height":"45px"});
 			// NOT METAMAPS CODE
-			$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
+			//$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
-			$(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));				
+			//$(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));				
 		};
 						
 		this.go = function()
@@ -264,7 +264,10 @@ jQuery.browser = browser;
 		this.stop = function()
 		{
 			clearTimeout(this.controlTimer);
-			this.controlTimer = 0;				
+			this.controlTimer = 0;
+			// METAMAPS CODE
+			$(container).hide()
+			// END METAMAPS CODE
 		};
 		
 		
@@ -385,7 +388,7 @@ jQuery.browser = browser;
 			}
 			// If all images have valid widths and heights, we can stop checking.			
 			clearInterval(this.tt);
-			this.showFrontText();
+			// METAMAPS COMMENT this.showFrontText();
 			this.autoRotate();	
 			this.updateAll();
 			

app/assets/javascripts/src/Metamaps.Create.js

@@ -1,4 +1,4 @@
-/* global Metamaps, $ */
+/* global Metamaps, $, ReactDOM, React */
 
 /*
  * Metamaps.Create.js
@@ -22,6 +22,8 @@ Metamaps.Create = {
   newSelectedMetacodeNames: [],
   selectedMetacodes: [],
   newSelectedMetacodes: [],
+  recentMetacodes: [],
+  mostUsedMetacodes: [],
   init: function () {
     var self = Metamaps.Create
     self.newTopic.init()
@@ -82,7 +84,6 @@ Metamaps.Create = {
     }
     metacodeModels.sort()
 
-    $('#metacodeImg, #metacodeImgTitle').empty()
     $('#metacodeImg').removeData('cloudcarousel')
     var newMetacodes = ''
     metacodeModels.each(function (metacode) {
@@ -90,13 +91,11 @@ Metamaps.Create = {
     })
 
     $('#metacodeImg').empty().append(newMetacodes).CloudCarousel({
-      titleBox: $('#metacodeImgTitle'),
       yRadius: 40,
       xRadius: 190,
       xPos: 170,
       yPos: 40,
       speed: 0.3,
-      mouseWheel: true,
       bringToFront: true
     })
 
@@ -147,9 +146,23 @@ Metamaps.Create = {
   },
   newTopic: {
     init: function () {
-      $('#topic_name').keyup(function () {
+      var DOWN_ARROW = 40
+
+      $('#topic_name').keyup(function (e) {
         Metamaps.Create.newTopic.name = $(this).val()
+        if (e.which == DOWN_ARROW && !Metamaps.Create.newTopic.name.length) {
+          Metamaps.Create.newTopic.openSelector()
+        }
       })
+      
+      $('.selectedMetacode').click(function() {
+        if (Metamaps.Create.newTopic.metacodeSelectorOpen) {
+          Metamaps.Create.newTopic.hideSelector()
+          $('#topic_name').focus()
+        } else Metamaps.Create.newTopic.openSelector()
+      })
+      
+      Metamaps.Create.newTopic.initSelector()
 
       var topicBloodhound = new Bloodhound({
         datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
@@ -183,16 +196,15 @@ Metamaps.Create = {
       $('#topic_name').bind('typeahead:select', function (event, datum, dataset) {
         Metamaps.Topic.getTopicFromAutocomplete(datum.id)
       })
+      $('#topic_name').click(function() { Metamaps.Create.newTopic.hideSelector() })
 
       // initialize metacode spinner and then hide it
       $('#metacodeImg').CloudCarousel({
-        titleBox: $('#metacodeImgTitle'),
         yRadius: 40,
         xRadius: 190,
         xPos: 170,
         yPos: 40,
         speed: 0.3,
-        mouseWheel: true,
         bringToFront: true
       })
       $('.new_topic').hide()
@@ -200,10 +212,59 @@ Metamaps.Create = {
     name: null,
     newId: 1,
     beingCreated: false,
+    metacodeSelectorOpen: false,
     metacode: null,
     x: null,
     y: null,
     addSynapse: false,
+    initSelector: function () {
+      ReactDOM.render(
+        React.createElement(Metamaps.ReactComponents.MetacodeSelect, {
+          onClick: function (id) {
+            Metamaps.Create.newTopic.setMetacode(id)
+            Metamaps.Create.newTopic.hideSelector()
+            $('#topic_name').focus()
+          },
+          close: function () {
+            Metamaps.Create.newTopic.hideSelector()
+            $('#topic_name').focus()
+          },
+          metacodes: Metamaps.Metacodes.models,
+          recent: Metamaps.Create.recentMetacodes,
+          mostUsed: Metamaps.Create.mostUsedMetacodes
+        }),
+        document.getElementById('metacodeSelector')
+      )
+    },
+    openSelector: function () {
+      Metamaps.Create.newTopic.initSelector()
+      $('#metacodeSelector').show()
+      Metamaps.Create.newTopic.metacodeSelectorOpen = true
+      $('.metacodeFilterInput').focus()
+      $('.selectedMetacode').addClass('isBeingSelected')
+    },
+    hideSelector: function () {
+      ReactDOM.unmountComponentAtNode(document.getElementById('metacodeSelector'))
+      $('#metacodeSelector').hide()
+      Metamaps.Create.newTopic.metacodeSelectorOpen = false
+      $('.selectedMetacode').removeClass('isBeingSelected')
+    },
+    setMetacode: function (id) {
+      Metamaps.Create.newTopic.metacode = id
+      var metacode = Metamaps.Metacodes.get(id)
+      $('.selectedMetacode img').attr('src', metacode.get('icon'))
+      $('.selectedMetacode span').html(metacode.get('name'))
+      $.ajax({
+        type: 'POST',
+        dataType: 'json',
+        url: '/user/update_metacode_focus',
+        data: { value: id },
+        success: function (data) {},
+        error: function () {
+          console.log('failed to save metacode focus')
+        }
+      })
+    },
     open: function () {
       $('#new_topic').fadeIn('fast', function () {
         $('#topic_name').focus()
@@ -215,6 +276,7 @@ Metamaps.Create = {
       $('#new_topic').fadeOut('fast')
       $('#topic_name').typeahead('val', '')
       Metamaps.Create.newTopic.beingCreated = false
+      Metamaps.Create.newTopic.hideSelector()
     }
   },
   newSynapse: {

app/assets/javascripts/src/Metamaps.JIT.js

@@ -706,7 +706,7 @@ Metamaps.JIT = {
       Metamaps.GlobalUI.CreateMap.submit()
     }
     // this is to submit new topic creation
-    else if (Metamaps.Create.newTopic.beingCreated) {
+    else if (Metamaps.Create.newTopic.beingCreated && !Metamaps.Create.newTopic.metacodeSelectorOpen) {
       Metamaps.Topic.createTopicLocally()
     }
     // to submit new synapse creation 

app/assets/stylesheets/application.css.erb

@@ -523,18 +523,48 @@ button.button.btn-no:hover {
     left: -1000px;
     display: block;
     position: absolute;
-    width: 340px;
-    margin: -40px 0 0 -35px;
     z-index: 1;
 }
 
+.selectedMetacode {
+  float: left;
+  background: #FFF;
+  border-top-left-radius: 2px;
+  border-bottom-left-radius: 2px;
+  padding: 5px 10px 5px 6px;
+  vertical-align: top;
+  border-right: 1px solid #DDD;
+  cursor: pointer;
+}
+.selectedMetacode:hover, .selectedMetacode.isBeingSelected {
+  background: #EDEDED;
+}
+.selectedMetacode img {
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  vertical-align: middle;
+}
+.selectedMetacode span {
+  vertical-align: middle;
+}
+.selectedMetacode .downArrow {
+  display: inline-block;
+  vertical-align: middle;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 8px 6px 0 6px;
+  border-color: #777 transparent transparent transparent;
+  margin-left: 2px;
+  margin-top: 4px;
+}
+
 #new_topic .twitter-typeahead {
-    position: absolute !important;
-    top: 45px;
-    left: 41px;
     z-index: 9999;
     width: 256px;
     height: 34px;
+    float: left;
 }
 .new_topic #topic_name,
 .new_topic .tt-hint {
@@ -544,7 +574,8 @@ button.button.btn-no:hover {
     margin: 0;
     padding: 10px 6px;
     border: none;
-    border-radius: 2px;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
     outline: none;
     font-size: 14px;
     line-height: 14px;
@@ -555,7 +586,7 @@ button.button.btn-no:hover {
     color: #BDBDBD;
 }
 .openMetacodeSwitcher {
-    display: block;
+    display: none;
     height: 16px;
     width: 16px;
     background-image: url(<%= asset_data_uri('metacodesettings_sprite.png') %>);
@@ -569,8 +600,14 @@ button.button.btn-no:hover {
 }
 #metacodeImg {
     height: 120px;
+    width: 380px;
+    display: none;
+    position: absolute !important;
+    top: -30px;
+    z-index: -1;
 }
 #metacodeImgTitle {
+    display: none;
     float: left;
     width: 120px;
     text-align: center;

app/assets/stylesheets/metacode-select.scss.erb

@@ -0,0 +1,72 @@
+#metacodeSelector {
+  display: none;
+}
+
+.metacodeSelect {
+  border-top: 1px solid #DDD;
+  padding: 0;
+
+  .tabList {
+    float: left;
+    background: #FFF;
+    
+    div {
+      border-right: 1px solid #DDD;
+      border-bottom: 1px solid #DDD;
+    }
+    
+    div:last-child {
+      border-bottom: none;
+    }
+    
+    div.active {
+      border-right: none;
+      background: #EEE;
+      
+      .metacodeFilterInput {
+        background: #EEE;
+      }
+    }
+    
+    .metacodeFilterInput {
+      width: 100px;
+      outline: none;
+      border: 0;
+      padding: 8px;
+      font-size: 14px;
+      line-height: 14px;
+      color: #424242;
+      font-family: 'din-medium', helvetica, sans-serif;
+    }
+    
+    span {
+      padding: 8px;
+      display: block;
+    }
+  }
+  
+  .metacodeList {
+    float:left;
+    list-style: none;
+    background: #FFF;
+    min-height: 107px;
+    min-width: 100px;
+    
+    li {
+      padding: 8px;
+      cursor: pointer;
+      
+      &:hover, &.keySelect {
+        background: #EEE;
+      }
+    }
+
+    img {
+      width: 24px;
+      height: 24px;
+      display: inline-block;
+      vertical-align: middle;
+      padding-right: 6px;
+    }
+  }
+}

app/controllers/users_controller.rb

@@ -1,5 +1,5 @@
 class UsersController < ApplicationController
-  before_action :require_user, only: [:edit, :update, :updatemetacodes]
+  before_action :require_user, only: [:edit, :update, :updatemetacodes, :update_metacode_focus]
 
   respond_to :html, :json
 
@@ -91,6 +91,16 @@ class UsersController < ApplicationController
       format.json { render json: @user }
     end
   end
+  
+  # PUT /user/update_metacode_focus
+  def update_metacode_focus
+    @user = current_user
+    @user.settings.metacode_focus = params[:value]
+    @user.save
+    respond_to do |format|
+      format.json { render json: { success: "success" }}
+    end
+  end
 
   private
 

app/helpers/application_helper.rb

@@ -15,6 +15,10 @@ module ApplicationHelper
                  end
     @metacodes.sort! { |m1, m2| m2.name.downcase <=> m1.name.downcase }.rotate!(-1)
   end
+  
+  def user_metacode
+    current_user.settings.metacode_focus ? Metacode.find(current_user.settings.metacode_focus.to_i) || user_metacodes()[0]  : user_metacodes()[0]
+  end
 
   def determine_invite_link
     "#{request.base_url}/join" + (current_user ? "?code=#{current_user.code}" : '')

app/models/user.rb

@@ -63,6 +63,28 @@ class User < ActiveRecord::Base
     json['rtype'] = 'mapper'
     json
   end
+  
+  def recentMetacodes
+    array = []
+    self.topics.sort{|a,b| b.created_at <=> a.created_at }.each do |t|
+      if array.length < 5 and array.index(t.metacode_id) == nil
+        array.push(t.metacode_id)
+      end
+    end
+    array
+  end
+
+  def mostUsedMetacodes
+    self.topics.to_a.reduce({}) { |memo, topic| 
+      if memo[topic.metacode_id] == nil
+        memo[topic.metacode_id] = 1 
+      else 
+        memo[topic.metacode_id] = memo[topic.metacode_id] + 1
+      end
+      
+      memo
+    }.to_a.sort{ |a, b| b[1] <=> a[1] }.map{|i| i[0]}.slice(0, 5)
+  end
 
   # generate a random 8 letter/digit code that they can use to invite people
   def generate_code

app/models/user_preference.rb

@@ -1,5 +1,5 @@
 class UserPreference
-  attr_accessor :metacodes
+  attr_accessor :metacodes, :metacode_focus
 
   def initialize
     array = []
@@ -8,5 +8,6 @@ class UserPreference
       array.push(metacode.id.to_s) if metacode
     end
     @metacodes = array
+    @metacode_focus = array[0]
   end
 end

app/views/maps/_newtopic.html.erb

@@ -1,14 +1,20 @@
 <%= form_for Topic.new, url: topics_url, remote: true do |form| %>
   <div class="openMetacodeSwitcher openLightbox" data-open="switchMetacodes"></div>
   <div id="metacodeImg">
-    <% @metacodes = user_metacodes() %>
+    <% @metacodes = [user_metacode()].concat(user_metacodes()).uniq %>
     <% set = get_metacodeset() %>
     <% @metacodes.each do |metacode| %>
       <img class="cloudcarousel" width="40" height="40" src="<%= asset_path metacode.icon %>" alt="<%= metacode.name %>" title="<%= metacode.name %>" data-id="<%= metacode.id %>" />
     <% end %>
-  </div> 
+  </div>
+  <div class="selectedMetacode">
+    <img src="<%= asset_path user_metacode().icon %>" />
+    <span><%= user_metacode().name %></span>
+    <div class="downArrow"></div>
+  </div>
   <%= form.text_field :name, :maxlength => 140, :placeholder => "title..." %>
-  <div id="metacodeImgTitle"></div>
+  <div class="clearfloat"></div>
+  <div id="metacodeSelector"></div>
   <div class="clearfloat"></div>
 <script>
 <% @metacodes.each do |metacode| %>
@@ -19,5 +25,11 @@
     Metamaps.Create.newSelectedMetacodeNames.push("<%= metacode.name %>");
   <% end %>
 <% end %> 
+<% current_user.recentMetacodes.each do |id| %>
+    Metamaps.Create.recentMetacodes.push(<%= id %>);
+<% end %>
+<% current_user.mostUsedMetacodes.each do |id| %>
+    Metamaps.Create.mostUsedMetacodes.push(<%= id %>);
+<% end %>
 </script>
 <% end %>

config/routes.rb

@@ -61,5 +61,6 @@ Metamaps::Application.routes.draw do
 
   get 'users/:id/details', to: 'users#details', as: :details
   post 'user/updatemetacodes', to: 'users#updatemetacodes', as: :updatemetacodes
+  post 'user/update_metacode_focus', to: 'users#update_metacode_focus'
   resources :users, except: [:index, :destroy]
 end

frontend/src/components/MetacodeSelect.js

@@ -0,0 +1,168 @@
+/* global $ */
+
+import React, { Component, PropTypes } from 'react'
+
+const ENTER_KEY = 13
+const LEFT_ARROW = 37
+const UP_ARROW = 38
+const RIGHT_ARROW = 39
+const DOWN_ARROW = 40
+
+const Metacode = (props) => {
+  const { m, onClick, underCursor } = props
+  
+  return (
+    <li onClick={() => onClick(m.id) } className={ underCursor ? 'keySelect' : '' }>
+      <img src={ m.get('icon') } />
+      <span>{ m.get('name') }</span>
+    </li>
+  )
+}
+
+class MetacodeSelect extends Component {
+  
+  constructor (props) {
+    super(props)
+    this.state = {
+      filterText: '',
+      activeTab: 0,
+      selectingSection: true,
+      underCursor: 0
+    }
+  }
+  
+  componentDidMount() {
+    const self = this
+    setTimeout(function() {
+      $(document.body).on('keyup.metacodeSelect', self.handleKeyUp.bind(self))
+    }, 10)
+  }
+  
+  componentWillUnmount() {
+    $(document.body).off('.metacodeSelect')
+  }
+  
+  changeFilterText (e) {
+    this.setState({ filterText: e.target.value, underCursor: 0 })
+  }
+  
+  changeDisplay (activeTab) {
+    this.setState({ activeTab, underCursor: 0 })
+  }
+  
+  getSelectMetacodes () {
+    const { metacodes, recent, mostUsed } = this.props
+    const { filterText, activeTab } = this.state
+
+    let selectMetacodes = []
+    if (activeTab == 0) { // search
+      selectMetacodes = filterText.length > 1 ? metacodes.filter(m => {
+        return m.get('name').toLowerCase().search(filterText.toLowerCase()) > -1
+      }) : []
+    } else if (activeTab == 1) { // recent
+      selectMetacodes = recent.map(id => {
+        return metacodes.find(m => m.id == id)
+      })
+    } else if (activeTab == 2) { // mostUsed
+      selectMetacodes = mostUsed.map(id => {
+        return metacodes.find(m => m.id == id)
+      })
+    }
+    return selectMetacodes
+  }
+  
+  handleKeyUp (e) {
+    const { close } = this.props
+    const { activeTab, underCursor, selectingSection } = this.state
+    const selectMetacodes = this.getSelectMetacodes()
+    let nextIndex
+
+    switch (e.which) {
+      case ENTER_KEY:
+        if (selectMetacodes.length && !selectingSection) this.resetAndClick(selectMetacodes[underCursor].id)
+        break
+      case UP_ARROW:
+        if (selectingSection && activeTab == 0) {
+          close()
+          break
+        }
+        else if (selectingSection) {
+          nextIndex = activeTab - 1
+          this.changeDisplay(nextIndex)
+          break
+        }
+        nextIndex = underCursor == 0 ? selectMetacodes.length - 1 : underCursor - 1
+        this.setState({ underCursor: nextIndex })
+        break
+      case DOWN_ARROW:
+        if (selectingSection) {
+          nextIndex = activeTab == 2 ? 0 : activeTab + 1
+          this.changeDisplay(nextIndex)
+          break
+        }
+        nextIndex = underCursor == selectMetacodes.length - 1 ? 0 : underCursor + 1
+        this.setState({ underCursor: nextIndex })
+        break
+      case RIGHT_ARROW:
+        if (selectingSection) this.setState({ selectingSection: false })
+        break
+      case LEFT_ARROW:
+        if (!selectingSection) this.setState({ selectingSection: true })
+        break
+    }
+  }
+  
+  resetAndClick (id) {
+    const { onClick } = this.props
+    this.setState({ filterText: '', underCursor: 0 })
+    this.changeDisplay(0)
+    onClick(id)
+  }
+  
+  render () {
+    const { onClick, close, recent, mostUsed } = this.props
+    const { filterText, activeTab, underCursor, selectingSection } = this.state
+    const selectMetacodes = this.getSelectMetacodes()
+    return <div className='metacodeSelect'>
+      <div className='tabList'>
+        <div className={ activeTab == 0 ? 'active' : '' }
+             onClick={() => { this.changeDisplay(0) }}>
+          <input type='text'
+                 className='metacodeFilterInput'
+                 placeholder='Search...'
+                 ref='input'
+                 value={ filterText }
+                 onChange={ this.changeFilterText.bind(this) } />
+        </div>
+        <div className={ activeTab == 1 ? 'active' : '' }
+             onClick={() => { this.changeDisplay(1) }}>
+          <span>Recent</span>
+        </div>
+        <div className={ activeTab == 2 ? 'active' : '' }
+             onClick={() => { this.changeDisplay(2) }}>
+          <span>Most Used</span>
+        </div>
+      </div>
+      <ul className='metacodeList'>
+        { selectMetacodes.map((m, index) => {
+            return <Metacode underCursor={!selectingSection && underCursor == index} 
+                             key={m.id} 
+                             m={m} 
+                             onClick={this.resetAndClick.bind(this)} />
+          })}
+      </ul>
+      <div className='clearfloat'></div>
+    </div>
+  }
+}
+
+MetacodeSelect.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  close: PropTypes.func.isRequired,
+  metacodes: PropTypes.array.isRequired,
+  recent: PropTypes.array.isRequired,
+  mostUsed: PropTypes.array.isRequired
+}
+
+export default MetacodeSelect
+

frontend/src/index.js

@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'
 import Backbone from 'backbone'
 import _ from 'underscore'
 import Maps from './components/Maps.js'
+import MetacodeSelect from './components/MetacodeSelect.js'
 
 // this is optional really, if we import components directly React will be
 // in the bundle, so we won't need a global reference
@@ -14,5 +15,6 @@ window._ = _
 
 window.Metamaps = window.Metamaps || {}
 window.Metamaps.ReactComponents = {
-  Maps
+  Maps,
+  MetacodeSelect
 }