Skip to content

Commit

Permalink
Initial Photo Card
Browse files Browse the repository at this point in the history
  • Loading branch information
ghochard42six committed Oct 2, 2014
1 parent 5f039de commit 8b3409f
Show file tree
Hide file tree
Showing 6 changed files with 280 additions and 8 deletions.
107 changes: 107 additions & 0 deletions app/assets/javascripts/deckster_photos.js.coffee.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
photo_docs = undefined
max_i = undefined
i = undefined
summary_image_tag_loader = undefined
summary_image_div_tag = undefined

get_thumb_url = () ->
photo_docs[i]['thumb_url']

get_next = () ->
i = 0 if i > max_i
summary_image_tag_loader.attr 'src', get_thumb_url()

success_get_next = () ->
i++
get_next()

error_get_next = () ->
photo_docs.splice i, 1
max_i--
get_next() unless max_i < 0

summary_init = (_photo_docs) ->
photo_docs = _photo_docs
max_i = _photo_docs.length - 1
i = 0

summary_image_div_tag = $('.this_photo')
summary_image_tag_loader = $('.deckster_photos_summary_photo_loader')

summary_image_tag_loader.load () ->
summary_image_div_tag.fadeOut 350, () =>
summary_image_div_tag.css 'background-image', 'url(' + get_thumb_url() + ')'
summary_image_div_tag.fadeIn 350
setTimeout success_get_next, 3000

summary_image_tag_loader.error () ->
error_get_next()

get_next() unless max_i < 0

detail_init = (_photo_docs) ->
card_height = $('#photos').height()
if(card_height != null && card_height >= 506)
$('.deckster_photos_scroll').css('height', card_height - 506)

$('.deckster_photos_preview > li > img').load () ->
$preview_img = $(this)
EXIF.getData $preview_img[0], () ->
$preview_img.siblings('.metadata').find('.data').find('.exif').append EXIF.pretty_html($preview_img[0])

$('.deckster_photos_preview > li > img').error () ->
$preview_img = $(this)
doc_id = $preview_img.parent('li').attr 'data-doc-id'
$(".deckster_photos_thumbnail[data-doc-id=#{doc_id}]").addClass 'full_image_error'

$('.deckster_photos_thumbnail > img').error () ->
$thumbnail_img = $(this)
$thumbnail_img.parent('li').addClass 'thumb_image_error'
$thumbnail_img.siblings('.thumbnail_cropped').css 'background-image', 'url(<%= image_path 'x.png' %>)'

$('.deckster_photos_thumbnail > img').load () ->
$thumbnail_img = $(this)
url = $thumbnail_img.attr 'src'
$thumbnail_img.siblings('.thumbnail_cropped').css 'background-image', 'url(' + url + ')'

$('.deckster_photos_thumbnail').click () ->
$thumbnail = $(this)
doc_id = $thumbnail.attr 'data-doc-id'

$('.deckster_photos_thumbnail').removeClass 'highlight'
$thumbnail.addClass 'highlight'

$(".deckster_photos_preview > li").fadeOut()
$(".deckster_photos_preview > li[data-doc-id=#{doc_id}]").fadeIn()

$(".deckster_photos_thumbnail:first").click()

preview_prev = () ->
prev = $(".deckster_photos_preview > li:visible").prev();
prev = $(".deckster_photos_preview > li:last") if prev.length == 0

doc_id = prev.attr 'data-doc-id'
$(".deckster_photos_thumbnail[data-doc-id=#{doc_id}]").click()

preview_next = () ->
next = $(".deckster_photos_preview > li:visible").next();
next = $(".deckster_photos_preview > li:first") if next.length == 0

doc_id = next.attr 'data-doc-id'
$(".deckster_photos_thumbnail[data-doc-id=#{doc_id}]").click()

window.deckster_photos =
summary_init: summary_init
detail_init: detail_init
preview_prev: preview_prev
preview_next: preview_next

$(document).on('ready', ()->
$('body').on('keydown', (event) ->
return unless $('.gallery').length > 0
switch event.which
when 37 then $('.control.previmg').click()
when 39 then $('.control.nextimg').click()
event.preventDefault()
)
)
16 changes: 8 additions & 8 deletions app/assets/stylesheets/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2750,17 +2750,17 @@ display: block;

/* Photo Card Summary */

.device_photos_summary {
.deckster_photos_summary {
display: block;
height: 120px;

.device_photos_preview {
.deckster_photos_preview {
float: left;
width: 50%;
height: 120px;
position: relative;

.device_photos_summary_photos {
.deckster_photos_summary_photos {
display: block;
position: absolute;
top: 50%;
Expand All @@ -2774,7 +2774,7 @@ display: block;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
box-shadow: 0 1px 3px rgba(0,0,0,0.6);

.device_photos_summary_photo {
.deckster_photos_summary_photo {
display: block;
height: 80px;
width: 105px;
Expand Down Expand Up @@ -2807,7 +2807,7 @@ display: block;
}
}

.device_photos_count {
.deckster_photos_count {
float: left;
width: 50%;
height: 120px;
Expand All @@ -2827,7 +2827,7 @@ display: block;
background: darken($secondary,10%);
margin: 0 0 20px 0;

.device_photos_preview {
.deckster_photos_preview {
position: relative;
z-index: 1;

Expand Down Expand Up @@ -3008,13 +3008,13 @@ display: block;

}

.content .detail .device_photos_scroll {
.content .detail .deckster_photos_scroll {
position: relative;
display: block;
overflow-y: auto;
}

.content .detail ol.device_photos_thumbs {
.content .detail ol.deckster_photos_thumbs {
text-align: left;

li {
Expand Down
1 change: 1 addition & 0 deletions app/helpers/dashboard_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ def render_dashboard
render_deckster_deck :dashboard, [
{card: :new_user, row: 1, col: 1, sizex: 1, sizey: 2},
{card: :user_count, row: 1, col: 2, sizex: 1, sizey: 2},
{card: :user_photos, title: 'Pretty Photos', row: 1, col: 3, sizex: 1, sizey: 2},
]
end
end
95 changes: 95 additions & 0 deletions app/helpers/deckster_samples_user_cards_helper.rb
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,99 @@ def render_user_count_summary_card
def render_user_count_detail_card
"Detail Information"
end

def render_user_photos_summary_card
render partial: "deckster/photos_summary", locals: {deckster_photo_docs: sample_deckster_photo_docs}
end

def render_user_photos_detail_card
render partial: "deckster/photos_detail", locals: {deckster_photo_docs: sample_deckster_photo_docs}
end

def sample_deckster_photo_docs
[
{id: 0, thumb_url: asset_url('sample_image.jpg'), full_url: asset_url('sample_image.jpg')},
{id: 1, thumb_url: 'http://farm8.staticflickr.com/7405/10558271375_c1f157a517.jpg', full_url: 'http://farm8.staticflickr.com/7405/10558271375_126b5a2bf1_o.jpg'},
{id: 2, thumb_url: 'http://farm4.staticflickr.com/3742/10557570444_15ee9144a6.jpg', full_url: 'http://farm4.staticflickr.com/3742/10557570444_4481bac4fb_o.jpg'},
{id: 3, thumb_url: 'http://farm6.staticflickr.com/5508/10560523296_e35ee9ec75.jpg', full_url: 'http://farm6.staticflickr.com/5508/10560523296_3c56b490bd_o.jpg'},
{id: 4, thumb_url: 'http://farm4.staticflickr.com/3759/10559782285_c3eafd3cd3.jpg', full_url: 'xxx'},
{id: 5, thumb_url: 'http://farm6.staticflickr.com/5547/10559586043_451041ceef.jpg', full_url: 'http://farm6.staticflickr.com/5547/10559586043_88cac0fe4b_o.jpg'},
{id: 6, thumb_url: 'http://farm4.staticflickr.com/3715/10559356816_bc0764f2fd.jpg', full_url: 'http://farm4.staticflickr.com/3715/10559356816_bd4dd66b7e_o.jpg'},
{id: 7, thumb_url: 'http://farm3.staticflickr.com/2830/10558524593_b8e7bf20aa.jpg', full_url: 'xxx'},
{id: 8, thumb_url: 'xxx', full_url: 'http://farm6.staticflickr.com/5522/10558118795_1f20d7741e_o.jpg'},
{id: 9, thumb_url: 'http://farm8.staticflickr.com/7325/10556840294_da30e742c3.jpg', full_url: 'http://farm8.staticflickr.com/7325/10556840294_69cb1c92fc_o.jpg'},
{id: 10, thumb_url: 'http://farm6.staticflickr.com/5476/10556753585_1293df91c1.jpg', full_url: 'http://farm6.staticflickr.com/5476/10556753585_94e6babf0d_o.jpg'},
{id: 11, thumb_url: 'http://farm4.staticflickr.com/3775/10556473075_18f360b8db.jpg', full_url: 'http://farm4.staticflickr.com/3775/10556473075_a832d6bdba_o.jpg'},
{id: 12, thumb_url: 'http://farm6.staticflickr.com/5549/10555587366_8ce3e4db51.jpg', full_url: 'http://farm6.staticflickr.com/5549/10555587366_14269181b3_o.jpg'},
{id: 13, thumb_url: 'xxx', full_url: 'xxx'},
{id: 14, thumb_url: 'xxx', full_url: 'xxx'},
{id: 15, thumb_url: 'http://farm6.staticflickr.com/5473/10555550385_23c6a24172.jpg', full_url: 'http://farm6.staticflickr.com/5473/10555550385_68f124fa48_o.jpg'},
{id: 16, thumb_url: 'http://farm8.staticflickr.com/7307/10555546304_8e9e8cabd6.jpg', full_url: 'http://farm8.staticflickr.com/7307/10555546304_96a5856722_o.jpg'},
{id: 17, thumb_url: 'http://farm4.staticflickr.com/3740/10555372715_e4a5b1555e.jpg', full_url: 'http://farm4.staticflickr.com/3740/10555372715_ab24ccc95d_o.jpg'},
{id: 18, thumb_url: 'xxx', full_url: 'xxx'},
{id: 19, thumb_url: 'http://farm4.staticflickr.com/3786/10855028996_460366e351.jpg', full_url: 'http://farm4.staticflickr.com/3786/10855028996_c7c2bcb403_o.jpg'},
{id: 20, thumb_url: 'http://farm3.staticflickr.com/2862/10860969585_1a83798eb8.jpg', full_url: 'http://farm3.staticflickr.com/2862/10860969585_5961bc718d_o.jpg'},
{id: 21, thumb_url: 'xxx', full_url: 'http://farm4.staticflickr.com/3720/10859329875_db62b38c5b_o.jpg'},
{id: 22, thumb_url: 'xxx', full_url: 'http://farm6.staticflickr.com/5490/10858473606_d0768ffea3_o.jpg'},
{id: 23, thumb_url: 'http://farm3.staticflickr.com/2820/10858470484_ae0b19953a.jpg', full_url: 'http://farm3.staticflickr.com/2820/10858470484_6f6f0d1877_o.jpg'},
{id: 24, thumb_url: 'http://farm6.staticflickr.com/5531/10858142493_9b83e0e6f8.jpg', full_url: 'http://farm6.staticflickr.com/5531/10858142493_8916f956a0_o.jpg'},
{id: 25, thumb_url: 'http://farm4.staticflickr.com/3681/10858088833_71b21fc4f3.jpg', full_url: 'http://farm4.staticflickr.com/3681/10858088833_bbc55db7b2_o.jpg'},
{id: 26, thumb_url: 'http://farm8.staticflickr.com/7421/10857996755_cc4e6366c0.jpg', full_url: 'http://farm8.staticflickr.com/7421/10857996755_25e10472ee_o.jpg'},
{id: 27, thumb_url: 'xxx', full_url: 'xxx'},
{id: 28, thumb_url: 'xxx', full_url: 'xxx'},
{id: 29, thumb_url: 'xxx', full_url: 'xxx'},
{id: 30, thumb_url: 'xxx', full_url: 'xxx'},
{id: 31, thumb_url: 'xxx', full_url: 'xxx'},
{id: 32, thumb_url: 'xxx', full_url: 'xxx'},
{id: 33, thumb_url: 'xxx', full_url: 'xxx'},
{id: 34, thumb_url: 'xxx', full_url: 'xxx'},
{id: 35, thumb_url: 'xxx', full_url: 'xxx'},
{id: 36, thumb_url: 'xxx', full_url: 'xxx'},
{id: 37, thumb_url: 'xxx', full_url: 'xxx'},
{id: 38, thumb_url: 'xxx', full_url: 'xxx'},
{id: 37, thumb_url: 'xxx', full_url: 'xxx'},
{id: 39, thumb_url: 'xxx', full_url: 'xxx'},
{id: 40, thumb_url: 'xxx', full_url: 'xxx'},
{id: 41, thumb_url: 'xxx', full_url: 'xxx'},
{id: 42, thumb_url: 'xxx', full_url: 'xxx'},
{id: 43, thumb_url: 'xxx', full_url: 'xxx'},
{id: 44, thumb_url: 'xxx', full_url: 'xxx'},
{id: 45, thumb_url: 'xxx', full_url: 'xxx'},
{id: 46, thumb_url: 'xxx', full_url: 'xxx'},
{id: 47, thumb_url: 'xxx', full_url: 'xxx'},
{id: 48, thumb_url: 'xxx', full_url: 'xxx'},
{id: 49, thumb_url: 'xxx', full_url: 'xxx'},
{id: 50, thumb_url: 'xxx', full_url: 'xxx'},
{id: 51, thumb_url: 'xxx', full_url: 'xxx'},
{id: 52, thumb_url: 'xxx', full_url: 'xxx'},
{id: 53, thumb_url: 'xxx', full_url: 'xxx'},
{id: 54, thumb_url: 'xxx', full_url: 'xxx'},
{id: 55, thumb_url: 'xxx', full_url: 'xxx'},
{id: 56, thumb_url: 'xxx', full_url: 'xxx'},
{id: 57, thumb_url: 'xxx', full_url: 'xxx'},
{id: 58, thumb_url: 'xxx', full_url: 'xxx'},
{id: 59, thumb_url: 'xxx', full_url: 'xxx'},
{id: 60, thumb_url: 'xxx', full_url: 'xxx'},
{id: 61, thumb_url: 'xxx', full_url: 'xxx'},
{id: 62, thumb_url: 'xxx', full_url: 'xxx'},
{id: 63, thumb_url: 'xxx', full_url: 'xxx'},
{id: 64, thumb_url: 'xxx', full_url: 'xxx'},
{id: 65, thumb_url: 'xxx', full_url: 'xxx'},
{id: 66, thumb_url: 'xxx', full_url: 'xxx'},
{id: 67, thumb_url: 'xxx', full_url: 'xxx'},
{id: 68, thumb_url: 'xxx', full_url: 'xxx'},
{id: 69, thumb_url: 'xxx', full_url: 'xxx'},

{id: 70, thumb_url: 'xxx', full_url: 'xxx'},
{id: 71, thumb_url: 'xxx', full_url: 'xxx'},
{id: 72, thumb_url: 'xxx', full_url: 'xxx'},
{id: 73, thumb_url: 'xxx', full_url: 'xxx'},
{id: 74, thumb_url: 'xxx', full_url: 'xxx'},
{id: 75, thumb_url: 'xxx', full_url: 'xxx'},
{id: 76, thumb_url: 'xxx', full_url: 'xxx'},
{id: 77, thumb_url: 'xxx', full_url: 'xxx'},
{id: 78, thumb_url: 'xxx', full_url: 'xxx'},
{id: 79, thumb_url: 'xxx', full_url: 'xxx'},
]
end
end
46 changes: 46 additions & 0 deletions app/views/deckster/_photos_detail.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<div class="gallery">
<a onclick="window.deckster_photos.preview_prev();" class="control previmg">PREV</a>
<ol class="deckster_photos_preview">
<% deckster_photo_docs.each do |doc| %>
<li data-doc-id="<%= doc[:id] %>" style="display: none;">
<img src="<%= doc[:full_url] %>" height="500" alt="preview not available" />
<div class="metadata">
<div class="data">

<div class="info">
id: <%= doc[:id] %><br/>
thumb_url: <%= doc[:thumb_url] %><br/>
full_url: <%= doc[:full_url] %>
</div>
<div class="exif"></div>

</div>
</div>
</li>
<% end %>
</ol>
<a onclick="window.deckster_photos.preview_next();" class="control nextimg">NEXT</a>
</div>

<div class="key">
<p><span class="full_image_error"></span> <span>No preview image available</span></p>
<p><span class="thumb_image_error"></span> <span>No thumbnail image available</span></p>
</div>
<div class="deckster_photos_scroll">
<ol class="deckster_photos_thumbs">
<% deckster_photo_docs.each do |doc| %>
<li class="deckster_photos_thumbnail" data-doc-id="<%= doc[:id] %>">
<img src='<%= doc[:thumb_url] %>' style="display: none;"/>
<div class="thumbnail_cropped" style="background-image:url(<%= image_path 'spinner.gif' %>);"></div>
</li>
<% end %>
</ol>
</div>

<script type="text/javascript">
$(document).ready(function () {
window.svg_icons.init();
$('[data-toggle="tooltip"]').tooltip();
window.deckster_photos.detail_init(<%= deckster_photo_docs.to_json.html_safe %>);
});
</script>
23 changes: 23 additions & 0 deletions app/views/deckster/_photos_summary.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<div class="deckster_photos_summary">
<div class="deckster_photos_preview">
<div class="deckster_photos_summary_photos rotate"></div>
<div class="deckster_photos_summary_photos">
<img class="deckster_photos_summary_photo_loader" style="display: none;"/>
<div class="deckster_photos_summary_photo" >
<div class="this_photo"></div>
</div>
</div>
</div>
<div class="deckster_photos_count">
<%= deckster_photo_docs.count %>
</div>
</div>

<script type="text/javascript">
$(document).ready(function () {
window.svg_icons.init();
$('[data-toggle="tooltip"]').tooltip();

window.deckster_photos.summary_init(<%= deckster_photo_docs.to_json.html_safe %>);
});
</script>

0 comments on commit 8b3409f

Please sign in to comment.