Skip to content

Commit

Permalink
More link functionality.
Browse files Browse the repository at this point in the history
  • Loading branch information
@benubois
benubois committed Jul 11, 2017
1 parent db90c24 commit f77f6bb
Show file tree
Hide file tree
Showing 21 changed files with 205 additions and 92 deletions.
1 change: 1 addition & 0 deletions app/assets/images/error-sign.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 38 additions & 10 deletions app/assets/javascripts/_site.js.coffee
View file
Expand Up @@ -57,8 +57,8 @@ $.extend feedbin,
$('[data-behavior~=entry_content_target] pre code').each (i, e) ->
hljs.highlightBlock(e)

audioVideo: ->
$('[data-behavior~=entry_content_target] audio, [data-behavior~=entry_content_target] video').mediaelementplayer()
audioVideo: (selector = "entry_content_target") ->
$("[data-behavior~=#{selector}] audio, [data-behavior~=#{selector}] video").mediaelementplayer()

footnotes: ->
$.bigfoot
Expand Down Expand Up @@ -188,12 +188,13 @@ $.extend feedbin,
resetScroll: ->
$('.entry-content').prop('scrollTop', 0)

fitVids: ->
$('[data-behavior~=entry_content_target]').fitVids({ customSelector: "iframe[src*='youtu.be'], iframe[src*='www.flickr.com'], iframe[src*='view.vzaar.com'], iframe[src*='embed-ssl.ted.com']"});
fitVids: (selector = "entry_content_target") ->
target = $("[data-behavior~=#{selector}]")
target.fitVids({ customSelector: "iframe[src*='youtu.be'], iframe[src*='www.flickr.com'], iframe[src*='view.vzaar.com'], iframe[src*='embed-ssl.ted.com']"});

formatTweets: ->
formatTweets: (selector = "entry_content_wrap") ->
if typeof(twttr) != "undefined" && typeof(twttr.widgets) != "undefined"
target = $('[data-behavior~=entry_content_wrap]')[0]
target = $("[data-behavior~=#{selector}]")[0]
result = twttr.widgets.load(target)

formatInstagram: ->
Expand Down Expand Up @@ -238,6 +239,16 @@ $.extend feedbin,
if 'console' of window
console.log error

formatLinkContents: ->
try
feedbin.audioVideo("view_link_markup_wrap")
feedbin.fitVids("view_link_markup_wrap")
feedbin.formatTweets("view_link_markup_wrap")
feedbin.formatInstagram()
catch error
if 'console' of window
console.log error

refresh: ->
if feedbin.data
$.get(feedbin.data.auto_update_path)
Expand Down Expand Up @@ -614,7 +625,9 @@ $.extend feedbin,

preloadedImageIds: []

linkActionsTimer: []
linkActionsTimer: null

linkCacheTimer: null

ONE_HOUR: 60 * 60 * 1000

Expand Down Expand Up @@ -736,7 +749,7 @@ $.extend feedbin,
return

entryLinks: ->
$(document).on 'click', '[data-behavior~=entry_content_wrap] a', ->
$(document).on 'click', '[data-behavior~=entry_content_wrap] a, [data-behavior~=view_link_markup_wrap] a', ->
$(this).attr('target', '_blank').attr('rel', 'noopener noreferrer')
return

Expand Down Expand Up @@ -1496,16 +1509,22 @@ $.extend feedbin,
linkActionsHover: ->
$(document).on 'mouseenter mouseleave', '.entry-final-content a', (event) ->
clearTimeout(feedbin.linkActionsTimer)
clearTimeout(feedbin.linkCacheTimer)
$('.entry-final-content a [data-behavior~=link_actions]').remove()

link = $(@)
contents = $('[data-behavior~=link_actions]').clone()
contents = contents[0].outerHTML

if event.type == "mouseenter"
feedbin.linkCacheTimer = setTimeout ( ->
form = $("[data-behavior~=view_link_cache_form]")
$("#url", form).val(link.attr('href'))
form.submit()
), 100
feedbin.linkActionsTimer = setTimeout ( ->
link.append(contents)
), 300
), 400

linkActions: ->
$(document).on 'click', '[data-behavior~=view_link]', (event) ->
Expand All @@ -1519,7 +1538,16 @@ $.extend feedbin,
event.preventDefault()

$(document).on 'click', '[data-behavior~=link_actions]', (event) ->
$(@).addClass('open')
windowWidth = $(window).width()
offset = $(@).offset().left
width = $(".dropdown-content", @).outerWidth()

if offset + width >= windowWidth
$(@).addClass('open dropdown-right')
else
$(@).addClass('open dropdown-left')


event.preventDefault()

$.each feedbin.preInit, (i, item) ->
Expand Down
103 changes: 81 additions & 22 deletions app/assets/stylesheets/_site.scss
View file
Expand Up @@ -2778,14 +2778,14 @@ $saved-search-control-height: 48px;
content: "";
height: 18px;
width: 18px;
border: 1px solid #dcdee0;
border: 1px solid $border-color;
border-radius: 3px;
cursor: pointer;
margin-right: -18px;
background: #FFF image-url("icon-caret.svg") 50% 50% no-repeat;
background: $body-background-color image-url("icon-caret.svg") 50% 50% no-repeat;
background-size: 80% 80%;
bottom: -2px;
box-shadow: 0 0 1px 0 #dcdee0;
box-shadow: 0 0 1px 0 $border-color;
animation-duration: .3s;
animation-name: slidein;
.dropdown-content {
Expand All @@ -2794,6 +2794,16 @@ $saved-search-control-height: 48px;
ul {
margin: 0 !important;
}
.theme-sunset & {
background-color: $body-background-color-sunset;
box-shadow: 0 0 1px 0 $border-color-sunset;
border-color: $border-color-sunset;
}
.theme-night & {
background-color: $body-background-color-night;
box-shadow: 0 0 1px 0 $border-color-night;
border-color: $border-color-night;
}
}
}
}
Expand Down Expand Up @@ -4581,6 +4591,8 @@ Buttons
text-decoration: none;
border-color: $selected-hover;
background-color: $selected-hover;
color: #FFF;
cursor: pointer;
}
&:active {
text-decoration: none;
Expand Down Expand Up @@ -4619,6 +4631,9 @@ Buttons
background-color: transparent;
color: $selected-active;
}
.theme-night & {
color: #fff;
}
}

.button-text {
Expand Down Expand Up @@ -4899,6 +4914,11 @@ button.close {
font-weight: bold;
height: 40px;
width: 40px;
svg {
position: absolute;
top: 26px;
right: 26px;
}
}
.modal-body .close {
position: absolute;
Expand All @@ -4908,6 +4928,11 @@ button.close {
font-weight: bold;
height: 46px;
width: 46px;
svg {
position: absolute;
top: 33px;
right: 33px;
}
}
.modal-title {
margin: 0;
Expand Down Expand Up @@ -5041,6 +5066,18 @@ button.close {
.modal-header, .modal-body, .modal-footer {
padding-left: 30px;
padding-right: 30px;
@media (max-width: 550px) {
padding-left: 15px;
padding-right: 15px;
}
}
.entry-inner {
padding: 0 !important;
@media (max-width: 550px) {
.favicon-wrap {
display: none;
}
}
}
}
.modal-header:before,
Expand Down Expand Up @@ -5074,6 +5111,14 @@ Link Viewer
}

#view_link_wrap .post-meta {
margin-bottom: 30px;
.url {
color: $text-color-light;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
position: relative;
.favicon-wrap {
left: -26px;
Expand All @@ -5082,31 +5127,16 @@ Link Viewer
}

.link-loading h1:empty, .link-loading p:empty {
@keyframes pulse {
0% {
opacity: .9;
}
50% {
opacity: .6;
}
100% {
opacity: .9;
}
}
animation: pulse 3s linear infinite;
background: $text-color-light;
background: rgba($text-color-light, .2);
.theme-sunset & {
background: $text-color-light-sunset;
background: rgba($text-color-light-sunset, .2);
}
.theme-night & {
background: $text-color-light-night;
background: rgba($text-color-light-night, .2);
}
}
.link-loading h1:empty {
height: 35px;
}
.link-loading p:empty {
height: 20px;
height: 14px;
}
.link-loading p:nth-child(2n) {
width: 90%;
Expand All @@ -5117,6 +5147,35 @@ Link Viewer
.link-loading p:last-child {
width: 30%;
}
.spinner {
height: 50px;
background: image-url("spinner-day.svg") 50% 50% no-repeat;
.theme-sunset & {
background: image-url("spinner-sunset.svg") 50% 50% no-repeat;
}
.theme-night & {
background: image-url("spinner-night.svg") 50% 50% no-repeat;
}
}

.view-link-error-container {
display: flex;
justify-content: center;
flex-direction: column;
.view-link-error {
margin-top: 40px;
font-size: 24px;
margin-bottom: 40px;
span {
background: image-url("error-sign.svg") 0 50% no-repeat;
padding-left: 40px;
}
}
p {
display: inline-block;
text-align: center;
}
}

/*------------------------------------------------------------------------------
Helpers
Expand Down
8 changes: 7 additions & 1 deletion app/controllers/entries_controller.rb
View file
Expand Up @@ -122,7 +122,8 @@ def view_link

def view_link_contents
@user = current_user
@content_info = Rails.cache.fetch("content_view:#{Digest::SHA1.hexdigest(params[:url])}:v5") do
@url = params[:url]
@content_info = Rails.cache.fetch("content_view:#{Digest::SHA1.hexdigest(@url)}:v5") do
Librato.increment 'readability.first_parse'
MercuryParser.parse(params[:url])
end
Expand All @@ -134,6 +135,11 @@ def view_link_contents
end
end

def view_link_cache
ViewLinkCache.perform_async(params[:url])
head :ok
end

def preload
@user = current_user
ids = params[:ids].split(',').map {|i| i.to_i }
Expand Down
28 changes: 28 additions & 0 deletions app/helpers/application_helper.rb
View file
Expand Up @@ -73,4 +73,32 @@ def branch_info
branch_name = `git rev-parse --abbrev-ref HEAD`
" [#{branch_name.chomp}]"
end

def favicon_with_host(host)
if record = Favicon.find_by(host: host)
favicon_template(record.cdn_url)
else
favicon_url = favicon_service_url(host)
favicon_template(favicon_url)
end
end

def favicon_template(favicon_url)
content_tag :span, '', class: "favicon-wrap" do
content_tag(:span, '', class: "favicon", style: "background-image: url(#{favicon_url});")
end
end

def favicon_service_url(host)
uri = URI::HTTP.build(
scheme: "https",
host: "www.google.com",
path: "/s2/favicons",
query: {domain: host}.to_query
)
uri.scheme = "https"
uri.to_s
end


end
11 changes: 11 additions & 0 deletions app/jobs/view_link_cache.rb
View file
@@ -0,0 +1,11 @@
class ViewLinkCache
include Sidekiq::Worker
sidekiq_options queue: :critical, retry: false

def perform(url)
Rails.cache.fetch("content_view:#{Digest::SHA1.hexdigest(url)}:v5") do
MercuryParser.parse(url)
end
end

end
30 changes: 0 additions & 30 deletions app/presenters/base_presenter.rb
View file
Expand Up @@ -31,36 +31,6 @@ def favicon(feed)
end
end

def favicon_with_url(host)
favicon_url = favicon_service_url(host)
favicon_template(favicon_url)
end

def favicon_template(favicon_url)
@template.content_tag :span, '', class: "favicon-wrap" do
@template.content_tag(:span, '', class: "favicon", style: "background-image: url(#{favicon_url});")
end
end

def favicon_with_fallback
if @object.favicon && @object.favicon.cdn_url
favicon(@object)
else
favicon_with_url(@object.host)
end
end

def favicon_service_url(host)
uri = URI::HTTP.build(
scheme: "https",
host: "www.google.com",
path: "/s2/favicons",
query: {domain: host}.to_query
)
uri.scheme = "https"
uri.to_s
end

private

def self.presents(name)
Expand Down

0 comments on commit f77f6bb

Please sign in to comment.