Skip to content

Commit

Permalink
Added more UI for the story editor.
Browse files Browse the repository at this point in the history
  • Loading branch information
@yenchiah
yenchiah committed Aug 6, 2018
1 parent e4b8407 commit 6fbf418
Show file tree
Hide file tree
Showing 6 changed files with 217 additions and 59 deletions.
Binary file added css/fonts/Exo2-BoldItalic.woff
View file
Binary file not shown.
91 changes: 72 additions & 19 deletions examples/webgl-timemachine/StoryEditor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
right: 0;
bottom: auto;
width: auto;
height: 50px;
height: 49px;
border-bottom: 1px solid black;
background-color: #555960;
}

Expand All @@ -38,7 +39,8 @@
bottom: 0;
width: auto;
height: auto;
margin: 10px 25px 5px 25px;
margin: 0;
padding: 10px 25px 20px 25px;
}

.story-editor-content p {
Expand All @@ -48,6 +50,33 @@
margin-bottom: 10px;
}

.story-editor-nav {
position: absolute;
top: auto;
left: 0;
right: 0;
bottom: 0;
width: auto;
height: 119px;
border-top: 1px solid black;
margin: 0;
padding: 10px 25px 0 25px;
background-color: #dddddd;
}

.story-editor-action {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 130px;
width: auto;
height: auto;
margin: 0;
padding: 10px 25px 20px 25px;
overflow-y: scroll;
}

.custom-button {
padding: 12px 25px;
text-align: center;
Expand Down Expand Up @@ -99,34 +128,38 @@
background-color: #4d4d4d;
}

.story-editor-create-button {
margin-bottom: 25px;
.custom-button-danger {
color: white;
background-color: #dc3545;
}

.story-editor-metadata {
display: none;
.custom-button-danger:hover {
background-color: #a71120;
}

.custom-button-danger:active {
background-color: #a71120;
}

.story-editor-load {
.hide {
display: none;
}

.story-editor-nav-buttons {
text-align: center;
.story-editor-buttons {
display: flex;
justify-content: space-between;
}

.story-editor-left-button {
.story-editor-back-button {
width: 47%;
float: left;
}

.story-editor-right-button {
.story-editor-next-button {
width: 47%;
float: right;
}

.story-editor-center-button {
display: inline-block;
.story-editor-normal-button {
width: 47%;
}

.custom-textbox {
Expand All @@ -139,14 +172,15 @@
border-radius: 2px;
display: block;
width: 100%;
resize: none;
}

.sheet-url-textbox {
margin-bottom: 25px;
.large-textbox {
height: 100px;
}

.theme-textbox {
margin-bottom: 25px;
.add-bottom-margin {
margin-bottom: 15px;
}

.noselect {
Expand All @@ -156,4 +190,23 @@
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}

.highlight-text {
font-family: "Exo2-BoldItalic", sans-serif !important;
color: black;
}

.story-editor-accordion .ui-accordion-header {
font-size: 14px !important;
}

.story-editor-accordion .ui-accordion-header-active {
border: 1px solid #005cbf !important;
background-color: #007bff !important;
color: white !important;
}

.story-editor-accordion .ui-accordion-header-active .ui-icon {
background-image: url(../../images/ui-icons_ffffff_256x240.png) !important;
}
97 changes: 79 additions & 18 deletions examples/webgl-timemachine/StoryEditor.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,91 @@
<link rel="stylesheet" href="index.css">
<div class="story-editor noselect">
<div class="story-editor-head">
<p>Story Editor</p>
</div>
<div class="story-editor-content">
<div class="story-editor-intro">
<p>The story editor is a tool for creating and sharing stories on EarthTime. The created story can be downloaded and imported into the EarthTime viewer.</p>
<div class="custom-button custom-button-primary story-editor-create-button">Create a story from scratch</div>
<p>You can also add and edit stories to a spreadsheet. The edited sheet can be downloaded. A publicly viewable Google spreadsheet link is required.</p>
<div class="custom-button custom-button-primary story-editor-edit-button">Add or edit stories from a sheet</div>
<p>The <span class="highlight-text">story editor</span> is a tool for creating and sharing stories on EarthTime. The created story can be downloaded and imported into the EarthTime viewer.</p>
<div class="custom-button custom-button-primary story-editor-create-button add-bottom-margin">Create a New Story</div>
<p>You can also add and edit stories that were created before. A public link to the stories is required.</p>
<div class="custom-button custom-button-primary story-editor-edit-button">Add or Edit Stories</div>
</div>
<div class="story-editor-load">
<p>Enter the spreadsheet link below to load stories that were created. The link needs to be publicly viewable.</p>
<input type="text" class="sheet-url-textbox custom-textbox" placeholder="https//:">
<p>Click the "Next" button to add or edit stories in the spreadsheet.</p>
<div class="story-editor-nav-buttons">
<div class="custom-button custom-button-secondary story-editor-left-button">Back</div>
<div class="custom-button custom-button-primary story-editor-right-button">Next</div>
<div class="story-editor-theme-metadata hide">
<div class="story-editor-action">
<p>Every story belongs to a theme (e.g., Earth Day 2018). Provide the <span class="highlight-text">theme title</span> for your story:</p>
<input type="text" class="theme-title-textbox custom-textbox add-bottom-margin" maxlength="40" placeholder="theme title (max 40 characters)">
<p>Provide the <span class="highlight-text">description</span> for the theme:</p>
<textarea type="text" class="theme-content-textbox custom-textbox large-textbox add-bottom-margin" maxlength="300" placeholder="theme description (max 300 characters)"></textarea>
</div>
<div class="story-editor-nav">
<p>Click the "Next" button to add a story to this theme.</p>
<div class="story-editor-buttons">
<div class="custom-button custom-button-secondary story-editor-back-button">Back</div>
<div class="custom-button custom-button-primary story-editor-next-button">Next</div>
</div>
</div>
</div>
<div class="story-editor-story-metadata hide">
<div class="story-editor-action">
<p>Provide the <span class="highlight-text">short title</span> for the story:</p>
<input type="text" class="story-short-title-textbox custom-textbox add-bottom-margin" maxlength="20" placeholder="short title (max 20 characters)">
<p>An optional <span class="highlight-text">long title</span> will be displayed on the main page of the story.</p>
<input type="text" class="story-long-title-textbox custom-textbox add-bottom-margin" maxlength="40" placeholder="long title (max 40 characters)">
<p>Provide the <span class="highlight-text">description</span> for the story:</p>
<textarea type="text" class="story-content-textbox custom-textbox large-textbox add-bottom-margin" maxlength="300" placeholder="story description (max 300 characters)"></textarea>
<p>Provide a list of <span class="highlight-text">authors</span> for the story:</p>
<input type="text" class="story-authors-textbox custom-textbox add-bottom-margin" maxlength="300" placeholder="(max 300 characters)">
</div>
<div class="story-editor-nav">
<p>Click the "Next" button to add waypoints to this story.</p>
<div class="story-editor-buttons">
<div class="custom-button custom-button-secondary story-editor-back-button">Back</div>
<div class="custom-button custom-button-primary story-editor-next-button">Next</div>
</div>
</div>
</div>
<div class="story-editor-metadata">
<p>Enter the theme for the story:</p>
<input type="text" class="theme-textbox custom-textbox">
<p>Click the "Next" button to add waypoints and content to the story.</p>
<div class="story-editor-nav-buttons">
<div class="custom-button custom-button-secondary story-editor-left-button">Back</div>
<div class="custom-button custom-button-primary story-editor-right-button">Next</div>
<div class="story-editor-waypoints hide">
<div class="story-editor-action">
<p>Use the following buttons to add a new <span class="highlight-text">waypoint</span> or delete a selected waypoint (an expanded tab).</p>
<div class="story-editor-buttons add-bottom-margin">
<div class="custom-button custom-button-primary story-editor-normal-button">Add</div>
<div class="custom-button custom-button-danger story-editor-normal-button">Delete</div>
</div>
<p>Click on the following tabs to choose and edit waypoints. To reorder waypoints, drag and drop the tabs.</p>
<div class="story-editor-accordion add-bottom-margin">
<div class="story-editor-accordion-tab">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in.</p>
</div>
</div>
<div class="story-editor-accordion-tab">
<h3>Section 2</h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
</div>
</div>
</div>
</div>
<div class="story-editor-nav">
<p>Click the "Save" button to save this story as a spreadsheet.</p>
<div class="story-editor-buttons">
<div class="custom-button custom-button-secondary story-editor-back-button">Back</div>
<div class="custom-button custom-button-primary story-editor-next-button">Save</div>
</div>
</div>
</div>
<div class="story-editor-load hide">
<div class="story-editor-action">
<p>Provide the <span class="highlight-text">public link</span> below to load stories that were created.</p>
<input type="text" class="sheet-url-textbox custom-textbox add-bottom-margin" placeholder="https//:">
</div>
<div class="story-editor-nav">
<p>Click the "Next" button to add or edit stories retrieved from the link.</p>
<div class="story-editor-buttons">
<div class="custom-button custom-button-secondary story-editor-back-button">Back</div>
<div class="custom-button custom-button-primary story-editor-next-button">Next</div>
</div>
</div>
</div>
</div>
Expand Down
83 changes: 61 additions & 22 deletions examples/webgl-timemachine/StoryEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
var on_show_callback = settings["on_show_callback"];
var on_hide_callback = settings["on_hide_callback"];
var $container = $("#" + container_id);
var $editor, $content, $intro, $metadata, $load;
var $intro;
var $theme_metadata, $story_metadata, $waypoints, $load;

////////////////////////////////////////////////////////////////////////////////////////////////////////////
//
Expand All @@ -24,10 +25,11 @@
$.ajax({
dataType: "html",
url: "StoryEditor.html",
success: function(html_template) {
success: function (html_template) {
creatUI(html_template);
//show();
},
error: function() {
error: function () {
console.log("Error reading the story editor html template.");
}
});
Expand All @@ -36,43 +38,80 @@
function creatUI(html_template) {
$container.html(html_template);

// Main UI
$editor = $("#" + container_id + " .story-editor");
$content = $("#" + container_id + " .story-editor-content");

// The introduction
// The introduction page
$intro = $("#" + container_id + " .story-editor-intro");
$("#" + container_id + " .story-editor-create-button").on("click", function() {
transition($intro, $metadata);
$intro.find(".story-editor-create-button").on("click", function () {
transition($intro, $theme_metadata);
});
$("#" + container_id + " .story-editor-edit-button").on("click", function() {
$intro.find(".story-editor-edit-button").on("click", function () {
transition($intro, $load);
});

// For creating a theme
$theme_metadata = $("#" + container_id + " .story-editor-theme-metadata");
$theme_metadata.find(".story-editor-back-button").on("click", function () {
transition($theme_metadata, $intro);
});
$theme_metadata.find(".story-editor-next-button").on("click", function () {
transition($theme_metadata, $story_metadata);
});

// For creating a story
$metadata = $("#" + container_id + " .story-editor-metadata");
$("#" + container_id + " .story-editor-metadata .story-editor-left-button").on("click", function(){
transition($metadata, $intro);
$story_metadata = $("#" + container_id + " .story-editor-story-metadata");
$story_metadata.find(".story-editor-back-button").on("click", function () {
transition($story_metadata, $theme_metadata);
});
$story_metadata.find(".story-editor-next-button").on("click", function () {
transition($story_metadata, $waypoints);
});
$("#" + container_id + " .story-editor-metadata .story-editor-right-button").on("click", function(){

// For adding waypoints
$waypoints = $("#" + container_id + " .story-editor-waypoints");
$waypoints.find(".story-editor-back-button").on("click", function () {
transition($waypoints, $story_metadata);
});
$waypoints.find(".story-editor-next-button").on("click", function () {
//transition($waypoints, );
});
$waypoints.find(".story-editor-accordion").accordion({
header: "> div > h3",
heightStyle: "content"
}).sortable({
axis: "y",
handle: "h3",
stop: function (event, ui) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children("h3").triggerHandler("focusout");
// Refresh accordion to handle new order
$(this).accordion("refresh");
}
});

// For loading a Google spreadsheet
$load = $("#" + container_id + " .story-editor-load");
$("#" + container_id + " .story-editor-load .story-editor-left-button").on("click", function(){
$load.find(".story-editor-back-button").on("click", function () {
transition($load, $intro);
});
$("#" + container_id + " .story-editor-load .story-editor-right-button").on("click", function(){

$load.find(".story-editor-next-button").on("click", function () {
//transition($load, );
});

}


// Make a transition from one DOM element to another
function transition($from, $to) {
$from.fadeOut(300, function() {
$to.fadeIn(300);
});
if (typeof $from !== "undefined") {
$from.fadeOut(300, function () {
if (typeof $to !== "undefined") {
$to.fadeIn(300);
}
});
} else {
if (typeof $to !== "undefined") {
$to.fadeIn(300);
}
}
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////
Expand Down
5 changes: 5 additions & 0 deletions examples/webgl-timemachine/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@
src: url('../../css/fonts/Exo2-Bold.woff') format('woff');
}

@font-face {
font-family: 'Exo2-BoldItalic';
src: url('../../css/fonts/Exo2-BoldItalic.woff') format('woff');
}

html, body {
height: 100%;
overflow: hidden;
Expand Down
Binary file added images/ui-icons_ffffff_256x240.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6fbf418

Please sign in to comment.