Basic Example
Fancy Example
Requirements
Instructions for Use
Using some basic JavaScript, it is then possible to search the extracted text outside of the Publication, and provide an appropriate link to each page where a result was found.
Basic Example
In this example, we use the page text API to fetch all extracted page text for a single publication. To see the example, simply click "Get Text" to use the pre-filled information.
(Click here to view the example!)
If you would like to try this with your own publication instead, you may find your "Customer ID" and "API key" by clicking "Administration" and then "Account Info" in the Zmags Publicator. Enter those and the publication ID, being sure that there are no extra spaces or characters on either side.
You may notice that the pages are retrieved in no particular order. This is because the database calls made are asynchronous, and will add their data table as soon as they return, which can vary from one occasion to another. It would be possible to program a table sorted by page number if desired, but that has not been done in this case because it is nor our primary focus here, and would complicate the example.
This particular application does not serve much useful purpose aside from demonstration, and as such instructions for mirroring the example on another site are not provided here. The code is available for reference below, regardless.
<!DOCTYPE html>
<html>
<head>
<title>Page Text Basic Demo</title>
<script src="jquery-1.9.0.js"></script>
<script src="jquery.xdomainrequest.min.js"></script>
<style type="text/css">
td{ border: solid black 1px; }
input{
width: 245px;
text-align: center;
}
.settings{
border: solid #999999 1px;
padding: 10px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
}
</style>
</head>
<body style="background:lightgray;">
<script type="text/javascript">
var publication_id = "";
var customer_id = "";
var api_key = "";
function input(){
// Clear table.
document.getElementById("page_table").innerHTML = "";
// Read in user inputs.
api_key = document.getElementsByName("api_key")[0].value;
publication_id = document.getElementsByName("pub_id")[0].value.toLowerCase();
customer_id = document.getElementsByName("cust_id")[0].value;
// Retrieve publication text.
get_text();
}
var baseURL = "http://api.viewer.zmags.com/services/publicationapi/resource";
var version = ""
function get_text(){
$.ajax({ // Get publication version.
url: "http://api.viewer.zmags.com/publication/" + publication_id + "?key=" + api_key,
type: "GET",
})
.done(function(data){
version = data.version;
$.ajax({ // Get the publication data.
url: baseURL + data.publicationDescriptor.bundlePath + "/",
type: "GET",
})
.done(function(data){
$.each(data.publicationDescriptor.pageDescriptors, function(index, entry){
$.ajax({ // Get the page text.
url: baseURL + "/" + customer_id + "/pagetxt/" + publication_id + "/" + version + "/" + entry.bundlePart,
type: "GET"
})
.done(function(data){ // Display the page text.
var row = document.getElementById("page_table").insertRow(-1);
var cell = row.insertCell(0);
cell.innerHTML = "<b>Page " + entry.bundlePart + "</b>: " + data.text;
});
});
});
});
}
</script>
<table id="page_table" style="position:absolute; top:15px; left:15px; width:50%; border:solid black 1px; background:white;"></table>
<div class="settings" style="position:fixed; top:15px; left:50%; margin-left:30px; border:solid black 1px; background:white;">
<div style="position:relative; left:0px;">Publication ID: <input type="text" name="pub_id" value="f009b76a"></div>
<div style="position:relative; left:11px;">Customer ID: <input type="text" name="cust_id" value="94cf91bc"></div>
<div style="position:relative; left:41px;">API key: <input type="text" name="api_key" value="fd5146ec-13ae-4c03-88a4-c68d0a5c2e9f"></div>
<div style="position:relative; left:101px;"><button type="button" onClick="input();">Get Text</button></div>
</div>
</body>
</html>
Fancy Example
In this example, we use the page text API to fetch all extracted page text for several publications, and then provide a basic JavaScript table-search to return results for an entered search term.
Try entering a single word such as 'Zmags', 'sales', or a phrase such as "Rich Media". Note that while this search function is case sensitive, it would be just as possible to create a slightly differing one that is not. Try clicking one of the results' links. It should open the appropriate page of the corresponding publication in a new window or tab.
(Click here to view the example!)
If you would like to try this with your own publications instead, see the sections titled "Requirements" and "Instructions for Use" near the end of this article. For now, here's the code for this example:
<!DOCTYPE html>
<html>
<head>
<title>Page Text Fancy Demo</title>
<script src="jquery-1.9.0.js"></script>
<script src="jquery.xdomainrequest.min.js"></script>
<style type="text/css">
tr{ border: solid black 1px; }
td{ border: solid black 1px; }
input{
width: 245px;
text-align: center;
}
.settings{
border: solid #999999 1px;
padding: 10px 5px;
border-radius: 5px;
-moz-border-radius: 5px;
}
</style>
</head>
<body onload="init();" style="background:lightgray;">
<script type="text/javascript">
var pub_ids = ["f009b76a","f05db378","d57acbf8"]; // The ID of the publication to load.
var customer_id = "94cf91bc"; // The customer ID from your Publicator account.
var api_key = "fd5146ec-13ae-4c03-88a4-c68d0a5c2e9f"; // The API key from your Publicator account.
// !!! Do not edit code below this line. !!!
function init(){
// Retrieve publication text.
for(i=0; i<pub_ids.length; i++){
get_text(pub_ids[i]);
}
}
var query = "";
function input(){
// Clear results table.
document.getElementById("results_table").innerHTML = "";
query = document.getElementsByName("query")[0].value; // Read in user input.
search_table(); // Generate search results.
}
var tableStyle = "";
function show_hide(){
var pageText = document.getElementById('page_table');
if(tableStyle == ""){
tableStyle = pageText.style.cssText;
pageText.style.cssText = "display:none";
}
else{
pageText.style.cssText = tableStyle;
tableStyle = "";
}
}
var baseURL = "http://api.viewer.zmags.com/services/publicationapi/resource";
function get_text(publication_id){
$.ajax({ // Get publication version.
url: "http://api.viewer.zmags.com/publication/" + publication_id + "?key=" + api_key,
type: "GET",
})
.done(function(data){
version = data.version;
$.ajax({ // Get the publication data.
url: baseURL + data.publicationDescriptor.bundlePath + "/",
type: "GET",
})
.done(function(data){
$.each(data.publicationDescriptor.pageDescriptors, function(index, entry){
$.ajax({ // Get the page text.
url: baseURL + "/" + customer_id + "/pagetxt/" + publication_id + "/" + version + "/" + entry.bundlePart,
type: "GET",
})
.done(function(data){ // Display the page text.
var row = document.getElementById("page_table").insertRow(-1);
var cell1 = row.insertCell(-1);
cell1.innerHTML = publication_id;
var cell2 = row.insertCell(-1);
cell2.innerHTML = entry.bundlePart;
var cell3 = row.insertCell(-1);
cell3.innerHTML = data.text;
});
});
});
});
}
function search_table(){
var pageText = document.getElementById('page_table');
for (var i = 0; i < pageText.rows.length; i++){
var testCell = pageText.rows[i].cells[2].innerHTML;
if (testCell.indexOf(query) != -1){
var row = document.getElementById("results_table").insertRow(-1);
var cell1 = row.insertCell(-1);
cell1.innerHTML = pageText.rows[i].cells[0].innerHTML;
var cell2 = row.insertCell(-1);
cell2.innerHTML = pageText.rows[i].cells[1].innerHTML;
var cell3 = row.insertCell(-1);
cell3.innerHTML = "<a target='_blank' href='http://viewer.zmags.com/publication/"
+ pageText.rows[i].cells[0].innerHTML + "#/" + pageText.rows[i].cells[0].innerHTML
+ "/" + pageText.rows[i].cells[1].innerHTML + "'>Click Here</a>";
}
}
}
</script>
<table id="page_table" style="position:absolute; top:45px; left:50%; width:50%; border:solid black 1px; background:white;"></table>
<table id="results_table" style="position:absolute; top:45px; left:0px; width:50%; border:solid black 1px; background:white;">
<tr><td><b>Publication ID</b></td><td><b>Page Number</b></td><td><b>Page Link</b></td></tr>
</table>
<div class="settings" style="position:fixed; top:5px; left:5px; padding:5px; border:solid black 1px; background:white; z-index:1;">
<input type="text" name="query">
<button type="button" onClick="input();">Search</button>
<button type="button" onClick="show_hide();">Show/Hide Pages Table</button>
</div>
</body>
</html>
Requirements
- One or more activated publications with text in the 'Page' tab of the publication settings. To check:
1) Go to "All Publications" in the Publicator.
2) Click the publication's name in the list.
3) Click the 'Pages' tab near the top.
4) You may then click the little pencil icon for any page in the publication to view and edit the extracted text.
- In addition to the provided HTML, the following JS files are needed as well:
- jquery-1.9.0.js
- jquery.xdomainrequest.min.js
- Somewhere to host the files online, such as a company website.
Instructions for Use
1) Start by copy-pasting the provided code for "Fancy Example" above into a text editor such as Notepad++ or TextWrangler.
2) Be sure to fill in the pub_ids, customer_id, and api_key, found just below the <body> tag in the code. Your publication IDs can be found by clicking each publication's name in the "All Publications" list in the Publicator, The customer_ID and api key can be found on the "Account Settings" page (under 'Administration').
3) You may use any number of publication IDs, but be sure to maintain the same format as in the example: Each ID surrounded by "quotes", separated, by, commas, and the entire list surrounded by one set of [square brackets].
4) Save the file with a file name ending in .html and surrounded by quotes, like so: "pagetxt_example.html"
5) If you have not done so already, download the two JS files from the 'Requirements' section above. Just right-click and choose "Save As" for each of them.
6) Host the HTML and the two JS files in the same folder on your website, and then navigate your web browser to the URL of the HTML file to test it out.
Comments
0 comments
Please sign in to leave a comment.