metamaps--metamaps/views/layouts/_templates.js

<div className="templates">
  <script type="text/template" id="mapInfoBoxTemplate">
    <div className="requestTitle">Click here to name this map</div>
    <div className="mapInfoName" id="mapInfoName">{{{name}}}</div>

    <div className="mapInfoStat">
      <div className="infoStatIcon mapContributors hoverForTip">
        <img id="mapContribs" className="{{contributors_className}}"
          width="25" height="25" src="{{contributor_image}}" />
        <span className="count">{{contributor_count}}</span>
        <div className="tip">{{{contributor_list}}}</div>
      </div>
      <div className="infoStatIcon mapTopics">
        {{topic_count}}
      </div>
      <div className="infoStatIcon mapSynapses">
        {{synapse_count}}
      </div>
      <div className="infoStatIcon mapPermission {{permission}} hoverForTip">
        {{{map_creator_tip}}}
      </div>
      <div className="clearfloat"></div>
    </div>
    <div className="mapInfoDesc" id="mapInfoDesc">
      {{{desc}}}
    </div>

    <div className="mapInfoMeta">
      <p className="mapCreatedAt"><span>Created by:</span> {{user_name}} on {{created_at}}</p>
      <p className="mapEditedAt"><span>Last edited:</span> {{updated_at}}</p>
      <div className="mapInfoButtonsWrapper">
        <div className="mapInfoThumbnail">
          <div className="thumbnail"></div>
          <div className="tooltip">Update Thumbnail</div>
          <span>Thumb</span>
        </div>
        <div className="mapInfoDelete">
          <div className="deleteMap"></div>
          <span>Delete</span>
        </div>
        <div className="mapInfoShare">
          <div className="mapInfoShareIcon"></div>
          <span>Share</span>
        </div>
      </div>
    </div>
  </script>

  <script type="text/template" id="topicSearchTemplate">
    <div className="result{{rtype}}">
      <div className="topicMetacode searchResIconWrapper">
        <img src="{{typeImageURL}}" className="topicIcon" />
        <div className="metacodeTip">{{type}}</div>
      </div>
      <div className="resultText">
        <p className="resultTitle">{{label}}</p>
        <p className="resultDesc">{{description}}</p>
      </div>
      <div className="autoOptions">
        <button className="addToMap hoverForTip" onclick="return Metamaps.Topic.getTopicFromSearch(event, {{id}})">
          <span className="tip">add to map</span>
        </button>
        <div className="mapCount">
          {{mapCount}}
        </div>
        <div className="synapseCount">
          {{synapseCount}}
        </div>
        <div className="topicOriginatorIcon hoverForTip">
          <img width="18" height="18" src="{{originatorImage}}">
          <span className="tip topicOriginator">{{originator}}</span>
        </div>
        <div className="topicPermission {{permission}}">
        </div>
      </div>
      <div className="clearfloat"></div>
    </div>
  </script>

  <script type="text/template" id="mapSearchTemplate">
    <div className="result{{rtype}}">
      <div className="searchResIconWrapper">
        <img className="icon" src="/images/metamap36c.png">
      </div>
      <div className="resultText">
        <p className="resultTitle">{{label}}</p>
        <p className="resultDesc">{{description}}</p>
      </div>
      <div className="autoOptions">
        <div className="topicCount">
          {{topicCount}}
        </div>
        <div className="synapseCount">
          {{synapseCount}}
        </div>
        <div className="mapContributorsIcon hoverForTip">
          <img id="mapContribs" width="25" height="25" src="{{mapContributorImage}}" />
          <div className="tip">
            <ul>
              {{{contributorTip}}}
            </ul>
          </div>
          <span>{{contributorCount}}</span>
        </div>
        <div className="mapPermission {{permission}}">
        </div>
      </div>
      <div className="clearfloat"></div>
    </div>
  </script>

  <script type="text/template" id="mapperSearchTemplate">
    <div className="result{{rtype}}">
      <div className="searchResIconWrapper">
        <img className="icon" width="32" height="32" src="{{profile}}">
      </div>
      <div className="resultText">
        <p className="resultTitle">{{label}}</p>
      </div>
      <div className="autoOptions">
        <div className="mapperCreated">
          <p>Mapping since: {{created_at}}</p>
        </div>
        <div className="mapperGeneration">
          <p>Generation: {{generation}}</p>
        </div>
        <div className="mapCount">
          {{mapCount}}
        </div>
      </div>
      <div className="clearfloat"></div>
    </div>
  </script>

  <script type="text/template" id="collaboratorSearchTemplate">
    <div className="collabResult">
      <div className="collabIconWrapper">
        <img className="icon" width="25" height="25" src="{{profile}}">
      </div>
      <div className="collabNameWrapper">
        <p className="collabName">{{label}}</p>
      </div>
      <div className="clearfloat"></div>
    </div>
  </script>

  <script type="text/template" id="synapseAutocompleteTemplate">
    <div className="result{{rtype}}">
      <p className="autocompleteSection synapseDesc">{{label}}</p>
      <div className="synapseMetadata">
        <div className="synapseOriginatorIcon hoverForTip">
          <img width="24" height="24" src="{{originatorImage}}" />
          <span className="tooltips synapseOriginator">{{originator}}</span>
        </div>
        <div className="synapsePermission {{permission}}"></div>
      </div>
      <div className="clearfloat"></div>
    </div>
  </script>

  <script type="text/template" id="topicAutocompleteTemplate">
    <div>
      <img className="autocompleteSection topicType" width="24" height="24"
        src="{{typeImageURL}}" alt="{{type}}" title="{{type}}" />
      <p className="autocompleteSection topicTitle">{{label}}</p>
      <div className="expandTopicMetadata"></div>
      <div className="topicMetadata">
        <div className="topicNumMaps">{{mapCount}}</div>
        <div className="topicNumSynapses">{{synapseCount}}</div>
        <div className="topicOriginatorIcon hoverForTip">
          <img width="24" height="24" src="{{originatorImage}}" />
          <span className="tooltips topicOriginator">{{originator}}</span>
        </div>
        <div className="topicPermission {{permission}}"></div>
      </div>
      <div className="clearfloat"></div>
    </div>
  </script>
</div>