I'm not at all familiar with handlebars.js but I'd like to customize the directory index template that comes with Shiny Server. Specifically, what I'm looking to do is render a page of thumbnails of the different apps.
The file /opt/shiny-server/templates/directorIndex.html comes with the code below which reference a number of expressions including {{title}}, references to apps, dirs and files.
<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{{title}}</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
background-color: #F5F5F5;
}
pre, tt, code, .code, #detail {
font-family: 'Consolas', 'Courier New', 'Courier', monospace;
}
h1 {
font-size: 40px;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>{{title}}</h1>
<ul>
{{#each apps}}
<li><a class="code" href="{{this.url}}">{{this.name}}</a> (application)</li>
{{/each}}
{{#each dirs}}
<li><a class="code" href="{{this.url}}/">{{this.name}}</a></li>
{{/each}}
{{#each files}}
<li><a class="code" href="{{this.url}}">{{this.name}}</a></li>
{{/each}}
</ul>
</body>
</html>
So I have two questions.
First - how can I know what expressions are available to call?
Second - give that I just have this one html page (as far as I can tell) how do I register a helper, e.g.
Handlebars.registerHelper('splitURL', function(url) {
var t = url.split("/");
return t[1];
});
I had the same desire to customize the directoryIndex.html template and enjoyed the same lack of documentation about what handlebars expressions could be used. I'm not a web developer so the code here is probably rubbish, but it works well enough. It sounds like you already solved your issue, but others may find some use in this approach. Images for each app are saved in site_dir/images.
screenshot of end result
directoryIndex.html:
<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{{title}}</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet">
<script type='text/javascript'>
function include(arr,obj) {
return(arr.indexOf(obj) != -1);
}
function updateView(data) {
//update title and heading
if ("title" in data) {
var host = document.location.hostname;
if (host in data.title) {
document.title = data.title[host];
document.getElementById("title").innerHTML = data.title[host];
} else if ("default" in data.title) {
document.title = data.title.default;
document.getElementById("title").innerHTML = data.title.default;
}
}
//hide cards (for directories like /images)
if ("ignore" in data) {
var element;
for (var i in data.ignore) {
if (element = document.getElementById("card_"+data.ignore[i])) {
element.parentNode.removeChild(element);
}
}
}
//update each shiny app if it has JSON data
if ("apps" in data) {
for (var item in data.apps) {
if (document.getElementById("card_"+item)) {
if ("img" in data.apps[item])
document.getElementById("img_"+item).src = "/images/" + data.apps[item].img;
if ("name" in data.apps[item])
document.getElementById("name_"+item).innerHTML = data.apps[item].name;
if ("desc" in data.apps[item])
document.getElementById("desc_"+item).innerHTML = data.apps[item].desc;
}
}
}
}
function loadJSON(url) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var data = JSON.parse(this.responseText);
updateView(data)
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
document.addEventListener("DOMContentLoaded", function() {
loadJSON("data.json");
});
</script>
</head>
<body>
<div id="title_bar">
<h1 id="title"></h1>
</div>
<div id="apps">
{{#each dirs}}
<div id="card_{{name}}" class="card" onclick="location.href='{{url}}';" style="cursor: pointer;">
<img id="img_{{name}}" src="" alt="{{name}}" onerror="if (this.src != '/images/missing.png') this.src = '/images/missing.png';">
<div class="container">
<h4 id="name_{{name}}">{{name}}</h4>
<p id="desc_{{name}}"></p>
</div>
</div>
{{/each}}
</div>
</body>
</html>
data.json (located in the site_dir root location):
{
"title": {
"default": "Shiny Server",
"dev_host": "Shiny Server (Development)",
"accp_host": "Shiny Server (Acceptance)",
"prod_host": "Shiny Server",
"dev_host.fully.qualified.name": "Shiny Server (Development)",
"accp_host.fully.qualified.name": "Shiny Server (Acceptance)",
"prod_host.fully.qualified.name": "Shiny Server"
},
"ignore": [ "app_4", "app_5", "images" ],
"apps": {
"app_1": {
"name": "app 1 name goes here",
"desc": "app 1 description goes here",
"img": "app1.png"
},
"app_2": {
"name": "app 2 name",
"desc": "app 2 desc",
"img": "app2.png"
},
"app_3": {
"name": "app 3 name",
"desc": "",
"img": "app3.png"
}
}
}
main.css (located in the site_dir root location):
body, html {
font-family: Helvetica, Arial, sans-serif;
background-color: #F5F5F5;
color: #114;
margin: 0;
padding: 0;
}
#title_bar {
height: 80px;
background-color: #3475b4;
overflow: hidden;
border-bottom: 1px solid #3475b3;
-moz-box-shadow: 0px 0px 10px 3px #BBC;
-webkit-box-shadow: 0px 0px 10px 3px #BBC;
box-shadow: 0px 0px 10px 3px #BBC;
}
#title_bar h1 {
margin: 14px auto .5em auto;
padding: .2em;
color: #EEE;
text-align: center;
}
#apps {
margin-top: 14px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px;
width: 300px;
margin: 10px;
display: inline-block;
vertical-align: top;
}
.card:hover {
box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
}
.card img {
display: block;
margin: 0 auto;
max-width: 300px;
max-height: 250px;
}
.container {
padding: 2px 16px;
}
Related
What I want to do
I created the homepage that has some images. I would like to show up them by the responsive design. However, all image files' size are not changed when I show on the iPhone.
There are 3 types img files on HP.
The images are ...
files shows up by changing the 3 pics by each 2 seconds at the same place.
normal img files.
As the gallery, that the img file change to show up by clicking the thumbnail button.
All of them are not changed img size when responsive.
//const img = ["hoge.png", "foo.png", "bar.jpg"];
const img = ["https://lh3.googleusercontent.com/taykG37GWDgY-FGkdogDvsHSJMUGRMvkuVRT6yR-5UNkKvGRKeRlpGYXlslocOcS0txlfUdGW59JGtzADknxbMqnh6AtVCv9EXyB8nHp80YsRNA0Yw=w1024-h683-n-l50-sg-rj", "https://lh3.googleusercontent.com/fl-GT6w3Ls6RT4vYnbkuYUyLY3lZJH8VtZ7xzxiym9YYaoVRCnZehdz6Icd0oAf6i3H9-O5cCNs6eunlxWr_Csstgsb98DdzNdLFBOlhw9NUfHdyuQjI=w768-h1024-n-l50-sg-rj", "https://lh3.googleusercontent.com/9pPCK70Rw0k3wethMHb1qMaIB0VjeWLy57vYgSzKbF7oJuvO2nA0Nakk-95cvibWUDcEhYkfCKvdPKT03tXZd4M5jdhIEibLO9qw-XE=w1024-h683-n-l50-sg-rj"];
let count = -1;
const hoge = () => {
count++;
// カウントが最大になれば初期値に戻す
if (count == img.length) count = 0;
//画像選択
pic.src = img[count];
//1秒ごとに実行
setTimeout(() => {
hoge();
}, 2000);
}
window.onload = () => {
hoge();
}
//アルバムデータの作成
let album = [{
src: 'img/1.png',
msg: 'さまざまな形のパスタと自然の恵みを生かしたイタリアン'
},
{
src: 'img/2.png',
msg: 'パスタだけでなく軽食やスイーツも'
},
{
src: 'img/3.png',
msg: '肉料理やピザもイタリアン料理を彩ります'
},
{
src: 'img/4.png',
msg: '豊富な種類のピザ'
},
{
src: 'img/5.png',
msg: 'チーズが主役だったり生ハムが主役だったり、ピザの種類は豊富です'
}
];
//最初のデータを表示しておく
let mainImage = document.createElement('img');
mainImage.setAttribute('src', album[0].src);
mainImage.setAttribute('alt', album[0].msg);
let mainMsg = document.createElement('p');
mainMsg.innerText = mainImage.alt;
let mainFlame = document.querySelector('#gallery .main');
mainFlame.insertBefore(mainImage, null);
mainFlame.insertBefore(mainMsg, null);
//サムネイル写真の表示
let thumbFlame = document.querySelector('#gallery .thumb');
for (let i = 0; i < album.length; i++) {
let thumbImage = document.createElement('img');
thumbImage.setAttribute('src', album[i].src);
thumbImage.setAttribute('alt', album[i].msg);
thumbFlame.insertBefore(thumbImage, null);
}
//クリックした画像をメインにする
thumbFlame.addEventListener('click', function(event) {
if (event.target.src) {
mainImage.src = event.target.src;
mainMsg.innerText = event.target.alt;
}
});
.under {
border-bottom: dotted 2px #87cdfa
}
.fixed {
width: 300px;
height: auto;
}
img.calbo {
width: 100%;
height: auto;
}
img.pepe {
width: 100%;
height: auto;
}
#gallery {
margin: 0;
padding-top: 40px;
width: 700px;
}
#gallery .main img {
border: 4px solid #fff;
box-shadow: 0;
}
#gallery .main p {
color: #bbb;
font-size: 20px;
font-weight: bold;
}
#gallery .thumb img {
border: 4px solid #fff;
border-radius: 400px;
box-shadow: 0px 0px 10px #000;
height: 60px;
margin: 10px;
width: 60px;
cursor: pointer;
}
#media screen and (max-width: 480px) {
test {
float: none;
}
img {
width: 100%;
}
}
<h1>
<font color="#EEEEEE">レシピ ～ カルボナーラとペペロンチーノ</h1>
<br>
<hr width="700" align="left">
<!--- html ----->
<img id="pic" src="hoge.png" width="600" height=auto class="top">
<p>
<table>
<tr>
<th class="fixed"><img src="calbo150.png" class="calbo"></th>
<td style="background-color:#476072">
ちょっとしたひと工夫で普通の手作り<br> カルボからお店風本格カルボに。
<br> 失敗もしない簡単レシピ
<br><br>
カルボナーラのレシピ
</td>
</tr>
<tr>
<th class="fixed"><img src="pepe.jpg" class="pepe"></th>
<td style="background-color:#476072">
簡単だけど難しいペペロンチーノ。<br> 材料と水分調整がうまくいけば本格的な
<br> ペペロンチーノに仕上がります。
<br><br>
ペペロンチーノのレシピ
</td>
</tr>
</table>
</p>
<!-- JavaScript -->
<div id="gallery">
<div class="main">
</div>
<div class="thumb">
</div>
</div>
Although I didn’t paste the full HTML here, I used the double byte double quotation in the settings of the Viewport line. After I modified to single byte one, it started to work.
Our videos use the lower third of the page for introductions, etc. much like TV News stations do. When captions are on, they're blocking all of that, thus creating a LOT of complaints from the communities that need the captions. I've tried tinkering with the CSS, but with a responsive layout, resizing the player wreaks havoc, often putting them out of sight altogether.
Is there a setting that can be changed, or technique to use, that will keep the captions at the top and in view when resized, OR in an external container?
Problem: the JW player 608 live captions are not formatted cleanly.
To solve this, disable the JW caption display and format our own window, named "ccbuffer"
<style type="text/css">
.jw-captions {
display: none !important;
}
#ccbuffer {
border: 2px solid white !important;
border-radius: 4px;
background-color: black !important;
display: flex;
height: 120px;
margin-top: 6px;
font: 22px bold arial, sans-serif;
color: white;
justify-content: center;
align-items: center;
}
</style>
Here is where I show the player, and ccbuffer is a div right below it
<div id="myPlayer">
<p style="color: #FFFFFF; font-weight: bold; font-size: x-large; border-style: solid; border-color: #E2AA4F">
Loading video...
</p>
</div>
<div id="ccbuffer" />
DOMSubtreeModified is deprecated. Use MutationObserver, which is less stressful on the client.
Let's hook the 'captionsChanged' event from JW. if track is 0 then no captions are selected and we disconnect the observer. If captions are selected, then we use jquery to pull the text out of the jw-text-track-cue element, and format it into a nice 3 line display in our ccbuffer window.
<script>
var observer;
jwplayer().on('captionsChanged', function (event) {
if (event.track == 0) {
observer.disconnect();
$('#ccbuffer').hide('slow');
}
else {
$('#ccbuffer').show('slow');
// select the target node
var target = document.querySelector('.jw-captions');
// create an observer instance
observer = new MutationObserver(function(mutations) {
$('.jw-text-track-cue').each(function(i) {
if (i == 0)
$('#ccbuffer').html( $(this).text() );
else
$('#ccbuffer').append("<br/>" + $(this).text() );
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }
// pass in the target node, as well as the observer options
observer.observe(target, config);
}
});
$(document).ready(function () {
$('#ccbuffer').hide();
});
</script>
So when the user enables captions, the ccbuffer window will slide open and display a clean 3 line representation of the CC text.
Final Solution: External Captions that are draggable/resizable
All credit to #Basildane, I worked out how to extenalize the captions with VOD, and to make them draggable and resizable, with CSS experimentation for ADA consideration:
<!DOCTYPE html>
<html>
<head>
<title>JW External Captions</title>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="/jwplayer/v8.10/jwplayer.js"></script>
<style type="text/css">
#myPlayer {
margin-bottom:5px;
}
.jw-captions {
display: none !important;
}
#ccbuffer {
color: white;
background-color: black;
opacity:.7;
font: 22px bold san-serif;
width: 100%;
padding: 15px;
height: 100%;
position:relative;
}
.night {
color:silver !important;
background-color: black !important;
opacity:1 !important;
border-color:silver !important;
}
.highcontrast {
color:white ! important;
background-color: black !important;
opacity:1 !important;
border-color:white !important;
}
.highcontrast2 {
color:black !important;
background-color: yellow !important;
opacity:1 !important;
border-color:black !important;
}
.highcontrast3 {
color:yellow !important;
background-color: black !important;
opacity:1 !important;
border-color:yellow !important;
}
#ccContainer {
position: absolute;
z-index: 9;
border: 1px solid inherit;
overflow: hidden;
resize: both;
width: 640px;
height: 180px;
min-width: 120px;
min-height: 90px;
max-width: 960px;
max-height: 300px;
}
#ccContainerheader {
padding: 3px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
border:1px solid;
}
</style>
</head>
<body>
<h3>JW Draggable Captions Container</h3>
<div id="PlayerContainer" style="width:401px;">
<div id="myPlayer">Loading video...</div>
</div>
<div id="ccContainer">
<!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
<div style="float:right;">
<form id="myform">
<select id="ccFontFamily">
<option value="sans-serif">Default Font</option>
<option value="serif">Serif</option>
<option value="monospace">Monospace</option>
<option value="cursive">Cursive </option>
</select>
<select id="ccFontSize" style="">
<option value="22">Default Size</option>
<option value="14">14</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="32">32</option>
</select>
<select id="ccContrast" style="">
<option value="ccdefault">Default Contrast</option>
<option value="night">Night</option>
<option value="highcontrast">High Contrast</option>
<option value="highcontrast2">Black/Yellow</option>
<option value="highcontrast3">Yellow/Black</option>
</select>
<button id="ccFontReset">Reset</button>
</form>
</div>
<div id="ccContainerheader">
Captions (click to move)
</div>
<div id="ccbuffer"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
jwplayer.key = 'xxxxxxxxxxxxxxxxxxx';
jwplayer('myPlayer').setup({
width: '100%', aspectratio: '16:9', repeat: 'false', autostart: 'false',
playlist: [{
sources: [ { file: 'https:www.example.com/video.mp4'}],
tracks: [ { file: 'https:www.example.com/video-captions.vtt', kind: 'captions', label: 'English', 'default': true } ]
}]
})
// External CC Container
$('#ccContainer').hide();
var position = $('#myPlayer').position();
var width = $('#PlayerContainer').outerWidth();
ccTop = position.top;
ccLeft = (width+50)+'px'
$('#ccContainer').css({'top':ccTop, left:ccLeft });
var observer;
jwplayer().on('captionsList', function (event) {
ccObserver(event);
});
jwplayer().on('captionsChanged', function (event) {
ccObserver(event);
});
videoplayer.on('fullscreen', function(event){
if(event.fullscreen){
$('.jw-captions').css('display','block');
}else{
$('.jw-captions').css('display','none');
}
});
$("#ccFontFamily").change(function() {
$('#ccbuffer').css("font-family", $(this).val());
});
$("#ccFontSize").change(function() {
$('#ccbuffer').css("font-size", $(this).val() + "px");
});
$("#ccContrast").change(function() {
$('#ccContainer').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccContainerheader').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccbuffer').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('select').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
$('#ccFontReset').removeClass("night highcontrast highcontrast2 highcontrast3").addClass( $(this).val() );
});
$('#ccFontReset').click(function() {
ccFontReset();
});
function ccFontReset(){
$("#ccFontFamily").val($("#ccFontFamily option:first").val()).trigger('change');
$("#ccFontSize").val($("#ccFontSize option:first").val()).trigger('change');
$("#ccContrast").val($("#ccContrast option:first").val()).trigger('change');
}
ccFontReset();
});
function ccObserver(event){
if (event.track == 0) {
$('#ccContainer').hide('slow');
$('.jw-captions').css('display','block'); // VERY important
if (observer != null){
observer.disconnect();
}
}
else {
$('#ccContainer').show('slow');
$('.jw-captions').css('display','none'); // VERY important
var target = document.querySelector('.jw-captions');
observer = new MutationObserver(function(mutations) {
$('.jw-text-track-cue').each(function(i) {
if (i == 0)
$('#ccbuffer').html( $(this).text() );
else
$('#ccbuffer').append("<br/>" + $(this).text() );
});
});
var config = { attributes: true, childList: true, characterData: true }
observer.observe(target, config);
}
}
// External CC Container - Make the DIV element draggable:
dragElement(document.getElementById("ccContainer"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
I have created a basic to-do list. I want to add the option to color code, similar to Google Keep (this is an exercise). I have tried simply putting one HTML select in, as you can see in my jsfiddle but this changes the background of that entire section.
<p display="none">
<section class="main" style="display: block;" >
<div data-bind="visible:todos().length>0">
<input id="toggle-all" type="checkbox" data-bind="checked:markAll"/>
<label for="toggle-all">Mark all as complete</label>
<br /><br />
<select id="colorOptions" id="toggle-all"></select>
</div>
<ul id="mycell" class="todo-list" data-bind="template:{ name:'item-template',foreach: todos}">
</ul>
</section>
</p>
Question: How do I add an option to individually color code the to-do items?
Ok, I did it using the templates. First I added the selection for the colors inside the template in the li, so that every entry has a selection. Then I added an id for every selection (which is the order variable, the first <select> has the id="0" the second has the id="1" and so on) in order to differentiate them and to make each of them have different functions onchange. I also made the addColorsOptions function which adds the options on every selection when it is created using its unique id.
$(function(){
var Todo = function(id, title, done, order,callback) {
var self = this;
self.id = ko.observable(id);
self.title = ko.observable(title);
self.done = ko.observable(done);
self.order = order;
self.updateCallback = ko.computed(function(){
callback(self);
return true;
});
}
var viewModel = function(){
var self = this;
self.todos = ko.observableArray([]);
self.inputTitle = ko.observable("");
self.doneTodos = ko.observable(0);
self.markAll = ko.observable(false);
self.addOne = function() {
var order = self.todos().length;
var t = new Todo(order, self.inputTitle(),false,order,self.countUpdate);
self.todos.push(t);
self.addColorsOptions(order);
};
self.createOnEnter = function(item,event){
if (event.keyCode == 13 && self.inputTitle()){
self.addOne();
self.inputTitle("");
}else{
return true;
};
}
self.toggleEditMode = function(item,event){
$(event.target).closest('li').toggleClass('editing');
}
self.editOnEnter = function(item,event){
if (event.keyCode == 13 && item.title){
item.updateCallback();
self.toggleEditMode(item,event);
}else{
return true;
};
}
self.markAll.subscribe(function(newValue){
ko.utils.arrayForEach(self.todos(), function(item) {
return item.done(newValue);
});
});
self.countUpdate = function(item){
var doneArray = ko.utils.arrayFilter(self.todos(), function(it) {
return it.done();
});
self.doneTodos(doneArray.length);
return true;
};
self.countDoneText = function(bool){
var cntAll = self.todos().length;
var cnt = (bool ? self.doneTodos() : cntAll - self.doneTodos());
var text = "<span class='count'>" + cnt.toString() + "</span>";
text += (bool ? " completed" : " remaining");
text += (self.doneTodos() > 1 ? " items" : " item");
return text;
}
self.clear = function(){
self.todos.remove(function(item){ return item.done(); });
}
self.addColorsOptions = function(id){
var colors = [{
display: "light yellow",
value: "ffffcc"
}, {
display: "light blue",
value: "ccffff"
}, {
display: "light green",
value: "ccffcc"
}, {
display: "gray",
value: "cccccc"
}, {
display: "white",
value: "ffffff"
}];
var options = ['<option value="">Select color</option>'];
for(var i = 0; i < colors.length; i++){
options.push('<option value="');
options.push(colors[i].value);
options.push('">');
options.push(colors[i].display);
options.push('</option>');
}
$("#" + id).html(options.join('')).change(function(){
var val = $(this).val();
if(val){
$("#" + id).closest('li').css('backgroundColor', '#' + val);
}
});
}
};
ko.applyBindings(new viewModel());
})
body {
font-size: 14px;
background-color: #3c6dc5;
color: #333333;
width: 520px;
margin: 0 auto;
}
#todoapp {
background-color: #3c6dc4;
padding: 20px;
margin-bottom: 40px;
}
#todoapp h1 {
font-size: 36px;
text-align: center;
color:white;
}
#todoapp input[type="text"] {
width: 466px;
font-size: 24px;
line-height: 1.4em;
padding: 6px;
color:#000033;
}
.main {
display: none;
}
.todo-list {
margin: 10px 0;
padding: 0;
list-style: none;
color: #E0E0EF;
}
.todo-list li {
padding: 18px 20px 18px 0;
position: relative;
font-size: 24px;
border-bottom: 1px solid #cccccc;
}
.todo-list li:last-child {
border-bottom: none;
}
.todo-list li .edit {
display: none;
}
.todo-list li.editing {
border-bottom: 1px solid #778899;
}
.todo-list li.editing .view {
display: none;
}
.todo-list li.editing .edit {
display: block;
width: 444px;
padding: 13px 15px 14px 20px;
margin: 0;
}
.todo-list li.done label {
color: #777777;
text-decoration: line-through;
}
.todo-list .destroy {
position: absolute;
right: 5px;
top: 20px;
display: none;
cursor: pointer;
width: 20px;
height: 20px;
}
#todoapp footer {
display: none;
margin: 0 -20px -20px -20px;
overflow: hidden;
color: #555555;
background: #f4fce8;
border-top: 1px solid #ededed;
padding: 0 20px;
line-height: 37px;
}
.todo-count {
float:left;
}
.todo-count .count{
font-weight:bold;
}
#clear-completed {
float: right;
line-height: 20px;
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
color: #555555;
font-size: 11px;
margin-top: 8px;
margin-bottom: 8px;
padding: 0 10px 1px;
cursor: pointer;
}
label{color:white;}
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="todoapp">
<header>
<h1>Fun To Do!</h1>
<input id="new-todo" type="text" placeholder="Finish Homework..." data-bind="value:inputTitle,event: { keyup: createOnEnter}"/>
</header>
<section class="main" style="display: block;" >
<div data-bind="visible:todos().length>0">
<input id="toggle-all" type="checkbox" data-bind="checked:markAll"/>
<label for="toggle-all">Mark all as complete</label> <br /><br />
</div>
<ul id="mycell" class="todo-list" data-bind="template:{ name:'item-template',foreach: todos}">
</ul>
</section>
<footer style="display: block;">
<div data-bind="visible:todos().length>0">
<div class="todo-count"><b data-bind="text:todos().length"></b> items left</div>
<!-- ko if: doneTodos() > 0 -->
<a id="clear-completed" data-bind="click:clear">
Clear <span data-bind="html:countDoneText(true)"></span>.
</a>
<!-- /ko -->
<br style="clear:both"/>
</div>
</footer>
</div>
<script type="text/template" id="item-template">
<li data-bind="event:{ dblclick :$root.toggleEditMode},css : {done:done() }">
<div class="view" >
<input class="toggle" type="checkbox" data-bind="checked:done"/>
<label data-bind="text:title"></label>
<a class="destroy"></a>
</div>
<input class="edit" type="text" data-bind="value:title,event: { keyup: $root.editOnEnter}" />
<select data-bind="attr: {'id': id}"></select>
</li>
</script>
You can also see the JSFiddle here.
For any question feel free to comment. I hope this was helpful :)
EDIT
See this JSFiddle for the <input type="color"> addition.
I tested your fiddle code. There is some unwanted code (that i did not find) that fade out your div databind="..... So to remove this problem you can add this at the end of jquery codes before last }); to see some thing like this:
$('div').show(); //adding code
});
Now the select works and you can see the changes in page inspector, But you can not see that here because your ul is empty. To see the result change that ul with an static data ul like this:
<ul id="mycell" class="todo-list">
<li>first</li>
<li>second</li>
</ul>
When creating a fluid layout, where content can be dragged around and edited inside a table I ran into a problem.
After clicking on any of the <a></a> hyperlinks the cell content should be replaced by an editable input box.
This gets done, but the cell changes its size and wrecks the original layout.
The cell size should not change after click. It should be possible to achieve this by editing the CSS and adding Bootstrap classes.
var viewModel = function() {
var self = this;
self.gridItems = ko.observableArray(
[{
"rowItems": [{
"name": "Item 1"
}, {
"name": "Item 2"
}, {
"name": "Item 3"
}]
}, {
"rowItems": [{
"name": "Item 4"
}, {
"name": "Item 5"
}]
}]
);
self.selectedRowItem = ko.observable();
};
//connect items with observableArrays
ko.bindingHandlers.sortableList = {
init: function(element, valueAccessor, allBindingsAccessor, context) {
$(element).data("sortList", valueAccessor()); //attach meta-data
$(element).sortable({
update: function(event, ui) {
var item = ui.item.data("sortItem");
if (item) {
//identify parents
var originalParent = ui.item.data("parentList");
var newParent = ui.item.parent().data("sortList");
//figure out its new position
var position = ko.utils.arrayIndexOf(ui.item.parent().children(), ui.item[0]);
if (position >= 0) {
originalParent.remove(item);
newParent.splice(position, 0, item);
}
ui.item.remove();
}
},
connectWith: '.sortable-container'
});
}
};
//attach meta-data
ko.bindingHandlers.sortableItem = {
init: function(element, valueAccessor) {
var options = valueAccessor();
$(element).data("sortItem", options.item);
$(element).data("parentList", options.parentList);
}
};
//control visibility, give element focus, and select the contents (in order)
ko.bindingHandlers.visibleAndSelect = {
update: function(element, valueAccessor) {
ko.bindingHandlers.visible.update(element, valueAccessor);
if (valueAccessor()) {
setTimeout(function() {
$(element).focus().select();
}, 0); //new RowItems are not in DOM yet
}
}
}
ko.applyBindings(new viewModel());
//$(".sortable").sortable({});
.sortable {
list-style-type: none;
margin: 0;
padding: 0;
width:100%;
}
.sortable li {
margin: 0 3px 3px 3px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 1.4em;
height: 18px;
cursor: move;
}
.sortable li span {
position: absolute;
margin-left: -1.3em;
}
.sortable li.fixed {
cursor: default;
color: #959595;
opacity: 0.5;
}
.sortable-grid {
width: 100% !important;
}
.sortable-row {
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
.sortable-item {
border: 1px solid black;
margin: 0 !important;
}
.sortable-item > a {
display: block;
margin: 0 !important;
}
.sortable-item input {
display: block;
margin: 0 !important;
}
.sortable-container {
margin: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul class="sortable sortable-grid" data-bind="template: { name: 'gridTmpl', foreach: gridItems, templateOptions: { parentList: gridItems} }, sortableList: gridItems">
</ul>
<script id="gridTmpl" type="text/html">
<li class="sortable-row">
<table style="width:100%">
<tbody>
<tr class="sortable sortable-container" data-bind="template: { name: 'rowTmpl', foreach: rowItems, templateOptions: { parentList: rowItems} }, sortableList: rowItems">
</tr>
</tbody>
</table>
</li>
</script>
<script id="rowTmpl" type="text/html">
<td class="sortable-item" data-bind="sortableItem: { item: $data, parentList: $data.parentList }">
<input data-bind="value: name, visibleAndSelect: $data === $root.selectedRowItem()" />
</td>
</script>
On your table, set table-layout to fixed. Another improvement would be to make the inputs take up the entire space of the cell.
Here are the css changes to make:
.sortable-item input {
display: block;
margin: 0 !important;
width: 100%; /* Added this property */
}
/* Added this rule */
.sortable-row > table {
table-layout: fixed;
}
I want to highlight a area like on the image below which is taken from Google Maps. Is this possible to accomplish with the current version of their API (v3)? If yes, how?
Thanks in advance.
You need to know the vertices of the area and create a polygon based on them.
But dashed strokes currently are not supported by polygons, if you require to have a dashed stroke you must create a sequence of polylines with different stroke-colors based on the vertices.
A built-in method to highlight an area currently doesn't exist.
You can automatically highlight an area with Google Maps Javascript API, here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Place ID Finder</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#ggg
{
position: absolute;
left:20%;
top:5%;
}
.controls {
background-color: #fff;
border-radius: 2px;
border: 1px solid transparent;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
box-sizing: border-box;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
height: 29px;
margin-left: 17px;
margin-top: 10px;
outline: none;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
.controls:focus {
border-color: #4d90fe;
}
.title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
</style>
</head>
<body>
<div style="display: none">
<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
</div>
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br>
<strong>Place ID:</strong> <span id="place-id"></span><br>
<span id="place-address"></span>
</div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.9989746, lng: 23.6413698},
zoom: 11
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
autocomplete.setFields(
['place_id', 'geometry', 'name', 'formatted_address']);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var infowindowContent = document.getElementById('infowindow-content');
infowindow.setContent(infowindowContent);
var marker = new google.maps.Marker({map: map});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location,
});
marker.setVisible(true);
infowindowContent.children['place-name'].textContent = place.name;
infowindowContent.children['place-id'].textContent = place.place_id;
infowindowContent.children['place-address'].textContent = place.formatted_address;
infowindow.open(map, marker);
var frame = document.getElementById("map");
frame.innerHTML = '<iframe width="100%" height="100%" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:'.concat(place.place_id).concat('&key=XXXXXXX" allowfullscreen></iframe>');
frame.innerHTML += '<p id="ggg"><button type="button" onclick="location.reload()">Try again!</button></p>';
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXX&libraries=places&callback=initMap" async defer></script>
</body>
</html>
You will need to replace API KEY with your API KEY. Try e.g."Nea Smyrni 171 21, Greece" in the input and then select the first drop down option and notice that it automatically highlights the area!