Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

notes infrastructure and skeleton ready

  • Loading branch information...
commit 627211613e72ef88ac673ba7ff13d61cdde882d5 1 parent 32c5767
@altryne authored
View
2  app.php
@@ -1,5 +1,5 @@
<?php
- $appid = $_GET['appid'];
+ $appid = strtolower($_GET['appid']);
if($appid && file_exists($appid.'.php') && $appid != 'photos'){
header('Location: '.$appid.'.html');
}
View
44 index.php
@@ -2,35 +2,35 @@
//0 page is the dock
$apps[0] = Array(
'iPod',
- 'settings',
- 'clock',
- 'safari',
- 'mail'
+ 'Settings',
+ 'Clock',
+ 'Safari',
+ 'Mail'
);
$apps[1] = Array(
- 'maps',
- 'messages',
- 'notes',
- 'photos',
- 'timezones',
- 'weather'
+ 'Maps',
+ 'Messages',
+ 'Notes',
+ 'Photos',
+ 'Timezones',
+ 'Weather'
);
$apps[2] = Array(
- 'mail',
- 'stocks',
- 'maps',
- 'messages',
- 'notes',
- 'photos',
+ 'Mail',
+ 'Stocks',
+ 'Maps',
+ 'Messages',
+ 'Notes',
+ 'Photos',
'iMovie',
);
$apps[3] = Array(
- 'mail',
- 'stocks',
- 'maps',
- 'messages',
- 'notes',
- 'photos',
+ 'Mail',
+ 'Stocks',
+ 'Maps',
+ 'Messages',
+ 'Notes',
+ 'Photos',
'iMovie',
);
?>
View
4 js/iscroll.js
@@ -254,12 +254,14 @@ iScroll.prototype = {
// Check if the scroller is really where it should be
if (that.options.momentum || that.options.snap) {
- matrix = new WebKitCSSMatrix(window.getComputedStyle(that.element).webkitTransform);
+ try{
+ matrix = new WebKitCSSMatrix(window.getComputedStyle(that.element).webkitTransform);
if (matrix.e != that.x || matrix.f != that.y) {
document.removeEventListener('webkitTransitionEnd', that, false);
that.setPosition(matrix.e, matrix.f);
that.moved = true;
}
+ }catch(e){}
}
that.touchStartX = isTouch ? e.changedTouches[0].pageX : e.pageX;
View
251 js/notes.js
@@ -4,25 +4,70 @@
* Date: Jan 17, 2011
* Time: 10:28:05 PM
*/
-var fns = {};
-var notes = {
+var fns = {} ,
+ notes = {},
+ note_tpl = '<li><span class="name"></span><time class="timeago"></time></li>',
+ default_notes = {
+ active_note : 0,
notes_arr :[
{
- 'title':'first note',
- 'date':"Jan 18 2011 00:33",
- 'text': "This is just a demo"
+ 'title':'About this app',
+ 'date':"1295308437988",
+ 'text': "This is a simulation of the Notes app. \n" +
+ "This demo uses localstorage to store your notes, so the nex time you open, they will be here ;)\n" +
+ "If you want to store your notes, click \"allow\" when your browser prompts you."
}
,{
- 'title':'workig apps',
- 'date':"Jan 18 2011 00:43",
+ 'title':'Working apps',
+ 'date':"1295308434988",
'text': "working apps :\n\n - safari \n\n - google maps \n\n - everytimezone \n\n - notes"
}
]
};
-$('document').ready(function(){
-// $('#note_area').autogrow();
+$('#notes_list li').live('click',function(){
+ $('#note_area').focusout();
+ fns.textAreaPopulate(+$(this).data('id'),this);
+});
+$('#note_area').live('change keyup keydown focusout',function(evt){
+ notes.notes_arr[notes.active_note].text = this.value;
+ notes.notes_arr[notes.active_note].title = this.value.substring(0,17);
+ $('.active .name,#main_title').removeClass('default').html(notes.notes_arr[notes.active_note].title);
+ //update only if textarea has value, else remove
+
+ if(this.value != ''){
+ fns.updateLocalStorage();
+ }else if(this.value == '' && evt.type != 'focusout'){
+ $('.active .name,#main_title').html('New note').addClass('default');
+ }
+ else if(evt.type == 'focusout'){
+ fns.removeNote();
+ }
+});
+
+$('#add_btn').live('click',function(){
+ fns.addNewNote();
+});
+$('#remove_btn').live('click',function(){
+ fns.removeNote();
+});
+$('document').ready(function(){
+ //set object from localstorage, or default from notes
+ notes_from_ls = fns.getObject('notes');
+ notes = (notes_from_ls && notes_from_ls.notes_arr.length > 0) ? notes_from_ls : default_notes;
+ $.each(notes.notes_arr,function(i,elm){
+ _temp = $(note_tpl).data('id',i);
+ //templating
+ $('.name',_temp).html(elm.title);
+ $('time',_temp).html($.timeago(new Date(+elm.date)));
+ if(i == notes.active_note) {
+ fns.textAreaPopulate(i);
+ $(_temp).addClass('active');
+ };
+ _temp.appendTo('#notes_list');
+ });
+ $('#number').html(notes.notes_arr.length);
note_list = new iScroll('notes_list', {
momentum:true,
desktopCompatibility:true,
@@ -31,10 +76,52 @@ $('document').ready(function(){
});
+//helper functions
+fns.addNewNote = function(){
+ var d = new Date();
+ var temp = {'title':'New Note',date:d.getTime(),text:''};
+ var obj = $(note_tpl);
+ var newLength= notes.notes_arr.unshift(temp);
+ $('.name',obj).html(temp.title);
+ $('time',obj).html($.timeago(new Date(+temp.date)));
+ obj.data('id',0).css('height',0).prependTo('#notes_list').animate({'height':36},500,function(){
+ fns.refreshIDs();
+ fns.textAreaPopulate(0);
+ });
+};
+fns.removeNote = function(id){
+ var _id = (id !== undefined)? id : notes.active_note;
+
+ $('#notes_list li').eq(_id).animate({'height':0},500,function(){
+ $(this).remove();
+ notes.notes_arr.remove(_id);
+ default_notes.active_note = 0;
+ fns.refreshIDs();
+ fns.textAreaPopulate();
+ });
+ //remove value from array - http://snipplr.com/view/14381/remove-item-from-array-with-jquery/
-
-//helper functions for localstorage
-
+
+};
+fns.updateLocalStorage = function(){
+ fns.setObject('notes',notes);
+};
+fns.refreshIDs = function(){
+ $('#notes_list li').each(function(i){
+ $(this).data('id',i);
+ });
+};
+fns.textAreaPopulate = function(id,elm){
+ var _id = id || default_notes.active_note;
+ notes.active_note = _id;
+ $('#note_area').attr('value',notes.notes_arr[_id].text).focus();
+ $('#main_title').html(notes.notes_arr[_id].title);
+ var d = new Date(+notes.notes_arr[_id].date);
+ $('#relative_date').html($.timeago(d));
+ $('#date_time').html(d.toLocaleDateString() +' '+ d.getDate());
+ $('#notes_list li').eq(_id).addClass('active').siblings().removeClass('active');
+ fns.updateLocalStorage();
+};
fns.setObject = function(key, value) {
localStorage.setItem(key, JSON.stringify(value));
};
@@ -42,19 +129,149 @@ fns.getObject = function(key) {
return localStorage.getItem(key) && JSON.parse(localStorage.getItem(key));
};
+// Array Remove - By John Resig (MIT Licensed)
+Array.prototype.remove = function(from, to) {
+ var rest = this.slice((to || from) + 1 || this.length);
+ this.length = from < 0 ? this.length + from : from;
+ return this.push.apply(this, rest);
+};
+/*
+ * timeago: a jQuery plugin, version: 0.9.2 (2010-09-14)
+ * @requires jQuery v1.2.3 or later
+ *
+ * Timeago is a jQuery plugin that makes it easy to support automatically
+ * updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago").
+ *
+ * For usage and examples, visit:
+ * http://timeago.yarp.com/
+ *
+ * Licensed under the MIT:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Copyright (c) 2008-2010, Ryan McGeary (ryanonjavascript -[at]- mcgeary [*dot*] org)
+ */
+(function($) {
+ $.timeago = function(timestamp) {
+ if (timestamp instanceof Date) return inWords(timestamp);
+ else if (typeof timestamp == "string") return inWords($.timeago.parse(timestamp));
+ else return inWords($.timeago.datetime(timestamp));
+ };
+ var $t = $.timeago;
-
+ $.extend($.timeago, {
+ settings: {
+ refreshMillis: 60000,
+ allowFuture: false,
+ strings: {
+ prefixAgo: null,
+ prefixFromNow: null,
+ suffixAgo: "ago",
+ suffixFromNow: "from now",
+ seconds: "a minute",
+ minute: "a minute",
+ minutes: "%d minutes",
+ hour: "hour",
+ hours: "%d hours",
+ day: "a day",
+ days: "%d days",
+ month: "a month",
+ months: "%d months",
+ year: "a year",
+ years: "%d years",
+ numbers: []
+ }
+ },
+ inWords: function(distanceMillis) {
+ var $l = this.settings.strings;
+ var prefix = $l.prefixAgo;
+ var suffix = $l.suffixAgo;
+ if (this.settings.allowFuture) {
+ if (distanceMillis < 0) {
+ prefix = $l.prefixFromNow;
+ suffix = $l.suffixFromNow;
+ }
+ distanceMillis = Math.abs(distanceMillis);
+ }
+ var seconds = distanceMillis / 1000;
+ var minutes = seconds / 60;
+ var hours = minutes / 60;
+ var days = hours / 24;
+ var years = days / 365;
+ function substitute(stringOrFunction, number) {
+ var string = $.isFunction(stringOrFunction) ? stringOrFunction(number, distanceMillis) : stringOrFunction;
+ var value = ($l.numbers && $l.numbers[number]) || number;
+ return string.replace(/%d/i, value);
+ }
+ var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||
+ seconds < 90 && substitute($l.minute, 1) ||
+ minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||
+ minutes < 90 && substitute($l.hour, 1) ||
+ hours < 24 && substitute($l.hours, Math.round(hours)) ||
+ hours < 48 && substitute($l.day, 1) ||
+ days < 30 && substitute($l.days, Math.floor(days)) ||
+ days < 60 && substitute($l.month, 1) ||
+ days < 365 && substitute($l.months, Math.floor(days / 30)) ||
+ years < 2 && substitute($l.year, 1) ||
+ substitute($l.years, Math.floor(years));
+ return $.trim([prefix, words, suffix].join(" "));
+ },
+ parse: function(iso8601) {
+ var s = $.trim(iso8601);
+ s = s.replace(/\.\d\d\d+/,""); // remove milliseconds
+ s = s.replace(/-/,"/").replace(/-/,"/");
+ s = s.replace(/T/," ").replace(/Z/," UTC");
+ s = s.replace(/([\+-]\d\d)\:?(\d\d)/," $1$2"); // -04:00 -> -0400
+ return new Date(s);
+ },
+ datetime: function(elem) {
+ // jQuery's `is()` doesn't play well with HTML5 in IE
+ var isTime = $(elem).get(0).tagName.toLowerCase() == "time"; // $(elem).is("time");
+ var iso8601 = isTime ? $(elem).attr("datetime") : $(elem).attr("title");
+ return $t.parse(iso8601);
+ }
+ });
+ $.fn.timeago = function() {
+ var self = this;
+ self.each(refresh);
+ var $s = $t.settings;
+ if ($s.refreshMillis > 0) {
+ setInterval(function() { self.each(refresh); }, $s.refreshMillis);
+ }
+ return self;
+ };
-/*
-* Auto-growing textareas; technique ripped from Facebook
-*/
+ function refresh() {
+ var data = prepareData(this);
+ if (!isNaN(data.datetime)) {
+ $(this).text(inWords(data.datetime));
+ }
+ return this;
+ }
+
+ function prepareData(element) {
+ element = $(element);
+ if (!element.data("timeago")) {
+ element.data("timeago", { datetime: $t.datetime(element) });
+ var text = $.trim(element.text());
+ if (text.length > 0) element.attr("title", text);
+ }
+ return element.data("timeago");
+ }
+
+ function inWords(date) {
+ return $t.inWords(distance(date));
+ }
+
+ function distance(date) {
+ return (new Date().getTime() - date.getTime());
+ }
-(function($){$.fn.autogrow=function(options){this.filter('textarea').each(function(){var $this=$(this),minHeight=$this.height(),lineHeight=$this.css('lineHeight');var shadow=$('<div></div>').css({position:'absolute',top:-10000,left:-10000,width:$(this).width()-parseInt($this.css('paddingLeft'))-parseInt($this.css('paddingRight')),fontSize:$this.css('fontSize'),fontFamily:$this.css('fontFamily'),lineHeight:$this.css('lineHeight'),resize:'none'}).appendTo(document.body);var update=function(){var times=function(string,number){for(var i=0,r='';i<number;i++)r+=string;return r};var val=this.value.replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/&/g,'&amp;').replace(/\n$/,'<br/>&nbsp;').replace(/\n/g,'<br/>').replace(/ {2,}/g,function(space){return times('&nbsp;',space.length-1)+' '});shadow.html(val);$(this).css('height',Math.max(shadow.height()+20,minHeight))};$(this).change(update).keyup(update).keydown(update);update.apply(this)});return this}})(jQuery);
+})(jQuery);
View
26 notes.php
@@ -26,26 +26,7 @@
</div>
<div id="notes_list_cont">
<ul id="notes_list">
- <li class="active">
- <span class="name">SFjkasf...</span>
- <span class="date">10:37 pm</span>
- </li>
- <li>
- <span class="name">Public user Interface...</span>
- <span class="date">Dec 8, 2010</span>
- </li>
- <li>
- <span class="name">Public user Interface...</span>
- <span class="date">Dec 8, 2010</span>
- </li>
- <li>
- <span class="name">Public user Interface...</span>
- <span class="date">Dec 8, 2010</span>
- </li>
- <li>
- <span class="name">Public user Interface...</span>
- <span class="date">Dec 8, 2010</span>
- </li>
+
</ul>
</div>
<div id="pocket"></div>
@@ -54,10 +35,11 @@
<div id="header">
<span id="main_title">BLA BLA BLA</span>
<div id="add_btn">+</div>
+ <div id="remove_btn">-</div>
</div>
<div id="note_wrap">
- <div id="relative_date">Today</div>
- <div id="date_time">Sep 13, 2010 11:42 AM</div>
+ <time id="relative_date" class="timeago">Today</time>
+ <time id="date_time">Sep 13, 2010 11:42 AM</time>
<div id="note">
<textarea id="note_area"></textarea>
</div>
View
2  style/main.css
@@ -1,5 +1,5 @@
body{
- font-family:Arial,Helvetica,Sans-serif;
+ font-family:Helvetica,Arial,Sans-serif;
font-size:16px;
}
#header{
View
31 style/notes.css
@@ -66,8 +66,31 @@
#notes_list li{
border-bottom:1px solid #c3c3c3;
height:36px;
- min-height:36px;
width:100%;display:block; list-style:none;
+ position:relative;
+}
+span.name{
+ color:#000;
+ font-weight:bold;
+ font-size:14px;
+ line-height: 36px;
+ position:relative;
+ left:10px;
+}
+#notes_list li time{
+ color:#656565;
+ font-size:12px;
+ line-height: 36px;
+ display:block;
+ position:absolute;
+ right:10px;
+ top:0;
+}
+span.name:after{
+ content:"...";
+}
+#notes_list li.active{
+ border-color:#a1472f;
}
@@ -83,6 +106,12 @@
#add_btn{
position:absolute;
right:0;top:5px;
+ cursor:pointer;
+}
+#remove_btn{
+ position:absolute;
+ right:35px;top:5px;
+ cursor:pointer;
}
#note_wrap{
padding:20px;
Please sign in to comment.
Something went wrong with that request. Please try again.