woodwardtw/gtown_sites_vue.html

## gtown_sites_vue.html
<!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>
	<!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>