Thursday, April 14, 2016
Blogger Permalink Fixer Firebase App with Clipboard JS
beginner
,
blogger permalink fixer
,
bootstrap dashboard app
,
clipboard js
,
copy to clipboard button click
,
easy
,
firebase
,
full project
,
hosted app
,
html5
,
jquery
,
online app
,
replace space dash async
,
tutorial
,
web
Instructions:
1.Install nodejs on your system. Run http-server on command line in the directory of the index.html2.Easiest hosting solution is firebase. It can be deployed on other solutions too.
Live App Link:
https://blogger-tools.firebaseapp.com/Get the Code Here:
https://github.com/quickgrid/blogger-permalink-fixerScreenshot:
What it does:
Blogger post links are auto generated with post title truncated to certain length. If we want the full post text as link there is option for custom permalink. But the problem is blogger gives error if there are space in the custom permalink and it is very hard to edit in the small search box.This tool automates the process by asynchronously creating the post title to a custom permalink after pasting in the search box.
It is also possible to get the fixed permalink in clipboard using a single click on copy button. Using some simple code clipboardjs library takes care of all the work. It is possible to modify the code to make other simple text manipulation solutions.
Code:
All other files are support files with little to no changes. I recommend watching my Github API PDF Find App and Google Charts Uhunt API tutorial series to understand the file structure of the project. Many of the files are not used, delete them to decrease the project size.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <meta name="description" content="http://quickgrid.blogspot.com"> | |
| <meta name="author" content="Asif Ahmed"> | |
| <link rel="icon" href="favicon.ico"> | |
| <title>Blogger Permalink Fixer</title> | |
| <!-- Bootstrap core CSS --> | |
| <link href="/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> | |
| <link href="/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> | |
| <!-- Custom styles for this template --> | |
| <link href="cover.css" rel="stylesheet"> | |
| <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> | |
| <!--[if lt IE 9]><script src="/assets/js/ie8-responsive-file-warning.js"></script><![endif]--> | |
| <script src="/assets/js/ie-emulation-modes-warning.js"></script> | |
| <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body> | |
| <div class="site-wrapper"> | |
| <div class="site-wrapper-inner"> | |
| <div class="cover-container"> | |
| <div class="masthead clearfix"> | |
| <div class="inner"> | |
| <h3 class="masthead-brand">Blogger Tools v1</h3> | |
| <nav> | |
| <ul class="nav masthead-nav"> | |
| <li class="active"><a href="http://quickgrid.blogspot.com">Home</a></li> | |
| <li><a href="https://twitter.com/quick_grid">Contact</a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </div> | |
| <div class="inner cover"> | |
| <div class="form-group"> | |
| <label for="exampleInputName2">Enter Site Title</label> | |
| <input type="text" class="form-control" id="siteTitleInput" placeholder="Enter Post Title"> | |
| </div> | |
| <div class="row"> | |
| <div class="col-lg-12"> | |
| <div class="input-group"> | |
| <input type="text" class="form-control" id="fixedPermalinkOutput" placeholder=""> | |
| <span class="input-group-btn"> | |
| <button class="btn btn-primary" id="outputCopyButton" type="button" data-clipboard-target="#fixedPermalinkOutput">Copy</button> | |
| </span> | |
| </div><!-- /input-group --> | |
| </div><!-- /.col-lg-6 --> | |
| </div><!-- /.row --> | |
| </div> | |
| <div class="mastfoot"> | |
| <div class="inner"> | |
| <p>Blogger Tools <a href="http://quickgrid.blogspot.com">Quickgrid</a>, by <a href="https://twitter.com/quick_grid">Asif Ahmed</a>.</p> | |
| </div> | |
| </div> | |
| </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.3/jquery.min.js"></script> | |
| <script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>')</script> | |
| <script src="/dist/js/bootstrap.min.js"></script> | |
| <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> | |
| <script src="/assets/js/ie10-viewport-bug-workaround.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script> | |
| <script type="text/javascript"> | |
| var clipboard = new Clipboard('#outputCopyButton'); | |
| String.prototype.replaceAt=function(index, character) { | |
| return this.substr(0, index) + character + this.substr(index+character.length); | |
| } | |
| $("#siteTitleInput").keyup(function() { | |
| var value = $(this).val(); | |
| for(var i = 0; i < value.length; i++){ | |
| if(value.charAt(i) === ' '){ | |
| value = value.replaceAt(i, "-"); | |
| } | |
| } | |
| $("#fixedPermalinkOutput").attr("value", value ); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment