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 com %}
{% load i18n %}
<!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" %}
<script type="text/javascript">
<!--
sv_media_url = "{{ CM_MEDIA_PREFIX|escapejs}}" ;
sv_pandoc_version = "{{ PANDOC_VERSION|escapejs}}" ;
-->
</script>
{% include "site/layout/req_jquery.html" %}
<link type="text/css" href="{{ CM_MEDIA_PREFIX }}css/site/text_view_frame.css" rel="stylesheet" />
<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/f_message.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/f_printDialog.js"></script>
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/site/f_text_view_frame.js"></script>
{% else %}
<script type="text/javascript" src="{{ CM_MEDIA_PREFIX }}js/client/f_client-min.js?1382366130"></script>
{% endif %}
<style type="text/css">
/*
* TAB-THEME ADJUSTMENTS
*/
.ui-tabs-nav li {
white-space: nowrap;
}
.ui-tabs-nav li a {
font-size: 1em !important;
padding: 4px 1.5ex 3px !important;
}
.ui-tabs-panel {
font-size: 1em !important;
padding: 8px 1em !important;
}
</style>
</head>
<BODY>
<span id="add_comment_btn" class="initially_hidden" title="{% blocktrans %}add a comment{% endblocktrans %}">
<img style="vertical-align: middle;" src="{{ CM_MEDIA_PREFIX }}img/add_plus.png" alt="{% blocktrans %}add a comment{% endblocktrans %}"/>
<span>{% blocktrans %}comment{% endblocktrans %}</span>
</span>
<!-- cf.http://layout.jquery-dev.net/download/example.html -->
<!-- TODO check height 600 ... -->
<DIV id="outer-north" class="ui-layout-north">
<div style="margin-top:4px;" id="c_slider"></div>
</DIV>
<DIV id="outer-center" class="ui-layout-center" >
<DIV class="inner-north initially_hidden" >
<ul id="header-nobck">
<li><a href="#c_filter">{% blocktrans %}Filter comments{% endblocktrans %}</a></li>
<li><a href="#c_preferences">{% blocktrans %}Preferences{% endblocktrans %}</a></li>
<li><a href="#c_text_preferences">{% blocktrans %}Text preferences{% endblocktrans %}</a></li>
</ul>
<div id="c_filter" class="c_tab"></div>
<div id="c_preferences" class="c_tab"></div>
<div id="c_text_preferences" class="c_tab"></div>
</DIV>
<div id="throbber" style="visibility: visible; position: absolute; top: 4%; left: 40%">
<img alt="throbber" src="{{ CM_MEDIA_PREFIX }}img/throbber.gif" /><br />{% blocktrans %}Loading text…{% endblocktrans %}
</div>
{% url text-view-comments-version text.key text_version.key as frame_url %}
<iframe id="text_view_comments" name="text_view_comments" frameborder="0" onload="$('#throbber').hide ();" width="100%" height="100%" seamless="seamless" class="ui-layout-center"
src="{% if request.GET.prefix %}{{ request.GET.prefix }}{% endif %}{{ frame_url }}{{ frame_url|url_args }}{{ request.GET.urlencode }}"></iframe>
<!-- exemple de passage d'arguments <iframe id="text_view_comments" name="text_view_comments" class="ui-layout-center"
width="100%" height="100%" frameborder="0" scrolling="auto" src="{% url text-view-comments text.key %}?filter_name=aa&filter_tag=toto"></iframe> -->
</DIV>
<div style="display: none;">
<div id="dialog_h"></div>
<div id="dialog_print_export" title="">
<!-- <p id="validateTips">All form fields are required.</p> -->
{% url text-export text.key "FoRmAt" "DoWnLoAd" "WhIcHCoMmEnT" "WiThCoLoR" as export_url %}
<form name="print_export_form" id="print_export_form" method="post" action="" target_action="{% if request.GET.prefix %}{{ request.GET.prefix }}{% else %}{% endif %}{{ export_url }}{{ export_url|url_args }}{{ request.GET.urlencode }}">
<fieldset>
<label for="p_comments">{% blocktrans %}Which comments?{% endblocktrans %}</label>
<select name="p_comments" id="p_comments" />
</select>
<label id="how" for="p_method"></label>
<select name="p_method" id="p_method"/>
</select>
<label id="p_color_label" for="p_color">{% blocktrans %}How should comments' scope be shown in text?{% endblocktrans %}</label>
<select name="p_color" id="p_color"/>
</select>
</fieldset>
<input type="hidden" name="filteredIds" id="filteredIds" value="" />
<input type="hidden" name="print_export_action" id="print_export_action" value="" />
</form>
</div>
</div>
</BODY>
</html>