Angular Pen Embed

Developer
Don Page
Size
6,108 Kb
Views
42,504
  1. Angular Pen Embed Previews
  2. Angular Pen Embed HTML Codes
  3. Angular Pen Embed CSS Codes
  4. Angular Pen Embed JS Codes

How do I make an angular pen embed?

Using Angular and Codepen's embeding, you can save any codepen to this codepen... It sounded awesome in my head.. What is a angular pen embed? How do you make a angular pen embed? This script and codes were developed by Don Page on 18 July 2022, Monday.

Angular Pen Embed Previews
IQ Test

Angular Pen Embed - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angular Pen Embed</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body ng-app="PenEmbed" ng-controller="embedController">
<header> <h1>Personal EmbedPen Storage</h1> <p>Using Angular and Codepen's embeding, you can save any codepen to this codepen... It sounded awesome in my head. </p> <span>Saving will be in LocalStorage.</span>
</header>
<div class="content-wrapper"> <div class="pens-wrapper"> <div ng-switch on="(editIndex == $index)" ng-repeat="pen in penArray track by $index" class="embed-pen"> <!-- DEFAULT FIELD --> <div ng-switch-default> <p data-height="{{pen.height}}" data-theme-id="0" data-slug-hash="{{pen.hash}}" data-default-tab="{{pen.tab}}" class='codepen'> <!--See the Pen <a href='{{pen.url}}'>{{pen.title}}</a> by {{pen.author}} (<a href='http://codepen.io/DonPage'>@DonPage</a>) on <a href='http://codepen.io'>CodePen</a>.--> </p> <script async ng-src="http://codepen.io/assets/embed/ei.js"></script> <!-- NEEDS TO BE ng-src instead of src --> </div> <!-- EDIT FIELD --> <div ng-switch-when="true" class="edit-fields" ng-style="height: {{pen.height - 14}}"> <div class="inputs-wrapper"> <label for="penLink">Pen Link: </label> <input ng-model="editPenObj.url" id="penLink" type="text" placeholder="URL"/> <!-- Going to try to extract the hash from URL input --> <!--<label for="penHash">Pen Hash: </label>--> <!--<input id="penHash" type="text" placeholder="/hAsH/"/>--> <label for="penHeight">Height: </label> <input ng-model="editPenObj.height" id="penHeight" type="text" placeholder="default 300"/> </div> <div class="inputs-wrapper"> <label for="penTitle">Pen Title: </label> <input ng-model="editPenObj.title" id="penTitle" type="text" placeholder="pen title"/> <label for="penAuthor">Pen Author: </label> <input ng-model="editPenObj.author" id="penAuthor" type="text" placeholder="pen Author"/> </div> <div class="inputs-wrapper"> <label for="tab">Default Tab:</label> <input ng-model="editPenObj.tab" id="tab" type="text"/> </div> </div> <!-- DEFAULT PANEL --> <div ng-switch-default class="default-info-wrapper clearfix"> <h3 class="title">{{pen.title}} by {{pen.author}}</h3> <div class="btn-wrapper"> <button class="edit-btn" ng-click="editMode($index)"> </button> <button class="trash-btn" ng-click="trash($index)"> </button> </div> </div> <!-- EDIT PANEL --> <div ng-switch-when="true" class="edit-info-wrapper"> <h3 class="title">EDIT MODE</h3> <div class="btn-wrapper"> <button ng-click="saveEdit($index)" class="save-edit"> </button> <button ng-click="cancelEdit()" class="cancel-edit"> </button> </div> </div> </div> <form ng-submit="addnewPen()" class="newPenFields"> <div class="inputs-wrapper"> <label for="newpenLink">Pen Link: </label> <input ng-model="newpenLink" id="newpenLink" type="text" placeholder="URL"/> <label for="newpenHeight">Height: </label> <input ng-model="newpenHeight" id="newpenHeight" type="text" placeholder="default 300"/> </div> <div class="inputs-wrapper"> <label for="newpenTitle">Pen Title: </label> <input ng-model="newpenTitle" id="newpenTitle" type="text" placeholder="pen title"/> <label for="newpenAuthor">Pen Author: </label> <input ng-model="newpenAuthor" id="newpenAuthor" type="text" placeholder="pen Author"/> </div> <div class="inputs-wrapper"> <label for="newtab">Default Tab:</label> <input ng-model="newtab" id="newtab" type="text"/> </div> <button type="submit">Add Pen</button> </form> </div>
</div>
</body> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Angular Pen Embed - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Orbitron:400,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
/* #RESETS/Clear */
* { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; list-style-type: none; text-decoration: none;
}
.clearfix:before, .clearfix:after { content: " "; display: table;
}
.clearfix:after { clear: both;
}
/* **************************** */
body { width: 100%; height: 100%; background-color: #3e454d; line-height: 1.5;
}
header { margin-top: 50px; text-align: center; color: #eee;
}
header h1 { font-family: 'Orbitron', sans-serif; font-weight: 700; border-bottom: 1px solid #76daff; width: auto; padding-bottom: 10px;
}
header p { padding-top: 10px; font-family: 'Open Sans', sans-serif; font-weight: 600;
}
header span { font-family: 'Open Sans', sans-serif; font-weight: 400; font-size: 11px;
}
.content-wrapper { width: 920px; height: auto; margin: 50px auto; padding: 0 10px;
}
.embed-pen { -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.41); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.41); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.41); margin: 39px 0; background-color: #3d3d3e; color: #76daff; font-family: 'Open Sans', HelveticaNeue-Light, Helvetica, Arial, sans-serif; font-weight: 300; font-size: 13px;
}
.embed-pen .default-info-wrapper, .embed-pen .edit-info-wrapper { height: 35px; padding: 5px 16px;
}
.embed-pen .default-info-wrapper .title, .embed-pen .edit-info-wrapper .title { float: left; line-height: 2.5;
}
.embed-pen .default-info-wrapper .btn-wrapper, .embed-pen .edit-info-wrapper .btn-wrapper { float: right;
}
.embed-pen .default-info-wrapper .btn-wrapper button, .embed-pen .edit-info-wrapper .btn-wrapper button { text-indent: -9999; cursor: pointer;
}
.embed-pen .default-info-wrapper .btn-wrapper button.edit-btn, .embed-pen .edit-info-wrapper .btn-wrapper button.edit-btn { background: url("http://i.imgur.com/k7meUMM.png"); width: 46px; height: 33px;
}
.embed-pen .default-info-wrapper .btn-wrapper button.save-edit, .embed-pen .edit-info-wrapper .btn-wrapper button.save-edit { background: url("http://i.imgur.com/buardpu.png"); width: 36px; height: 31px;
}
.embed-pen .default-info-wrapper .btn-wrapper button.cancel-edit, .embed-pen .edit-info-wrapper .btn-wrapper button.cancel-edit { background: url("http://i.imgur.com/7ejKZ0q.png"); width: 30px; height: 30px;
}
.embed-pen .default-info-wrapper .btn-wrapper button.trash-btn, .embed-pen .edit-info-wrapper .btn-wrapper button.trash-btn { background: url("http://i.imgur.com/qzZ6P8U.png") center no-repeat; width: 46px; height: 33px;
}
.embed-pen .edit-fields { width: 100%; border-top: 34px solid #3d3d3e; background-color: #EEE;
}
label { color: #757575; display: inline; font-size: 18px; font-weight: normal; left: 5px; top: 10px;
}
input { font-size: 18px; padding: 10px 10px 10px 5px; display: inline; width: 300px; border: none; border-bottom: 1px solid #757575;
}
input:focus { outline: none;
}
#penHash, #penHeight { width: 150px;
}
.inputs-wrapper { padding: 20px 13px;
}
.newPenFields { -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.41); -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.41); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.41); background: #eee; border-top: 34px solid #3d3d3e;
}
.newPenFields button { font-family: 'Open Sans', HelveticaNeue-Light, Helvetica, Arial, sans-serif; font-size: 18px; color: #76daff; width: 100%; height: 35px; background-color: #3d3d3e;
}
.newPenFields button:hover { cursor: pointer; background-color: #5c5c5d;
}

Angular Pen Embed - Script Codes JS Codes

/*
@DonRPage
*I will be trying to add restrictions to the input fields later.
*Fixed Deleting pens.
*/
angular.module("PenEmbed", []) .controller("embedController", function($scope, embedService){ $scope.editIndex = -1; $scope.editPenObj = { url: "", hash: "", height: "", author: "", title: "", tab: "" }; $scope.penArray = embedService.getPenArray(); $scope.editMode = function(index){ $scope.editIndex = index; $scope.editPenObj = angular.copy($scope.penArray[index]); genHash($scope.editPenObj.url); }; $scope.saveEdit = function(penIdx){ genHash($scope.editPenObj.url); embedService.updatePen(penIdx, $scope.editPenObj); $scope.editIndex = -1; }; $scope.cancelEdit = function(){ $scope.editIndex = -1; }; $scope.addnewPen = function(){ console.log('adding new pen'); var newHash = genHash($scope.newpenLink); embedService.addingPen($scope.newpenLink, $scope.newpenHeight, $scope.newpenTitle, $scope.newpenAuthor, $scope.newtab, $scope.editPenObj.hash) }; $scope.trash = function(idx){ embedService.trashing(idx); }; function genHash(url){ var arrayHash = url.split("/"); var indexOfPen = arrayHash.indexOf("pen"); $scope.editPenObj.hash = arrayHash[indexOfPen + 1]; //addnewPen and editPen using the same 'save' field but shouldn't cause a problem since you can only do one at a time. } });
angular.module("PenEmbed") .service("embedService", function(){ var penArray = [ { url: "http://codepen.io/DonPage/pen/HCjem/", hash: "HCjem", height: "257", author: "Don Page", title: "Off Canvas Nav", tab: "result" } ]; var shadowArray = false; /* Shadow array is the needed fail safe when deleting pens. Before, for some odd reason, when you delete a pen it would splice the right item out of the array but it wouldn't coordinate to the view. Ex: deleting penArray[1] would splice out penArray[1] but penArray[1] from the DOM would still show while penArray[2] would not... Even though the array was handle correctly. */ this.getPenArray = function(){ var LSsave = localStorage.getItem("EmbedPens"); penArray = JSON.parse(LSsave) || penArray; return penArray; }; this.updatePen = function(idx, edited){ penArray.splice(idx, 1, edited); saveLS() }; this.addingPen = function(link, height, title, author, tab, nhash){ penArray.push({url: link, hash: nhash, height: height, author: author, title: title, tab: tab}); saveLS() }; this.trashing = function(index){ var penDiv = document.querySelectorAll('.embed-pen'); penDiv[index].style.display = "none"; shadowArray = angular.copy(penArray); shadowArray.splice(index, 1); saveLS(); }; function saveLS(){ if (shadowArray != false || shadowArray.length == 0){ penArray = shadowArray; shadowArray = false; } var ArrayStringy = JSON.stringify(penArray); localStorage.setItem("EmbedPens", ArrayStringy); } });
Angular Pen Embed - Script Codes
Angular Pen Embed - Script Codes
Home Page Home
Developer Don Page
Username DonPage
Uploaded July 18, 2022
Rating 3
Size 6,108 Kb
Views 42,504
Do you need developer help for Angular Pen Embed?

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!

Don Page (DonPage) Script Codes
Name
Typescript Variables
A Different Type of Gallery
Edit Profile with Angular
Off Canvas Nav
A Pen by Don Page
HTML5 SVG Animations
Ember Basics
WordBreaks
FadeIn
Social Media Elements
Create amazing art & images 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!