Wiki Viewer

Developer
Size
4,181 Kb
Views
2,024

How do I make an wiki viewer?

What is a wiki viewer? How do you make a wiki viewer? This script and codes were developed by Sudipta Das on 21 January 2023, Saturday.

Wiki Viewer Previews

Wiki Viewer - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Wiki Viewer</title> <meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fluid text-center"> <div class="col-md-offset-3 col-md-7 col-xs-offset-2 col-xs-9 col-lg-offset-3 col-lg-7 col-sm-offset-2 col-sm-8"> <div class="form"> <form> <h4>Search Wikipedia</h4><br> <input type="text" class="form-control txt" id="txt" placeholder="Type Here.." autocomplete="off"> <div class="panel panel-default rs"></div> <!-- rs= recent searches --> <div class="panel panel-default pl"></div> <div class="formdw"> <button class="btn btn-info"><b>Search</b></button><br> </form> <a href="http://en.wikipedia.org/wiki/Special:Random" target="_blank"><u>Read</u></a> A Random Wikipedia Article </div> </div> </div> <div class="col-md-offset-1 col-md-10 col-lg-offset-1 col-lg-10 col-sm-offset-1 col-sm-10 col-xs-offset-1 col-xs-10 grid"></div> </div> <script id="wikiGrid" type="text/template"> <a href="https://en.wikipedia.org/?curid=<%=pageid %>" target="_blank"> <div class="panel panel-warning"> <div class="panel-heading"><%= title %></div> <div class="panel-body"><%= extract %></div> </div> </a> </script> <script id="wikiSuggestion" type="text/template"><%= title %></script> <script id="wikiPreviousSearch" type="text/template"><%=search %></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.2/backbone-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Wiki Viewer - Script Codes CSS Codes

body{font-family: 'Quicksand', sans-serif; font-size:17px;}
h4{font-weight:700;}
.panel{text-align:left;}
.pl,.rs{ margin:0;padding-left:5px;padding-bottom:5px;padding-top:5px;z-index:2;
position:absolute; display:none;
}
.pb, .rspb{margin:0; padding:3px;font-weight:700;font-size:14px; }
.rspb{font-weight:400;font-style: italic;}
.grid{display:none; font-family: 'Crimson Text', serif; font-size:17px; }
.btn{margin-bottom:5%}
.form{ margin:auto;padding-top:20%; padding-bottom:10%
}
.formdw{ margin-top:20px; z-index:1; }
.pb:hover{background-color:rgb(200,200,200);
cursor:pointer;}
.rspb:hover{background-color:rgb(200,200,200);
cursor:pointer;}
a{color:black;}
a:hover{text-decoration:none;}

Wiki Viewer - Script Codes JS Codes

//console.log('In model');
var app = app || {};
app.wikiModel=Backbone.Model.extend({ });
app.wikiSuggestionModel=Backbone.Model.extend({ });
app.wikiPreviousSearchModel=Backbone.Model.extend({ });
//console.log('In collection');
var app = app || {};
app.wikiCollection=Backbone.Collection.extend({ model:app.wikiModel
});
app.wikiSuggestionCollection=Backbone.Collection.extend({ model:app.wikiSuggestionModel
});
app.wikiPreviousSearchCollection=Backbone.Collection.extend({ model:app.wikiPreviousSearchModel
});
//console.log('In View');
var app = app || {};
app.singleWikiView=Backbone.View.extend({ //tagName:'div', //className:'col-lg-2 col-md-3 col-sm-4', template:_.template($('#wikiGrid').html()), render:function(){ this.$el.html(this.template(this.model.toJSON())); return this;
}
});
app.singleWikiSuggestionView=Backbone.View.extend({ className:'panel-body pb', template:_.template($('#wikiSuggestion').html()), render:function(){ this.$el.html(this.template(this.model.toJSON())); return this; }
});
app.singleWikiSearchView=Backbone.View.extend({ className:'panel-body rspb', template:_.template($('#wikiPreviousSearch').html()), render:function(){ this.$el.html(this.template(this.model.toJSON())); return this;
}
});
var app = app || {};
app.allWikiView = Backbone.View.extend({ //tagName:'div', //className:'', render:function(){ this.collection.each(function(wiki){ var wikiView=new app.singleWikiView({model:wiki}); this.$el.append(wikiView.render().el); },this); return this; }
});
app.allWikiSuggestionView=Backbone.View.extend({ render:function(){ this.collection.each(function(suggest){ var wikiSuggestion=new app.singleWikiSuggestionView({model:suggest}); this.$el.append(wikiSuggestion.render().el); },this); return this; }
});
app.allleWikiSearchView=Backbone.View.extend({ render:function(){ this.collection.each(function(search){ var singleWikiSearchView=new app.singleWikiSearchView({model:search}); this.$el.append(singleWikiSearchView.render().el); },this); return this; }
});
$(document).ready(function(){ var rs=[];
//-----Shows Recent searches when clicked on the text Box----
$('#txt').click(function(){ $('.rs').empty(); $('.rs').width($('.form').width()*0.98); if(rs.length!=0){ var wikiPreviousSearchCollection=new app.wikiPreviousSearchCollection(); for(var i in rs){ var wikiPreviousSearchModel=new app.wikiModel({ search:rs[i] }); wikiPreviousSearchCollection.add(wikiPreviousSearchModel); } //console.log(wikiPreviousSearchCollection.toJSON()); var wikiSearch=new app.allleWikiSearchView({ collection:wikiPreviousSearchCollection }); $('.rs').html(wikiSearch.render().el); $('.rs').toggle(); } $('.rspb').click(function(){ $('#txt').val(this.innerHTML); $('.rs').hide();
}); $('.rspb').mouseenter(function(){ $('#txt').val(this.innerText); });
});
//----Autosuggestion while typing----
$('#txt').keyup(function(e){ if(e.keyCode!==13){ $('.pl').width($('.form').width()*0.95); $('.rs').hide(); $('.pl').hide(); $('.pl').empty(); var url='https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch='+$('#txt').val()+'&callback=JSON_CALLBACK'; $('.pl').hide(); $('.pl').empty(); $.ajax({url:url,jsonp: "callback", dataType: "jsonp", success: function( response ) { $('.pl').hide(); $('.pl').empty(); if(response.query!==undefined){ var temp=response.query.pages; var wikiSuggestionCollection=new app.wikiSuggestionCollection(); for(var i in temp){ var wikiSuggestionModel=new app.wikiSuggestionModel({ title:temp[i].title.toLowerCase() }) wikiSuggestionCollection.add(wikiSuggestionModel); } var wikiSuggestionView=new app.allWikiSuggestionView({collection:wikiSuggestionCollection}); $('.pl').html(wikiSuggestionView.render().el); $('.pl').show(); } $('.pb').click(function(){ $('#txt').val(this.innerHTML); $('.pl').hide(); $('.pl').empty();
}); $('.pb').mouseenter(function(){ $('#txt').val(this.innerHTML);
}); $('.container-fluid').click(function(){ $('.pl').hide(); $('.pl').empty();
});
}}); };
});
//------Starting the search---- var executeSearch=function(){ if($('#txt').val()=="") alert("Type something in the box"); else { if(rs.indexOf($('#txt').val())===-1) rs.unshift($('#txt').val()); if(rs.length>10) rs.pop(); $('.grid').fadeOut('fast'); $('.grid').empty(); var url='https://en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch='+$('#txt').val()+'&callback=JSON_CALLBACK'; $.ajax({url:url,jsonp: "callback", dataType: "jsonp", success: function( response ) { var temp=response.query.pages; var wikiCollection=new app.wikiCollection(); for(var i in temp){ var wikiModel=new app.wikiModel({ pageid:temp[i].pageid, title:temp[i].title, extract:temp[i].extract }); wikiCollection.add(wikiModel); }; var allWikiView=new app.allWikiView({collection:wikiCollection}); $('.grid').append(allWikiView.render().el); }}); $('h4').hide('fast'); $('.form').animate({'padding-top':'10%','width':'80%'},function(){ $('.grid').show('fast'); $('#txt').val(''); }); } }; $('button').click(function(e){ executeSearch(); e.preventDefault(); });
});
Wiki Viewer - Script Codes
Wiki Viewer - Script Codes
Home Page Home
Developer Sudipta Das
Username sdas13
Uploaded January 21, 2023
Rating 3
Size 4,181 Kb
Views 2,024
Do you need developer help for Wiki Viewer?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sudipta Das (sdas13) Script Codes
Name
OOJS
CSS popup
MS
IMDB api
WheatherOnATap
Sorting Algorithms
Accordion
Javascript DOM
Onepush - best websites
Local Weather
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!