Skip to content

Commit

Permalink
presenter: add presenter views
Browse files Browse the repository at this point in the history
  • Loading branch information
@youyix
youyix committed Oct 17, 2014
1 parent 50a4fe4 commit bff7f5f
Show file tree
Hide file tree
Showing 17 changed files with 629 additions and 6 deletions.
7 changes: 4 additions & 3 deletions asq/asq-multi-choice.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@

<div class="asq-multi-choice">
<h3><content select="asq-stem"></content></h3>
<div id="choices">
<content></content>
</div>
</div>
<div id="choices">
<content></content>
</div>

</template>

<script>
Expand Down
2 changes: 0 additions & 2 deletions asq/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,6 @@
</asq-js-function-body>

</asq-exercise>

<p class="xxx-y" foo="hoho">xxx</p>
</section>
</section>
</core-header-panel>
Expand Down
63 changes: 63 additions & 0 deletions asq/presenter/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!doctype html>
<html>

<head>

<title>polymer asq presenter</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="../../bower_components/platform/platform.js"></script>
<link rel="stylesheet" href="./main.css" type="text/css" />

<link rel="import" href="../../bower_components/font-roboto/roboto.html">
<link rel="import" href="../../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../../bower_components/core-icon-button/core-icon-button.html">
<link rel="import" href="../../bower_components/core-icon/core-icon.html">

<link rel="import" href="pst-asq-option.html">
<link rel="import" href="pst-asq-multi-choice.html">
<link rel="import" href="pst-asq-exercise.html">
<link rel="import" href="pst-asq-stem.html">
<link rel="import" href="pst-asq-text-input.html">
<link rel="import" href="pst-asq-code.html">
<link rel="import" href="pst-asq-css-select.html">
<link rel="import" href="pst-asq-js-function-body.html">


</head>

<body unresolved>
<core-header-panel mode="standard" id="core_header_panel">
<core-toolbar id="core_toolbar">
<core-icon id="core_icon" src="../../img/asq-logo.png"></core-icon>
<!-- <core-icon-button icon="src" id="core_icon_button"></core-icon-button> -->
<div id="div">ASQ</div>
</core-toolbar>
<section id="section">
<section id="section1" center horizontal layout>
<!-- Ex 1 -->
<pst-asq-exercise exerciseid="hello" center layout>
<pst-asq-stem>Exercise 1</pst-asq-stem>
<pst-asq-multi-choice>
<pst-asq-stem>Which are the official languages of Switzerland?</pst-asq-stem>
<pst-asq-option labelname="English"></pst-asq-option>
<pst-asq-option labelname="French"></pst-asq-option>
<pst-asq-option labelname="German"></pst-asq-option>
<pst-asq-option labelname="Rumantsch"></pst-asq-option>
</pst-asq-multi-choice>

<pst-asq-text-input>What's the result of '2+3'</pst-asq-text-input>


</pst-asq-exercise>
</section>
</section>
</core-header-panel>

<script></script>
</body>

</html>
55 changes: 55 additions & 0 deletions asq/presenter/main.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}

#core_header_panel {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
}
#core_toolbar {
color: rgb(255, 255, 255);
background-color: rgb(79, 125, 201);
}
#section {
height: 1000px;
background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
}

#core_icon {
height: 27px;
width: 75px;
}

#section1 {
width: 80%;
margin-left: 10em;
margin-right: 10em;
border: 1px dotted blue;
}
.container {
width: 80%;
margin: 50px auto;
}
@media (min-width: 481px) {
#tabs {
width: 200px;
}
.container {
width: 400px;
}
}



.asq-exercise {
/* vertical-align: middle;
display: block;
margin-left: auto;
margin-right: auto;*/
}
39 changes: 39 additions & 0 deletions asq/presenter/pst-asq-code.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@


<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/ace-element/ace-element.html">


<polymer-element name="pst-asq-code" attributes="codemode">
<template>
<style>
.ace_code {
margin-bottom: 0.5em;
margin-left: 2em
}

#ace_element {
width: 400px;
height: 300px;
position: relative;
}

</style>

<div class="asq-code" >
<h3><content select=".title"></content><h3>
<div class="ace_code">
<p><content select="asq-stem"></content><p>
<ace-element mode={{codemode}} value="" id="ace_element">function test() { var x = true; }</ace-element>
</div>
</div>
</template>

<script>
Polymer({
ready: function () {

}
});
</script>
</polymer-element>
30 changes: 30 additions & 0 deletions asq/presenter/pst-asq-css-select.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">

<polymer-element name="pst-asq-css-select" attributes="datahtmlcode">
<template>
<style>
#code {
width:600px;
height: 400px;
background: #272822;
color: #FCFCFC;
}
#input {
margin-top: 1em;
margin-bottom: 1em;
}
</style>
<!-- -->
<div class="pst-asq-select-css">
<h3><content select="asq-stem"></content></h3>
<div id="code">
<pre><code id="codePane"></code></pre>
</div>
<div id="input">
<label>Selector: </label><input type="text" id="sel_input">
</div>
</div>
</template>
<script src="./pst-asq-css-select.js"></script>

</polymer-element>
106 changes: 106 additions & 0 deletions asq/presenter/pst-asq-css-select.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
Polymer('pst-asq-css-select', {
domReady: function() {
console.log("css select domReady");

var attr = this.attributes[0];
if ( attr.nodeName === "datahtmlcode" ) {
var newHtml = attr.value;
var pane = this.$.codePane;
var selInput = this.$.sel_input;

initializeCssSelect(pane, selInput, newHtml);

// warp a javascript object with jQuery
// ?? use only javascript ??
// this.$.codePane.innerHTML = codeTree;
// $(pane).html(codeTree);
}
}
});


function initializeCssSelect(codePane, selInput, newHtml) {
$codePane = $(codePane);
var $vDOM = $('<div>' + newHtml + '</div>');
var codeTree = createTree($vDOM, "", "");
$codePane.html(codeTree);

// magic happens here
var $selInput = $(selInput);
$selInput.on('input', function(){
var value = $selInput.val();
var $clone = $vDOM.clone();
var selected = $clone.find(value).each(function(){
$(this).attr('data-asq-selected', "true");
});
codeTree = createTree($clone, "", "");
$codePane.html(codeTree);
});

}


// recursive function that creates the escaped tree of the html
// annotated with spans
function createTree($el, treeStr, tabwidth){
// console.log("_____________createTree");
var nextTabwidth = tabwidth || "";
$el.children().each(function(){
var $this = $(this);
var spanOpenTag = "<span>";

if($this.attr('data-asq-selected') === "true"){
spanOpenTag = '<span style="background-color:#fd2343;">';
}

treeStr += tabwidth + spanOpenTag;
treeStr += escapeHtml(getElOpeningTag(this));
treeStr += '</span>'+ '\n';


//generate tree for children of current
nextTabwidth = tabwidth + " ";
treeStr = createTree($this, treeStr, nextTabwidth);

//back to current
treeStr += tabwidth + spanOpenTag;
treeStr += escapeHtml("</" + $this.prop("tagName").toLowerCase() + ">");
treeStr += '</span>'+ '\n';
});

return treeStr;
}


var entityMap = {
"&": "&amp;",
"<": "&lt;",
">": "&gt;",
'"': '&quot;',
"'": '&#39;',
"/": '&#x2F;'
};

function escapeHtml(string) {
return String(string).replace(/[&<>"'\/]/g, function (s) {
return entityMap[s];
});
}

function getElOpeningTag(el){
// console.log("_____________getElOpeningTag");
var str ="<";
str += $(el).prop("tagName").toLowerCase();

//get all attribures
$.each(el.attributes, function() {
// this.attributes is not a plain object, but an array
// of attribute nodes, which contain both the name and value
if(this.specified && this.name !=='data-asq-selected' ) {
str += ' ' + this.name;
str += '="' + this.value + '"';
}
});
str+=">"
return str;
}
46 changes: 46 additions & 0 deletions asq/presenter/pst-asq-exercise.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="pst-asq-progress.html">

<polymer-element name="pst-asq-exercise" attributes="exerciseid">
<template>
<style>
.submit_button {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.edit_button {
background-color: rgb(255, 155, 15);
}

#exercises, #progress{
margin-left: 2em
}

</style>

<!-- EXERCISE CONTENTS GO HERE -->
<div class="pst-asq-exercise">

<h2><content select="asq-stem"></content></h2>
<div id="exercises" >
<content></content>
</div>
<div id="progress">
<pst-asq-progress value="10"></pst-asq-progress>
<button class="submit_button">Answers</button>
</div>
</div>

</template>

<script>
Polymer({
extends: "form",
ready: function () {

}
});
</script>
</polymer-element>
Loading

0 comments on commit bff7f5f

Please sign in to comment.