metamaps--metamaps/app/views/shared/_cheatsheet.html.erb

<%#
  # @file
  # The inner HTML of the cheatsheet
  #%>

<h3>HELP</h3>
 
<div id="cheatSheet">
<ul id="helpWrapper">
    <li><a href="#quickReference">QUICK REFERENCES</a></li>
    <li><a href="#tutorials">TUTORIALS</a></li>
    <li><a href="#moreResources">MORE RESOURCES</a></li>
</ul>
    
<div id="quickReference">
  <ul>
    <li><a href="#csTopicView">Topic View</a></li>
    <li><a href="#csCreatingTopics">Creating Topics</a></li>
    <li><a href="#csEditingTopics">Editing Topics</a></li>
    <li><a href="#csCreatingSynapses">Creating Synapses</a></li>
    <li><a href="#csEditingSynapses">Editing Synapses</a></li>
    <li><a href="#csNavigation">Navigation</a></li>
    <li><a href="#csSelection">Selection</a></li>
    <li><a href="#csSearch">Search</a></li>
  </ul>

  <div id="csTopicView">    
    <div class="csItem"><span class="csTitle">Alt + click on topic icon:</span> recenter topics around chosen topic</div>
    <div class="csItem"><span class="csTitle">Right-click + 'center this topic':</span> recenter topics around chosen topic</div> 
  </div>
  
  <div id="csCreatingTopics">    
    <div class="csItem"><span class="csTitle">Double-click on canvas:</span> Bring up the metacode spinner</div>
    <div class="csItem indented"><span class="csTitle">Scroll:</span> change metacode spinner selection</div>
    <div class="csItem indented"><span class="csTitle">Tab:</span> rotate spinner counter-clockwise</div>
    <div class="csItem indented"><span class="csTitle">Shift + tab:</span> rotate spinner clockwise</div>
    <div class="csItem indented"><span class="csTitle">Esc:</span> Hides auto-suggestion results</div>
    <div class="csItem indented"><span class="csTitle">Enter:</span> create a new topic</div>
    <div class="csItem indented"><span class="csTitle">Gear Icon:</span> open up metacode settings</div>
  </div>

  <div id="csEditingTopics">    
    <div class="csItem">
            <span class="csTitle">Open topic card:</span> double-click on topic icon
    </div>
    <div class="csItem indented">
            <span class="csTitle">Move topic card:</span> click + drag on topic card metacode
    </div>
    <div class="csItem indented">
            <span class="csTitle">Change/edit metacode:</span> mouse over metacode icon, then click on solid colored bar
    </div>
    <div class="csItem indented">
            <span class="csTitle">Edit topic title, description, link:</span> click on text in respective area
    </div>
    <div class="csItem indented">
        <span class="csTitle">Save topic title, description, link:</span> hit enter
    </div>
    <div class="csItem indented">
        <span class="csTitle">Change topic permission:</span> click on 'permission' icon (only for topic creator)
    </div>
    <div class="csItem indented">
        <span class="csTitle">Open topic view:</span> click on <img src="/assets/MMCCicon_pop-out_black.png" width="16" align="middle" /> icon within topic card bar
    </div>
    <div class="csItem indented">
        <span class="csTitle">Close topic card:</span> click on canvas
    </div>
    <div class="csItem">
        <span class="csTitle">Open context menu:</span> right-click on topic icon
    </div>
    <div class="csItem indented">*Hide/Remove/Delete topic within context menu</div>
  </div>

  <div id="csCreatingSynapses">    
    <div class="csItem"><span class="csTitle">Right-click & drag from one topic to another:</span> open create synapse prompt</div>
    <div class="csItem indented"><span class="csTitle">Enter:</span> Create synapse</div>
    <div class="csItem indented">*You do not have to add a description</div>
    <div class="csItem"><span class="csTitle">Right-click + drag from topic to open canvas:</span> create new topic with synapse</div>
    <div class="csItem indented"><span class="csTitle">Enter:</span> Create topic</div>
    <div class="csItem indented"><span class="csTitle">Enter:</span> Create synapse</div>
  </div>

  <div id="csEditingSynapses">    
    <div class="csItem"><span class="csTitle">Open synapse card:</span>double-click on synapse </div>
    <div class="csItem indented"><span class="csTitle">Edit synapse description:</span> click on current description text</div>
    <div class="csItem indented"><span class="csTitle">Save synapse description:</span> hit enter</div>
    <div class="csItem indented"><span class="csTitle">Edit directionality:</span> select appropriate arrow boxes</div>
    <div class="csItem indented"><span class="csTitle">Change synapse permission:</span> click on 'permission' icon (only for synapse creator)</div>
    <div class="csItem"><span class="csTitle">Right-click on synapse:</span> open context menu</div>
    <div class="csItem indented">*Hide/Remove/Delete synapse within context menu</div>
  </div>

  <div id="csNavigation">    
    <div class="csItem"><span class="csTitle">Click + drag:</span> move around canvas</div>
    <div class="csItem"><span class="csTitle">Scroll:</span> zoom in/out</div>
    <div class="csItem"><span class="csTitle">Refresh page:</span> center map</div>
  </div>

  <div id="csSelection">    
    <div class="csItem"><span class="csTitle">Click on topic icon:</span> select/deselect topic</div>
    <div class="csItem"><span class="csTitle">Click on synapse:</span> select/deselect synapse</div>
    <div class="csItem"><span class="csTitle">Shift + click:</span> select multiple topics / synapses</div>
    <div class="csItem"><span class="csTitle">Shift + click + drag on canvas:</span> make selection box, select multiple topics</div>
    <div class="csItem"><span class="csTitle">Click + drag on selected topic(s):</span> move all selected topics & synapses</div>
    <div class="csItem"><span class="csTitle">Right-click on selected topic(s):</span> open context menu</div>
    <div class="csItem indented">*Hide/Remove/Delete/Change permissions of multiple topics & synapses within context menu</div>
    <div class="csItem"><span class="csTitle">Click on background:</span> deselect all topics & synapses</div>
    <div class="csItem"><span class="csTitle">Esc:</span> deselect all topics & synapses</div>
  </div>

  <div id="csSearch">    
    <div class="csItem"><span class="csTitle">Ctrl + /:</span> open search prompt</div>
    <div class="csItem"><span class="csTitle">Esc:</span> close search prompt</div>  
    <div class="csItem"><span class="csTitle">Type into the search prompt:</span> search for topics, maps, & mappers</div>
    <div class="csItem"><span class="csTitle">Click on search result:</span> open in new tab</div>
    <% if controller_name == "maps" && action_name == "show" %>
    <div class="csItem"><span class="csTitle">Click "+" on a topic result:</span> add to current map</div>
    <% end %>
    <div class="csItem"><span class="csTitle">Search by metacode:</span> type "[name of metacode]:", then your search query. i.e. idea:create...</div>
    <div class="csItem"><span class="csTitle">Search for map:</span> type "map:", then your search query. i.e. map:exploring...</div>
    <div class="csItem"><span class="csTitle">Search for mapper:</span> type "mapper:", then your search query. i.e. mapper:Robert</div>
  </div>
</div>

<div id="tutorials">
    <iframe id="tutorialVideo" src="//player.vimeo.com/video/88334167" width="552" height="326" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <div class="tutorialItem active" id="gettingStarted">1. GETTING STARTED</div>
    <div class="tutorialItem" id="upYourSkillz">2. UP YOUR SKILLZ</div>
    <div class="tutorialItem" id="advancedMapping">3. ADVANCED MAPPING</div>
</div>


</div>