chore: initial commit

genolve · Aug 16, 2019 · e7e710e · e7e710e
1 parent aea5856
commit e7e710e
Show file tree

Hide file tree

Showing 5 changed files with 1,324 additions and 3 deletions.
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 genolve
+Copyright (c) 2019 Craig Mandsager
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,2 +1,48 @@
-# wikiquote-api-gui
-JavaScript API+GUI fetches quotes from Wikiquote and displays them in a fully functioning GUI for drop-in use in your application.
+# wikiquotes-api-gui
+==============
+
+JavaScript API+GUI fetches quotes from [Wikiquote](https://en.wikiquote.org/wiki/Main_Page) and displays them in a fully functioning GUI for drop-in use in your application. Try the  [Standalone Demo](https://www.genolve.com/js/wikiquote-api/index.htm) or the [Fully Integrated Demo- click 'text' then click 'Wikiquote'](https://www.genolve.com/svg/en/alldesigns.php?cardtype=quotes&subtype=popular&mediatype=picture)
+
+#### Installation
+Download the files and add in html header:
+
+`<script type="text/javascript" src="wikiquote-api-gui.js"></script>
+<link type="text/css" rel="stylesheet" href="wiki-api-gui-styles.css" />`
+
+
+#### Usage
+The GUI interface resides in a DIV in your application and returns the quotes via a callback function you specify on initialization:
+
+
+		WikiquoteApi =  new WikiquoteApiClass(vpr,$);
+		WikiquoteApi.selfConstruct({initsearch:'Einstein',
+			waiticon:'<span id="spinner" class="gnlv-blink">working!<span>',
+			containerDiv:'#quote-container',
+			clickHandler: myhandler
+			});
+
+Example callback function:
+
+```
+var myhandler = function(thequote){
+			$('#quote-of-day').html(thequote);
+			}
+```
+
+
+
+#### Requirements
+
+JQuery is the only requirement, any version above 2.1
+
+#### Features
+* Intelligently searches Wikiquote, falling back to opensearch if nothing is found
+* Keeps a search history to quickly return to previous pages
+* Based on search, displays links to related pages 
+* Filters results to only the most popular quotes
+
+#### Credit
+wikiquotes-api-gui adds a GUI and extensively expands on natetyler's [wikiquotes-api](https://github.com/natetyler/wikiquotes-api).
+
+#### Contributing
+We welcome any contributions and feedback! Just drop a note or as usual; fork, make your update, pull request.
diff --git a/index.htm b/index.htm
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>Wikiquotes API and GUI</title>
+<script type="text/javascript" src="../jquery-2.1.3.min.js"></script>
+<link rel="stylesheet" media="screen" type="text/css" href="wiki-api-gui-styles.css" />
+<script type="text/javascript" src="wikiquote-api-gui.js"></script>
+<script>
+
+$(document).ready(function() {
+		var myhandler = function(thequote){
+			$('#quote-of-day').html(thequote);
+			}
+	  vpr={};
+		WikiquoteApi =  new WikiquoteApiClass(vpr,$);
+		WikiquoteApi.selfConstruct({initsearch:'Einstein',
+										waiticon:'<span id="spinner" class="gnlv-blink">working!<span>',
+										thumbWidth:150,
+										containerDiv:'#quote-container',
+										clickHandler: myhandler
+										});
+
+});
+</script>
+</head>
+
+<body>
+<h2>Quote of The Day</h2>
+<div id="quote-of-day" style="width:50%;height:auto;border:thin dashed orange;padding:10px;font-size:23px;font-family:Impact, Charcoal;">pithy quote</div>
+<h2>One DIV in your application holds the gui:</h2>
+<div id="quote-wrapper" style="width:50%;height:500px;border:thin dashed orange;padding:5px;">
+<div id="quote-container" class="gnlv-wikidiv"></div>
+</div>
+</body>
+</html>
diff --git a/wiki-api-gui-styles.css b/wiki-api-gui-styles.css
@@ -0,0 +1,73 @@
+
+.gnlv-wikidiv {
+	background-color:white;
+	width:100%;
+	height:93%;
+	overflow-y:scroll;
+	overflow-x:hidden;
+	text-align:left;
+	padding:5px;
+	font-size: 16px;
+	font-family: Tahoma, Arial, sans-serif;
+}
+.gnlv-wikidiv h2{
+	font-size: 16px;
+}
+.gnlv-thumb-div {
+	margin:2px;
+	display:inline-block;
+	text-align:center;
+	cursor: pointer;
+	vertical-align:middle;
+}
+.gnlv-wikidiv ul {
+	margin:0;
+	padding:0;
+	cursor:pointer;
+}
+.gnlv-wikidiv li {
+	background-color:#e9e9ff;
+	margin:2px;
+	padding:2px;
+	list-style-type: none;
+}
+.gnlv-wikidiv a:link, .gnlv-wikidiv a:visited {
+	color:#f37511;
+	text-decoration:none;
+	/* pop out text */
+	text-shadow: 0 1px 0 rgba(100,100,100, 0.45); 
+}
+.gnlv-wikidiv a:hover {
+	color:#999;
+	text-decoration:none;
+}
+#wikithumbsdiv {
+	width:100%;
+}
+#wikilinksdiv{
+	width:100%;
+	border:thin solid maroon;padding:9px;
+}
+.gnlv-border-red img{
+	border:3px solid #900;
+}
+.gnlv-border-orange img {
+	border:2px solid #FC3;
+}
+.gnlv-blink {
+	color:grey;
+	padding:10px;
+  animation: 1.3s linear infinite gnlv-blink-ani;
+}
+
+@keyframes gnlv-blink-ani {
+  0% {
+    visibility: hidden;
+  }
+  50% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: visible;
+  }
+}