XE Smartphone 애드온에서 iui를 제거하고 자체 제작한 UI 로 변경

(아직 PC 브라우저에서 최적화 되었고 iphone, 옴니아등에서의 최적화는 다시 진행할 예정입니다) cafeXE, planet, page모듈에서도 스마트폰에 어울리는 컨텐츠로 스마트폰 환경을 제공하도록 수정 git-svn-id: http://xe-core.googlecode.com/svn/sandbox@6283 201d5d3c-b55e-5fd7-737f-ddc643e51545
2026-02-01 01:29:58 +09:00 · 2009-05-06 07:56:01 +00:00 · 2009-05-06 07:56:01 +00:00 · e48e2900e4
commit e48e2900e4
parent 4f8e98ddb0
45 changed files with 590 additions and 1150 deletions
--- a/addons/smartphone/tpl/images/btnMenu.png
+++ b/addons/smartphone/tpl/images/btnMenu.png
--- a/addons/smartphone/tpl/images/btnNext.png
+++ b/addons/smartphone/tpl/images/btnNext.png
--- a/addons/smartphone/tpl/images/btnPrev.png
+++ b/addons/smartphone/tpl/images/btnPrev.png
--- a/addons/smartphone/tpl/images/btnTop.png
+++ b/addons/smartphone/tpl/images/btnTop.png
--- a/addons/smartphone/tpl/images/listArrow.png
+++ b/addons/smartphone/tpl/images/listArrow.png
--- a/addons/smartphone/tpl/images/listGroup.png
+++ b/addons/smartphone/tpl/images/listGroup.png
--- a/addons/smartphone/tpl/images/pinstripes.png
+++ b/addons/smartphone/tpl/images/pinstripes.png
--- a/addons/smartphone/tpl/images/titlebar.png
+++ b/addons/smartphone/tpl/images/titlebar.png
--- a/addons/smartphone/tpl/layout.html
+++ b/addons/smartphone/tpl/layout.html
@ -1,55 +1,19 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html lang="{Context::getLangType()}" xml:lang="{Context::getLangType()}" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-    <meta name="Generator" content="XpressEngine {__ZBXE_VERSION__}" />
-    <meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
+<!--%import("./smartphone.css")-->
+<!--%import("./smartphone.js")-->

-    <title>{Context::getBrowserTitle()}</title>
-    <link rel="stylesheet" type="text/css" href="/addons/smartphone/iui/iui.css" />
-    <script type="application/x-javascript" src="/addons/smartphone/iui/iuix.js"></script>
+<div class="smartPhoneTitleBar">
+    <h1>{Context::getBrowserTitle()}</h1>
+</div>

-    <script type="text/javascript">//<![CDATA[
-        var current_url = "{$current_url}";
-        var request_uri = "{$request_uri}";
-        <!--@if($vid)-->var xeVid = "{$vid}";<!--@end-->
-        var current_mid = "{$mid}";
-        var waiting_message = "{$lang->msg_call_server}";
-    //]]></script>
-</head>
-<body>
-<!--@if(!$dtb)-->
-    <div class="toolbar">
-        <h1 id="pageTitle"></h1>
-        <a id="backButton" class="button" href="#"></a>
-        <a class="button" href="#searchForm">Search</a>
-    </div>
-<!--@end-->
-    <ul id="home" title="{$module_info->browser_title}" selected="true">
-        <li class="siteinfo">
-            <span class="description">{$module_info->description}</span>
-            <span class="xe">Powered by Xpress Engine</span>
-        </li>
-        <!--@if($bHavePhoneMethod)-->
-        <li><a href="{getUrl('act','default')}">View</a>
-        <!--@else-->
-        <li>이 모듈은 smartphoneView를 지원하지 않습니다.</li>
-        <!--@end-->
-        <li><a href="#menu0">Menu</a></li>
-    </ul>
-<!--@foreach($menus as $node_srl=>$menu)-->
-    <ul id="menu{$node_srl}" title="{$menu->text}" selected="false">
-        <!--@foreach($menu->list as $item_srl => $item)-->
-            <!--@if($menus[$item_srl])-->
-                <li><a href="#menu{$item_srl}">{$item->text}</a></li>
-            <!--@else-->
-            <!--@if($item->text && $item->url)-->
-                <li><a href="{getUrl('mid',$item->url,'act','')}" target="_self">{$item->text}</a></li>
-            <!--@end-->
-            <!--@end-->
-        <!--@end-->
-    </ul>
-<!--@end-->
-</body>
-</html>
+{$smart_content}

+<div class="smartPhoneToolBar">
+    <!--@if($parent_url)-->
+    <a href="{$parent_url}"><img src="./images/btnTop.png" class="smartPhoneBtn" alt="Top" /></a>
+    <!--@end-->
+
+    <!--@if($prev_url)--><a href="{$prev_url}"><img src="./images/btnPrev.png" class="smartPhoneBtn" alt="Prev" /></a><!--@end-->
+    <!--@if($next_url)--><a href="{$next_url}"><img src="./images/btnNext.png" class="smartPhoneBtn" alt="Next" /></a><!--@end-->
+
+    <a href="#" onclick="showXEMenu();return false;"><img src="./images/btnMenu.png" class="smartPhoneBtn" alt="Menu" /></a>
+</div>
--- a/addons/smartphone/tpl/smartphone.css
+++ b/addons/smartphone/tpl/smartphone.css
@ -0,0 +1,202 @@
+body {
+    margin: 0;
+    padding:0;
+    font-family: Helvetica;
+    background: #E6E6E6 url(./images/pinstripes.png);
+    color: #000000;
+    overflow-x: hidden;
+    -webkit-user-select: none;
+    -webkit-text-size-adjust: none;
+    width:100%;
+}
+
+.smartPhoneTitleBar {
+    border-bottom: 1px solid #2d3642;
+    border-top: 1px solid #6d84a2;
+    height: 43px;
+    overflow:hidden;
+    background:#485567 url(./images/titlebar.png) repeat-x left top;
+    margin-bottom:20px; 
+
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
+.smartPhoneTitleBar h1 {
+    white-space:nowrap;
+    overflow: hidden;
+
+    color: #FFFFFF;
+    font-size: 20px;
+    font-weight: bold;
+    padding:8px 10px;
+    margin:0;
+
+    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
+    text-overflow: ellipsis;
+}
+
+.smartPhoneContent {
+    position:absolute;
+    top:55px;
+    bottom:55px;
+    left:10px;
+    right:10px;
+    z-index:450;
+    overflow-x:hidden;
+    overflow-y:auto;
+    border: 1px solid #999999;
+    padding: 20px;
+    background-color:#fff;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -webkit-border-radius: 8px;
+}
+
+.smartPhoneToolBar {
+    z-index:9999;
+    width:100%;
+    border-bottom: 1px solid #2d3642;
+    border-top: 1px solid #6d84a2;
+    height: 43px;
+    overflow:hidden;
+    background:#485567 url(./images/titlebar.png) repeat-x left top;
+    position:absolute;
+    bottom:0;
+    white-space:nowrap;
+    text-align:center;
+
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
+.smartPhoneBtn {
+    width:43px;
+    height:43px;
+    margin-left:8px;  
+    border:0;
+}
+
+.smartPhoneList {
+    position:absolute;
+    overflow-x:hidden;
+    overflow-y:auto;
+    background-color:#fff;
+    z-index:500;
+    left:0;
+    right:0;
+    top:43px;
+    bottom:43px;
+    padding:0;
+    margin:0;
+}
+
+.smartPhoneList ul { 
+    padding:0; 
+    margin:0; 
+    left:0;
+    right:0;
+    top:43px;
+    bottom:43px;
+}
+
+.smartPhoneList li {
+    list-style:none;
+    font-size:18px;
+    font-weight:bold;
+    padding:10px;
+    border-bottom:1px solid #ccc;
+}
+
+.smartPhoneList li a {
+    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
+    text-overflow: ellipsis;
+    color:#000;
+    text-decoration:none;
+    display:block;
+    width:100%;
+}
+
+.smartPhoneList li.title {
+    position: relative;
+    top: -1px;
+    margin-bottom: -2px;
+    border-top: 1px solid #7d7d7d;
+    border-bottom: 1px solid #999999;
+    padding: 1px 10px;
+    background: url(./images/listGroup.png) repeat-x;
+    font-size: 17px;
+    font-weight: bold;
+    text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
+    color: #FFFFFF;
+}
+
+.smartPhoneList li.selected {
+    background-color:#ddd;
+}
+
+.smartPhoneList li.selected * {
+    color:#fff;
+}
+
+.smartPhoneContent div.info {
+    font-size:13px;
+    padding-bottom:10px;
+    border-bottom:1px solid #444;
+    overflow:hidden;
+    *zoom:1;
+}
+
+.smartPhoneContent div.info .author {
+    font-weight:bold;
+    float:left; 
+}
+
+.smartPhoneContent div.info .date {
+    font-size:11px;
+    float:right; 
+}
+
+.smartPhoneContent div.link {
+    margin-top:10px;
+    border-top:1px solid #444;
+}
+
+.smartPhoneContent div.link a {
+    display:block;
+    padding:5px 0;
+    font-size:13px;
+    text-decoration:none;
+    color:#000;
+}
+
+.smartPhoneList li a {
+    background:transparent url(./images/listArrow.png) no-repeat scroll right center;
+}
+
+.smartPhoneList li.noArrow a {
+    background:none !important; 
+}
+
+.smartPhoneList li.item img.thumbnail {
+    margin:0 10px 0 0;
+    padding:0;
+}
+
+.smartPhoneList li.item span.title, .smartPhoneList li.item span.title div {
+    font-size:15px;
+    font-weight:normal;
+    display:block;
+}
+
+.smartPhoneList li.item span.info {
+    font-size:10px;
+    font-weight:normal;
+    color:#bbb;
+    display:block;
+    margin-top:2px;
+    letter-spacing:0px;
+}
+
--- a/addons/smartphone/tpl/smartphone.js
+++ b/addons/smartphone/tpl/smartphone.js
@ -0,0 +1,93 @@
+var xeSmartMenu = null;
+function showXEMenu() {
+    if(!xeSmartMenu) {
+
+        xeSmartMenu = jQuery('<div>')
+            .attr("className","smartPhoneList")
+            .css('display','none');
+
+        jQuery(document.body).append(xeSmartMenu);
+
+        xeSmartMenu.slideIn = function(step) {
+            var w = this.width() + Math.pow(step,2)*30;
+
+            if(w>jQuery(document).width()) {
+                this.css({left:0,right:0,display:'block'});
+                this.width('');
+            } else {
+                this.width(w);
+                var o = parseInt(jQuery(document).width/w,10)/10;
+                if(o>1) o = 1;
+                setTimeout(function() { xeSmartMenu.slideIn(step+1); }, 50);
+            }
+        }
+
+        xeSmartMenu.slideOut = function(step) {
+            var l = parseInt(this.css('left'),10) + Math.pow(step,2)*30;
+
+            if(l>jQuery('.smartPhoneContent').width()) {
+                this.css({display:'none','left':''});
+            } else {
+                var o = parseInt(jQuery(document).width/l,10)/10;
+                if(o<0) o = 0;
+                this.css('left',l+'px');
+                setTimeout(function() { xeSmartMenu.slideOut(step+1); }, 50);
+            }
+        }
+    }
+
+    if(xeSmartMenu.css('display')=='none' && typeof(xeMenus)!='undefined') {
+        var menu = findSmartNode(xeMenus);
+        if(!menu) menu = xeMenus;
+        var html = '<ul><li><a href="'+request_uri.setQuery('smartphone','true')+'">Top page</a></li>';
+        for(var text in menu) {
+            if(!text) continue;
+            var url = menu[text].url;
+            var href = '';
+            if(/^[a-z0-9_]+$/i.test(url)) {
+                href = request_uri.setQuery('mid',url);
+                if(href.indexOf('?')>-1) href += '&smartphone=true';
+                else href += '?smartphone=true';
+            }
+            else href = url;
+            if(typeof(xeVid)!='undefined') {
+                if(href.indexOf('?')>-1) href += '&vid='+xeVid;
+                else href += '?vid='+xeVid;
+            }
+            if(current_mid == url) html += '<li class="selected">';
+            else html += '<li>';
+            html += '<a href="'+href+'">'+text+'</a></li>';
+        }
+        html += '</ul>';
+
+        jQuery(xeSmartMenu).html(html);
+        jQuery(xeSmartMenu).css({
+            width:'1px',
+            right:'0',
+            top:'43px',
+            bottom:'43px',
+            display:'block',
+            padding:0
+        });
+        xeSmartMenu.slideIn(0);
+    } else {
+        xeSmartMenu.slideOut(0);
+    }
+}
+
+function findSmartNode(nodes) {
+    if(typeof(current_mid)=='undefined') return;
+    var mid = current_mid;
+    if(location.href.indexOf(mid)<0) mid = null;
+    for(var text in nodes) {
+        if(!text) continue;
+        if(nodes[text].url == mid) {
+            if(nodes[text].childs) return nodes[text].childs;    
+        }
+        if(nodes[text].childs && nodes[text].childs.length) {
+            var n = findSmartNode(nodes[text].childs);
+            if(n) return n;
+        }
+    }
+    return null;
+}