| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| %meta% |
| |
| <base href="%page_path%/"> |
| |
| <style> |
| body { |
| overflow: hidden; |
| } |
| |
| .showborder { |
| border: 1px gray dashed |
| } |
| </style> |
| <!-- |
| <script src="%root_path%/%jquery_js%"></script> |
| <script src="%root_path%/%tizen_web_ui_fw_libs_js%"></script> |
| <script src="%root_path%/%tizen_web_ui_fw_js%" data-framework-theme="%framwork_theme%"></script> |
| --> |
| %framework% |
| |
| %style% |
| |
| <!-- |
| <link rel="stylesheet" type="text/css" href="%root_path%/app.css"> |
| --> |
| |
| <link rel="stylesheet" type="text/css" href="%page_css_path%"> |
| |
| <style type="text/css" id="page_style"> |
| </style> |
| |
| <script> |
| $(document).ready(function(){ |
| ComingBridge.ready(); |
| }); |
| |
| $.mobile.autoInitialize = false; |
| |
| jQuery.fn.outerHtml = function() { |
| return jQuery('<div />').append(this.eq(0).clone()).html(); |
| } |
| |
| // setBasePath: (path:String) -> () |
| function setBasePath(path) { |
| //$('base').attr("href", "file:///" + path + "/"); |
| } |
| |
| // setCssStyle: (style:String) -> () |
| function setCssStyle(style) { |
| document.getElementById('page_style').innerHTML = style; |
| } |
| |
| // scrollTo: (val:str) -> () |
| function scrollTo(val) { |
| //$(".ui-mobile").css("transform", "translateY(" + val + "px)"); |
| //$(".ui-mobile").css("-webkit-transform", "translateY(" + val + "px)"); |
| $(".ui-scrollview-view").css("transform", "translateY(" + val + "px)"); |
| $(".ui-scrollview-view").css("-webkit-transform", "translateY(" + val + "px)"); |
| } |
| |
| // getScrollPos: () -> int |
| function getScrollPos() { |
| var pos = $(".ui-mobile").css("-webkit-transform"); |
| //var pos = $(".ui-scrollview-view").css("-webkit-transform"); |
| var values = pos.split('(')[1]; |
| values = values.split(')')[0]; |
| values = values.split(','); |
| return values[5].trim(); |
| } |
| |
| function genPage(html) { |
| $('body').html(html); |
| //$('[data-role=page]').page().page('refresh').show(); |
| $('[data-role=page]').page().page('setToolbar').show(); |
| tbPage = $( ".ui-page" ); |
| $elHeader = $( ".ui-page .ui-header" ); |
| $elFooter = $( ".ui-page .ui-footer" ); |
| $elHeader.outerHeight() ? $( tbPage ).css( "padding-top", $elHeader.outerHeight() ) : $( tbPage ).css( "padding-top", 0 ); |
| $elFooter.outerHeight() ? $( tbPage ).css( "padding-bottom", $elFooter.outerHeight() ) : $( tbPage ).css( "padding-bottom", 0 ); |
| $(":jqmData(role='tokentextarea')" ).tokentextarea( "refresh" ); |
| } |
| |
| function genPage2(html) { |
| //var newPage = $(html); |
| //newPage.appendTo( $('body')); |
| //$('[data-role=page]').page(); |
| //$.mobile.changePage( newPage ); |
| |
| var newPage = $(html); |
| $('[data-role=page]').attr('data-old-page', true); |
| newPage.attr('data-old-page', false); |
| newPage.appendTo( $('body')); |
| $('[data-role=page]').page(); |
| $.mobile.changePage( newPage ); |
| $('[data-old-page=false]').one('pageshow', function(){ |
| console.log('pageshow:' + $(this).attr('id')); |
| $('[data-old-page=true]').remove(); |
| }); |
| } |
| |
| // changeBody: (html:String) -> () |
| function changeBody(html) { |
| $(':mobile-page').page("destroy"); |
| |
| genPage(html); |
| //genPage2(html); |
| |
| //$.mobile.resizePageContentHeight($('[data-role=page]')); |
| |
| $('[part-id]').each( |
| function(k, v) { |
| var vv = $(v); |
| if ((!vv.is(":visible")) |
| && (vv.next().length > 0 |
| && vv.next().is(":visible") && (!(vv.next() |
| .attr("part-id"))))) { |
| vv.next().attr("part-id", vv.attr("part-id")).attr( |
| "data-role", vv.attr("data-role")); |
| vv.attr("part-id", ""); |
| } |
| }); |
| |
| //var fixed = $('[data-position=fixed]'); |
| //if ((typeof fixed.fixedtoolbar) === 'function') { |
| // fixed.fixedtoolbar('destroy'); |
| //} |
| |
| $(window).unbind("scroll scrollstart scrollstop throttledresize popstate touchmove orientationchange hashchange load resize"); |
| $(document).unbind("scroll scrollstart scrollview_start scrollviewcreate silentscroll"); |
| $(".ui-multibuttonentry-input").css("display", "none"); |
| |
| //$('[data-role=header]').css('position', 'relative'); |
| //$('[data-role=footer]').css('position', 'relative').css('top', '0'); |
| } |
| |
| // showBorder: (wid:String) -> () |
| function showBorder(wid) { |
| var wgt = $("[part-id='" + wid + "']"); |
| var w = wgt.width(), h = wgt.height(); |
| wgt.addClass("showborder").width(w - 2).height(h - 2); |
| } |
| |
| // getClientBound: () |
| // -> stringified WidgetPosition |
| function getClientBound() { |
| var wgt = $(".ui-scrollview-view"); |
| var loc = wgt.offset(); |
| |
| //var head_height = $('[data-role=header]').outerHeight(); |
| //var footer_height = $('[data-role=footer]').outerHeight(); |
| var content_height = wgt.outerHeight();// + head_height + footer_height; |
| if (wgt.children().length > 0){ |
| content_height += parseInt(wgt.children().first().css('margin-top')) |
| + parseInt(wgt.children().last().css('margin-bottom')); |
| } |
| |
| var bound = { |
| x : parseInt(loc.left), |
| y : parseInt(loc.top), |
| w : parseInt(wgt.outerWidth()), |
| h : parseInt(content_height), |
| l : parseInt(wgt.css("margin-left")), |
| r : parseInt(wgt.css("margin-right")), |
| t : parseInt(wgt.css("margin-top")), |
| b : parseInt(wgt.css("margin-bottom")) |
| }; |
| if (bound.w < 1) bound.w = 1; |
| if (bound.h < 1) bound.h = 1; |
| return JSON.stringify(bound); |
| } |
| |
| // getWindowBound: () |
| // -> stringified WidgetPosition |
| function getWindowBound() { |
| var wgt = $(".ui-scrollview-clip"); |
| var loc = wgt.offset(); |
| |
| var head_height = $('[data-role=header]').outerHeight(); |
| var footer_height = $('[data-role=footer]').outerHeight(); |
| var content_height = $(window).height() - head_height - footer_height ; |
| |
| var bound = { |
| x : parseInt(loc.left), |
| y : parseInt(loc.top), |
| w : parseInt(wgt.outerWidth()), |
| h : parseInt(content_height), |
| l : parseInt(wgt.css("margin-left")), |
| r : parseInt(wgt.css("margin-right")), |
| t : parseInt(wgt.css("margin-top")), |
| b : parseInt(wgt.css("margin-bottom")) |
| }; |
| if (bound.w < 1) bound.w = 1; |
| if (bound.h < 1) bound.h = 1; |
| return JSON.stringify(bound); |
| } |
| |
| function getPageBound() { |
| var wgt = $(".ui-scrollview-clip"); |
| var loc = wgt.offset(); |
| |
| var content_width = $(window).width(); |
| var content_height = $(window).height(); |
| |
| var bound = { |
| x : parseInt(0), |
| y : parseInt(0), |
| w : parseInt(content_width), |
| h : parseInt(content_height), |
| l : parseInt(wgt.css("margin-left")), |
| r : parseInt(wgt.css("margin-right")), |
| t : parseInt(wgt.css("margin-top")), |
| b : parseInt(wgt.css("margin-bottom")) |
| }; |
| return bound; |
| } |
| |
| function getOneWidgetBound(wgt) { |
| var loc = wgt.offset(); |
| var bound = { |
| x : parseInt(loc.left), |
| y : parseInt(loc.top), |
| w : parseInt(wgt.outerWidth()), |
| h : parseInt(wgt.outerHeight()), |
| l : parseInt(wgt.css("margin-left")), |
| r : parseInt(wgt.css("margin-right")), |
| t : parseInt(wgt.css("margin-top")), |
| b : parseInt(wgt.css("margin-bottom")) |
| }; |
| if (bound.w < 1) bound.w = 1; |
| if (bound.h < 1) bound.h = 1; |
| return bound; |
| } |
| |
| function getContentBound() { |
| var bound = getOneWidgetBound($(".ui-scrollview-clip")) |
| |
| var head_height = $('[data-role=header]').outerHeight(); |
| var footer_height = $('[data-role=footer]').outerHeight(); |
| var content_height = $(window).height() - head_height - footer_height ; |
| |
| bound.h = content_height; |
| |
| return bound; |
| } |
| |
| function getWidgetRecursiveBound(wgt) { |
| var children = wgt.children(); |
| var bound = getOneWidgetBound(wgt); |
| //bound.x -= bound.l; bound.w += (bound.l + bound.r); |
| //bound.y -= bound.t; bound.h += (bound.t + bound.b); |
| |
| if(wgt.css("overflow") != "hidden"){ |
| for ( var i = 0; i < children.length; i++) { |
| var ch = $(children[i]); |
| if (ch.is(":visible")) { |
| var cbound = getWidgetRecursiveBound(ch); |
| |
| if (cbound != null) { |
| if (cbound.x < bound.x) { |
| bound.w += (bound.x - cbound.x); |
| bound.x = cbound.x; |
| } |
| if (cbound.y < bound.y) { |
| bound.h += (bound.y - cbound.y); |
| bound.y = cbound.y; |
| } |
| if ((cbound.x + cbound.w) > (bound.x + bound.w)) { |
| bound.w += (cbound.x + cbound.w) - (bound.x + bound.w); |
| } |
| if ((cbound.y + cbound.h) > (bound.y + bound.h)) { |
| bound.h += (cbound.y + cbound.h) - (bound.y + bound.h); |
| } |
| } |
| } |
| } |
| } |
| return bound; |
| } |
| |
| function getWidgetBoundIncludeAbove(wgt, prev_wgt_style) { |
| var bound = getOneWidgetBound(wgt); |
| |
| var ch = wgt.prev(); |
| if (ch != null) { |
| if (prev_wgt_style != null && ch.is(prev_wgt_style)) { |
| var cbound = getOneWidgetBound(ch); |
| if (cbound != null) { |
| if (cbound.x < bound.x) { |
| bound.w += (bound.x - cbound.x); |
| bound.x = cbound.x; |
| } |
| if (cbound.y < bound.y) { |
| bound.h += (bound.y - cbound.y); |
| bound.y = cbound.y; |
| } |
| } |
| } |
| } |
| return bound; |
| } |
| |
| // getWidgetBound: (widget:jQuery) -> {x:number, y:number, w:number, h:number, l: r: t: b:} |
| // 자기 자식의 bound를 모두 포함하고, 크기가 최소 1px * 1px 이상이 되도록 반환 |
| function getWidgetBound(wgt) { |
| var role = wgt.attr("data-role"); |
| if (role === "page") { |
| return getPageBound(); |
| } else if (role === "content") { |
| return getContentBound(); |
| } else if (role === "colorpicker") { |
| return getWidgetRecursiveBound(wgt); |
| } else if (role === "list") { |
| return getWidgetBoundIncludeAbove(wgt, "form[role=search]:visible"); |
| } else { |
| return getWidgetRecursiveBound(wgt); |
| //return getOneWidgetBound(wgt); |
| } |
| } |
| |
| // getWidgetPosition: (wid:String) -> stringified WidgetPosition |
| function getWidgetPosition(wid) { |
| var wgt = $("[part-id='" + wid + "']"); |
| |
| if (wgt !== null && wgt !== undefined && wgt.length > 0) { |
| if (wgt.attr("cg-bound") !== undefined) { |
| return wgt.attr("cg-bound"); |
| } |
| return JSON.stringify(getWidgetBound(wgt)); |
| } |
| return null; |
| } |
| |
| // getAllWidgetPositions: () |
| // -> stringified [{wid:String, rectangle:WidgetPosition}] |
| function getAllWidgetPositions() { |
| var result = []; |
| |
| $("*[part-id]").each(function() { |
| var t = $(this); |
| |
| if (t.attr("cg-excluded")) { |
| result.push({ |
| wid : t.attr("part-id"), |
| rectangle : JSON.parse(t.attr("cg-bound")) |
| }); |
| } else { |
| result.push({ |
| wid : t.attr("part-id"), |
| rectangle : getWidgetBound(t) |
| }); |
| } |
| }); |
| var h = $("[data-role=header]:not([part-id])"); |
| var f = $("[data-role=footer]:not([part-id])"); |
| if (h.length > 0) { |
| result.push({ |
| wid : ":header", |
| rectangle : getWidgetBound(h) |
| }); |
| } |
| if (f.length > 0) { |
| result.push({ |
| wid : ":footer", |
| rectangle : getWidgetBound(f) |
| }); |
| } |
| return JSON.stringify(result); |
| } |
| |
| // getWidgetPositions: (wid:[String]) -> stringified [{wid:String, rectangle:WidgetPosition}] |
| function getWidgetPositions(wids) { |
| var result = []; |
| |
| for ( var i = 0; i < wids.length; i++) { |
| result.push({ |
| wid : wids[i], |
| rectangle : getWidgetBound($("[part-id='" + wids[i] + "']")) |
| }); |
| } |
| return JSON.stringify(result); |
| } |
| |
| // widgetId: (dom:jQuery) -> (wid:String) |
| function widgetId(dom) { |
| if (dom.length === 0) { |
| return null; |
| } |
| if (dom.attr("part-id") !== undefined) { |
| return dom.attr("part-id"); |
| } else { |
| return widgetId(dom.parent()); |
| } |
| } |
| |
| // includeAllWidgets: () -> () |
| function includeAllWidgets() { |
| $("[cg-excluded]").each(function(index, elem) { |
| //$(elem).css("display", ""); |
| $(elem).css("opacity", "1.0"); |
| }); |
| $("[cg-excluded]").removeAttr("cg-excluded").removeAttr("cg-bound"); |
| } |
| |
| // excludeWidgets: (wids:[String]) -> () |
| function excludeWidgets(wids) { |
| var i, widget; |
| for (i = 0; i < wids.length; i++) { |
| widget = $("[part-id='" + wids[i] + "']"); |
| |
| widget.attr("cg-bound", getWidgetPosition(wids[i])); |
| } |
| for (i = 0; i < wids.length; i++) { |
| widget = $("[part-id='" + wids[i] + "']"); |
| |
| widget.attr("cg-excluded", "true"); |
| //widget.css("display", "none"); |
| widget.css("opacity", "0.2"); |
| } |
| } |
| </script> |
| </head> |
| |
| <body> |
| </body> |
| |
| </html> |