Widgets

notes.js

var notes = $("<div />", {"class": "test notes"})
  	.append(
      $("<textarea />",{
  			"css": {
      		"width":"100%",
      		"height":"120px",
      		"resize": "vertical",
      		"padding":"5px"
    		}
    	})
        .val(instorage("notes")[0])
        .ready(function(){
           ctrlS($(".notes textarea"),function(){
             instorage("notes", [$(".notes textarea").val()]);
             addMsg("", "Notes saved",2);
           });
        })
    );

addItem("Notes", notes, 2);

prototype.js

$("<link/>", { rel: "stylesheet", type: "text/css",
   href: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/codemirror.min.css" }).appendTo("head");
$("<link/>", { rel: "stylesheet", type: "text/css",
   href: "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/theme/monokai.min.css" }).appendTo("head");

$.getScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/codemirror.js", function(){
  $.getScript("https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.25.2/mode/javascript/javascript.min.js",function(){
    var myCodeMirror = CodeMirror($('.prototype')[0],{
	    //lineNumbers: true,
	    theme: "monokai",
	    tabSize: 2,
	    value: 'var test = $("<div />", {\n\t"class": "test",\n\t"css": {"color":"red"}\n})\n.append();\n\naddItem("Test", test, 0, -2);',
      extraKeys: {
        "Ctrl-S": function(instance) {
          $('.widget:has(> .content .test):visible').remove();
          eval(myCodeMirror.getValue());
        }
      }
    });
  });
});

$(".CodeMirror").css("height", "100%");

var prototype = $('<div></div>')
  .addClass('prototype');
addItem('Prototyping', prototype, 2);

search.js

var search = $('<div />', {
	"class": "search",
  "css": {"color":"red"}
})
.append(
  $('<input />', {
		"class": "search",
    "placeholder":"Search...",
  	"css": {
      "width":"100%",
      "padding":"5px",
      "font-size": "1.1em"
    }
	})
);

addItem('Search', search, 0, -2);

$('.search').bind("enterKey",function(e){
  $(location).attr('href', 'https://www.google.de/#q='+$('input.search').val());
});
$('.search').keyup(function(e){
    if(e.keyCode == 13)
    {
        $(this).trigger("enterKey");
    }
});

time.js

var time = $('<div></div>')
  .addClass('time')
  .css('font-size', '3em')
  .css('text-align', 'center')
  .text('12:00');
addItem('Time', time, 0, 2);

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    m = checkTime(m);
    var emoji;
    if(h>6 && h<20) emoji = "☀️"
      else emoji = "🌙";
  
    if(config.time.seconds){
      var s = today.getSeconds();
      s = checkTime(s);
      $('.time').html(emoji + " " + h + ":" + m + ":" + s);
    }
    else $('.time').html(emoji + " " + h + ":" + m);


    
    var t = setTimeout(startTime, config.time.seconds ? 500 : 500*60);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};
    return i;
}
startTime();

weather.js

var weather = $("<div />", {
	"class": "test weather"
});

var weather__lang = config.weather && config.weather.lang ? config.weather.lang : "EN";
var weather__location = config.weather && config.weather.location ? config.weather.location : "zmw:00000.178.10150";

loadData("https://api.wunderground.com/api/dc203fba39f6674e/conditions/forecast/lang:"+weather__lang+"/q/"+weather__location+".json",function(data){
  
  
  $(".weather").append(
    $("<div />",{
      "html":data.current_observation.display_location.full,
      "css":{
        "text-align": "center",
        "margin-bottom": "10px"
      }
    })
  );
  $.each(data.forecast.simpleforecast.forecastday, function(i,v){
  	var day=[
    	v.icon_url,
    	v.high.celsius,
    	v.low.celsius,
    	v.date.weekday,
  	];
    $(".weather").append(
      $("<div />",{"class":"day"}).append(
    		$("<img />", {"src": day[0]} ),
        $("<div />",{
        	"css":{
          	"float":"right",
            "text-align":"right",
            "font-size":"1.2em"
          }
        }).append(
        	$("<div />").append(
          	day[1]+"°C",
          	$("<span />",{
              "html":day[2]+"°C",
            	"css":{
              	"font-size": ".9em",
  							"color": "#666",
                "margin-left":"10px"
              }
            })
          ),
        	$("<div />",{"html":day[3],"css":{"font-size":".8em"}})
        )
      )
    );
    
  });
  
});

addItem("Weather", weather, 0, -2);