Skip to content

Instantly share code, notes, and snippets.

@sbellity
Created January 3, 2013 19:01
Show Gist options
  • Save sbellity/4446031 to your computer and use it in GitHub Desktop.
Save sbellity/4446031 to your computer and use it in GitHub Desktop.
Hull Default Widgets templates
{{#if isAchieved}}
<button class="btn btn-success">Checked</button>
{{else}}
<button class="btn {{#unless canAchieve}}disabled{{/unless}}" data-hull-action="achieve_button.achieve">CheckIn</button>
{{/if}}
<ul class='activities'>
{{#entries}}
<li class='entry {{verb}}'>
<div class="avatar">
{{#actor.image}}
<img src="{{url}}"/>
{{/actor.image}}
</div>
<div class='data'>
<i class='icon verb'></i>
<div class='summary'>
<span class='actor'>{{actor.displayName}}</span>
<span class='verb'>{{pretty this "verb"}}</span>
<span class='object'>{{pretty this "object"}}</span>
<span class='target'>{{pretty this "target"}}</span>
</div>
<div class='activity content_{{object.objectType}}'>
{{#object}}
<div class='object'>
{{#if format}}
<span class="image inset_shadow"><img src="{{imageUrl this format}}"/></span>
{{/if}}
<span class='name'> {{displayName}} </span>
</div>
{{/object}}
<div class="content">
{{#if content}}
{{content}}
{{else}}
{{object.displayName}}
{{/if}}
</div>
<div class='clear'></div>
</div>
<div class='meta'>
<img class='icon target' src="{{pretty this "target_icon"}}">
<span class='date'>{{fromNow published}}</span>
{{#target}}
<span class='target {{objectType}}'> <span class='text'>{{pretty ../this "target"}}</span> </span>
{{/target}}
</div>
</div>
<div class='clear'></div>
</li>
{{/entries}}
{{^entries}}
No activity
{{/entries}}
</ul>
{{#if attending}}
<a class="btn" data-hull-action="attend_button.rsvp" data-hull-response="declined">Not going anymore</a>
{{else}}
<a class="btn" data-hull-action="attend_button.rsvp" data-hull-response="attending">I'm going</a>
{{/if}}
<ul>
{{#people}}
<li>
<img src="{{picture.data.url}}" alt="">
{{#if invited}}
{{name}}
<b>Invited !</b>
{{else}}
<a class="btn" data-hull-action="attending_friends.invite" data-hull-facebook-id="{{uid}}">Invite</a>
{{name}}
{{/if}}
</li>
{{/people}}
</ul>
{{#if account}}
{{#collection}}
<strong>{{humanize displayName}}</strong>
<ul>
{{#items}}
<li>
<img src="{{imageUrl id}}"/> {{displayName}}
</li>
{{/items}}
{{^items}}
<li>
Empty Collection
</li>
{{/items}}
</ul>
{{/collection}}
{{else}}
Connect to view your collections.
{{/if}}
{{#if account}}
{{#collections}}
{{#if hasObject}}
<a class='btn btn-mini btn-on' data-hull-action='collection_box.remove' data-hull-collection-id='{{id}}' title="Remove {{../../obj.displayName}} from {{displayName}}" >
<i class="icon-remove"></i> remove from {{humanize displayName}}
</a>
{{else}}
<a class='btn btn-mini' data-hull-action='collection_box.add' data-hull-collection-id='{{id}}' title="Add {{../../obj.displayName}} to {{displayName}}" >
<i class="icon-th-list"></i> add to {{humanize displayName}}
</a>
{{/if}}
{{/collections}}
{{else}}
Connect to add to collections:
<div data-hull-widget="identity"></div>
{{/if}}
{{#if isCollected}}
<a class="btn btn-mini btn-on" data-hull-action="collection_toggle.toggle">Remove from {{collectionName}} !</a>
{{else}}
<a class="btn btn-mini" data-hull-action="collection_toggle.toggle">Add to {{collectionName}} !</a>
{{/if}}
{{#if account}}
{{#userCollections}}
<div data-hull-widget="collection" data-hull-collection-name="{{this}}"></div>
{{/userCollections}}
{{else}}
Connect to view your collections.
{{/if}}
{{#if account}}
<form class='comment_input'>
<textarea name='content'></textarea>
<a class='btn' data-hull-action="comment_box.submit">Send</a>
</form>
{{else}}
Connect to post :
<div data-hull-widget="identity"></div>
{{/if}}
{{#if commentable}}
<div class='input_box' data-hull-widget="comment_box" data-hull-id="{{id}}"></div>
{{/if}}
<ul class="comments ugc">
{{#each comments}}
<li>
<img src='{{actor.image.url}}' title='{{actor.displayName}}' id="actor-for-{{id}}" />
<p class='title'><a href='/users/{{actor.id}}'>{{actor.displayName}}</a>, {{fromNow published}}</p>
<p>{{content}}</p>
</li>
{{/each}}
</ul>
{{#if account}}
<div class='event'>
<img src="{{event.picture.data.url}}" alt="{{event.name}}">
<a href="https://facebook.com/{{event.id}}" target="event">{{event.name}}</a>
<div class="page-header">
<div class="row">
<div class="span1">
<img src="{{event.picture.data.url}}" alt="{{event.name}}">
</div>
<div class="span7">
<h1><a href="https://facebook.com/{{event.id}}" target="event">{{event.name}}</a></h1>
<strong>{{event.location}}</strong> {{fromNow event.start_time}} by {{event.owner.name}}
<p>{{event.description}}</p>
</div>
<div class="span4" data-hull-widget="attend_button" data-hull-id="{{id}}"></div>
</div>
</div>
<div class="row">
<div class="span6">
<h1>People attending ({{event.attending.data.length}})</h1>
<table class="table">
{{#each event.attending.data}}
<tr>
<th><img src="//graph.facebook.com/{{id}}/picture?type=square"/> {{name}}</th>
<td>{{rsvp_status}}</td>
</tr>
{{/each}}
</table>
</div>
<div class="span6">
<h1>Attending Friends</h1>
<div class="invite" data-hull-widget="attending_friends" data-hull-id="{{id}}"></div>
</div>
</div>
{{/if}}
<iframe
src='//www.facebook.com/plugins/like.php?{{{queryString}}}'
scrolling='no'
frameborder='0'
style='border:none; overflow:hidden; width:{{width}}px; height:{{height}}px;' allowTransparency='true'
></iframe>
{{#if account}}
{{#if provider}}<h4>Friends from {{humanize provider}}</h4>{{/if}}
<ul class="friends thumbnails">
{{#friends}}
<li><img src="{{picture}}"/> {{name}} </li>
{{/friends}}
</ul>
{{else}}
Please connect to see your friends
{{/if}}
{{#account}}
<div class='account'>
<img class='avatar' src="{{picture}}">
<span class="name">{{name}}</span>
<a href="#" data-hull-action="disconnect">Déconnexion</a>
</div>
{{/account}}
{{^account}}
<div class='connect'>
<a href="#" data-hull-action="connect" data-hull-provider="facebook">Facebook</a>
<a href="#" data-hull-action="connect" data-hull-provider="twitter">Twitter</a>
</div>
{{/account}}
<!-- The template to display files available for download -->
{{#files}}
<tr class="template-download fade">
{{#if error}}
<td></td>
<td class="name"><span>{{name}}</span></td>
<td class="size"><span>{{size}}</span></td>
<td class="error" colspan="2"><span class="label label-important">Error</span> {{error}}</td>
{{else}}
<td class="preview">
{{#if file.thumbnail_url}}
<a href="{{url}}" title="{{name}}" rel="gallery" download="{{name}}"><img src="{{thumbnail_url}}"></a>
{{/if}}
</td>
<td class="name">
<a href="{{url}}" title="{{name}}" rel="{{thumbnail_url}}'gallery'%}" download="{{name}}">{{name}}</a>
</td>
<td class="size"><span>{{file.size}}</span></td>
<td colspan="2"></td>
{{/if}}
<td class="delete">
<button class="btn btn-danger" data-type="{{delete_type}}" data-url="{{delete_url}}" {{#if delete_with_credentials}} data-xhr-fields='{"withCredentials":true}' {{/if}}>
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" name="delete" value="1">
</td>
</tr>
{{/files}}
{{#files}}
<tr class="template-upload fade">
<td class="preview"><span class="fade"></span></td>
<td class="name"><span>{{name}}</span></td>
<td class="size"><span>{{size}}</span></td>
{{#if error}}
<td class="error" colspan="2"><span class="label label-important">Error</span> {{error}}</td>
{{else}}
{{#if valid}}
<td>
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
</td>
<td class="start">
{{#if ../options.autoUpload}}
{{else}}
<button class="btn btn-primary">
<i class="icon-upload icon-white"></i>
<span>Start</span>
</button>
{{/if}}
</td>
{{else}}
<td colspan="2"></td>
{{/if}}
{{/if}}
<td class="cancel">
<button class="btn btn-warning">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel</span>
</button>
</td>
</tr>
{{/files}}
The Game is over... come back next year !
Nope, you didn't win... come back tomorrow !
<a class="btn" data-hull-action="instant_win.play">Play !</a>
Register to play
<div data-hull-widget="registration" data-hull-editable="true"></div>
{{#if registered}}
{{> instant_play}}
{{else}}
{{> instant_registration}}
{{/if}}
<h1>You Won !!</h1>
{{#badge}}
<h3>{{prize.name}}</h3>
<p>{{prize.description}}</p>
{{/badge}}
Loading, please wait...
{{#if account}}
{{#if obj.me.like}}
<a class='tip btn btn-like' data-hull-action='like_box.unlike' title="Unlike {{obj.displayName}}">
<i class="icon-remove"></i> Unlike
</a>
{{else}}
<a class='tip btn' data-hull-action='like_box.like' title="Like {{obj.displayName}}">
<i class="icon-heart"></i> Like
</a>
{{/if}}
{{else}}
Connect to like:
<div data-hull-widget="identity"></div>
{{/if}}
{{#if account}}
<ul>
{{#likes}}
<li>
{{name}}
<img src="{{imageUrl _id}}"/>
</li>
{{/likes}}
{{else}}
Connect to view likes
{{/if}}
<div class="header">{{> quiz_header}}</div>
<div class="contents"></div>
<div class="footer">
{{> quiz_footer}}
</div>
{{#resource}}
{{> quiz_resource}}
{{/resource}}
<span class='name'>{{name}}</span>
{{> quiz_description}}
{{#description}}<div class='description'>{{this}}</div>{{/description}}
<div class="stack">
{{#entries}}
{{> quiz_entry}}
{{/entries}}
</div>
<span class="quiz_timer"></span>
<span class="question_timer"></span>
{{> quiz_pagination}}
<div class='entry' id='entry_{{id}}' data-entry-id='{{id}}'>
<div class='question'>
<h2 class='title'>{{name}}</h2>
{{#picture}}
<div class="picture">{{#picture}}<div><img src="{{picture}}"></div>{{/picture}}</div>
{{/picture}}
{{#resource}}
{{> quiz_resource}}
{{/resource}}
{{> quiz_description}}
</div>
<ul class="answers">
{{#answers}}
<li class="btn answer" id="answer_{{id}}" data-hull-action="quiz.answer" data-hull-opts="{{id}}">{{> quiz_answer}}</li>
{{/answers}}
</ul>
</div>
{{#account}}
Bravo, c'est termin&eacute;. Cliquez ici pour enregistrer votre participation.
<div class='actions'><a class="btn primary" data-hull-action="quiz.submit">Enregistrer ma participation ! </a></div>
{{/account}}
{{^account}}
Bravo, vous avez termin&eacute; le quiz. Inscrivez vous pour enregistrer votre participation !
<div class='actions'><a class="btn primary" data-hull-action="quiz.submit">M'inscrire</a></div>
{{/account}}
<h1 class='title'>{{title}}</h1>
{{#resource}}
{{> quiz_resource}}
{{/resource}}
{{> quiz_description}}
{{#account}}
<p class='message'>{{> quiz_intro_message_logged_in}}</p>
<div class='actions'>
<a class="btn primary" data-hull-action="quiz.start" data-hull-opts='facebook'>Démarrer</a>
</div>
{{/account}}
{{^account}}
<p class='message'>{{> quiz_intro_message_logged_out}}</p>
<div class='actions'>
<a class="btn primary facebook" data-hull-action="quiz.start" data-hull-opts='facebook'>Participer avec Facebook</a>
<a class="btn primary twitter" data-hull-action="quiz.start" data-hull-opts='twitter'>Participer avec Twitter</a>
</div>
{{/account}}
Bonjour {{name}}, cliquez ici pour participer !
Bonjour, bienvenue cher inconnu... Connectez vous avec un des r&eacute;seaux suivants :
<div class='pagination'>
<div class='pages'>
<a class='btn prev' data-hull-action="quiz.prev">← Pr&eacute;c&eacute;dent</a>
<a class='current'><span class="current_idx"></span> / {{entries.length}}</a>
<a class='btn next' data-hull-action="quiz.next">Suivant →</a>
</div>
<div class='actions'>
<a class='btn finish' data-hull-action="quiz.finish">Terminer</a>
</div>
</div>
<div class='profile'>
Vous êtes : <span class='name'>{{name}}</span>
{{>quiz_description}}
{{#resource}}
{{> quiz_resource}}
{{/resource}}
</div>
{{#is_image}}
<div class="resource">
<div><img src="{{paths.medium}}" /></div>
</div>
{{/is_image}}
{{#is_video}}
<div class="videoplayer" id="videoplayer_{{id}}" data-hull-widget="video" data-hull-id='{{id}}'></div>
{{/is_video}}
<div class='shares'>
Partager
<a class='btn share facebook' data-hull-action="quiz.share" data-hull-provider='facebook'><i class='icon'></i> Facebook</a>
<a class='btn share twitter' data-hull-action="quiz.share" data-hull-provider='twitter'><i class='icon'></i> Twitter</a>
</div>
<p>F&eacute;licitations, vous avez r&eacute;pondu &agrave; toutes les questions... </p>
<p>et vous avez un super score de <strong>{{result.score}} points !</strong></p>
{{#result.profile}}
{{>quiz_profile}}
{{/result.profile}}
<p>&Agrave; bient&ocirc;t !</p>
<div class='actions'>
<a class="btn secondary" data-hull-action="quiz.reset">Revenir &agrave; l'intro</a>
</div>
<div class='registration'>
{{#if isComplete}}
{{>registration_complete}}
{{else}}
{{>registration_form}}
{{/if}}
</div>
<div class='complete'>
<div class="summary">
Thank you {{username}}, You are registered
</div>
{{#editable}}
<a href="#" class='btn' data-hull-action="registration.edit">Edit</a>
{{/editable}}
<a href="#" class='btn share facebook' data-hull-action="registration.share" data-hull-provider="facebook"><i class='icon'></i> Share</a>
</div>
<div class="field {{name}} {{#required}}required{{/required}} {{type}}">
<label for="{{name}}">{{label}}</label>
{{#ifEqual type "text"}}
<input
class="{{type}} h5-{{name}}"
type="{{type}}"
id="{{name}}"
name="{{name}}"
value="{{value}}"
{{#placeholder}}placeholder="{{placeholder}}"{{/placeholder}}
{{#pattern}}pattern="{{pattern}}"{{/pattern}}
{{#required}}required{{/required}}
data-h5-errorid="{{name}}_error"
/>
{{/ifEqual}}
{{#ifEqual type "checkbox"}}
<input
class="{{type}} h5-{{name}}"
type="{{type}}"
id="{{name}}"
name="{{name}}"
{{#ifEqual value "true"}}checked{{/ifEqual}}
placeholder="{{placeholder}}"
{{#required}}required{{/required}}
data-h5-errorid="{{name}}_error"
/>
{{/ifEqual}}
{{#ifEqual type "select"}}
<select
class='{{type}} h5-{{name}}'
type="{{type}}"
id="{{name}}"
name="{{name}}"
{{#required}}required{{/required}}
data-h5-errorid="{{name}}_error">
{{#options}}
<option
label="{{label}}"
value="{{value}}"
{{#ifEqual ../value value}}selected{{/ifEqual}}
/>
{{/options}}
</select>
{{/ifEqual}}
<div id="{{name}}_error" class='error' for="{{name}}">{{error}}</div>
</div>
<form>
{{>registration_header}}
{{#fields}}
{{>registration_field}}
{{/fields}}
<div class="field">
<a class='btn' data-hull-action="registration.submit">Valider</a>
</div>
</form>
<div class="summary">
Register !
</div>
{{#if account}}
<span class='rating my_rating' data-hull-settings='{ "score" : {{my_rating}} }'>
<select id="r" name="rating">
{{#ratings}}
<option value="{{text}}" {{#ifEqual ../my_rating score}}selected{{/ifEqual}}>{{score}}</option>
{{/ratings}}
</select>
</span>
<div class='review_input'>
<textarea name="content" placeholder="Add your review text">{{obj.me.review.content}}</textarea>
<a class="btn" data-hull-action="review_box.submit">Send</a>
</div>
{{else}}
Connect to rate:
<div data-hull-widget="identity"></div>
{{/if}}
<p class='review'>
{{obj.me.review.content}}
</p>
{{#if reviewable}}
<div class='input_box' data-hull-widget='review_box' data-hull-id="{{id}}"></div>
{{/if}}
<ul class="reviews ugc">
{{#each reviews}}
<li>
<img src='{{actor.image.url}}' />
<p class='title'><a href='/users/{{actor.id}}'>{{actor.displayName}}</a>, {{fromNow published}}</p>
<p><span class='label'>{{rating}}</span> {{content}}</p>
</li>
{{/each}}
</ul>
{{#account}}
{{#upload_policy}}
<form action="{{url}}" method="post" enctype="multipart/form-data" class="hull_upload">
{{#key_value params}}
<input type="hidden" name="{{key}}" value="{{value}}"/>
{{/key_value}}
<div class="dropzone well hidden-phone hidden-phone-tablet" height="100px;" width="100px;">Drop a file here</div>
<input type="hidden" name="Filename" value=""/>
<input type="hidden" name="Content-Type" value=""/>
<input type="hidden" name="name" value=""/>
<div class="fileupload-buttonbar row-fluid">
<div class='span12'>
{{#if ../../mutipleUpload}}
<!-- {{> upload_file_multiple}} -->
{{else}}
{{> upload_file_single}}
{{/if}}
</div>
</div>
<div class="fileupload-progress fade row-fluid">
<div class='span12'>
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="bar" style="width:0%;"></div>
</div>
<div class="progress-extended">&nbsp;</div>
</div>
</div>
<div class='error'></div>
<div class='filescontainer'></div>
</form>
{{/upload_policy}}
{{/account}}
<span class="btn btn-success fileinput-button"> <i class="icon-plus icon-white"></i> <span>Add files...</span> <input type="file" name="files[]" multiple=""> </span>
<button type="submit" data-hull-action="upload.start" class="btn btn-primary start"> <i class="icon-upload icon-white"></i> <span>Start upload</span> </button>
<button type="reset" data-hull-action="upload.cancel" class="btn btn-warning"> <i class="icon-ban-circle icon-white"></i> <span>Cancel upload</span> </button>
<button type="button" data-hull-action="upload.delete" class="btn btn-danger"> <i class="icon-trash icon-white"></i> <span>Delete</span> </button>
<input type="checkbox" class="toggle">
<span class="btn btn-success fileinput-button"> <i class="icon-plus icon-white"></i> <span>Add files...</span> <input type="file" name="file" accept="image/*" capture="camera"> </span>
<div class='resource video'>
<div class='wrapper'>
<div class='player'>
<div></div>
</div>
</div>
</div>
<div class='resource video'>
<div class='flowplayer minimalist {{classNames}}'>
<video src="{{stream.url}}" poster="{{data.image.url}}">
<source src="{{{stream.url}}}" type="video/{{stream.ext}}"/>
</video>
</div>
</div>
<li class='entry'>
<a href="#" data-hull-action="video_gallery.play", data-hull-id="{{id}}">
<img class='thumb' src="{{image}}" />{{title}}
</a>
</li>
{
"achieve_button": ["achieve_button"],
"activity": ["activity"],
"attend_button": ["attend_button"],
"attending_friends": ["attending_friends"],
"collection": ["collection"],
"collection_box": ["collection_box"],
"collection_toggle": ["collection_toggle"],
"collections": ["collections"],
"comment_box": ["comment_box"],
"comments": ["comments"],
"facebook_event": ["facebook_event"],
"facebook_like": ["facebook_like"],
"friends": ["friends"],
"identity": ["identity"],
"image_gallery": ["image_gallery"],
"inspector": ["inspector", "inspect_widgets", "inspect_widget", "inspect_templates", "inspect_template", "inspect_method"],
"instant_win": ["instant_win", "instant_registration", "instant_finished", "instant_lost", "instant_play", "instant_won", "instant_working"],
"like_box": ["like_box"],
"likes": ["likes"],
"quiz": ["quiz", "quiz_answer", "quiz_description", "quiz_entries", "quiz_entry", "quiz_footer", "quiz_header", "quiz_shares", "quiz_intro", "quiz_intro_message_logged_in", "quiz_intro_message_logged_out", "quiz_pagination", "quiz_resource", "quiz_submitted", "quiz_finished", "quiz_profile"],
"registration": ["registration", "registration_form", "registration_complete", "registration_field", "registration_header"],
"review_box": ["review_box", "review_content"],
"reviews": ["reviews"],
"upload": ["upload", "upload_file_single", "upload_file_multiple"],
"upload_image": ["upload", "image_upload_display", "image_download_display", "upload_image_gallery", "upload_file_single", "upload_file_multiple"],
"video": ["video"],
"video_flowplayer": ["video_flow"],
"video_gallery": ["video_gallery", "video_playlist_entry"],
"movies": ["movies_list", "movies_login", "movies_user", "movies_nav", "movies_movie", "movies_profile", "movies_activity", "movies_friends"]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment