Skip to content

Instantly share code, notes, and snippets.

@Git2020104

Git2020104/index.pug

Created February 26, 2022 22:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Git2020104/a94d22874b0d108f0ddf532da1840019 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Git2020104/a94d22874b0d108f0ddf532da1840019 to your computer and use it in GitHub Desktop.
Download ZIP
My Wikipedia Viewer
Raw
index.pug
main(ng-app='WikiApp' ng-controller='MainCtrl')
#search.wrapper.fullHeight
a.white-text(href='https://en.wikipedia.org/wiki/Special:Random' target='_blank') Click here for a random article
br
form(ng-submit='search()')
input(type='text' ng-model='searchTxt')
.eks
p.white-text#help Click icon to search
.wrapper
ul
a(ng-href='{{result.page}}' target='_blank' ng-repeat='result in results')
li
h1 {{result.title}}
p {{result.body}}
Raw
my-wikipedia-viewer.markdown
Raw
script.js
var app = angular.module('WikiApp', ['ngAnimate']);
app.controller('MainCtrl', function($scope, $http, $timeout) {
var form = $('form');
var close = $('.eks');
var input = $('input');
var search = $("#search");
var help = $("#help");
$scope.results = [];
close.on('click', function() {
form.toggleClass('open');
if (!form.hasClass('open') && $scope.searchTxt !== '' && typeof $scope.searchTxt !== 'undefined') {
search.toggleClass('fullHeight')
help.toggleClass('hide');
$scope.searchTxt = '';
}
$scope.results = [];
$scope.$apply();
})
input.on('transitionend webkitTransitionEnd oTransitionEnd', function() {
if (form.hasClass('open')) {
input.focus();
} else {
return;
}
})
$scope.search = function() {
$scope.results = [];
help.addClass('hide');
search.removeClass('fullHeight');
var title = input.val();
var api = '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=';
var cb = '&callback=JSON_CALLBACK';
var page = 'https://en.wikipedia.org/?curid=';
$http.jsonp(api + title + cb)
.success(function(data) {
var results = data.query.pages;
angular.forEach(results, function(v,k) {
$scope.results.push({title: v.title, body: v.extract, page: page + v.pageid})
})
});
}
});
Raw
scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.2/angular-animate.min.js"></script>
Raw
style.scss
@import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Rokkitt:700);
// Colors
$blue: #092B40;
$lightBlue: #85DEF2;
$water: #52A5D9;
$sky: #5BB5D9;
$orange: #D96F32;
* {
box-sizing: border-box;
}
html, body, main {
font-family: "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
position: relatiave;
margin: 0; padding: 0;
padding-top: 10px;
width: 100%; height: 100%;
background-color: $blue;
}
input[type='text'] {
-webkit-appearance: none;
outline: none;
border: none;
}
.wrapper {
display: flex;
width: 100%;
@include display(flex);
@include flex-direction(column);
@include align-items(center);
@include justify-content(center);
@include transition(all 2s linear);
}
.fullHeight {
height: 100%;
@include transition-duration(2s);
}
.white-text {
color: white;
text-decoration: none;
}
form {
position: relative;
display: block;
z-index: 1;
width: 40px;
height: 40px;
margin-left: 0;
padding: 0;
margin-bottom: 10px;
border: 4px solid $orange;
border-radius: 20px;
@include transition(all .25s ease .3s);
cursor: pointer;
&:before {
@extend %def;
top: 90%;
left: 90%;
width: 16px;
height: 3px;
background-color: $orange;
border-radius: 1px;
@include transition(width .15s ease .55s);
@include transform(rotate(45deg));
@include transform-origin(top left);
}
input {
width: 100%;
height: 100%;
padding: 0 30px 0 15px;
font-size: 14px;
line-height: 38px;
opacity: 0;
background-color: transparent;
color: white;
@include transition(opacity .15s ease);
}
}
.eks {
display: block;
position: absolute;
top: 50%;
right: 0;
z-index: 20;
width: 30px;
height: 30px;
cursor: pointer;
@include transform(translateY(-50%));
&:before, &:after {
@extend %def;
right: 5px;
height: 2px;
width: 2px;
border-radius: 1px;
@include transition(all .25s ease);
}
&:before {
top: 0px;
background-color: $orange;
@include transform(rotate(-45deg));
@include transform-origin(top right);
@include transition-delay(.1s);
}
&:after {
bottom: 0px;
background-color: $orange;
@include transform(rotate(45deg));
@include transform-origin(bottom right);
@include transition-delay(0s);
}
}
form.open {
width: 260px;
@include transition-delay(.1s);
&:before {
width: 0px;
@include transition-delay(0s);
}
input {
opacity: 1;
@include transition-delay(.15s);
}
.eks {
&:before, &:after {
width: 15px;
right: 12px;
}
&:before {
top: 9px;
@include transition-delay(.25s);
}
&:after {
bottom: 9px;
@include transition-delay(.3s);
}
}
}
ul {
margin-left: 0; padding-left: 0;
width: 80%;
a {
text-decoration: none;
color: black;
h1 {
font-size: 18px;
}
p {
font-size: 14px;
}
}
li {
list-style-type: none;
display: block;
margin-bottom: 10px;
padding: 15px 30px 5px 30px;
background-color: #E7E7E8;
opacity: 0;
@include animation(new-item 1s ease-in-out forwards);
@include transition-timing-function(cubic-bezier(0.6, 0, 0.4, 1.0));
&:hover {
border-left: 5px solid $orange;
margin-left: -5px;
//box-shadow: inset 2px -2px 0 $orange;
}
}
}
.hide {
display: none;
}
%def {
content: '';
position: absolute;
display: block;
}
@include keyframes(new-item) {
0% { opacity: 0;
-webkit-transform: translateY(2000px); }
80% { opacity: 0; }
100% { opacity: 1;
-webkit-transform: translateY(0); }
}
@Git2020104
Copy link
Author

Git2020104 commented Feb 26, 2022

If you want to see an example of a simple mark down previewer code then you're welcome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment