Skip to content

Bootstrap Compatibility #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ajhalls wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Bootstrap Compatibility #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 8 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,20 @@ At the same time animate opacity to 0 over 4s.

### 2. Timeline GUI

Check the example page at "/examples/cssAnimationEditor.html.

<script type="text/javascript" src="timeline/gui.js"></script>

anim(targetName, target).to(delay, {property:value,...}, duration, easing);

Adding gui.js script to the page will open a timeline panel on the
bottom of the page if any animation was added before first frame. One
track for every animated property will be created. Click and drag to
Adding the gui.js script to the page will open a timeline panel to a div
defined in the timeline-gui.js as 'timelineTarget' if any animation
was added before first frame.

One track for every animated property will be created. Click and drag to
edit key frames, double click to add new frames. Press export button
(tree horizontal lines) to export code you can then copy paste in
your scrip .
your script.

In this case we have to specify targetName in anim() that will be
used when we export the code from the timeline GUI. For each property
Expand All @@ -66,18 +70,3 @@ all to() calls modifying this property are ignored.
Add the rect object and it's x and y properties to animation and use
their default values. Target name should be always exactly the same as
variable name.

### 3. Node.js

First install the `timeline-js` package from npm

npm install timeline-js

And then

var timeline = require('timeline-js');
var Timeline = timeline.Timeline;
var anim = timeline.anim;

anim(target).to(delay, {property:value,...}, duration, easing);

58 changes: 46 additions & 12 deletions examples/cssAnimation.html → examples/cssAnimationEditor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,50 @@
#canvas {
margin-left: 1em;
}

.title {
text-align: center;
}
.keyframes {
position: absolute;
top:300px;
}
.explanation {
position: absolute;
top:310px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>
<body>
<h1 class="title">Timeline.js - CSS rectangles</h1>
<button type="button" class="btn btn-primary btn-sm clearLocalStorage">Clear LocalStorage</button>
<button type="button" class="btn btn-primary btn-sm timelineFullWidth">Make Full Width</button>
<button type="button" class="btn btn-primary btn-sm timelinePartialWidth">Make Partial Width</button>
<BR>

<div id="rect0"></div>
<div id="rect1"></div>
<div id="rect2"></div>
<div id="rect3"></div>

<div class="keyframes col-sm-8"></div>
<div class="explanation col-sm-8">
This has been updated to support implementing the timeline into a bootstrap layout. If your mouse isn't properly selecting the keyframes, you may need to adjust the xOffset. During initial development it seemed to work great in Firefox, but need to be set at 0 for Chrome. The JSON Editor to the right populates each time you drag loading info from LocalStorage.
<BR><BR>
There is still plenty to do to integrate it into my project, but this is a great starting point for someone that wants a timeline that isn't fixed to the bottom / full width.
</div>
<div id="jsonresults" class="jsonresults" style="z-index:5000"></div>

</body>
<link rel="stylesheet" href="../extras/jsoneditor/jsoneditor.min.css">

<script type="text/javascript" src="../extras/jsoneditor/jsoneditor.min.js"></script>
<script type="text/javascript" src="../src/timeline.js"></script>
<script type="text/javascript" src="../src/timeline-gui.js"></script>
<script type="text/javascript" src="js/RequestAnimationFrame.js"></script>
Expand Down Expand Up @@ -79,14 +120,7 @@
}

window.onload = init;

</script>
</head>
<body>
<h1>Timeline.js - CSS rectangles</h1>
<div id="rect0"></div>
<div id="rect1"></div>
<div id="rect2"></div>
<div id="rect3"></div>
</body>
</html>
var container = document.getElementById("jsonresults");
var editor = new JSONEditor(container);
editor.set(jsonStorage);
</script></html>
244 changes: 244 additions & 0 deletions extras/jsoneditor/contextmenu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,244 @@

/* ContextMenu - main menu */

div.jsoneditor-contextmenu-root {
position: relative;
width: 0;
height: 0;
}

div.jsoneditor-contextmenu {
position: absolute;
box-sizing: content-box;
z-index: 99999;
}

div.jsoneditor-contextmenu ul,
div.jsoneditor-contextmenu li {
box-sizing: content-box;
}

div.jsoneditor-contextmenu ul {
position: relative;
left: 0;
top: 0;
width: 124px;

background: white;
border: 1px solid #d3d3d3;
box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);

list-style: none;
margin: 0;
padding: 0;
}

div.jsoneditor-contextmenu ul li button {
padding: 0;
margin: 0;
width: 124px;
height: 24px;
border: none;
cursor: pointer;
color: #4d4d4d;
background: transparent;

font-size: 10pt;
font-family: arial, sans-serif;

box-sizing: border-box;

line-height: 26px;
text-align: left;
}

/* Fix button padding in firefox */
div.jsoneditor-contextmenu ul li button::-moz-focus-inner {
padding: 0;
border: 0;
}

div.jsoneditor-contextmenu ul li button:hover,
div.jsoneditor-contextmenu ul li button:focus {
color: #1a1a1a;
background-color: #f5f5f5;
outline: none;
}

div.jsoneditor-contextmenu ul li button.jsoneditor-default {
width: 92px;
}

div.jsoneditor-contextmenu ul li button.jsoneditor-expand {
float: right;
width: 32px;
height: 24px;
border-left: 1px solid #e5e5e5;
}

div.jsoneditor-contextmenu div.jsoneditor-icon {
float: left;
width: 24px;
height: 24px;
border: none;
padding: 0;
margin: 0;
background-image: url('img/jsoneditor-icons.svg');
}

div.jsoneditor-contextmenu ul li button div.jsoneditor-expand {
float: right;
width: 24px;
height: 24px;
padding: 0;
margin: 0 4px 0 0;
background: url('img/jsoneditor-icons.svg') 0 -72px;
opacity: 0.4;
}

div.jsoneditor-contextmenu ul li button:hover div.jsoneditor-expand,
div.jsoneditor-contextmenu ul li button:focus div.jsoneditor-expand,
div.jsoneditor-contextmenu ul li.jsoneditor-selected div.jsoneditor-expand,
div.jsoneditor-contextmenu ul li button.jsoneditor-expand:hover div.jsoneditor-expand,
div.jsoneditor-contextmenu ul li button.jsoneditor-expand:focus div.jsoneditor-expand {
opacity: 1;
}

div.jsoneditor-contextmenu div.jsoneditor-separator {
height: 0;
border-top: 1px solid #e5e5e5;
padding-top: 5px;
margin-top: 5px;
}

div.jsoneditor-contextmenu button.jsoneditor-remove > div.jsoneditor-icon {
background-position: -24px -24px;
}
div.jsoneditor-contextmenu button.jsoneditor-remove:hover > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-remove:focus > div.jsoneditor-icon {
background-position: -24px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-append > div.jsoneditor-icon {
background-position: 0 -24px;
}
div.jsoneditor-contextmenu button.jsoneditor-append:hover > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-append:focus > div.jsoneditor-icon {
background-position: 0 0;
}

div.jsoneditor-contextmenu button.jsoneditor-insert > div.jsoneditor-icon {
background-position: 0 -24px;
}
div.jsoneditor-contextmenu button.jsoneditor-insert:hover > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-insert:focus > div.jsoneditor-icon {
background-position: 0 0;
}

div.jsoneditor-contextmenu button.jsoneditor-duplicate > div.jsoneditor-icon {
background-position: -48px -24px;
}
div.jsoneditor-contextmenu button.jsoneditor-duplicate:hover > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-duplicate:focus > div.jsoneditor-icon {
background-position: -48px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-sort-asc > div.jsoneditor-icon {
background-position: -168px -24px;
}
div.jsoneditor-contextmenu button.jsoneditor-sort-asc:hover > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-sort-asc:focus > div.jsoneditor-icon {
background-position: -168px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-sort-desc > div.jsoneditor-icon {
background-position: -192px -24px;
}
div.jsoneditor-contextmenu button.jsoneditor-sort-desc:hover > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-sort-desc:focus > div.jsoneditor-icon {
background-position: -192px 0;
}

/* ContextMenu - sub menu */

div.jsoneditor-contextmenu ul li button.jsoneditor-selected,
div.jsoneditor-contextmenu ul li button.jsoneditor-selected:hover,
div.jsoneditor-contextmenu ul li button.jsoneditor-selected:focus {
color: white;
background-color: #ee422e;
}

div.jsoneditor-contextmenu ul li {
overflow: hidden;
}

div.jsoneditor-contextmenu ul li ul {
display: none;
position: relative;
left: -10px;
top: 0;

border: none;
box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.5);
padding: 0 10px;

/* TODO: transition is not supported on IE8-9 */
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

div.jsoneditor-contextmenu ul li.jsoneditor-selected ul {
}

div.jsoneditor-contextmenu ul li ul li button {
padding-left: 24px;
animation: all ease-in-out 1s;
}

div.jsoneditor-contextmenu ul li ul li button:hover,
div.jsoneditor-contextmenu ul li ul li button:focus {
background-color: #f5f5f5;
}

div.jsoneditor-contextmenu button.jsoneditor-type-string > div.jsoneditor-icon {
background-position: -144px -24px;
}
div.jsoneditor-contextmenu button.jsoneditor-type-string:hover > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-string:focus > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-string.jsoneditor-selected > div.jsoneditor-icon{
background-position: -144px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-type-auto > div.jsoneditor-icon {
background-position: -120px -24px;
}
div.jsoneditor-contextmenu button.jsoneditor-type-auto:hover > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-auto:focus > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-auto.jsoneditor-selected > div.jsoneditor-icon {
background-position: -120px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-type-object > div.jsoneditor-icon {
background-position: -72px -24px;
}
div.jsoneditor-contextmenu button.jsoneditor-type-object:hover > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-object:focus > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-object.jsoneditor-selected > div.jsoneditor-icon{
background-position: -72px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-type-array > div.jsoneditor-icon {
background-position: -96px -24px;
}
div.jsoneditor-contextmenu button.jsoneditor-type-array:hover > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-array:focus > div.jsoneditor-icon,
div.jsoneditor-contextmenu button.jsoneditor-type-array.jsoneditor-selected > div.jsoneditor-icon{
background-position: -96px 0;
}

div.jsoneditor-contextmenu button.jsoneditor-type-modes > div.jsoneditor-icon {
background-image: none;
width: 6px;
}
Binary file added extras/jsoneditor/img/jsoneditor-icons.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading