Skip to content

Commit 0dcda3e

Browse files
amygimmaamygimma
committed
embedly demo js and demo page
1 parent fabc38d commit 0dcda3e

23 files changed

+286
-5
lines changed

‎app/assets/images/blogger.png

4.03 KB
Loading

‎app/assets/images/braintree.png

8.7 KB
Loading

‎app/assets/images/embedly.png

31.5 KB
Loading

‎app/assets/images/reddit.png

21.8 KB
Loading

‎app/assets/images/ride_logo.png

2.34 KB
Loading

‎app/assets/images/stripe.png

5.19 KB
Loading

‎app/assets/images/vimeo.png

5.05 KB
Loading

‎app/assets/javascripts/app.js

+4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
var bindContactForm = require('./app/contact');
22
var bindToggleNav = require('./app/nav');
33
var bindStickyNav = require('./app/sticky-nav');
4+
var styleContent = require('./app/style-content');
5+
var EmbedlyDemo = require('./app/embedly-demo');
46

57
$(function(){
68
bindToggleNav();
79
bindContactForm();
810
bindStickyNav();
11+
styleContent();
12+
EmbedlyDemo.mount();
913
});
1014

1115
// global react components

‎app/assets/javascripts/app/embedly-demo.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
var EmbedlyDemo = module.exports = function() {
2+
var self = this;
3+
var hashTagActive = "";
4+
$('.embedly-button').on('click', function(e){
5+
// e.preventDefault();
6+
embedlyDemo = new EmbedlyDemo();
7+
var url = $('#url').val();
8+
var encodedUrl = encodeURIComponent(url);
9+
var requestUrl = "http://api.embed.ly/1/extract?key=4d990bca1808406aa35f798781bc2c9b&url=" + encodedUrl;
10+
return self.sendRequest(requestUrl);
11+
});
12+
};
13+
14+
EmbedlyDemo.prototype.sendRequest = function(requestUrl) {
15+
var self = this;
16+
17+
$('spinner').addClass('loading-circle');
18+
$.ajax(requestUrl).success(function(data) {
19+
self.data = data;
20+
var display = data.content || data.media.html || data.description;
21+
var htmlTitle = "<div class='embedly-title'><h1>" + data.title + "</h1></div>";
22+
var content = htmlTitle + "<div class='embedly-content'>" + display + "</div>";
23+
self.appendContent(content);
24+
self.appendImages(data.images);
25+
$('.style-buttons').removeClass('hide');
26+
}).error(function(data) {
27+
var errorMessage = '<p class="ajax-error">Content not found, please try again. Be sure to use the full url like this: "http://www.wizard.codes/the-winnower-api/" or " http://blog.us.playstation.com/2015/08/09/the-drop-new-playstation-games-for-8112015/ "';
28+
self.appendContent(errorMessage);
29+
}).complete(function(){
30+
$('spinner').removeClass('loading-circle');
31+
});
32+
};
33+
34+
EmbedlyDemo.prototype.getVideo = function(requestUrl) {
35+
var self = this;
36+
37+
$('spinner').addClass('loading-circle');
38+
$.ajax(requestUrl).success(function(data) {
39+
self.data = data;
40+
var htmlTitle = "<div class='embedly-title'><h1>" + data.title + "</h1></div>";
41+
var content = htmlTitle + "<div class='embedly-content'>" + data.content + "</div>";
42+
self.appendContent(content);
43+
}).error(function(data) {
44+
var errorMessage = '<p class="ajax-error">Content not found, please try again. Be sure to use the full url like this: "http://www.wizard.codes/the-winnower-api/" or " http://blog.us.playstation.com/2015/08/09/the-drop-new-playstation-games-for-8112015/ "';
45+
self.appendContent(errorMessage);
46+
}).complete(function(){
47+
$('spinner').removeClass('loading-circle');
48+
});
49+
};
50+
51+
EmbedlyDemo.prototype.appendContent = function(content) {
52+
$('.preview-content').empty();
53+
$('.preview-content').append(content);
54+
};
55+
56+
EmbedlyDemo.prototype.appendImages = function(images) {
57+
var imageDivs = "";
58+
$.each(images, function(index, image) {
59+
imageDivs += "<img class='thumbnail' src='" + image.url + "' />";
60+
});
61+
62+
var galleryDiv = "<div class='image-gallery'><h3>Images</h3>" + imageDivs + "</div>";
63+
$('.preview-content').append(galleryDiv);
64+
};
65+
66+
EmbedlyDemo.mount = function() {
67+
if ($('.embedly-button').get(0)) {
68+
embedlyDemo = new EmbedlyDemo();
69+
}
70+
return embedlyDemo;
71+
};

‎app/assets/javascripts/app/style-content.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = function embedlyDemo() {
2+
$('.add-style').on('click', function(e) {
3+
e.preventDefault();
4+
$('.preview-content').removeClass('newspaper blog');
5+
$('.preview-content').addClass(e.target.text.toLowerCase());
6+
});
7+
};

‎app/assets/stylesheets/_demo.scss

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
.demo {
2+
max-width: 1040px;
3+
margin: 60px auto;
4+
padding: 20px;
5+
h2 {
6+
margin: 20px;
7+
}
8+
p {
9+
max-width: 960px;
10+
margin: auto;
11+
}
12+
13+
.tech {
14+
margin: auto;
15+
text-align: center;
16+
li {
17+
display: inline;
18+
}
19+
img {
20+
width: 100px;
21+
max-height: 30px;
22+
margin: 20px 30px;
23+
}
24+
}
25+
26+
.embedly-button {
27+
display: block;
28+
text-align: center;
29+
max-width: 200px;
30+
margin: 20px auto;
31+
}
32+
33+
.style-buttons {
34+
text-align: center;
35+
}
36+
37+
.hide {
38+
display: none;
39+
}
40+
}
41+
42+
.preview-content {
43+
max-width: 1040px;
44+
margin: auto;
45+
padding: 30px;
46+
47+
p {
48+
padding-top: 20px;
49+
font-size: 22px;
50+
font-family: sans-serif;
51+
line-height: 24px;
52+
}
53+
54+
i {
55+
font-size: 20px;
56+
font-family: serif;
57+
line-height: 24px;
58+
margin-bottom: 18px;
59+
padding-bottom: 18px;
60+
}
61+
62+
img {
63+
padding: 20px;
64+
max-width: 100%;
65+
display: block;
66+
margin: auto;
67+
}
68+
69+
iframe {
70+
max-width: 100%;
71+
margin: auto;
72+
padding: 30px;
73+
}
74+
75+
&.newspaper {
76+
h1 {
77+
text-align: center;
78+
font-family: "Times New Roman", Georgia, Serif;
79+
font-size: 50px;
80+
font-weight: bolder;
81+
margin-bottom: 40px;
82+
}
83+
84+
p {
85+
font-family: "Times New Roman", Georgia, Serif;
86+
}
87+
88+
.embedly-content {
89+
-webkit-column-count: 3; /* Chrome, Safari, Opera */
90+
-moz-column-count: 3; /* Firefox */
91+
column-count: 3;
92+
border-top: 1px lightgrey solid;
93+
padding-top: 15px;
94+
}
95+
96+
img {
97+
width: 100%;
98+
}
99+
}
100+
101+
.image-gallery {
102+
width: 100%;
103+
margin: auto;
104+
img {
105+
max-height: 200px;
106+
max-width: 200px;
107+
display: inline;
108+
margin: auto
109+
}
110+
}
111+
}

‎app/assets/stylesheets/application.scss

+1
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,5 @@
1919
@import "contact";
2020
@import "footer";
2121
@import "stories";
22+
@import "demo";
2223
@import "markdown";

‎app/assets/stylesheets/base/_base.scss

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
// Mixins
1111
@import 'mixins/flash';
12+
@import 'mixins/loading_animation';
1213

1314
// Extends
1415
@import 'extends/button';

‎app/assets/stylesheets/base/_main.scss

+8
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,11 @@ h2 {
2020
.main-content {
2121
margin-top: 60px;
2222
}
23+
24+
.button {
25+
@extend button;
26+
}
27+
28+
.loading-circle {
29+
@include loading-animation-circle($size: 30, $speed: 2.1, $color: $wizard-gray, $border-size: 20);
30+
}

‎app/assets/stylesheets/base/_typography.scss

+7
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,13 @@ a {
5656
color: $hover-link-color;
5757
outline: none;
5858
}
59+
60+
&.button {
61+
color: white;
62+
&:hover {
63+
color: white;
64+
}
65+
}
5966
}
6067

6168
hr {

‎app/assets/stylesheets/base/mixins/_loading_animation.scss

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
@mixin loading-animation-circle($size: 50, $border-size: 5, $speed: 1.0, $color: gray) {
2+
height: #{$size}px;
3+
width: #{$size}px;
4+
margin: 0 auto;
5+
position: relative;
6+
@include animation(loading-animation-rotation #{$speed}s infinite linear);
7+
border: #{$border-size}px solid tint($color, 70%);
8+
border-radius: 100%;
9+
&:before {
10+
content: "";
11+
display: block;
12+
position: absolute;
13+
left: -#{$border-size}px;
14+
top: -#{$border-size}px;
15+
height: 100%;
16+
width: 100%;
17+
border-top: #{$border-size}px solid $color;
18+
border-left: #{$border-size}px solid transparent;
19+
border-bottom: #{$border-size}px solid transparent;
20+
border-right: #{$border-size}px solid transparent;
21+
border-radius: 100%;
22+
}
23+
}
24+
25+
@include keyframes(loading-animation-rotation) {
26+
from {
27+
@include transform(rotate(0deg));
28+
}
29+
to {
30+
@include transform(rotate(359deg));
31+
}
32+
}

‎app/controllers/home_controller.rb

+4
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,8 @@ def bakecycle
1515
def winnower
1616
black_nav
1717
end
18+
19+
def demo
20+
black_nav
21+
end
1822
end

‎app/views/application/_navbar.html.erb

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<li><%= link_to "Services", root_path(anchor: "services") %></li>
1010
<li><%= link_to "Clients", clients_path %></li>
1111
<li><%= link_to "Team", root_path(anchor: "team") %></li>
12+
<li><%= link_to "Demo", demo_path %></li>
1213
<li><%= link_to "Contact", root_path(anchor: "contact") %></li>
1314
<li><%= link_to "Blog", "http://wizard.codes/", target: '_blank' %></li>
1415
</ul>

‎app/views/home/_bakecycle.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@
1010
<p>
1111
BakeCycle started in the basement of Bien Cuit a French Bakery based in Brooklyn. It helped them grow to be one of the most successful bakeries in New York and landed owner Kate Wheatcroft in Forbe's 30 under 30. Learn how Kate worked with Wizard Development to take BakeCycle from their basement to the world.
1212
</p>
13-
<%= link_to "Read BakeCycle's Story", bakecycle_path, class: "right" %>
13+
<%= link_to "Read BakeCycle's Story", bakecycle_path %>
1414
</div>
1515
</article>

‎app/views/home/_one_month.html.erb

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
<article class="casestudy">
2-
<div class="header">
3-
</div>
42
<div class="content">
53
<%= image_tag 'one-month-dark.png', class: 'logo' %>
64
<p>
@@ -14,4 +12,4 @@
1412
"I was able to work on the business and know that we had our development covered." - Mattan Griffel, CEO
1513
</blockquote>
1614
</div>
17-
</div>
15+
</article>

‎app/views/home/_winnower.html.erb

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="quote-card">
1212
<%= image_tag 'joshua.png', class: 'case-image', alt: 'Josh and his business partner, Pete', title: 'Josh and his business partner, Pete' %>
1313
<blockquote>
14-
In order to cure cancer, we first need to cure cancer research.<br>- Joshua Nicholson, Founder
14+
In order to cure cancer, we first need to cure cancer research. - Joshua Nicholson, Founder
1515
</blockquote>
1616
</div>
1717
</article>

‎app/views/home/demo.html.erb

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<article class="demo">
2+
<h2>Industry Specific Publishing and Membership Sites</h2>
3+
<p>We have worked with publishing leaders like <%= link_to "One Month", "http://www.onemonth.com", target: "_blank" %> and <%= link_to "The Winnower", "http://www.thewinnower.com", target: "_blank" %> to build and expand upon publishing platforms that fit their specific needs. When there is an API available - like Blogger, Stripe, or Reddit, we can use them to customize your users' experience, otherwise we can build our own. On top of that, we can build or use intuitive analytics and performance monitoring tools, and customize your devops to make sure you know how your app is performing.</p>
4+
<ul class="tech">
5+
<li><%= image_tag 'embedly.png', alt: 'embedly' %></li>
6+
<li><%= image_tag 'blogger.png', alt: 'blogger' %></li>
7+
<li><%= image_tag 'reddit.png', alt: 'reddit' %></li>
8+
<li><%= image_tag 'vimeo.png', alt: 'vimeo' %></li>
9+
<li><%= image_tag 'stripe.png', alt: 'stripe' %></li>
10+
<li><%= image_tag 'braintree.png', alt: 'braintree' %></li>
11+
</ul>
12+
13+
<section>
14+
<h2>Try it out!</h2>
15+
<p>Try out our Embedly importer to get content from news websites and blogs to customize their look and feel to give your users a unique experience. You might notice that some content gets changed by Embedly, but remember we have many tools at our disposal, and can customize and style content based on your specific needs.</p>
16+
17+
<%= field_set_tag do %>
18+
<p>Enter a url or use ours, hit 'Get Content', then customize the viewing experience!</p>
19+
<p><%= text_field_tag "url", "http://www.wizard.codes/the-winnower-api/" %></p>
20+
<p class="hint">*make sure to enter a full URL! (Like this: "http://www.wizard.codes/the-winnower-api/"!)</p>
21+
<%= link_to 'Get Content', '#preview-content', class: 'button embedly-button' %>
22+
<% end %>
23+
24+
<div class="jumptarget" id="preview-content"></div>
25+
26+
<div class="style-buttons hide">
27+
<%= link_to 'Blog', '#', class: 'button add-style' %>
28+
<%= link_to 'Newspaper', '#', class: 'button add-style' %>
29+
</div>
30+
31+
<div class="preview-content">
32+
<div class="spinner"></div>
33+
</div>
34+
</section>
35+
</article>

‎config/routes.rb

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
get :bakecycle, to: 'home#bakecycle'
55
get :clients, to: 'home#clients'
66
get :winnower, to: 'home#winnower'
7+
get :demo, to: 'home#demo'
78

89
# what do we do with these?
910
if Rails.env.development?

0 commit comments

Comments
 (0)