<!DOCTYPE html>
<html ng-app="GlyphApp">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="script.js"></script>
<script src="directives.js"></script>
</head>
<body ng-controller="GlyphCtrl">
<modals></modals>
<navigation></navigation>
<viewer ng-show="about == ''"></viewer>
<aboutmarty ng-show="about == 'Marty'"></aboutmarty>
<aboutplunk ng-show="about == 'plunk'"></aboutplunk>
</body>
</html>
angular.module('GlyphApp',["firebase"]);
angular.module('GlyphApp').controller("GlyphCtrl",
function($scope, $firebaseArray, $q){
$scope.about = '';
$scope.gridLayout = 'rowIcons';
$scope.sortBy = "Alpha Numeric";
$scope.sortByValue = "tag";
var isDuplicate = function(glyph){
var duplicate = false;
for(var i = 0; i < $scope.glyphs.length; i++){
if($scope.glyphs[i].tag === glyph.tag){
duplicate = true;
}
}
return duplicate;
};
var addGlyph = function(glyph){
var deferred = $q.defer();
if(isDuplicate(glyph)){
deferred.reject("Thanks But That Icon Was Already Loaded.");
} else {
glyph.timestamp = Firebase.ServerValue.TIMESTAMP;
$scope.glyphs.$add(glyph).then(
function(data){
deferred.resolve(data);
},
function(error){
deferred.reject(error);
}
);
}
return deferred.promise;
};
var ref = new Firebase("https://resplendent-heat-159.firebaseio.com/testglyphs");
$scope.glyphs = $firebaseArray(ref);
$scope.$on("newMultiGlyph", function(event, glyph){
addGlyph(glyph).then(
function(result){
glyph.status = 1;
$scope.$broadcast('glyphMultiAttemptComplete', glyph);
},
function(error){
glyph.status = 2;
$scope.$broadcast('glyphMultiAttemptComplete', glyph);
}
);
});
$scope.$on("newGlyph", function(event, glyph){
addGlyph(glyph).then(
function(result){
var msg = glyph.tag + " uploaded."
$scope.$broadcast('glyphAttemptComplete', msg);
},
function(error){
$scope.$broadcast('glyphAttemptComplete', error);
}
);
});
$scope.incrementLikes = function(glyph){
glyph.count++;
$scope.glyphs.$save(glyph)
};
$scope.setSort = function(sort){
$scope.about = "";
$scope.sortBy = sort;
if($scope.sortBy == "Most Recent"){
$scope.sortByValue = "-timestamp";
} else if($scope.sortBy == "Alpha Numeric") {
$scope.sortByValue = "tag";
} else if($scope.sortBy == "Most Liked") {
$scope.sortByValue = "-count";
}
};
$scope.setAbout = function(about){
$scope.sortBy = "";
$scope.about = about;
};
}
);
.largeIcons .grids{
float:left;
text-align:center;
}
.largeIcons .grids span{
font-size:50px
}
.largeIcons .grids .tagName{
font-size:12px
}
.smallIcons .grids{
float:left;
}
.viewListType{
cursor:pointer;
}
.addModal{
background-color:#DDD;
opacity:.5;
width:400px;
height:400px;
border:1px solid black;
margin-left:auto;
margin-right:auto;
top:50px;
text-align:center;
padding:13px;
}
.action{
cursor:pointer;
}
.action.like{
color:#3c763d;
}
.multi-entry{
width:330px;
}
.multi-preview{
width:330px;
min-height:70px;
border:1px solid #CCC;
}
.status{
text-align:left;
}
.multi-note{
text-align:left;
}
.table-glyph{
font-size:14px;
transition: 2s;
}
.table-glyph:hover{
font-size:64px;
}
angular.module("GlyphApp").directive("navigation",
function(){
return {
restrict: 'E',
templateUrl: 'nav.html'
};
}
);
angular.module("GlyphApp").directive("viewer",
function(){
return {
restrict: 'E',
templateUrl: 'viewer.html'
};
}
);
angular.module("GlyphApp").directive("modals",
function($timeout){
return {
restrict: 'E',
templateUrl: 'modal_form.html',
scope: {},
link: function(scope, element, attrs){
scope.status = "";
scope.failCount = 0;
scope.successCount = 0;
scope.notes = "";
scope.uploading = false;
scope.multi = "asterisk plus euro eur minus cloud envelope pencil glass music search heart star star-empty user film th-large th th-list ok remove zoom-in zoom-out off signal cog trash home file time road download-alt download upload inbox play-circle repeat refresh list-alt lock flag headphones volume-off volume-down volume-up qrcode barcode tag tags book bookmark print camera font bold italic text-height text-width align-left align-center align-right align-justify list indent-left indent-right facetime-video picture map-marker adjust tint edit share check move step-backward fast-backward backward play pause stop forward fast-forward step-forward eject chevron-left chevron-right plus-sign minus-sign remove-sign ok-sign question-sign info-sign screenshot remove-circle ok-circle ban-circle arrow-left arrow-right arrow-up arrow-down share-alt resize-full resize-small exclamation-sign gift leaf fire eye-open eye-close warning-sign plane calendar random comment magnet chevron-up chevron-down retweet shopping-cart folder-close folder-open resize-vertical resize-horizontal hdd bullhorn bell certificate thumbs-up thumbs-down hand-right hand-left hand-up hand-down circle-arrow-right circle-arrow-left circle-arrow-up circle-arrow-down globe wrench tasks filter briefcase fullscreen dashboard paperclip heart-empty link phone pushpin usd gbp sort sort-by-alphabet sort-by-alphabet-alt sort-by-order sort-by-order-alt sort-by-attributes sort-by-attributes-alt unchecked expand collapse-down collapse-up log-in flash log-out new-window record save open saved import export send floppy-disk floppy-saved floppy-remove floppy-save floppy-open credit-card transfer cutlery header compressed earphone phone-alt tower stats sd-video hd-video subtitles sound-stereo sound-dolby sound-5-1 sound-6-1 sound-7-1 copyright-mark registration-mark cloud-download cloud-upload tree-conifer tree-deciduous cd save-file open-file level-up copy paste alert equalizer king queen pawn bishop knight baby-formula tent blackboard bed apple erase hourglass lamp duplicate piggy-bank scissors bitcoin btc xbt yen jpy ruble rub scale ice-lolly ice-lolly-tasted education option-horizontal option-vertical menu-hamburger modal-window oil grain sunglasses text-size text-color text-background object-align-top object-align-bottom object-align-horizontal object-align-left object-align-vertical object-align-right triangle-right triangle-left triangle-bottom triangle-top console superscript subscript menu-left menu-right menu-down menu-up";
scope.multiList = [];
scope.uploadList = [];
scope.entryMode = "single";
scope.inputGlyph = "";
scope.reset = function(){
scope.status = "";
scope.failCount = 0;
scope.successCount = 0;
scope.notes = "";
scope.uploading = false;
scope.multi = "";
scope.multiList = [];
scope.uploadList = [];
};
scope.addNewGlyph = function(){
var newGlyph = {};
newGlyph.tag = scope.inputGlyph;
newGlyph.count = 0;
scope.$emit('newGlyph', newGlyph);
};
scope.setEntryMode = function(entryMode){
scope.entryMode = entryMode;
};
scope.preview = function(){
scope.multiList = scope.multi.split(" ");
scope.uploadList= [];
for(var i = 0; i < scope.multiList.length; i++){
scope.uploadList.push({tag:scope.multiList[i],count:0,status:0});
}
};
scope.addGlyphs = function(){
scope.uploading = true;
scope.$emit('newMultiGlyph', scope.uploadList[0]);
};
scope.$on("glyphAttemptComplete", function(event, result){
scope.status = result;
});
scope.$on("glyphMultiAttemptComplete", function(event, result){
var uploadGlyph = false;
for(var i =0; i < scope.uploadList.length; i++){
if(scope.uploadList[i].status === 0){
uploadGlyph = scope.uploadList[i];
break;
}
}
if(uploadGlyph){
scope.$emit('newMultiGlyph', uploadGlyph);
} else {
scope.failCount = 0;
scope.successCount = scope.uploadList.length;
for(var i = 0; i < scope.uploadList.length; i++){
if(scope.uploadList[i].status !== 1){
scope.failCount++;
scope.successCount--;
}
}
scope.notes = "a";
}
});
}
};
}
);
angular.module("GlyphApp").directive("modalButton",
function(){
return {
restrict: 'E',
replace: true,
templateUrl: 'modal_button.html'
};
}
);
angular.module("GlyphApp").directive("aboutmarty",
function(){
return {
restrict: 'E',
templateUrl: 'marty.html'
};
}
);
angular.module("GlyphApp").directive("aboutplunk",
function(){
return {
restrict: 'E',
templateUrl: 'plunk.html'
};
}
);
angular.module("GlyphApp").directive("multiPreview",
function(){
return {
restrict: 'E',
templateUrl: 'multi-preview.html',
link: function(scope, element, attrs){
}
};
}
);
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Glyph Viewer</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Sort Order <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-click="setSort('Alpha Numeric')" ng-class="{'active':sortBy == 'Alpha Numeric'}"><a>Alpha Numeric</a></li>
<li ng-click="setSort('Most Liked')" ng-class="{'active':sortBy == 'Most Liked'}"><a>Most Liked</a></li>
<li ng-click="setSort('Most Recent')" ng-class="{'active':sortBy == 'Most Recent'}"><a>Most Recent</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-click="setAbout('plunk')" ng-class="{'active':about == 'plunk'}"><a>About This Plunk</a></li>
<li ng-click="setAbout('Marty')" ng-class="{'active':about == 'Marty'}"><a>About Marty</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input
ng-model="filter"
type="text"
class="form-control"
placeholder="Filter">
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li><modal-button></modal-button></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<h4>Bootstrap 3 </h4>
<div class="container-fluid">
<div class="row bg-success row-title">
<div class="col-md-12">
<span class="small">SORT BY: {{sortBy}}</span>
<div class="pull-right">
<span ng-click="gridLayout = 'largeIcons'" class="glyphicon glyphicon-th-large viewListType"></span>
<span ng-click="gridLayout = 'smallIcons'" class="glyphicon glyphicon-th viewListType"></span>
<span ng-click="gridLayout = 'rowIcons'" class="glyphicon glyphicon-th-list viewListType"></span>
</div>
</div>
</div>
</div>
<div class="panel panel-default {{gridLayout}}" ng-if="gridLayout == 'largeIcons'">
<div ng-repeat="glyph in glyphs">
<div class="grids">
<span class="glyphicon glyphicon-{{glyph.tag}}"></span><br>
<span class="tagName">{{glyph.tag}}</span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="panel panel-default {{gridLayout}}" ng-if="gridLayout == 'smallIcons'">
<div ng-repeat="glyph in glyphs">
<div class="grids">
<span class="glyphicon glyphicon-{{glyph.tag}}"></span>
</div>
</div>
<div class="clearfix"></div>
</div>
<div ng-if="gridLayout == 'rowIcons'">
<table class="table table-bordered">
<tr>
<th>Icon</th>
<th>Tag</th>
<th>Like</th>
<th>Likes</th>
<th>Delete</th>
</tr>
<tr ng-repeat="glyph in glyphs | orderBy:sortByValue | filter:filter">
<td class="grids">
<span class="table-glyph glyphicon glyphicon-{{glyph.tag}}"></span>
</td>
<td>{{glyph.tag}}</td>
<td>
<span
ng-click='incrementLikes(glyph)'
class="action like glyphicon glyphicon-thumbs-up"
title="click it real good"></span>
</td>
<td>{{glyph.count}}</td>
<td>
<span ng-click="glyphs.$remove(glyph)" class="action text-danger glyphicon glyphicon-trash"></span>
<span style="display:none">({{glyph.timestamp}})</span>
</td>
</tr>
</table>
</div>
</div>
<div id="addModal" class="modal fade addModal" role="dialog">
<ul class="nav nav-tabs">
<li ng-click="setEntryMode('single')" role="presentation" ng-class="{'active':entryMode=='single'}"><a >Single</a></li>
<li ng-click="setEntryMode('multi')" role="presentation" ng-class="{'active':entryMode=='multi'}"><a >Multi</a></li>
</ul>
<div class="well" ng-show="entryMode=='single'">
<div class="status">{{status}}</div>
<div class="form-group">
<label for="glyph">Glyph Name:</label>
<input ng-model="inputGlyph" type="text" class="form-control" id="glyph">
{{inputGlyph}}
</div>
<div class="form-group">
<label for="preview">Preview: </label>
<span class='glyphicon glyphicon-{{inputGlyph}}'></span>
</div>
<div class="form-group">
<span ng-click="addNewGlyph()" class="btn btn-success btn-sm">add</span>
<span data-dismiss="modal" class="btn btn-success btn-sm">close</span>
</div>
</div>
<div class="well" ng-hide="entryMode=='single'">
<div class="form-group" ng-hide="uploading">
<label for="multi-entry">Paste Space Delimited Icons</label>
<textarea ng-model="multi" class="multi-entry"></textarea>
<label for="preview">Preview: </label>
</div>
<div class="form-group" ng-hide="uploading">
<multi-preview></multi-preview>
</div>
<div class="form-group" ng-hide="uploading">
<span ng-show="uploadList.length === 0" ng-click="preview()" class="btn btn-success btn-sm">preview</span>
<span ng-hide="uploadList.length === 0" ng-click="addGlyphs()" class="btn btn-success btn-sm">add</span>
<span ng-hide="uploadList.length === 0" class='btn btn-success btn-sm' ng-click="reset()">reset</span>
<span data-dismiss="modal" class="btn btn-success btn-sm">close</span>
</div>
<div class="form-group" ng-show="uploading">
<table class="table table-bordered">
<tr>
<th>Glyph Code</th>
<th>Status</th>
</tr>
<tr ng-repeat="glyph in uploadList">
<td>{{glyph.tag}}</td>
<td>
<span ng-if="glyph.status == 0">Waiting</span>
<span ng-if="glyph.status == 1">Uploaded</span>
<span ng-if="glyph.status == 2">Duplicate</span>
</td>
</tr>
</table>
<div class='multi-note' ng-hide="notes === ''">
Upload process complete...<br>
{{uploadList.length}} icons processed.<br>
{{failCount}} were not uploaded.<br>
{{successCount}} were uploaded.<br>
<span class='btn btn-success' ng-click="reset()">reset</span>
</div>
</div>
</div>
</div>
<a data-toggle="modal" data-target="#addModal">Add A Glyph</a>
<div class="container-fluid">
<p>
This plunk is where I try out ideas for my Glyph View site at
<a href='http://www.glyphviewer.peachyga.com/#/glyph'>http://www.glyphviewer.peachyga.com/#/glyph</a>.
</p>
<p>
The purpose of the Glyph Viewer is to make it easier to find Glyphs.
</p>
<p>
Many times I am working with clients and we get frustrated whenever we
dig through all of the Glyphs.
</p>
<p>
Hopefully the Glyph Viewer will help me and others find the perfect glyphs
in the future.
</p>
</div>
<div class="container-fluid">
<p>I am a UI Developer in the Metro Atlanta area.</p>
<p>My name is Marty Trujillo and I enjoy programming computers.</p>
<p>
Here is a link to my <a href='https://www.linkedin.com/in/marty-trujillo-118b4731'>Linked In Profile</a>.
If you're into coding and have a linked in account I'd love to add you as a connection.
</p>
</div>
<div class="multi-preview">
<span ng-repeat="glyph in multiList" class="glyphicon glyphicon-{{glyph}}"></span>
</div>