create MetacodeSelect component
This commit is contained in:
Connor Turland
parent
61e27a4dcb
commit
5d04d16590
13 changed files with 424 additions and 30 deletions
|
|
@ -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');
|
||||
//$('img.cloudcarousel').css({"background":"none", "width":"","height":""});
|
||||
//$(items[this.frontIndex].image).css({"width":"45px","height":"45px"});
|
||||
Metamaps.Create.newTopic.setMetacode($(items[this.frontIndex].image).attr('data-id'))
|
||||
// NOT METAMAPS CODE
|
||||
$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
|
||||
$(options.altBox).html( $(items[this.frontIndex].image).attr('alt'));
|
||||
//$(options.titleBox).html( $(items[this.frontIndex].image).attr('title'));
|
||||
//$(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();
|
||||
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
72
app/assets/stylesheets/metacode-select.scss.erb
Normal file
72
app/assets/stylesheets/metacode-select.scss.erb
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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}" : '')
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
168
frontend/src/components/MetacodeSelect.js
Normal file
168
frontend/src/components/MetacodeSelect.js
Normal file
|
|
@ -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
|
||||
|
||||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue