Created
May 16, 2017 02:01
-
-
Save woodwardtw/e07a7f6b2bcad3c9fc97b7c0d4a926c9 to your computer and use it in GitHub Desktop.
vue from google sheets & wp api
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Georgetown Domains</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> | |
| <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> | |
| <style type="text/css" media="screen"> | |
| .title,.description,.img-fluid, .postLink { | |
| cursor: pointer; | |
| } | |
| .title,.description { | |
| display: block; | |
| } | |
| .title { | |
| font-size: 2em; | |
| position: absolute; | |
| } | |
| .description { | |
| position: absolute; | |
| top: 50px; | |
| } | |
| .the-blog { | |
| padding: 10px; | |
| } | |
| #foo\.bar { | |
| background-color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="sites" class="container"> | |
| <div class="loading"> | |
| <i v-if="!sites" class="fa fa-spinner fa-spin"></i> | |
| </div> | |
| <div v-for="site in sites" :key="this.sites" class="col-md-4 the-blog item" id="sites"> | |
| <a :href="theLink(site)" target="_blank" class="commit"> | |
| <div class="title" v-html="theTitle(site)"></div> | |
| <div class="description" v-html="theDescription(site)"></div> | |
| <div> | |
| <img class="img-fluid" :src="getThumbnail(site)" width="100%" height="auto"/> | |
| </div> | |
| </a> | |
| <div class="load" id="foo.bar"> | |
| <a v-on:click.stop="fetchPosts(site)">Recent Posts </a> | |
| <div v-for="post in posts"> | |
| <a class="postLink" :href="post.link" v-html="post.title.rendered"></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="text/javascript" charset="utf-8"> | |
| //https://spreadsheets.google.com/feeds/list/1uwjcVEVP48JMcE-nUSNmn-ZLUE4ETX1rgTu5Lpjgb0A/1/public/values?alt=json | |
| // ID of the Google Spreadsheet | |
| var spreadsheetID = "1uwjcVEVP48JMcE-nUSNmn-ZLUE4ETX1rgTu5Lpjgb0A"; | |
| // Make sure it is public or set to Anyone with link can view | |
| var blogURL = "https://spreadsheets.google.com/feeds/list/" + spreadsheetID + "/1/public/values?alt=json"; | |
| var blog = new Vue({ | |
| el: '#sites', | |
| data: { | |
| sites: null, | |
| posts: null | |
| }, | |
| watch: { | |
| currentPage: 'fetchSites', | |
| currentPage: 'fetchPosts' | |
| }, | |
| created: function () { | |
| this.fetchSites() | |
| }, | |
| methods: { | |
| fetchSites: function () { | |
| var xhr = new XMLHttpRequest() | |
| var self = this | |
| xhr.open('GET', blogURL ) | |
| xhr.onload = function () { | |
| self.sites = JSON.parse(xhr.responseText) | |
| self.sites = self.sites.feed.entry | |
| } | |
| xhr.send() | |
| }, | |
| theTitle: function(site) { | |
| return site.gsx$title.$t; | |
| }, | |
| theLink: function(site) { | |
| return site.gsx$url.$t | |
| }, | |
| theDescription: function(site){ | |
| return site.gsx$description.$t; | |
| }, | |
| getThumbnail: function(site){ | |
| var stem = site.gsx$url.$t | |
| stem = stem.substring(7) | |
| return 'screenshots/' + stem + '.jpeg' | |
| }, | |
| fetchPosts: function(post) { | |
| var postsUrl = post.gsx$url.$t + '/wp-json/wp/v2/posts/?per_page=3' | |
| var xhr = new XMLHttpRequest() | |
| var sitePosts = this | |
| xhr.open('GET', postsUrl ) | |
| xhr.onload = function () { | |
| sitePosts.posts = JSON.parse(xhr.responseText) | |
| } | |
| xhr.send() | |
| console.log(sitePosts.posts) | |
| }, | |
| postTitle: function(thePosts){ | |
| return sitePosts.posts[0].title.rendered | |
| }, | |
| //need to do something w mounted https://vuejs.org/v2/api/#mounted | |
| getButtons: function() { | |
| $( document ).ready(function() { | |
| console.log( "ready!" ); | |
| }); | |
| } | |
| }, | |
| mounted() { | |
| console.log(this.$el.getElementsByClassName('load')) // I'm text inside the component. | |
| } | |
| }); | |
| blog.getButtons(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment