Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added filter function #1

Merged
merged 4 commits into from
Jun 13, 2015
Merged

added filter function #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
947f4dc
filtering text box
gyaresu Jun 12, 2015
6aa43ab
added filter function
gyaresu Jun 12, 2015
8f47e34
missing break
gyaresu Jun 12, 2015
928c133
tweaked variables
gyaresu Jun 12, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
132 changes: 55 additions & 77 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,74 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script data-cfasync="false" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/tabletop.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Workshop in a Box Exercise Catalogue</title>
<meta name="generator" content="BBEdit 11.0" />
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">
<script data-cfasync="false" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/tabletop.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Workshop in a Box Exercise Catalogue</title>
<meta name="generator" content="BBEdit 11.0" />
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name = "viewport" content = "user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width">





<!-- GOOGLE FONT EMBED -->
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Open+Sans&subset=latin,greek,vietnamese,cyrillic,greek-ext,latin-ext,cyrillic-ext' rel='stylesheet' type='text/css'>
<!--<link href='http://fonts.googleapis.com/css?family=Elsie|Droid+Serif&subset=latin,greek,vietnamese,cyrillic,greek-ext,latin-ext,cyrillic-ext' rel='stylesheet' type='text/css'> -->
<!-- GOOGLE FONT EMBED -->
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker|Open+Sans&subset=latin,greek,vietnamese,cyrillic,greek-ext,latin-ext,cyrillic-ext' rel='stylesheet' type='text/css'>
<!--<link href='http://fonts.googleapis.com/css?family=Elsie|Droid+Serif&subset=latin,greek,vietnamese,cyrillic,greek-ext,latin-ext,cyrillic-ext' rel='stylesheet' type='text/css'> -->

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">


</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Workshop in a Box: Exercise Catalogue</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="navbar-header">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Workshop in a Box: Exercise Catalogue</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">

</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

<div class="container">
<br />
<br /><br /><br /><br /><br />


<!-- Insert booklist.css here (https://gist.github.com/2585089) -->

<!-- Insert booklist.js here (https://gist.github.com/2585071) -->
<div id="TypeMenu"></div>
<div id="ExerciseDescription"></div>
<br />
<br /><br /><br /><br /><br />


<!-- Insert booklist.css here (https://gist.github.com/2585089) -->

<!-- Insert booklist.js here (https://gist.github.com/2585071) -->
<!-- <div id="TypeMenu"></div>
<div id="ExerciseDescription"></div>
-->
Filter search: <input type="text" id="comboBox" />
<ul id="comboBoxData">

</ul>
</div> <!-- container -->



<div style="float:left">
<img src="images/story-left.png" width="100px" class="pull-left navbar-fixed-bottom" style="verticle-align:top; margin-bottom:32px;">
<img src="images/story-left.png" width="100px" class="pull-left navbar-fixed-bottom" style="verticle-align:top; margin-bottom:32px;">
</div>

<div style="position: fixed; bottom: 33px; right:0%">
<img src="images/story-right.png" width="100px">
<img src="images/story-right.png" width="100px">
</div>


Expand All @@ -77,53 +78,30 @@
<div class="navbar navbar-inverse navbar-fixed-bottom">


<div class="container">
<div class="container">




</div>

</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<!--
<!-- <script src="js/ie10-viewport-bug-workaround.js"></script> -->
<!--
<script>
function init() {
Tabletop.init( { key: '153rVXCt4nlQn8Fj80GmWOLO5_aF4phW0MZrNIZfpUc8',
callback: function(data, tabletop) { console.log(data) },
simpleSheet: true } )
}
</script>
-->

<script type="text/javascript">
$(document).ready(function(){ init() });

var public_spreadsheet_url ='https://docs.google.com/spreadsheets/d/153rVXCt4nlQn8Fj80GmWOLO5_aF4phW0MZrNIZfpUc8/pubhtml?gid=291196347&single=true';

function init() {
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
simpleSheet: true } )
}

// function showInfo(data, tabletop) {
// alert("Successfully processed!")
// console.log(data);
// $("#ExerciseDescription").html(tabletop.data()[1].Statement);
// }

function showInfo(data) {
// data comes through as a simple array since simpleSheet is turned on
alert("Successfully processed " + data.length + " rows!")
$('<strong>'+data[3].Exercise+'</strong> <br />'+data[3].Description+'<br />').hide().appendTo('#ExerciseDescription').fadeIn(3500);
console.log(data);
}
</script>
</body>
</html>
-->

<script type="text/javascript" src='./js/app.js'></script>
</body>
</html>
30 changes: 30 additions & 0 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
$(document).ready(function(){ init() })

var public_spreadsheet_url ='https://docs.google.com/spreadsheets/d/153rVXCt4nlQn8Fj80GmWOLO5_aF4phW0MZrNIZfpUc8/pubhtml?gid=291196347&single=true'

function init() {
Tabletop.init( { key: public_spreadsheet_url,
callback: showInfo,
simpleSheet: true } )
}


function showInfo(data) {
//thing = data // if you type `thing` in the console it's now a global variable so you can see the returned objects
$.each(data, function (i, each) {
$('#comboBoxData').append('<li>' + '<b>Exercise</b>: ' + each.Exercise + '<br />' + '<b>Description:</b> ' + each.Description +
'<br />' + '<b>Objective:</b> ' + each.Objective + '<br />' + '<b>Notes:</b> ' + each.Notes + '<br />' + '<b>Slides: </b> ' +
each.Slides + '<br />' + '<b>Format:</b> ' + each.Format + '<br />' + '<b>Length:</b> ' + each.Length + '<br />' + '<b>Stimulus:</b> ' +
each.Stimulus + '<br />' + '<b>Subject1:</b> ' + each.Subject1 + '<br />' + '<b>Subject2:</b> ' + each.Subject2 + '</li>')
})

$('#comboBox').bind('keydown keypress keyup change', function() {
var search = this.value.toLowerCase()
var $li = $("#comboBoxData li").hide()
$li.filter(function() {
return $(this).text().toLowerCase().indexOf(search) >= 0
}).show()
})
}

// {"Exercise":"\"Not a Lion\" aka Picasso/ Michelangelo/ Sacrifice","Description":"Looking at a wall filled with images of greenpeace's history, take down any which are not communicating courage. ","Objective":"Comprehension","Notes":"This exercise should help to show that courage is a crucial part of Greenpeace's DNA - where have we deviated from that in the past?","Slides":"","Format":"plenary","Length":"","Stimulus":"historical images/campaigns etc","Subject1":"courage","Subject2":""}