Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
vue from google sheets & wp api
<!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/vue@2.1.4/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
You can’t perform that action at this time.