Skip to content
This repository has been archived by the owner on Apr 7, 2021. It is now read-only.

Commit

Permalink
Merge pull request #2 from kasperlegarth/Demo-page
Browse files Browse the repository at this point in the history 
Demo page
  • Loading branch information
@kasperlegarth
kasperlegarth authored Mar 29, 2019
2 parents 431587a + 876d56a commit 6c9f60a
Show file tree
Hide file tree
Showing 8 changed files with 351 additions and 9 deletions.
6 changes: 6 additions & 0 deletions .vscode/iisexpress.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"port": 37177,
"path": "c:\\Users\\kaspe\\Google Drev\\Egne Projekter\\hashtaghistory.js",
"clr": "v4.0",
"protocol": "http"
}
Binary file added archive/v1.0.zip
View file
Binary file not shown.
2 changes: 2 additions & 0 deletions demo/demo-style.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions demo/demo-style.min.css.map
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

211 changes: 211 additions & 0 deletions demo/demo-style.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
* {
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
font-size: 18px;
line-height: 1.65;
background-color: #f1f2f3;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Titillium Web', sans-serif;
}

h2 {
font-size: 1.75rem;
}

small {
font-size: 0.8rem;

&.note {
display: block;
padding: 8px 12px;
background-color: #e4e6e8;
border-radius: 4px;
}
}

.container {
margin: 0 auto;
padding: 30px;
max-width: 900px;
}

header {
h1 {
margin: 0;
font-size: 3.5rem;

& + .sub {
font-size: 2rem;
}
}

a {
color: slategray;
text-decoration: none;

&:not(:last-child) {
margin: 0 30px 0 0
}
}
}

main {
background-color: #ffffff;
border-radius: 8px;
}

section {
display: flex;

&:not(:last-child) {
margin-bottom: 50px;
padding-bottom: 50px;
border-bottom: solid 1px #e4e6e8;
}
}

.text {
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 15px;
}

p {
margin: 0 0 10px;

&:last-child {
margin: 0;
}
}
}

input {
margin: 0 0 30px;
padding: 12px;
width: 100%;
font-size: 18px;
font-family: 'Poppins', sans-serif;
border: solid 2px slategray;
border-radius: 4px;
}

button {
padding: 12px 0;
width: 100%;
color: darkslategray;
font-size: 18px;
font-family: 'Poppins', sans-serif;
text-align: center;
background-color: #C3E88D;
border: none;
}

.playground {
display: flex;
margin-bottom: 60px;
padding: 30px 0;

.controls {
flex-shrink: 0;
margin: 0 30px 0 0;
padding: 30px;
background-color: #fff;
width: 35%;
border-radius: 8px;
}

.result {
display: flex;
margin-top: -10px;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;

a {
display: block;
margin: 10px 0;
width: calc(33.3333% - 10px);

img {
display: block;
width: 100%;
height: auto;
border-radius: 4px;
}
}
}
}

#demo1 {
display: flex;
margin: 20px -5px;
justify-content: center;
flex-wrap: wrap;

a {
display: block;
padding: 5px;
width: 16.66666%;

img {
width: 100%;
height: auto;
border-radius: 4px;
}
}

& + .note {
margin-top: -20px;
}
}

.highlight-me {
display: inline-block;
padding: 5px 10px;
color: #89DDFF;
font-size: 0.95rem;
background-color: #474747;
border-radius: 8px;

&.multiline,
&.block {
display: block;
margin: 10px 0;
padding: 25px;
white-space: pre-line;
}

&.block {
width: 50%;
}

[data-type="tag"] {
color: #E9716C;
}

[data-type="attr"] {
color: #FFCB6B
}

[data-type="val"] {
color: #C3E88D;
}

[data-type="plain"] {
color: #fff;
}
}
52 changes: 52 additions & 0 deletions demo/demo.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
var tags = ['div', 'a', 'button', 'article', 'section', 'strong', 'i', 'input', 'script'];
var attr = ['class', 'src', 'href'];

function highlight(string) {
string = string.replace(new RegExp('<', 'g'), '&lt;');
string = string.replace(/"(.+?)"/g, '<span data-type="val">"$1"</span>');

for(var i = 0; i < tags.length; i++) {
string = string.replace(new RegExp('&lt;' + tags[i], 'g'), '&lt;<span data-type="tag">'+ tags[i] +'</span>');
string = string.replace(new RegExp('&lt;/' + tags[i], 'g'), '&lt;/<span data-type="tag">'+ tags[i] +'</span>');
}

for(var i = 0; i < attr.length; i++) {
string = string.replace(new RegExp(attr[i], 'g'), '<span data-type="attr">'+ attr[i] +'</span>');
}

string = string.replace(/span>>(.*)&lt;/, 'span>><span data-type="plain">$1</span>&lt;');

return string;
}

$(document).ready(function() {
$('.highlight-me').each(function() {
$(this).html(highlight($(this).html()));
});

$('#demo1').hashtaghistory('coding');

let playgroundOptions = {
hashtag: 'summer',
imageSize: 240,
limit: 9,
link: true
};

$('#playground-result').hashtaghistory(playgroundOptions);

$('#new-feed').click(function() {
let newHashtag = $('#hashtag-input').val();
let newLimit = $('#limit-input').val();

if(newHashtag !== '') {
playgroundOptions.hashtag = newHashtag;
}

if(newLimit !== '') {
playgroundOptions.limit = newLimit;
}

$('#playground-result').hashtaghistory(playgroundOptions);
});
});
21 changes: 12 additions & 9 deletions hashtaghistory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,16 +36,19 @@
const generateHtml = function(postsObject) {
let html = "";

for(var i = 0; i < settings.limit; 1++) {
let post = postsObject[i].node;

tempHtml += "<img src='" + post.thumbnail_resources[getImageSize(settings.imageSize)].src + "' alt='" + post.accessibility_caption + "'>"
for(var i = 0; i < settings.limit; i++) {

if(postsObject[i] !== undefined) {
let post = postsObject[i].node;

if(settings.link) {
tempHtml = "<a href='https://www.instagra.com/p/"+ post.shortcode +"'>" + tempHtml + "</a>";
}
let tempHtml = "<img src='" + post.thumbnail_resources[getImageSize(settings.imageSize)].src + "' alt='" + post.accessibility_caption + "'>"

if(settings.link) {
tempHtml = "<a href='https://www.instagram.com/p/"+ post.shortcode +"'>" + tempHtml + "</a>";
}

html += tempHtml;
html += tempHtml;
}
}

return html;
Expand All @@ -54,7 +57,7 @@
$.ajax({
url: "https://www.instagram.com/explore/tags/" + settings.hashtag + "/?__a=1",
success: function(data) {
let posts = data.graohql.hashtag.edge_hashtag_to_media.edges;
let posts = data.graphql.hashtag.edge_hashtag_to_media.edges;

$container.html(generateHtml(posts));
}
Expand Down
59 changes: 59 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>hashtaghistory.js - The simple instagram feed</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Poppins|Titillium+Web:700" rel="stylesheet">
<link rel="stylesheet" href="demo/demo-style.min.css">
</head>
<body>
<header class="container">
<h1>hashtaghistory.js</h1>
<div class="sub">The simple instagram feed</div>
<div class="buttons">
<a href="https://github.com/kasperlegarth/hashtagstory.js"><i class="fab fa-github"></i> View on Github</a>
<a href="https://github.com/kasperlegarth/hashtagstory.js/archive/v1.0.zip"><i class="fas fa-cloud-download-alt"></i> Download zip (Demo included)</a>
</div>
</header>
<main class="container">
<section class="introduction">
<div class="text">
<h2>Introdoctuon</h2>
<p>hashtaghistory.js is a jQuery plugin to make it easy for you to make an instagram feed from a hashtag. It uses a standard Ajax call to a standard instagram url witch provide the data in JSON format. That means no need for app token client ids.</p>
<p>The only dependency to make it work is jQuery.</p>
<p>
<strong>Getting startet</strong><br />
It is really simple to use the plugin all you need to to is include jQuery and the hashtaghistory.js file where you include your other scrips in the project.
</p>
<code class="highlight-me multiline"><script src="jquery.min.js"></script>
<script src="path/to/script/hashtaghistory.js"></script>
</code>
<p>Then you just need to call the plugin on a DOM element that you want to be a container for the images. <code class="highlight-me">$("#demo1").hashtaghistory("coding");</code> There are only one required parmeter, and that is the hashtag you want to show the feed from.</p>
<p>This will give you the following output:</p>
<div id="demo1"></div>
<small class="note"><strong>Note!</strong> The styling is made for this demo only, it is not included in the plugin.</small>
</div>
</section>
</main>
<div class="playground container">
<div class="controls text">
<h2>Try it yourself</h2>
<p>See the plugin in action</p>
<hr>
<h5>What hastag do you want to get the freed from?</h5>
<input type="text" id="hashtag-input" placeholder="E.g: summer">
<h5>How many items do you want?</h5>
<input type="text" id="limit-input" placeholder="E.g: 9">
<button id="new-feed">Generate feed</button>
</div>
<div id="playground-result" class="result"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="hashtaghistory.js"></script>
<script src="demo/demo.js"></script>
</body>
</html>

0 comments on commit 6c9f60a

Please sign in to comment.