mobile: add experimental iUI based version

lib/iui/iui.css

@@ -0,0 +1,396 @@
+/* iui.css (c) 2007-9 by iUI Project Members, see LICENSE.txt for license */
+body {
+    margin: 0;
+    font-family: Helvetica;
+    background: #FFFFFF;
+    color: #000000;
+    overflow-x: hidden;
+    -webkit-user-select: none;
+    -webkit-text-size-adjust: none;
+}
+
+body > *:not(.toolbar) {
+    display: none;
+    position: absolute;
+    margin: 0;
+    padding: 0;
+    left: 0;
+    top: 45px;
+    width: 100%;
+    min-height: 372px;
+    -webkit-transition-duration: 300ms;
+    -webkit-transition-property: -webkit-transform;
+    -webkit-transform: translateX(0%);
+}
+
+body[orient="landscape"] > *:not(.toolbar) {
+    min-height: 268px;
+}
+
+body > *[selected="true"] {
+    display: block;
+}
+
+a[selected], a:active {
+    background-color: #194fdb !important;
+    background-image: url(listArrowSel.png), url(selection.png) !important;
+    background-repeat: no-repeat, repeat-x;
+    background-position: right center, left top;
+    color: #FFFFFF !important;
+}
+
+a[selected="progress"] {
+    background-image: url(loading.gif), url(selection.png) !important;
+}
+
+/************************************************************************************************/
+
+body > .toolbar {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    border-bottom: 1px solid #2d3642;
+    border-top: 1px solid #6d84a2;
+    padding: 10px;
+    height: 45px;
+    background: url(toolbar.png) #6d84a2 repeat-x;
+}
+
+.toolbar > h1 {
+    position: absolute;
+    overflow: hidden;
+    left: 50%;
+    margin: 1px 0 0 -75px;
+    height: 45px;
+    font-size: 20px;
+    width: 150px;
+    font-weight: bold;
+    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #FFFFFF;
+}
+
+body[orient="landscape"] > .toolbar > h1 {
+    margin-left: -125px;
+    width: 250px;
+}
+
+.button {
+    position: absolute;
+    overflow: hidden;
+    top: 8px;
+    right: 6px;
+    margin: 0;
+    border-width: 0 5px;
+    padding: 0 3px;
+    width: auto;
+    height: 30px;
+    line-height: 30px;
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: bold;
+    color: #FFFFFF;
+    text-shadow: rgba(0, 0, 0, 0.6) 0px -1px 0;
+    text-overflow: ellipsis;
+    text-decoration: none;
+    white-space: nowrap;
+    background: none;
+    -webkit-border-image: url(toolButton.png) 0 5 0 5;
+}
+
+.blueButton {
+    -webkit-border-image: url(blueButton.png) 0 5 0 5;
+    border-width: 0 5px;
+}
+
+.leftButton {
+    left: 6px;
+    right: auto;
+}
+
+#backButton {
+    display: none;
+    left: 6px;
+    right: auto;
+    padding: 0;
+    max-width: 55px;
+    border-width: 0 8px 0 14px;
+    -webkit-border-image: url(backButton.png) 0 8 0 14;
+}
+
+.whiteButton,
+.redButton,
+.grayButton {
+    display: block;
+    border-width: 0 12px;
+    padding: 10px;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    text-decoration: inherit;
+    color: inherit;
+}
+
+.whiteButton {
+    -webkit-border-image: url(whiteButton.png) 0 12 0 12;
+    text-shadow: rgba(255, 255, 255, 0.7) 0 1px 0;
+}
+
+.redButton {
+    -webkit-border-image: url(redButton.png) 0 12 0 12;
+    color:#fff;
+    text-shadow: #7a0001 0 -1px 0;
+}
+
+.grayButton {
+    -webkit-border-image: url(grayButton.png) 0 12 0 12;
+    color: #FFFFFF;
+}
+
+/************************************************************************************************/
+
+body > ul > li {
+    position: relative;
+    margin: 0;
+    border-bottom: 1px solid #E0E0E0;
+    padding: 8px 0 8px 10px;
+    font-size: 20px;
+    font-weight: bold;
+    list-style: none;
+}
+
+body > ul > li.group {
+    position: relative;
+    top: -1px;
+    margin-bottom: -2px;
+    border-top: 1px solid #7d7d7d;
+    border-bottom: 1px solid #999999;
+    padding: 1px 10px;
+    background: url(listGroup.png) repeat-x;
+    font-size: 17px;
+    font-weight: bold;
+    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
+    color: #FFFFFF;
+}
+
+body > ul > li.group:first-child {
+    top: 0;
+    border-top: none;
+}
+
+body > ul > li > a {
+    display: block;
+    margin: -8px 0 -8px -10px;
+    padding: 8px 32px 8px 10px;
+    text-decoration: none;
+    color: inherit;
+    background: url(listArrow.png) no-repeat right center;
+}
+
+a[target="_replace"] {
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    padding-top: 25px;
+    padding-bottom: 25px;
+    font-size: 18px;
+    color: cornflowerblue;
+    background-color: #FFFFFF;
+    background-image: none;
+}
+
+/************************************************************************************************/
+    
+body > .dialog {
+    top: 0;
+    width: 100%;
+    min-height: 417px;
+    z-index: 2;
+    background: rgba(0, 0, 0, 0.8);
+    padding: 0;
+    text-align: right;
+}
+
+.dialog > fieldset {
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    width: 100%;
+    margin: 0;
+    border: none;
+    border-top: 1px solid #6d84a2;
+    padding: 10px 6px;
+    background: url(toolbar.png) #7388a5 repeat-x;
+}
+
+.dialog > fieldset > h1 {
+    margin: 0 10px 0 10px;
+    padding: 0;
+    font-size: 20px;
+    font-weight: bold;
+    color: #FFFFFF;
+    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
+    text-align: center;
+}
+
+.dialog > fieldset > label {
+    position: absolute;
+    margin: 16px 0 0 6px;
+    font-size: 14px;
+    color: #999999;
+}
+
+input:not(input[type|=radio]):not(input[type|=checkbox]) {
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    width: 100%;
+    margin: 8px 0 0 0;
+    padding: 6px 6px 6px 44px;
+    font-size: 16px;
+    font-weight: normal;
+}
+
+/************************************************************************************************/
+
+body > .panel {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    padding: 10px;
+    background: #c8c8c8 url(pinstripes.png);
+}
+
+.panel > fieldset {
+    position: relative;
+    margin: 0 0 20px 0;
+    padding: 0;
+    background: #FFFFFF;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border: 1px solid #999999;
+    text-align: right;
+    font-size: 16px;
+}
+
+.row  {
+    position: relative;
+    min-height: 42px;
+    border-bottom: 1px solid #999999;
+    -webkit-border-radius: 0;
+    text-align: right;
+}
+
+fieldset > .row:last-child {
+    border-bottom: none !important;
+}
+
+.row > input:not(input[type|=radio]):not(input[type|=checkbox]) {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    margin: 0;
+    border: none;
+    padding: 12px 10px 0 110px;
+    height: 42px;
+    background: none;
+}
+.row > input[type|=radio], .row > input[type|=checkbox] {
+  margin: 7px 7px 0 0;
+  height: 25px;
+  width: 25px;
+}
+
+.row > label {
+    position: absolute;
+    margin: 0 0 0 14px;
+    line-height: 42px;
+    font-weight: bold;
+}
+
+.row > span {
+    position: absolute;
+    padding: 12px 10px 0 110px;
+    margin: 0;
+}
+
+.row > .toggle {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    width: 100px;
+    height: 28px;
+}
+
+.toggle {
+    border: 1px solid #888888;
+    -webkit-border-radius: 6px;
+    background: #FFFFFF url(toggle.png) repeat-x;
+    font-size: 19px;
+    font-weight: bold;
+    line-height: 30px;
+}
+
+.toggle[toggled="true"] {
+    border: 1px solid #143fae;
+    background: #194fdb url(toggleOn.png) repeat-x;
+}
+
+.toggleOn {
+    display: none;
+    position: absolute;
+    width: 60px;
+    text-align: center;
+    left: 0;
+    top: 0;
+    color: #FFFFFF;
+    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
+}
+
+.toggleOff {
+    position: absolute;
+    width: 60px;
+    text-align: center;
+    right: 0;
+    top: 0;
+    color: #666666;
+}
+
+.toggle[toggled="true"] > .toggleOn {
+    display: block;
+}
+
+.toggle[toggled="true"] > .toggleOff {
+    display: none;
+}
+
+.thumb {
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    width: 40px;
+    height: 28px;    
+    border: 1px solid #888888;
+    -webkit-border-radius: 6px;
+    background: #ffffff url(thumb.png) repeat-x;
+}
+
+.toggle[toggled="true"] > .thumb {
+    left: auto;
+    right: -1px;
+}
+
+.panel > h2 {
+    margin: 0 0 8px 14px;
+    font-size: inherit;
+    font-weight: bold;
+    color: #4d4d70;
+    text-shadow: rgba(255, 255, 255, 0.75) 2px 2px 0;
+}
+
+/************************************************************************************************/
+
+#preloader {
+    display: none;
+    background-image: url(loading.gif), url(selection.png),
+        url(blueButton.png), url(listArrowSel.png), url(listGroup.png);
+}

lib/iui/iui.js

@@ -0,0 +1,518 @@
+/*
+   Copyright (c) 2007-9, iUI Project Members
+   See LICENSE.txt for licensing terms
+ */
+
+
+(function() {
+
+var slideSpeed = 20;
+var slideInterval = 0;
+
+var currentPage = null;
+var currentDialog = null;
+var currentWidth = 0;
+var currentHash = location.hash;
+var hashPrefix = "#_";
+var pageHistory = [];
+var newPageCount = 0;
+var checkTimer;
+var hasOrientationEvent = false;
+var portraitVal = "portrait";
+var landscapeVal = "landscape";
+
+// *************************************************************************************************
+
+window.iui =
+{
+	animOn: true,	// Slide animation with CSS transition is now enabled by default where supported
+
+	showPage: function(page, backwards)
+	{
+		if (page)
+		{
+			if (currentDialog)
+			{
+				currentDialog.removeAttribute("selected");
+				currentDialog = null;
+			}
+
+			if (hasClass(page, "dialog"))
+				showDialog(page);
+			else
+			{
+				var fromPage = currentPage;
+				currentPage = page;
+
+				if (fromPage)
+					setTimeout(slidePages, 0, fromPage, page, backwards);
+				else
+					updatePage(page, fromPage);
+			}
+		}
+	},
+
+	showPageById: function(pageId)
+	{
+		var page = $(pageId);
+		if (page)
+		{
+			var index = pageHistory.indexOf(pageId);
+			var backwards = index != -1;
+			if (backwards)
+				pageHistory.splice(index, pageHistory.length);
+
+			iui.showPage(page, backwards);
+		}
+	},
+
+	showPageByHref: function(href, args, method, replace, cb, backwards)
+	{
+		var req = new XMLHttpRequest();
+		req.onerror = function()
+		{
+			if (cb)
+				cb(false);
+		};
+		
+		req.onreadystatechange = function()
+		{
+			if (req.readyState == 4)
+			{
+				if (replace)
+					replaceElementWithSource(replace, req.responseText);
+				else
+				{
+					var frag = document.createElement("div");
+					frag.innerHTML = req.responseText;
+					iui.insertPages(frag.childNodes, backwards);
+				}
+				if (cb)
+					setTimeout(cb, 1000, true);
+			}
+		};
+
+		if (args)
+		{
+			req.open(method || "GET", href, true);
+			req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+			req.setRequestHeader("Content-Length", args.length);
+			req.send(args.join("&"));
+		}
+		else
+		{
+			req.open(method || "GET", href, true);
+			req.send(null);
+		}
+	},
+	
+	insertPages: function(nodes, backwards)
+	{
+		var targetPage;
+		for (var i = 0; i < nodes.length; ++i)
+		{
+			var child = nodes[i];
+			if (child.nodeType == 1)
+			{
+				if (!child.id)
+					child.id = "__" + (++newPageCount) + "__";
+
+				var clone = $(child.id);
+				if (clone)
+					clone.parentNode.replaceChild(child, clone);
+				else
+					document.body.appendChild(child);
+
+				if (child.getAttribute("selected") == "true" || !targetPage)
+					targetPage = child;
+				
+				--i;
+			}
+		}
+
+		if (targetPage)
+			iui.showPage(targetPage, backwards);	 
+	},
+
+	getSelectedPage: function()
+	{
+		for (var child = document.body.firstChild; child; child = child.nextSibling)
+		{
+			if (child.nodeType == 1 && child.getAttribute("selected") == "true")
+				return child;
+		}	 
+	},
+	isNativeUrl: function(href)
+	{
+		for(var i = 0; i < iui.nativeUrlPatterns.length; i++)
+		{
+			if(href.match(iui.nativeUrlPatterns[i])) return true;
+		}
+		return false;
+	},
+	nativeUrlPatterns: [
+		new RegExp("^http:\/\/maps.google.com\/maps\?"),
+		new RegExp("^mailto:"),
+		new RegExp("^tel:"),
+		new RegExp("^http:\/\/www.youtube.com\/watch\\?v="),
+		new RegExp("^http:\/\/www.youtube.com\/v\/"),
+		new RegExp("^javascript:"),
+
+	]
+};
+
+// *************************************************************************************************
+
+addEventListener("load", function(event)
+{
+	var page = iui.getSelectedPage();
+	var locPage = getPageFromLoc();
+		
+	if (page)
+			iui.showPage(page);
+	
+	if (locPage && (locPage != page))
+		iui.showPage(locPage);
+	
+	setTimeout(preloadImages, 0);
+	if (typeof window.onorientationchange == "object")
+	{
+		window.onorientationchange=orientChangeHandler;
+		hasOrientationEvent = true;
+		setTimeout(orientChangeHandler, 0);
+	}
+	setTimeout(checkOrientAndLocation, 0);
+	checkTimer = setInterval(checkOrientAndLocation, 300);
+}, false);
+
+addEventListener("unload", function(event)
+{
+	return;
+}, false);
+	
+addEventListener("click", function(event)
+{
+	var link = findParent(event.target, "a");
+	if (link)
+	{
+		function unselect() { link.removeAttribute("selected"); }
+		
+		if (link.href && link.hash && link.hash != "#" && !link.target)
+		{
+			link.setAttribute("selected", "true");
+			iui.showPage($(link.hash.substr(1)));
+			setTimeout(unselect, 500);
+		}
+		else if (link == $("backButton")) {
+			history.back();
+		} else if (link.getAttribute("type") == "submit")
+		{
+			var form = findParent(link, "form");
+			if (form.target == "_self")
+			{
+			    form.submit();
+			    return;  // return so we don't preventDefault
+			}
+			submitForm(form);
+		}
+		else if (link.getAttribute("type") == "cancel")
+			cancelDialog(findParent(link, "form"));
+		else if (link.target == "_replace")
+		{
+			link.setAttribute("selected", "progress");
+			iui.showPageByHref(link.href, null, null, link, unselect);
+		}
+		else if (iui.isNativeUrl(link.href))
+		{
+			return;
+		}
+		else if (link.target == "_webapp")
+		{
+			location.href = link.href;
+		}
+		else if (!link.target)
+		{
+			link.setAttribute("selected", "progress");
+			iui.showPageByHref(link.href, null, null, null, unselect);
+		}
+		else
+			return;
+		
+		event.preventDefault();		   
+	}
+}, true);
+
+addEventListener("click", function(event)
+{
+	var div = findParent(event.target, "div");
+	if (div && hasClass(div, "toggle"))
+	{
+		div.setAttribute("toggled", div.getAttribute("toggled") != "true");
+		event.preventDefault();		   
+	}
+}, true);
+
+function getPageFromLoc()
+{
+	var page;
+	var result = location.hash.match(/#_([^\?_]+)/);
+	if (result)
+		page = result[1];
+	if (page)
+		page = $(page);
+	return page;
+}
+
+function orientChangeHandler()
+{
+	var orientation=window.orientation;
+	switch(orientation)
+	{
+	case 0:
+		setOrientation(portraitVal);
+		break;	
+		
+	case 90:
+	case -90: 
+		setOrientation(landscapeVal);
+		break;
+	}
+}
+
+
+function checkOrientAndLocation()
+{
+	if (!hasOrientationEvent)
+	{
+	  if (window.innerWidth != currentWidth)
+	  {	  
+		  currentWidth = window.innerWidth;
+		  var orient = currentWidth == 320 ? portraitVal : landscapeVal;
+		  setOrientation(orient);
+	  }
+	}
+
+	if (location.hash != currentHash)
+	{
+		var pageId = location.hash.substr(hashPrefix.length);
+		iui.showPageById(pageId);
+	}
+}
+
+function setOrientation(orient)
+{
+	document.body.setAttribute("orient", orient);
+	setTimeout(scrollTo, 100, 0, 1);
+}
+
+function showDialog(page)
+{
+	currentDialog = page;
+	page.setAttribute("selected", "true");
+	
+	if (hasClass(page, "dialog") && !page.target)
+		showForm(page);
+}
+
+function showForm(form)
+{
+	form.onsubmit = function(event)
+	{
+		event.preventDefault();
+		submitForm(form);
+	};
+	
+	form.onclick = function(event)
+	{
+		if (event.target == form && hasClass(form, "dialog"))
+			cancelDialog(form);
+	};
+}
+
+function cancelDialog(form)
+{
+	form.removeAttribute("selected");
+}
+
+function updatePage(page, fromPage)
+{
+	if (!page.id)
+		page.id = "__" + (++newPageCount) + "__";
+
+	location.hash = currentHash = hashPrefix + page.id;
+	pageHistory.push(page.id);
+
+	var pageTitle = $("pageTitle");
+	if (page.title)
+		pageTitle.innerHTML = page.title;
+
+	if (page.localName.toLowerCase() == "form" && !page.target)
+		showForm(page);
+		
+	var backButton = $("backButton");
+	if (backButton)
+	{
+		var prevPage = $(pageHistory[pageHistory.length-2]);
+		if (prevPage && !page.getAttribute("hideBackButton"))
+		{
+			backButton.style.display = "inline";
+			backButton.innerHTML = prevPage.title ? prevPage.title : "Back";
+		}
+		else
+			backButton.style.display = "none";
+	}	 
+}
+
+function slidePages(fromPage, toPage, backwards)
+{		 
+	var axis = (backwards ? fromPage : toPage).getAttribute("axis");
+
+	clearInterval(checkTimer);
+	
+	if (canDoSlideAnim() && axis != 'y')
+	{
+	  slide2(fromPage, toPage, backwards, slideDone);
+	}
+	else
+	{
+	  slide1(fromPage, toPage, backwards, axis, slideDone);
+	}
+
+	function slideDone()
+	{
+	  if (!hasClass(toPage, "dialog"))
+		  fromPage.removeAttribute("selected");
+	  checkTimer = setInterval(checkOrientAndLocation, 300);
+	  setTimeout(updatePage, 0, toPage, fromPage);
+	  fromPage.removeEventListener('webkitTransitionEnd', slideDone, false);
+	}
+}
+
+function canDoSlideAnim()
+{
+  return (iui.animOn) && (typeof WebKitCSSMatrix == "object");
+}
+
+function slide1(fromPage, toPage, backwards, axis, cb)
+{
+	if (axis == "y")
+		(backwards ? fromPage : toPage).style.top = "100%";
+	else
+		toPage.style.left = "100%";
+
+	scrollTo(0, 1);
+	toPage.setAttribute("selected", "true");
+	var percent = 100;
+	slide();
+	var timer = setInterval(slide, slideInterval);
+
+	function slide()
+	{
+		percent -= slideSpeed;
+		if (percent <= 0)
+		{
+			percent = 0;
+			clearInterval(timer);
+			cb();
+		}
+	
+		if (axis == "y")
+		{
+			backwards
+				? fromPage.style.top = (100-percent) + "%"
+				: toPage.style.top = percent + "%";
+		}
+		else
+		{
+			fromPage.style.left = (backwards ? (100-percent) : (percent-100)) + "%"; 
+			toPage.style.left = (backwards ? -percent : percent) + "%"; 
+		}
+	}
+}
+
+
+function slide2(fromPage, toPage, backwards, cb)
+{
+	toPage.style.webkitTransitionDuration = '0ms'; // Turn off transitions to set toPage start offset
+	// fromStart is always 0% and toEnd is always 0%
+	// iPhone won't take % width on toPage
+	var toStart = 'translateX(' + (backwards ? '-' : '') + window.innerWidth +	'px)';
+	var fromEnd = 'translateX(' + (backwards ? '100%' : '-100%') + ')';
+	toPage.style.webkitTransform = toStart;
+	toPage.setAttribute("selected", "true");
+	toPage.style.webkitTransitionDuration = '';	  // Turn transitions back on
+	function startTrans()
+	{
+		fromPage.style.webkitTransform = fromEnd;
+		toPage.style.webkitTransform = 'translateX(0%)'; //toEnd
+	}
+	fromPage.addEventListener('webkitTransitionEnd', cb, false);
+	setTimeout(startTrans, 0);
+}
+
+function preloadImages()
+{
+	var preloader = document.createElement("div");
+	preloader.id = "preloader";
+	document.body.appendChild(preloader);
+}
+
+function submitForm(form)
+{
+	iui.showPageByHref(form.action || "POST", encodeForm(form), form.method);
+}
+
+function encodeForm(form)
+{
+	function encode(inputs)
+	{
+		for (var i = 0; i < inputs.length; ++i)
+		{
+			if (inputs[i].name)
+				args.push(inputs[i].name + "=" + escape(inputs[i].value));
+		}
+	}
+
+	var args = [];
+	encode(form.getElementsByTagName("input"));
+	encode(form.getElementsByTagName("textarea"));
+	encode(form.getElementsByTagName("select"));
+	return args;	
+}
+
+function findParent(node, localName)
+{
+	while (node && (node.nodeType != 1 || node.localName.toLowerCase() != localName))
+		node = node.parentNode;
+	return node;
+}
+
+function hasClass(self, name)
+{
+	var re = new RegExp("(^|\\s)"+name+"($|\\s)");
+	return re.exec(self.getAttribute("class")) != null;
+}
+
+function replaceElementWithSource(replace, source)
+{
+	var page = replace.parentNode;
+	var parent = replace;
+	while (page.parentNode != document.body)
+	{
+		page = page.parentNode;
+		parent = parent.parentNode;
+	}
+
+	var frag = document.createElement(parent.localName);
+	frag.innerHTML = source;
+
+	page.removeChild(parent);
+
+	while (frag.firstChild)
+		page.appendChild(frag.firstChild);
+}
+
+function $(id) { return document.getElementById(id); }
+function ddd() { console.log.apply(console, arguments); }
+
+})();

mobile/article.php

@@ -0,0 +1,28 @@
+<?php
+	error_reporting(E_ERROR | E_WARNING | E_PARSE);
+
+	header('Content-Type: text/html; charset=utf-8');
+
+	define('MOBILE_VERSION', true);
+
+	require_once "../config.php";
+	require_once "functions.php";
+	require_once "../functions.php"; 
+
+	require_once "../sessions.php";
+
+	require_once "../version.php"; 
+	require_once "../db-prefs.php";
+
+	$link = db_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
+
+	init_connection($link);
+
+	login_sequence($link, true);
+
+	$id = db_escape_string($_REQUEST["id"]);
+	$feed_id = db_escape_string($_REQUEST["feed"]);
+
+  	render_article($link, $id, $feed_id);
+?>
+

mobile/feed.php

@@ -0,0 +1,27 @@
+<?php
+	error_reporting(E_ERROR | E_WARNING | E_PARSE);
+
+	header('Content-Type: text/html; charset=utf-8');
+
+	define('MOBILE_VERSION', true);
+
+	require_once "../config.php";
+	require_once "functions.php";
+	require_once "../functions.php"; 
+
+	require_once "../sessions.php";
+
+	require_once "../version.php"; 
+	require_once "../db-prefs.php";
+
+	$link = db_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
+
+	init_connection($link);
+
+	login_sequence($link, true);
+
+	$feed = db_escape_string($_REQUEST["id"]);
+
+  	render_headlines_list($link, $feed);
+?>
+

mobile/index.php

@@ -1 +1,74 @@
-<?php require "tt-rss.php" ?>
+<?php
+	error_reporting(E_ERROR | E_WARNING | E_PARSE);
+
+	header('Content-Type: text/html; charset=utf-8');
+
+	define('MOBILE_VERSION', true);
+
+	require_once "../config.php";
+	require_once "functions.php";
+	require_once "../functions.php"; 
+
+	require_once "../sessions.php";
+
+	require_once "../version.php"; 
+	require_once "../db-prefs.php";
+
+	$link = db_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
+
+	init_connection($link);
+
+	login_sequence($link, true);
+?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<title>Tiny Tiny RSS</title>
+<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
+<link rel="apple-touch-icon" href="../lib/iui/iui-logo-touch-icon.png" />
+<meta name="apple-touch-fullscreen" content="YES" />
+<style type="text/css" media="screen">@import "../lib/iui/iui.css";</style>
+<script type="application/x-javascript" src="../lib/iui/iui.js"></script>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+
+</head>
+
+<style type="text/css">
+	img { max-width : 75%; }
+
+	li.oldItem {
+		color : gray;
+	}
+
+	img.tinyIcon {
+		max-width : 16px;
+		max-height : 16px;
+		margin-right : 10px;
+		vertical-align : middle;
+	}
+</style>
+
+<script type="text/javascript">
+	function toggleMarked(id, elem) {
+		alert(id + " => " + elem.getAttribute('toggled'));
+	}
+
+	function togglePublished(id, elem) {
+		alert(id + " => " + elem.getAttribute('toggled'));
+	}
+
+</script>
+
+<body>
+    <div class="toolbar">
+        <h1 id="pageTitle"></h1>
+		  <a id="backButton" class="button" href="#"></a>
+        <a class="button"  target="_self" href="logout.php">Logout</a>
+    </div>
+    
+	<?php render_categories_list($link); ?>
+
+</body>
+</html>

mobile/login_form.php

@@ -1,36 +1,23 @@
-<html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-	<title>Tiny Tiny RSS : Login</title>
-	<link rel="stylesheet" type="text/css" href="mobile.css">
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<script type="text/javascript" charset="utf-8" src="mobile.js"></script>
+<title>Tiny Tiny RSS</title>
+<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
+<link rel="apple-touch-icon" href="../lib/iui/iui-logo-touch-icon.png" />
+<meta name="apple-touch-fullscreen" content="YES" />
+<style type="text/css" media="screen">@import "../lib/iui/iui.css";</style>
+<script type="application/x-javascript" src="../lib/iui/iui.js"></script>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 
+
 <script type="text/javascript">
-function init() {
-
-	if (arguments.callee.done) return;
-	arguments.callee.done = true;		
-
-	var login = document.forms["loginForm"].login;
-	var click = document.forms["loginForm"].click;
-
-	login.focus();
-	click.disabled = false;
-
+function do_login() {
+	var f = document.forms['login'];
+	f.submit();
 }
-function languageChange(elem) {
-	try {
-		document.forms['loginForm']['click'].disabled = true;
-	
-		var lang = elem[elem.selectedIndex].value;
-		setCookie("ttrss_lang", lang, <?php print SESSION_COOKIE_LIFETIME ?>);
-		window.location.reload();
-	} catch (e) {
-		exception_error("languageChange", e);
-	}
-}
-
 </script>
 
 <script type="text/javascript">
@@ -43,36 +30,31 @@ window.onload = init;
 
 <body>
 
-	<div id="content">
-	<div id="heading">Tiny Tiny RSS</div>
+    <div class="toolbar">
+        <h1 id="pageTitle"></h1>
+		  <a id="backButton" class="button" href="#"></a>
+        <a class="button blueButton" onclick='do_login()'><?php echo __('Log in') ?></a>
+    </div>
 
-	<form action="tt-rss.php" method="POST" name="loginForm">
-	<input type="hidden" name="rt" value="<?php echo $_GET['rt'] ?>">
-	<input type="hidden" name="login_action" value="do_login">
+	<form target="_self" title="Login" action="index.php" id="login" class="panel" method="POST" name="login" selected="true">
 
-	<?php if ($_SESSION['login_error_msg']) { ?>
-		<div class="loginError"><?php echo $_SESSION['login_error_msg'] ?></div>
-		<?php $_SESSION['login_error_msg'] = ""; ?>
-	<?php } ?>
+	<fieldset>
 
-	<table>
-		<tr><td align='right'><?php echo __("Login:") ?></td><td><input type="text" name="login"></td>
-		<tr><td align='right'><?php echo __("Password:") ?></td><td><input type="password" name="password"></tr>
+		<input type="hidden" name="login_action" value="do_login">
 
-		<tr><td align="right"><?php echo __("Language:") ?></td>
-		<td>
-			<?php
-				print_select_hash("language", $_COOKIE["ttrss_lang"], get_translations(),
-					"style='width : 100%' onchange='languageChange(this)'");
+		<div class="row">
+			<label><?php echo __("Login:") ?></label>
+			<input type="text" name="login">
+		</div>
 
-			?>
-		</td></tr>
-		<tr><td colspan='2'>
-		<input type="submit" class="button" value="<?php echo __('Log in') ?>" name="click">
-		</td></tr>
-		</table>
+		<div class="row">
+		<label><?php echo __("Password:") ?></label>
+		<input type="password" name="password">
+		</div>
+
+		</fieldset>
+	
 	</form>
-	</div>
 
 </body>
 </html>

mobile/logout.php

@@ -5,5 +5,5 @@
 
 	logout_user();
 
-	header("Location: tt-rss.php");
+	header("Location: index.php");
 ?>

mobile/mobile.css

@@ -1,228 +0,0 @@
-body {
-	padding : 0px;
-	margin : 0px;
-	font-family : sans-serif;
-}
-
-h1 {
-	font-size : medium;	
-}
-
-h2 {
-	font-size : medium;
-	font-weight : bold;
-	border-width : 0px 0px 1px 0px;
-	border-style : solid;
-	border-color : #88b0ff;
-}
-
-h3 {
-	font-size : medium;
-	font-weight : bold;
-	border-width : 0px 0px 1px 0px;
-	border-style : solid;
-	border-color : #e0e0e0;
-}
-
-#heading {
-/*	border-width : 0px 0px 1px 0px;
-	border-style : solid;
-	border-color : #88b0ff;
-	font-weight : bold;
-	font-size : small; */
-
-	font-size : small;
-
-	border-width : 0px 0px 1px 0px;
-	border-style : solid;
-	border-color : #88b0ff;
-	background : #ecf4ff;
-}
-
-#content {
-	background : white;
-}
-
-#footer {
-/*	border-width : 1px 0px 0px 0px;
-	border-style : solid;
-	border-color : #88b0ff; */
-	text-align : center;
-	font-size : x-small;
-	color : gray;
-
-	border-width : 1px 0px 0px 0px;
-	border-style : solid;
-	border-color : #88b0ff;
-
-}
-
-form {
-	padding : 0px;
-	margin : 0px;
-}
-
-li.feedCatHolder {
-	display : inline;
-}
-
-ul.feedList {
-	list-style-type : none;
-	margin : 0px;
-	padding : 0px;
-
-}
-
-ul.feedList li.feedCat {
-	margin : 0px;
-	padding : 0px;
-	color : #707070;
-}
-
-ul.feedList li.feedCat a {
-	color : #707070;
-}
-
-ul.feedList li.feedCat a:hover {
-	color : #4684ff;
-}
-
-ul.feedCatList {
-	list-style-type : none;
-	margin : 0px 0px 0px 1em;
-	padding : 0px;	
-}
-
-ul.feedCatList li {
-	margin : 0px;
-	padding : 0px;
-	color : black;
-}
-
-ul.feedList li {
-	margin : 0px;
-}
-
-hr {
-	border-width : 0px 0px 1px 0px;
-	border-style : dashed;
-	border-color : #e0e0e0;
-}
-
-ul.headlines a, ul.feedList a {
-	color : black;
-}
-
-a {
-	color : #4684ff;
-	text-decoration : none;
-}
-
-a:hover {
-	color : black;
-}
-
-ul.feedList img, img.tinyFeedIcon {
-	margin : 0px 3px 0px 0px;
-	width : 16px;
-	height : 16px;
-	border-width : 0px;
-}
-
-ul.feedlist li.feedUnread, 
-ul.feedlist li.errorUnread, 
-ul.feedlist li.labelUnread, 
-ul.feedlist li.virtUnread,
-ul.feedlist li.tagUnread {
-	font-weight : bold;
-}
-
-.even {
-/*	background-color : #9bbdff; */
-	border-width : 0px 0px 1px 0px;
-	border-color : #88b0ff;
-	border-style : solid;
-	background-color : #cbddff;
-}
-
-.odd {
-	border-width : 0px 0px 1px 0px;
-	border-color : #88b0ff;
-	border-style : solid;
-}
-
-.evenUnread {
-	border-width : 0px 0px 1px 0px;
-	border-color : #88b0ff;
-	border-style : solid;
-/*	background-color : #9bbdff; */
-	font-weight : bold;
-	background-color : #cbddff;
-}
-
-.oddUnread {
-	border-width : 0px 0px 1px 0px;
-	border-color : #88b0ff;
-	border-style : solid;
-	font-weight : bold;
-}
-
-.evenSelected, .oddSelected, .evenUnreadSelected, .oddUnreadSelected {
-	background-color : #fff7d5;
-	border-width : 0px 0px 1px 0px;
-	border-color : #88b0ff;
-	border-style : solid;
-}
-
-.evenUnreadSelected, .oddUnreadSelected {
-	font-weight : bold;
-}
-
-.invisible {
-	display : none;
-}
-
-ul.headlines {
-	list-style-type : none;
-	margin : 0px;
-	padding : 0px;
-}
-
-ul.headlines span.hlUpdated {
-	color : gray;
-}
-
-ul.headlines img.feedIcon {
-	width : 25px;
-	text-align : center;
-}
-
-ul.headlines img.marked {
-	border-width : 0px;
-}
-
-div.postStarOps img.marked {
-	border-width : 0px;
-}
-
-div.postTags {
-	color : gray;
-	font-size : small;
-}
-
-div.footerAddon {
-	font-size : small;
-}
-
-.loginError {
-	color : red;
-	margin : 0.5em;
-}
-
-form.searchForm {
-	margin : 5px;
-}
-
-div.postStarOps {
-	float : right;
-}

mobile/mobile.js

@@ -1,48 +0,0 @@
-function debug(msg) {
-	// no-op
-}
-
-function setCookie(name, value, lifetime, path, domain, secure) {
-	
-	var d = false;
-	
-	if (lifetime) {
-		d = new Date();
-		d.setTime(d.getTime() + (lifetime * 1000));
-	}
-
-	debug("setCookie: " + name + " => " + value + ": " + d);
-	
-	int_setCookie(name, value, d, path, domain, secure);
-
-}
-
-function int_setCookie(name, value, expires, path, domain, secure) {
-	document.cookie= name + "=" + escape(value) +
-		((expires) ? "; expires=" + expires.toGMTString() : "") +
-		((path) ? "; path=" + path : "") +
-		((domain) ? "; domain=" + domain : "") +
-		((secure) ? "; secure" : "");
-}
-
-function exception_error(location, e, silent) {
-	var msg;
-
-	if (e.fileName) {
-		var base_fname = e.fileName.substring(e.fileName.lastIndexOf("/") + 1);
-	
-		msg = "Exception: " + e.name + ", " + e.message + 
-			"\nFunction: " + location + "()" +
-			"\nLocation: " + base_fname + ":" + e.lineNumber;
-
-	} else if (e.description) {
-		msg = "Exception: " + e.description + "\nFunction: " + location + "()";
-	} else {
-		msg = "Exception: " + e + "\nFunction: " + location + "()";
-	}
-
-	if (!silent) {
-		alert(msg);
-	}
-}
-

mobile/tt-rss.js

@@ -1,94 +0,0 @@
-function toggleSelectRow(cb, id) {	
-	try {
-
-		var row = document.getElementById("HROW-" + id);
-		var checked = cb.checked;
-		if (row) {
-			var unread = row.className.match("Unread");
-			var new_classname = row.className;
-
-			new_classname = new_classname.replace("Selected", "");
-			new_classname = new_classname.replace("Unread", "");
-
-			if (unread) new_classname = new_classname + "Unread";
-			if (checked) new_classname = new_classname + "Selected";
-
-			row.className = new_classname;
-		}
-	} catch (e) {
-		exception_error("toggleSelectRow", e);
-	}
-}
-
-function selectHeadlines(mode) {
-	try {
-
-	var cboxes = document.getElementsByTagName("INPUT");
-
-	for (var i = 0; i < cboxes.length; i++) {
-		if (cboxes[i].id && cboxes[i].id.match("HSCB-")) {
-			var row_id = cboxes[i].id.replace("HSCB-", "")
-			var row = document.getElementById("HROW-" + row_id);
-
-			if (row) {
-
-				if (mode == 1) {
-					cboxes[i].checked = true;
-					toggleSelectRow(cboxes[i], row_id);
-				}
-
-				if (mode == 2) {
-
-					var unread = row.className.match("Unread");
-
-					if (unread) {
-						cboxes[i].checked = true;
-					} else {
-						cboxes[i].checked = false;
-					}
-				}
-
-				if (mode == 3) {
-					cboxes[i].checked = false;
-				}
-
-				if (mode == 4) {
-					cboxes[i].checked = !cboxes[i].checked;
-				}
-
-				toggleSelectRow(cboxes[i], row_id);
-
-			}
-
-		}
-
-	}
-
-	} catch (e) {
-		exception_error("selectHeadlines", e);
-	}
-}
-
-function exception_error(location, e, silent) {
-	var msg;
-
-	if (e.fileName) {
-		var base_fname = e.fileName.substring(e.fileName.lastIndexOf("/") + 1);
-	
-		msg = "Exception: " + e.name + ", " + e.message + 
-			"\nFunction: " + location + "()" +
-			"\nLocation: " + base_fname + ":" + e.lineNumber;
-
-	} else if (e.description) {
-		msg = "Exception: " + e.description + "\nFunction: " + location + "()";
-	} else {
-		msg = "Exception: " + e + "\nFunction: " + location + "()";
-	}
-
-	debug("<b>EXCEPTION: " + msg + "</b>");
-
-	if (!silent) {
-		alert(msg);
-	}
-}
-

mobile/tt-rss.php

@@ -1,141 +0,0 @@
-<?php
-	error_reporting(E_ERROR | E_WARNING | E_PARSE);
-
-	define('MOBILE_VERSION', true);
-
-	require_once "../config.php";
-	require_once "functions.php";
-	require_once "../functions.php"; 
-
-	require_once "../sessions.php";
-
-	require_once "../version.php"; 
-	require_once "../db-prefs.php";
-
-	$link = db_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME);
-
-	init_connection($link);
-
-	login_sequence($link, true);
-
-	/* perform various redirect-needing subops */
-
-	$subop = db_escape_string($_GET["subop"]);
-	$go = $_GET["go"];
-
-	if ($subop == "tc" && !$go) {
-		
-		$cat_id = db_escape_string($_GET["id"]);
-			
-		if ($cat_id != 0) {			
-			db_query($link, "UPDATE ttrss_feed_categories SET
-				collapsed = NOT collapsed WHERE id = '$cat_id' AND owner_uid = " . 
-				$_SESSION["uid"]);
-		} else {
-			if ($_COOKIE["ttrss_vf_uclps"] != 1) {
-				setcookie("ttrss_vf_uclps", 1);
-			} else {
-				setcookie("ttrss_vf_uclps", 0);
-			}
-		}
-		
-		header("Location: tt-rss.php");
-		return;
-	}
-
-	$ts_id = db_escape_string($_GET["ts"]);
-
-	if ($go == "vf" && $ts_id) {
-
-		toggleMarked($link, $ts_id);
-
-		$query_string = preg_replace("/&ts=[0-9]*/", "", $_SERVER["QUERY_STRING"]);
-		header("Location: tt-rss.php?$query_string");
-		return;
-	}
-
-	$tp_id = db_escape_string($_GET["tp"]);
-
-	if ($go == "vf" && $tp_id) {
-
-		togglePublished($link, $tp_id);
-
-		$query_string = preg_replace("/&tp=[0-9]*/", "", $_SERVER["QUERY_STRING"]);
-		header("Location: tt-rss.php?$query_string");
-		return;
-	}
-
-	$sop = db_escape_string($_GET["sop"]);
-
-	if ($sop) {
-		if ($go == "view") {
-			$a_id = db_escape_string($_GET["id"]);
-		} elseif ($go == "vf") {
-			$a_id = db_escape_string($_GET["aid"]);
-		}
-
-		if ($a_id) {
-
-			if ($sop == "tp") {
-				togglePublished($link, $a_id);
-			}
-
-			if ($sop == "ts") {
-				toggleMarked($link, $a_id);
-			}
-
-			if ($sop == "mu") {
-				markUnread($link, $a_id);
-			}
-
-			$query_string = str_replace("&sop=$sop", "", $_SERVER["QUERY_STRING"]);
-			header("Location: tt-rss.php?$query_string");
-		}
-	}
-
-?>
-<html>
-<head>
-	<title>Tiny Tiny RSS - Mobile</title>
-	<link rel="stylesheet" type="text/css" href="mobile.css">
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<script type="text/javascript" src="tt-rss.js"></script>
-
-	<?php $user_css_url = get_pref($link, 'USER_STYLESHEET_URL'); ?>
-	<?php if ($user_css_url) { ?>
-		<link rel="stylesheet" type="text/css" href="<?php echo $user_css_url ?>"/> 
-	<?php } ?>
-</head>
-<body id="ttrssMobile">
-
-<div id="content">
-<?php
-	if (!$go) {
-		render_feeds_list($link);
-	} else if ($go == "vf") {
-		render_headlines($link);	
-	} else if ($go == "view") {
-		render_article($link);
-	} else if ($go == "sform") {
-		render_search_form($link, $_GET["aid"], $_GET["ic"]);
-	} else {
-		print __("Internal error: Function not implemented");
-	}
-
-?>
-</div>
-
-<?php if (!$go) { ?>
-
-<div id="footer">
-	<a href="http://tt-rss.org/">Tiny-Tiny RSS</a>
-	<?php if (!defined('HIDE_VERSION')) { ?>
-		 v<?php echo VERSION ?> 
-	<?php } ?>
-	&copy; 2005-2009 Andrew Dolgov
-</div>
-
-<?php } ?>
-
-</body>
-</html>