To allow scrolling in Safari mobile, we set the content of text_view_comments frame in a jQuery UI layout.
So the automated scrolling operations in c_sync.js must be adjustable to the right part to scroll.
Also, if a comment have to be shown outside of the current viewport, we scroll the correct part to that viewport
and then set the comment top Y offset to juste what it needs to avoid the "Add comment" button after scrolling
operation.
If not in Safari mobile, we add an offset here to avoid comment to display under the "Add comment" button.
{% load local_perms %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
{% include "site/layout/req_yui.html" %}
<!-- for Safari mobile-->
{% include "site/layout/req_jquery.html" %}
<link rel="stylesheet" type="text/css" href="{{ CM_MEDIA_PREFIX }}css/site/text_view_comments/fonts.css">
<link rel="stylesheet" type="text/css" href="{{ CM_MEDIA_PREFIX }}css/site/text_view_comments/text_view_comments.css">
{% if custom_css %}<style type="text/css">{% autoescape off %}{{ custom_css }}{% endautoescape %}</style>{% endif %}
{% if custom_font %}<style type="text/css">#textcontainer.custom { font-family: {% autoescape off %}{{ custom_font }}{% endautoescape %}; }</style>{% endif %}
{% if custom_titles_font %}<style type="text/css">#textcontainer.custom h1, #textcontainer.custom h2, #textcontainer.custom h3, #textcontainer.custom h4, #textcontainer.custom h5, #textcontainer.custom h6 { font-family: {% autoescape off %}{{ custom_titles_font }}{% endautoescape %}; }</style>{% endif %}
</head>
<body>
<div id="maincontainer" >
<div id="contentwrapper" >
<div id="contentcolumn">
<div class="innertube">
<div id="textcontainer" class="initially_hidden" >
{% autoescape off %}
{{ content }}
{% endautoescape %}
</div>
</div>
</div>
</div>
<div id="leftcolumn">
</div>
</div>
</body>
<link rel="stylesheet" type="text/css" href="{{ CM_MEDIA_PREFIX }}css/site/text_view_comments/c-text.css">
<link rel="stylesheet" type="text/css" href="{{ CM_MEDIA_PREFIX }}css/site/text_view_comments/c-text-styles.css">
<link rel="stylesheet" type="text/css" href="{{ CM_MEDIA_PREFIX }}css/site/text_view_comments/c-style-comment.css">
<link rel="stylesheet" type="text/css" href="{{ CM_MEDIA_PREFIX }}css/site/text_view_comments/c-style-gray.css">
<link rel="stylesheet" type="text/css" href="{{ CM_MEDIA_PREFIX }}css/site/text_view_comments/c-style-notelike.css">
<!-- date library, to be used by filter, maybe get rid of that when decent date parsing is offered elsewhere -->
<!-- we're round tripping from object python date to str back to date to filter, TODO consider setting the date from python... -->
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/lib/flexible-js-formatting/dates/date-functions.js"></script>
<script type="text/javascript">
<!--
// Using jQuery UI-Layout to allow scrolling in Safari mobile
if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
jQuery(document).ready (function () {
jQuery('body').layout ({
center: {
paneSelector : '#maincontainer',
applyDefaultStyles : true,
}
});
jQuery('#maincontainer').css ({
height: '100%',
});
});
}
// GLOBALS from server
sv_user_permissions = [];
{% get_local_text_perm request text can_create_comment as can_create_comment %}
{% if can_create_comment %} sv_user_permissions.push("can_create_comment") {% endif %};
{% if read_only %}
sv_read_only = true ;
{% else %}
sv_read_only = false ;
{% endif %}
if (sv_read_only)
sv_user_permissions = [];
//sv_adminKey = {% if admin %}"{{ adminkey }}"{% else %}""{% endif %} ;
{% if user.is_anonymous %}
sv_loggedIn = false;
sv_username = "";
{% else %}
sv_loggedIn = true;
sv_username = "{{ user.username|escapejs }}";
{% endif %}
//initial comment db as json
sv_comments = "{{ json_comments|escapejs }}";
sv_filter_data = "{{ json_filter_datas|escapejs }}";
sv_site_url = "{% if request.GET.prefix %}{{ request.GET.prefix }}{% else %}{{ SITE_URL|escapejs }}{% endif %}";
sv_prefix = "{% if request.GET.prefix %}{{ request.GET.prefix }}{% endif %}";
sv_delta = "{% if request.GET.delta %}{{ request.GET.delta }}{% endif %}";
sv_client_url = "{% if request.GET.prefix %}{{ request.GET.prefix }}{% endif %}{% url text-client-exchange %}?{{ request.GET.urlencode }}" ;
sv_text_view_show_comment_url = "{% if request.GET.prefix %}{{ request.GET.prefix }}{% endif %}{% url text-view-show-comment text.key '' %}";
sv_text_feed_url = "{% if request.GET.prefix %}{{ request.GET.prefix }}{% endif %}{% url text-feed text.key %}";
sv_client_date_fmt = "{{ client_date_fmt.js_parse }}"; //"%Y-%m-%dT%H:%M:%S" ;
sv_key = "{{ text.key|escapejs }}";
sv_version_key = "{{ text_version.key|escapejs }}";
sv_format = "{{ text_version.format }}";
sv_categories = "{{ categories|escapejs }}";
sv_withComments = true ; // TODO will bug when false (!)
c_yui_base = "{{ YUI_VERSION }}" ;
sv_get_params = "{{ get_params|escapejs }}" ;
sv_media_url = "{{ CM_MEDIA_PREFIX|escapejs }}";
{% if custom_font or custom_titles_font %}
sv_custom_font = true;
{% else %}
sv_custom_font = false;
{% endif %}
--></script>
<script type="text/javascript" src="{% if request.GET.prefix %}{{ request.GET.prefix }}{% endif %}{% url django.views.i18n.javascript_catalog %}"></script>
{% if CLIENT_DEBUG %}
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_permissions.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_preferences.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_layout.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_icomment.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_db.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_sync.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_icomments.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_util.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_server_exchange.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_selection.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_scopes.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_interface_forms.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_addcomment_form.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_toc.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_reply_form.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_edit_form.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_dlg_intercept.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/site/c_text_view_comments_to_frame.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/site/c_text_view_comments.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/lib/asciimathtml/ASCIIMathML.js"></script>
{% else %}
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/c_client-min.js?1382366130"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/lib/asciimathtml/ASCIIMathML.min.js"></script>
{% endif %}
</html>