diff --git a/.vscode/iisexpress.json b/.vscode/iisexpress.json new file mode 100644 index 0000000..c65de0a --- /dev/null +++ b/.vscode/iisexpress.json @@ -0,0 +1,6 @@ +{ + "port": 37177, + "path": "c:\\Users\\kaspe\\Google Drev\\Egne Projekter\\hashtaghistory.js", + "clr": "v4.0", + "protocol": "http" +} diff --git a/archive/v1.0.zip b/archive/v1.0.zip new file mode 100644 index 0000000..1e242ce Binary files /dev/null and b/archive/v1.0.zip differ diff --git a/demo/demo-style.min.css b/demo/demo-style.min.css new file mode 100644 index 0000000..4b9e190 --- /dev/null +++ b/demo/demo-style.min.css @@ -0,0 +1,2 @@ +*{-webkit-box-sizing:border-box;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}small.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}header h1+.sub{font-size:2rem}header a{color:slategray;text-decoration:none}header a:not(:last-child){margin:0 30px 0 0}main{background-color:#ffffff;border-radius:8px}section{display:-webkit-box;display:-ms-flexbox;display:flex}section:not(:last-child){margin-bottom:50px;padding-bottom:50px;border-bottom:solid 1px #e4e6e8}.text h1,.text h2,.text h3,.text h4,.text h5,.text h6{margin:0 0 15px}.text p{margin:0 0 10px}.text p: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:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:60px;padding:30px 0}.playground .controls{-ms-flex-negative:0;flex-shrink:0;margin:0 30px 0 0;padding:30px;background-color:#fff;width:35%;border-radius:8px}.playground .result{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:-10px;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-line-pack:start;align-content:flex-start}.playground .result a{display:block;margin:10px 0;width:calc(33.3333% - 10px)}.playground .result a img{display:block;width:100%;height:auto;border-radius:4px}#demo1{display:-webkit-box;display:-ms-flexbox;display:flex;margin:20px -5px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}#demo1 a{display:block;padding:5px;width:16.66666%}#demo1 a img{width:100%;height:auto;border-radius:4px}#demo1+.note{margin-top:-20px}.highlight-me{display:inline-block;padding:5px 10px;color:#89DDFF;font-size:0.95rem;background-color:#474747;border-radius:8px}.highlight-me.multiline,.highlight-me.block{display:block;margin:10px 0;padding:25px;white-space:pre-line}.highlight-me.block{width:50%}.highlight-me [data-type="tag"]{color:#E9716C}.highlight-me [data-type="attr"]{color:#FFCB6B}.highlight-me [data-type="val"]{color:#C3E88D}.highlight-me [data-type="plain"]{color:#fff} +/*# sourceMappingURL=demo-style.min.css.map */ \ No newline at end of file diff --git a/demo/demo-style.min.css.map b/demo/demo-style.min.css.map new file mode 100644 index 0000000..ff1c546 --- /dev/null +++ b/demo/demo-style.min.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "demo-style.scss" + ], + "names": [], + "file": "demo-style.min.css" +} \ No newline at end of file diff --git a/demo/demo-style.scss b/demo/demo-style.scss new file mode 100644 index 0000000..53616f1 --- /dev/null +++ b/demo/demo-style.scss @@ -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; + } +} \ No newline at end of file diff --git a/demo/demo.js b/demo/demo.js new file mode 100644 index 0000000..8ffb713 --- /dev/null +++ b/demo/demo.js @@ -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'), '<'); + string = string.replace(/"(.+?)"/g, '"$1"'); + + for(var i = 0; i < tags.length; i++) { + string = string.replace(new RegExp('<' + tags[i], 'g'), '<'+ tags[i] +''); + string = string.replace(new RegExp('</' + tags[i], 'g'), '</'+ tags[i] +''); + } + + for(var i = 0; i < attr.length; i++) { + string = string.replace(new RegExp(attr[i], 'g'), ''+ attr[i] +''); + } + + string = string.replace(/span>>(.*)</, 'span>>$1<'); + + 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); + }); +}); diff --git a/hashtaghistory.js b/hashtaghistory.js index c3bbf69..f2f4162 100644 --- a/hashtaghistory.js +++ b/hashtaghistory.js @@ -36,16 +36,19 @@ const generateHtml = function(postsObject) { let html = ""; - for(var i = 0; i < settings.limit; 1++) { - let post = postsObject[i].node; - - tempHtml += "" + post.accessibility_caption + "" + for(var i = 0; i < settings.limit; i++) { + + if(postsObject[i] !== undefined) { + let post = postsObject[i].node; - if(settings.link) { - tempHtml = "" + tempHtml + ""; - } + let tempHtml = "" + post.accessibility_caption + "" + + if(settings.link) { + tempHtml = "" + tempHtml + ""; + } - html += tempHtml; + html += tempHtml; + } } return html; @@ -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)); } diff --git a/index.html b/index.html new file mode 100644 index 0000000..3c956d2 --- /dev/null +++ b/index.html @@ -0,0 +1,59 @@ + + + + hashtaghistory.js - The simple instagram feed + + + + + + + + + +
+

hashtaghistory.js

+
The simple instagram feed
+
+ View on Github + Download zip (Demo included) +
+
+
+
+
+

Introdoctuon

+

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.

+

The only dependency to make it work is jQuery.

+

+ Getting startet
+ 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. +

+ + + +

Then you just need to call the plugin on a DOM element that you want to be a container for the images. $("#demo1").hashtaghistory("coding"); There are only one required parmeter, and that is the hashtag you want to show the feed from.

+

This will give you the following output:

+
+ Note! The styling is made for this demo only, it is not included in the plugin. +
+
+
+
+
+

Try it yourself

+

See the plugin in action

+
+
What hastag do you want to get the freed from?
+ +
How many items do you want?
+ + +
+
+
+ + + + + \ No newline at end of file