A Pen by Roy

Developer
Roy
Size
4,921 Kb
Views
12,144
  1. A Pen by Roy Previews
  2. A Pen by Roy HTML Codes
  3. A Pen by Roy CSS Codes
  4. A Pen by Roy JS Codes

How do I make an a pen by roy?

What is a a pen by roy? How do you make a a pen by roy? This script and codes were developed by Roy on 15 November 2022, Tuesday.

A Pen by Roy Previews
IQ Test

A Pen by Roy - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Roy</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <ul id="leftNav" class="nav navbar-nav navbar-left"> <li class="active"> <button class="btn btn-link navbar-btn" href="#html" data-toggle="tab"> <span class="glyphicon glyphicon-th-list"></span> <span class="tab-text">HTML Script<span> </button> </li> <li> <a href="#init" data-toggle="tab"> <span class="glyphicon glyphicon-off"></span> <span class="tab-text">Init Script<span> </a> </li> <li> <a href="#draw" data-toggle="tab"> <span class="glyphicon glyphicon-pencil"></span> <span class="tab-text">Draw Script<span> </a> </li> <li> <a href="#data" data-toggle="tab"> <span class="glyphicon glyphicon-file"></span> <span class="tab-text">Data</span> </a> </li> <li> <a href="#meta-data" data-toggle="tab"> <span class="glyphicon glyphicon-info-sign"></span> <span class="tab-text">Meta Data<span> </a> </li> <li> <a href="#help" data-toggle="tab"> <span class="glyphicon glyphicon-question-sign"></span> <span class="tab-text">Help</span> </a> </li> </ul> <button type="button" id="okBtn" class="btn btn-default navbar-btn navbar-right"> OK </button> </div>
</nav>
<div class="tab-content"> <div class="tab-pane container active" id="html"> <div class="col-xs-12"> <h4>HTML Script</h4> <p> In this editor you can write your arbitrary HTML content, which will be inserted in to the component output at runtime. This HTML will be added to the DOM prior to your init and draw scripts so it is safe to reference from those scripts. </p> </div> <div class="col-xs-12"> <pre id="htmlScript" class="code" data-mode="ace/mode/html" data-readonly="false"></pre> </div> </div> <div class="tab-pane" id="init"> <h4>Init Script</h4> <p> In this editor you can write your initialization javascript function. This function will fire once the component is loaded and can manipulate the html in your HTML Script. This happens before any data is passed to the component. </p> <p> The inputs to your init script are the following. <button id="initHelpToggle" class="btn btn-default btn-xs helpToggle">...</button> </p> <table id="initHelpTable" class="parameter-table parameter-table-collapse"> <tr><th>self&nbsp;:</th><td>A pointer back to the component exposing design studio standard functions. self.$() provides JQuery access to the main component Div</td></tr> <tr><th>options&nbsp;:</th><td>A generic options string allowing you to pass in data from the rest of the dashboard. If you want to pass in a complex structure as JSON, it's up to you to use JSON.parse() to convert it back into an object</td></tr> <tr><th>(Return&nbsp;Value)&nbsp;:</th><td>You can return an Object from your function containing any arbitrary data you have initialized. It will be passed in as an input to the draw function.</td></tr> </table> <pre id="initScript" class="code" data-mode="ace/mode/javascript" data-readonly="false"></pre> </div> <div class="tab-pane" id="draw"> <h4>Draw Script</h4> <p> In this editor you can write your draw javascript function. This function will fire after every property change or bound data change. </p> <p> The inputs to your draw script are the following. <button id="drawHelpToggle" class="btn btn-default btn-xs helpToggle">...</button> </p> <table id="drawHelpTable" class="parameter-table parameter-table-collapse"> <tr><th>self&nbsp;:</th><td>A pointer back to the component exposing design studio standard functions. self.$() provides JQuery access to the main component Div</td></tr> <tr><th>data&nbsp;:</th><td>A pointer to the simplified data structure. See Data tab for structure.</td></tr> <tr><th>metaData&nbsp;:</th><td>A pointer to the simplified meta data structure. See Meta Data tab for structure.</td></tr> <tr><th>userData&nbsp;:</th><td>A pointer to the object you returned from the initScript. This object is persisted between calls to draw script and can be used to store persistent state between invocations</td></tr> <tr><th>options&nbsp;:</th><td>A generic options string allowing you to pass in data from the rest of the dashboard. If you want to pass in a complex structure as JSON, it's up to you to use JSON.parse() to convert it back into an object</td></tr> </table> <pre id="drawScript" class="code" data-mode="ace/mode/javascript" data-readonly="false"></pre> </div> <div class="tab-pane" id="data"> <h4>Data Structure</h4> <p> The primary data structure passed to your functions is the modified bound data in row format. You can see a sample of your bound data here. </p> <pre id="rowData" class="code" data-mode="ace/mode/json" data-readonly="true"></pre> </div> <div class="tab-pane" id="meta-data"> <h4>Meta Data Structure</h4> <p> The second most important data structure passed to your functions is the modified meta data also best demonstrated with an example. </p> <pre id="metaData" class="code" data-mode="ace/mode/json" data-readonly="true"></pre> </div> <div class="tab-pane" id="help"> <h4>Help</h4> <p> There is one property of this component that allows you to inject static HTML into the rendering process. Your HTML will be added to the DOM model prior to the invocation of any custom scripts you write. Therefore you can rely on your html being present and accessible via JQuery selectors in your scripts. </p> <p> There are two properties of this component that allow you to inject dynamic logic into the rendering of the component, (Init Script and Draw Script). </p> <p> Init Script is called once when the component starts up. You can return any data structure from this function and it will be passed to the draw script allowing you to maintain state. The init script does not receive any information about bound data. It should only concern itself with static initializations that will be the same regardless of the structure of any bound data. I.E. Headings, borders, paddings, but nothing pertaining to the data. </p> <p> The Draw Script is called every time the components properties are refreshed, i.e. any time the bound data changes or any time one of it's other properties are manipulated at design or runtime. All of your logic that renders the data should take place here. </p> <p> Your scripts need to be valid Javascript in order to work. If your scripts cause any errors they will be stopped and an error will draw. </p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/ace.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.2/ext-language_tools.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Roy - Script Codes CSS Codes

body { padding-top: 50px;
}
/*#okBtn { position: absolute!important; top:0px; right:0px; margin-right:10px;
}*/
/** Turn off Responsive Navbar, we don't want collapse feature **/
.navbar { max-height:50px; border-radius:0px !important;
}
.navbar-collapse.collapse {
display: inline-block!important;
}
.navbar-nav>li, .navbar-nav { float: left!important; display:inline-block; height: 50px !important;
}
.navbar-nav>li>a { padding-top: 15px !important; padding-bottom: 15px !important; line-height: 20px;
}
.navbar-nav { margin: 0px !important;
}
.navbar-left, .navbar-right, .navbar{ white-space: nowrap; overflow:hidden;
}
/** End Navbar collapse reset **/
/** Ace Editor CSS **/
.code { /*position:absolute!important;*/ margin-top: 10px; /*top:165px; left:15px; bottom:15px; right:15px;*/ width: 100%; height: 500px; border-radius:5px;
}
.code-collapse { /*top:385px;*/
}
.parameter-table-collapse { display:none;
}
.parameter-table th{ vertical-align: text-top; text-align:right;
}
.parameter-table { border-spacing: 0px 5px; border-collapse: separate;
}
.parameter-table td { padding-left: 1rem;
}
.tab-pane > p, .tab-pane > table { /*max-width: 768px;*/
}
@media (max-width: 755px) { .tab-text { display: none; } .tab-pane > p, .tab-pane > table { /* min-width: 725px;*/ }
}

A Pen by Roy - Script Codes JS Codes

var editors = [];
jQuery(document).ready(function() { // Declare a function to perform Save Logic var ctrlSCmd = function() { alert('save state here'); }; // Setup Tab Handling Logic // $("#leftNav *[data-toggle*='tab']").on("click",function() { // // Inside the event handler "this" refers to the element clicked // // Which in our case is the "a" element // var tab = $(this); // $(tab.attr("href")) // .add(tab.parents("li")) // .addClass("active") // .siblings().removeClass("active"); // }); $("#okBtn").on("click",ctrlSCmd); $(".helpToggle").on("click",function() { var target = $(this); var parent = target.parent().parent(); target.toggleClass("active"); // change button state for toggle parent.find("table").toggleClass("parameter-table-collapse"); // collapse the table parent.find("pre").toggleClass("code-collapse"); // Position editor correctly }); // Setup ACE Editors ace.require("ace/ext/language_tools"); var editorTargets = $(".code"); editorTargets.each(function(index){ var editor = ace.edit(this.id); var editorElement = $(this); editor.setTheme("ace/theme/cobalt"); editor.getSession().setMode(editorElement.attr("data-mode")); editor.setReadOnly(editorElement.attr("data-readonly") == "true"); editor.setOptions({ minLines: 20, maxLines: 5000, enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true }); //add the ability to save (Hit the okay button) within the editor editor.commands.addCommand({ name: 'save', bindKey: {win: 'Ctrl-S', mac: 'Command-S'}, exec: ctrlSCmd, readOnly: false //False means readonly text areas can't use this command }) editors.push[editor]; });
});
A Pen by Roy - Script Codes
A Pen by Roy - Script Codes
Home Page Home
Developer Roy
Username roygwells
Uploaded November 15, 2022
Rating 3
Size 4,921 Kb
Views 12,144
Do you need developer help for A Pen by Roy?

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!

Roy (roygwells) Script Codes
Name
D3 Gauge
Gradients
Scoping Test
Accordion Dropdown
Coordinate Systems
Guage
Modular Guage
Sample Data
A Pen by Roy
SVG Path Experiments
Create amazing SEO content 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!