Skip to content

Commit

Permalink
Undoing compresssion of static templates
Browse files Browse the repository at this point in the history
  • Loading branch information
@seanlip
seanlip committed Dec 18, 2012
1 parent d209605 commit b835267
Show file tree
Hide file tree
Showing 2 changed files with 195 additions and 2 deletions.
185 changes: 184 additions & 1 deletion static/templates/gui_editor.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,184 @@
<div class="container-fluid"> <div class="row-fluid"> <div class="span10"> <div id="editorWindow" ng-show="stateId"> <a class="close" ng-click="closeEditorWindow()">&times;</a> <button ng-click="changeMode('text')">Use YAML text editor (experimental)</button> <h4>Content displayed to the reader</h4> <center class="alert alert-info" ng-show="stateText.length == 0"> To add content, drag an icon from the palette on the right into the box below. </center> <div> <ul ui-sortable ng-model="stateText" class="sortable oppia-state-text-list"> <!--TODO(sll): When these are moved around, the containing boxes get smaller. Why?--> <li ng-repeat="item in stateText" class="oppia-state-text-item" ng-class="'item-' + $index"> <ng-switch on="item.type"> <!-- TODO(sll): In the following, stateText should store the raw HTML. When the user clicks to edit, the textarea should convert <br> into newlines, and when the user saves, the newlines should be converted into <br>'s. Tags like < and > also need to be HTML-ified. Maybe use a contenteditable? --> <div ng-switch-when="text"> <ng-switch on="currentActiveInput == 'stateText.' + $index"> <div ng-switch-when="true"> <textarea rows="5" ng-model="item.value" unfocus-state-text="clearActiveInputs()"></textarea> </div> <div ng-switch-default ng-click="initializeNewActiveInput('stateText.' + $index)"> <ng-switch on="item.value == ''"> <div ng-switch-when="true" class="oppia-placeholder"> You can enter text here. </div> </ng-switch> <span ng-bind-html="item.value"></span> </div> </ng-switch> </div> <div ng-switch-when="image"> <ng-switch on="item.value == ''"> <div ng-switch-when="true" class="oppia-placeholder"> <form id="newImageForm"> Upload an image: <input type="file" id="newImage" name="newImage" image-upload="true"> <button type="button" ng-click="saveImage($index)">Save</button> </form> <span class="oppia-loading" id="uploadImageLoading"></span> </div> <div ng-switch-default> <img class="oppia-small-image" ng-src="/imagehandler/<[item.value]>"></img> <span ng-click="deleteImage($index)" class="oppia-thumbnail">&times;</span> </div> </ng-switch> </div> <div ng-switch-when="video"> <ng-switch on="item.value == ''"> <div ng-switch-when="true" class="oppia-placeholder"> <form ng-submit="hideVideoInputDialog(newVideoLink, $index)"> Add a Youtube video link: <input type="text" ng-model="newVideoLink" id="newVideoLink"> <input type="submit" value="Save"> </form> </div> <div ng-switch-default> <iframe width="100" height="56" src="https://www.youtube.com/embed/<[item.value]>?rel=0" frameborder="0" allowfullscreen></iframe> <span ng-click="deleteVideo($index)" class="oppia-thumbnail">&times;</span> </div> </ng-switch> </div> <div ng-switch-when="widget"> <ul class="nav nav-tabs" id="widgetTabs<[$index]>"> <li><a data-toggle="tab" href="#preview" href="#preview" ng-click="selectTab('preview')">Preview</a></li> <li><a data-toggle="tab" href="#code">Code</a></li> <li class="active"><a data-toggle="tab" href="#repository">Repository</a></li> </ul> <div class="tab-content"> <div class="tab-pane" id="preview"> <iframe id="widgetPreview<[$index]>" width="100%" frameborder="0"></iframe> </div> <div class="tab-pane" id="code"> Add code for a widget: <textarea class="oppia-code" ng-model="widgetCode" rows="10"> </textarea> <button type="button" ng-click="saveWidget(widgetCode, $index)"> Save and Preview </button> </div> <div class="tab-pane active" id="repository"> <iframe src="/widgets/repository/" width="100%" height="400px" frameborder="0"></iframe> </div> </div> </div> </ng-switch> </li> </ul> <center class="oppia-add-content-box oppia-palette-droppable"> Drag Content Here </center> <br> <br> </div> <h4 ng-show="inputType != 'none'"> Interaction: <[getReadableInputType(inputType)]> <span> (<a ng-click="changeInputType('none')">Remove</a>) </span> </h4> <div> <div ng-show="inputType == 'none'"> <div> <span class="oppia-editable-name" ng-hide="currentActiveInput == 'none.0.dest'" ng-click="currentActiveInput = 'none.0.dest'"> <[getDestDescription(states[stateId]['dests'][0].dest)]> </span> <span ng-show="currentActiveInput == 'none.0.dest'"> <form ng-submit="saveDest(0, newNoneDestData)"> Destination: <input type="none" size="40" list="destinations" ng-model="newNoneDestData" placeholder="Type name of state, or '[Q' for questions" required> <datalist id="destinations"> <option ng-repeat="(id, properties) in states" value="<[properties.desc]>"></option> <option ng-repeat="(id, properties) in questions" value="[Question] <[properties.desc]>"></option> <option value="END"></option> </datalist> <input type="submit" value="Save"> </form> </span> <br> <br> <div> <h5>Or, pick an input view:</h5> <select ng-model="newInputType" id="newInputType" ng-change="changeInputType(newInputType)" ng-hide="currentActiveInput == 'none.0.dest'"> <option value="multiple_choice">Multiple Choice</option> <option value="int">Integer</option> <option value="set">Set</option> <option value="text">Text</option> </select> </div> </div> </div> <div id="oppia-popup" ng-show="isModalWindowActive"> <a class="close" ng-click="closeModalWindow()">&times;</a> <div id="textInput"> <label for="textData"> <h5>In response to the reader's answer, display the text:</h5> </label> <textarea rows="10" cols="50" ng-model="textData" id="textData"> </textarea> <p> <button ng-click="saveText()">Save</button> </p> </div> </div> </div> </div> </div> <div class="span2"> <div class="oppia-palette pull-right" ng-show="stateId"> <div class="oppia-palette-text oppia-palette-icon" title="Add text"></div> <div class="oppia-palette-image oppia-palette-icon" title="Add image"></div> <div class="oppia-palette-video oppia-palette-icon" title="Add video"></div> <div class="oppia-palette-widget oppia-palette-icon" title="Add interactive widget" ng-hide="isWidgetInStateText()"></div> <!-- The outer div below is needed to make the background color appear behind the image. --> <div class="oppia-item-droppable"> <div class="oppia-palette-trash"></div> </div> </div> </div> </div> </div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span10">

<div id="editorWindow" ng-show="stateId">
<a class="close" ng-click="closeEditorWindow()">&times;</a>

<button ng-click="changeMode('text')">Use YAML text editor (experimental)</button>

<h4>Content displayed to the reader</h4>

<center class="alert alert-info" ng-show="stateText.length == 0">
To add content, drag an icon from the palette on the right into the box below.
</center>

<div>
<ul ui-sortable ng-model="stateText" class="sortable oppia-state-text-list">
<!--TODO(sll): When these are moved around, the containing boxes get smaller. Why?-->
<li ng-repeat="item in stateText" class="oppia-state-text-item" ng-class="'item-' + $index">
<ng-switch on="item.type">
<!-- TODO(sll): In the following, stateText should store the
raw HTML. When the user clicks to edit, the textarea should
convert <br> into newlines, and when the user saves, the
newlines should be converted into <br>'s. Tags like < and >
also need to be HTML-ified. Maybe use a contenteditable? -->
<div ng-switch-when="text">
<ng-switch on="currentActiveInput == 'stateText.' + $index">
<div ng-switch-when="true">
<textarea rows="5" ng-model="item.value" unfocus-state-text="clearActiveInputs()"></textarea>
</div>
<div ng-switch-default ng-click="initializeNewActiveInput('stateText.' + $index)">
<ng-switch on="item.value == ''">
<div ng-switch-when="true" class="oppia-placeholder">
You can enter text here.
</div>
</ng-switch>
<span ng-bind-html="item.value"></span>
</div>
</ng-switch>
</div>

<div ng-switch-when="image">
<ng-switch on="item.value == ''">
<div ng-switch-when="true" class="oppia-placeholder">
<form id="newImageForm">
Upload an image:
<input type="file" id="newImage" name="newImage" image-upload="true">
<button type="button" ng-click="saveImage($index)">Save</button>
</form>
<span class="oppia-loading" id="uploadImageLoading"></span>
</div>
<div ng-switch-default>
<img class="oppia-small-image" ng-src="/imagehandler/<[item.value]>"></img>
<span ng-click="deleteImage($index)" class="oppia-thumbnail">&times;</span>
</div>
</ng-switch>
</div>

<div ng-switch-when="video">
<ng-switch on="item.value == ''">
<div ng-switch-when="true" class="oppia-placeholder">
<form ng-submit="hideVideoInputDialog(newVideoLink, $index)">
Add a Youtube video link:
<input type="text" ng-model="newVideoLink" id="newVideoLink">
<input type="submit" value="Save">
</form>
</div>
<div ng-switch-default>
<iframe width="100" height="56" src="https://www.youtube.com/embed/<[item.value]>?rel=0" frameborder="0" allowfullscreen></iframe>
<span ng-click="deleteVideo($index)" class="oppia-thumbnail">&times;</span>
</div>
</ng-switch>
</div>
<div ng-switch-when="widget">
<ul class="nav nav-tabs" id="widgetTabs<[$index]>">
<li><a data-toggle="tab" href="#preview" href="#preview" ng-click="selectTab('preview')">Preview</a></li>
<li><a data-toggle="tab" href="#code">Code</a></li>
<li class="active"><a data-toggle="tab" href="#repository">Repository</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="preview">
<iframe id="widgetPreview<[$index]>" width="100%" frameborder="0"></iframe>
</div>
<div class="tab-pane" id="code">
Add code for a widget:
<textarea class="oppia-code" ng-model="widgetCode" rows="10">
</textarea>
<button type="button" ng-click="saveWidget(widgetCode, $index)">
Save and Preview
</button>
</div>
<div class="tab-pane active" id="repository">
<iframe src="/widgets/repository/" width="100%" height="400px" frameborder="0"></iframe>
</div>
</div>
</div>

</ng-switch>
</li>
</ul>

<center class="oppia-add-content-box oppia-palette-droppable">
Drag Content Here
</center>
<br>
<br>
</div>

<h4 ng-show="inputType != 'none'">
Interaction: <[getReadableInputType(inputType)]>
<span>
(<a ng-click="changeInputType('none')">Remove</a>)
</span>
</h4>

<div>
<div ng-show="inputType == 'none'">
<div>
<span class="oppia-editable-name" ng-hide="currentActiveInput == 'none.0.dest'" ng-click="currentActiveInput = 'none.0.dest'">
<[getDestDescription(states[stateId]['dests'][0].dest)]>
</span>

<span ng-show="currentActiveInput == 'none.0.dest'">
<form ng-submit="saveDest(0, newNoneDestData)">
Destination:
<input type="none" size="40" list="destinations" ng-model="newNoneDestData" placeholder="Type name of state, or '[Q' for questions" required>
<datalist id="destinations">
<option ng-repeat="(id, properties) in states" value="<[properties.desc]>"></option>
<option ng-repeat="(id, properties) in questions" value="[Question] <[properties.desc]>"></option>
<option value="END"></option>
</datalist>
<input type="submit" value="Save">
</form>
</span>

<br>
<br>

<div>
<h5>Or, pick an input view:</h5>
<select ng-model="newInputType" id="newInputType" ng-change="changeInputType(newInputType)" ng-hide="currentActiveInput == 'none.0.dest'">
<option value="multiple_choice">Multiple Choice</option>
<option value="int">Integer</option>
<option value="set">Set</option>
<option value="text">Text</option>
</select>
</div>
</div>
</div>

<div id="oppia-popup" ng-show="isModalWindowActive">
<a class="close" ng-click="closeModalWindow()">&times;</a>

<div id="textInput">
<label for="textData">
<h5>In response to the reader's answer, display the text:</h5>
</label>
<textarea rows="10" cols="50" ng-model="textData" id="textData"> </textarea>
<p>
<button ng-click="saveText()">Save</button>
</p>
</div>
</div>
</div>
</div>
</div>

<div class="span2">
<div class="oppia-palette pull-right" ng-show="stateId">
<div class="oppia-palette-text oppia-palette-icon" title="Add text"></div>
<div class="oppia-palette-image oppia-palette-icon" title="Add image"></div>
<div class="oppia-palette-video oppia-palette-icon" title="Add video"></div>
<div class="oppia-palette-widget oppia-palette-icon" title="Add interactive widget" ng-hide="isWidgetInStateText()"></div>

<!-- The outer div below is needed to make the background color appear
behind the image. -->
<div class="oppia-item-droppable">
<div class="oppia-palette-trash"></div>
</div>
</div>
</div>
</div>
</div>

12 changes: 11 additions & 1 deletion static/templates/yaml_editor.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,11 @@
<div ng-cloak> <button ng-click="changeMode('gui')">Use GUI editor</button> <br> <br> Enter a description of this state below. <button type="button" ng-click="saveState(yaml)"> Save </button> <br><br> <textarea rows="40" ng-model="yaml" class="oppia-code"></textarea> </div>
<div ng-cloak>
<button ng-click="changeMode('gui')">Use GUI editor</button>
<br>
<br>
Enter a description of this state below.
<button type="button" ng-click="saveState(yaml)">
Save
</button>
<br><br>
<textarea rows="40" ng-model="yaml" class="oppia-code"></textarea>
</div>

0 comments on commit b835267

Please sign in to comment.