Add RTL support to many input fields

- Compose page
- Post jot
- Comment form
- Event form
This commit is contained in:
Hypolite Petovan 2021-05-20 08:37:45 -04:00
parent 0e368c4ba4
commit 2cc4bd2490
17 changed files with 33 additions and 32 deletions

View file

@ -15,7 +15,7 @@
<a class="comment-edit-photo-link" href="{{$mylink}}" title="{{$mytitle}}"><img class="my-comment-photo" src="{{$myphoto}}" alt="{{$mytitle}}" title="{{$mytitle}}" /></a>
</div>
<div class="comment-edit-photo-end"></div>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" placeholder="{{$comment}}" onFocus="commentOpen(this,{{$id}});" onBlur="commentClose(this,{{$id}});">{{if $threaded != false}}{{$default}}{{/if}}</textarea>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" placeholder="{{$comment}}" onFocus="commentOpen(this,{{$id}});" onBlur="commentClose(this,{{$id}});" dir="auto">{{if $threaded != false}}{{$default}}{{/if}}</textarea>
{{if $qcomment}}
<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});">
<option value=""></option>

View file

@ -1,7 +1,7 @@
<div class="field input" id="wrapper_{{$field.0}}">
<label for="id_{{$field.0}}">{{$field.1}}{{if $field.4}} <span class="required" title="{{$field.4}}">*</span>{{/if}}</label>
<input type="{{$field.6|default:'text'}}" name="{{$field.0}}" id="id_{{$field.0}}" value="{{$field.2}}"{{if $field.4}} required{{/if}}{{if $field.5 eq "autofocus"}} autofocus{{elseif $field.5}} {{$field.5 nofilter}}{{/if}} aria-describedby="{{$field.0}}_tip">
<input type="{{$field.6|default:'text'}}" name="{{$field.0}}" id="id_{{$field.0}}" value="{{$field.2}}"{{if $field.4}} required{{/if}}{{if $field.5 eq "autofocus"}} autofocus{{elseif $field.5}} {{$field.5 nofilter}}{{/if}} aria-describedby="{{$field.0}}_tip" dir="auto">
{{if $field.3}}
<span class="field_help" role="tooltip" id="{{$field.0}}_tip">{{$field.3 nofilter}}</span>
{{/if}}

View file

@ -1,9 +1,9 @@
<div class='field select'>
<label for='id_{{$field.0}}'>{{$field.1}}</label>
<select name='{{$field.0}}' id='id_{{$field.0}}' aria-describedby='{{$field.0}}_tip'>
<div class="field select">
<label for="id_{{$field.0}}">{{$field.1}}</label>
<select name="{{$field.0}}" id="id_{{$field.0}}" aria-describedby="{{$field.0}}_tip">
{{foreach $field.4 as $opt=>$val}}
<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>
<option value="{{$opt}}" dir="auto"{{if $opt==$field.2}} selected="selected"{{/if}}>{{$val}}</option>
{{/foreach}}
</select>
{{if $field.3}}

View file

@ -1,7 +1,7 @@
<div class="field textarea">
<label for="id_{{$field.0}}">{{$field.1}}{{if $field.4}} <span class="required" title="{{$field.4}}">*</span>{{/if}}</label>
<textarea name="{{$field.0}}" id="id_{{$field.0}}"{{if $field.4}} required{{/if}} aria-describedby="{{$field.0}}_tip">{{$field.2}}</textarea>
<textarea name="{{$field.0}}" id="id_{{$field.0}}"{{if $field.4}} required{{/if}} aria-describedby="{{$field.0}}_tip" dir="auto">{{$field.2}}</textarea>
{{if $field.3}}
<span class="field_help" role="tooltip" id="{{$field.0}}_tip">{{$field.3 nofilter}}</span>
{{/if}}

View file

@ -6,7 +6,7 @@
<label for="id_{{$field.0}}">{{$field.1}}</label>
<select name="{{$field.0}}" id="id_{{$field.0}}" {{if $field.5}}onchange="previewTheme(this);"{{/if}} aria-describedby="{{$field.0}}_tip">
{{foreach $field.4 as $opt=>$val}}
<option value="{{$opt}}" {{if $opt==$field.2}}selected="selected"{{/if}}>{{$val}}</option>
<option value="{{$opt}}" dir="auto"{{if $opt==$field.2}} selected="selected"{{/if}}>{{$val}}</option>
{{/foreach}}
</select>
{{if $field.3}}

View file

@ -8,11 +8,11 @@
<input type="hidden" name="wall" value="{{$wall}}" />
<div id="jot-title-wrap">
<input type="text" name="title" id="jot-title" class="jothidden jotforms form-control" placeholder="{{$placeholdertitle}}" title="{{$placeholdertitle}}" value="{{$title}}" tabindex="1"/>
<input type="text" name="title" id="jot-title" class="jothidden jotforms form-control" placeholder="{{$placeholdertitle}}" title="{{$placeholdertitle}}" value="{{$title}}" tabindex="1" dir="auto" />
</div>
{{if $placeholdercategory}}
<div id="jot-category-wrap">
<input name="category" id="jot-category" class="jothidden jotforms form-control" type="text" placeholder="{{$placeholdercategory}}" title="{{$placeholdercategory}}" value="{{$category}}" tabindex="2"/>
<input name="category" id="jot-category" class="jothidden jotforms form-control" type="text" placeholder="{{$placeholdercategory}}" title="{{$placeholdercategory}}" value="{{$category}}" tabindex="2" dir="auto" />
</div>
{{/if}}
@ -44,7 +44,7 @@
</span>
</p>
<p>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text form-control text-autosize" name="body" placeholder="{{$default}}" rows="7" tabindex="3">{{$body}}</textarea>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text form-control text-autosize" name="body" placeholder="{{$default}}" rows="7" tabindex="3" dir="auto" dir="auto">{{$body}}</textarea>
</p>
<p class="comment-edit-submit-wrapper">

View file

@ -18,13 +18,13 @@
{{if $notes_cid}}
<input type="hidden" name="contact_allow[]" value="<{{$notes_cid}}>" />
{{/if}}
<div id="jot-title-wrap"><input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" value="{{$title}}" class="jothidden" style="display:none"></div>
<div id="jot-title-wrap"><input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" value="{{$title}}" class="jothidden" style="display:none" dir="auto"></div>
{{if $placeholdercategory}}
<div id="jot-category-wrap"><input name="category" id="jot-category" type="text" placeholder="{{$placeholdercategory}}" value="{{$category}}" class="jothidden" style="display:none" /></div>
<div id="jot-category-wrap"><input name="category" id="jot-category" type="text" placeholder="{{$placeholdercategory}}" value="{{$category}}" class="jothidden" style="display:none" dir="auto"></div>
{{/if}}
<div id="jot-text-wrap">
<img id="profile-jot-text-loading" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait}}" style="display: none;" />
<textarea rows="5" cols="64" class="profile-jot-text" id="profile-jot-text" name="body" placeholder="{{$share}}">{{if $content}}{{$content nofilter}}{{/if}}</textarea>
<textarea rows="5" cols="64" class="profile-jot-text" id="profile-jot-text" name="body" placeholder="{{$share}}" dir="auto">{{if $content}}{{$content nofilter}}{{/if}}</textarea>
</div>
<div id="profile-jot-submit-wrapper" class="jothidden">

View file

@ -42,7 +42,7 @@
data-role="insert-formatting" data-bbcode="video" data-id="{{$id}}"></a></li>
</ul>
<div class="comment-edit-bb-end"></div>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" placeholder="{{$comment}}" onFocus="commentOpen(this,{{$id}});cmtBbOpen(this, {{$id}});" onBlur="commentClose(this,{{$id}});cmtBbClose(this,{{$id}});">{{if $threaded != false}}{{$default}}{{/if}}</textarea>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" placeholder="{{$comment}}" onFocus="commentOpen(this,{{$id}});cmtBbOpen(this, {{$id}});" onBlur="commentClose(this,{{$id}});cmtBbClose(this,{{$id}});" dir="auto">{{if $threaded != false}}{{$default}}{{/if}}</textarea>
{{if $qcomment}}
<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});">
<option value=""></option>

View file

@ -39,7 +39,7 @@
</span>
</p>
<p>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty form-control text-autosize" name="body" placeholder="{{$comment}}" rows="3" data-default="{{$default}}">{{$default}}</textarea>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty form-control text-autosize" name="body" placeholder="{{$comment}}" rows="3" data-default="{{$default}}" dir="auto">{{$default}}</textarea>
</p>
{{if $qcomment}}
<p>

View file

@ -75,7 +75,7 @@
{{* The textarea for the event description *}}
<div class="form-group">
<div id="event-desc-text"><b>{{$d_text}}</b></div>
<textarea id="comment-edit-text-desc" class="form-control text-autosize" name="desc">{{$d_orig}}</textarea>
<textarea id="comment-edit-text-desc" class="form-control text-autosize" name="desc" dir="auto">{{$d_orig}}</textarea>
<ul id="event-desc-text-edit-bb" class="comment-edit-bb comment-icon-list nav nav-pills hidden-xs pull-left">
{{* commented out because it isn't implemented yet
<li>
@ -122,7 +122,7 @@
{{* The textarea for the event location *}}
<div class="form-group">
<div id="event-location-text"><b>{{$l_text}}</b></div>
<textarea id="comment-edit-text-loc" class="form-control text-autosize" name="location">{{$l_orig}}</textarea>
<textarea id="comment-edit-text-loc" class="form-control text-autosize" name="location" dir="auto">{{$l_orig}}</textarea>
<ul id="comment-tools-loc" class="comment-edit-bb comment-icon-list nav nav-pills hidden-xs pull-left">
{{* commented out because it isn't implemented yet
<li>

View file

@ -93,14 +93,14 @@
{{if $notes_cid}}
<input type="hidden" name="contact_allow[]" value="<{{$notes_cid}}>" />
{{/if}}
<div id="jot-title-wrap"><input name="title" id="jot-title" class="jothidden jotforms form-control" type="text" placeholder="{{$placeholdertitle}}" title="{{$placeholdertitle}}" value="{{$title}}" style="display:block;" /></div>
<div id="jot-title-wrap"><input name="title" id="jot-title" class="jothidden jotforms form-control" type="text" placeholder="{{$placeholdertitle}}" title="{{$placeholdertitle}}" value="{{$title}}" style="display:block;" dir="auto" /></div>
{{if $placeholdercategory}}
<div id="jot-category-wrap"><input name="category" id="jot-category" class="jothidden jotforms form-control" type="text" placeholder="{{$placeholdercategory}}" title="{{$placeholdercategory}}" value="{{$category}}" /></div>
<div id="jot-category-wrap"><input name="category" id="jot-category" class="jothidden jotforms form-control" type="text" placeholder="{{$placeholdercategory}}" title="{{$placeholdercategory}}" value="{{$category}}" dir="auto" /></div>
{{/if}}
{{* The jot text field in which the post text is inserted *}}
<div id="jot-text-wrap">
<textarea rows="2" cols="64" class="profile-jot-text form-control text-autosize" id="profile-jot-text" name="body" placeholder="{{$share}}" onFocus="jotTextOpenUI(this);" onBlur="jotTextCloseUI(this);" style="min-width:100%; max-width:100%;">{{if $content}}{{$content nofilter}}{{/if}}</textarea>
<textarea rows="2" cols="64" class="profile-jot-text form-control text-autosize" id="profile-jot-text" name="body" placeholder="{{$share}}" onFocus="jotTextOpenUI(this);" onBlur="jotTextCloseUI(this);" style="min-width:100%; max-width:100%;" dir="auto">{{if $content}}{{$content nofilter}}{{/if}}</textarea>
</div>
<ul id="profile-jot-submit-wrapper" class="jothidden nav nav-pills">

View file

@ -19,7 +19,7 @@
{{* The message input field which contains the message text *}}
<div id="prvmail-message-label" class="form-group">
<label for="comment-edit-text-input">{{$yourmessage}}</label>
<textarea rows="8" cols="72" class="prvmail-text form-control text-autosize" id="comment-edit-text-input" name="body" tabindex="12">{{$text}}</textarea>
<textarea rows="8" cols="72" class="prvmail-text form-control text-autosize" id="comment-edit-text-input" name="body" tabindex="12" dir="auto">{{$text}}</textarea>
</div>
<ul id="prvmail-text-edit-bb" class="comment-edit-bb comment-icon-list nav nav-pills hidden-xs pull-left">

View file

@ -40,7 +40,8 @@
class="comment-edit-text-empty"
name="body"
placeholder="{{$comment}}"
onFocus="commentOpen(this,{{$id}}) && cmtBbOpen({{$id}});">{{if $threaded != false}}{{$default}}{{/if}}</textarea>
onFocus="commentOpen(this,{{$id}}) && cmtBbOpen({{$id}});"
dir="auto">{{if $threaded != false}}{{$default}}{{/if}}</textarea>
{{if $qcomment}}
<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});">
<option value=""></option>

View file

@ -1,9 +1,9 @@
<form id="profile-jot-form" action="{{$action}}" method="post">
<div id="jot">
<div id="profile-jot-desc" class="jothidden">&nbsp;</div>
<input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" title="{{$placeholdertitle}}" value="{{$title}}" class="jothidden" style="display:none" />
<input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" title="{{$placeholdertitle}}" value="{{$title}}" class="jothidden" style="display:none" dir="auto" />
{{if $placeholdercategory}}
<input name="category" id="jot-category" type="text" placeholder="{{$placeholdercategory}}" title="{{$placeholdercategory}}" value="{{$category}}" class="jothidden" style="display:none" />
<input name="category" id="jot-category" type="text" placeholder="{{$placeholdercategory}}" title="{{$placeholdercategory}}" value="{{$category}}" class="jothidden" style="display:none" dir="auto" />
{{/if}}
<div id="character-counter" class="grey jothidden"></div>
<input type="hidden" name="wall" value="{{$wall}}" />
@ -19,7 +19,7 @@
<input type="hidden" name="contact_allow[]" value="<{{$notes_cid}}>" />
{{/if}}
<textarea rows="5" cols="64" class="profile-jot-text" id="profile-jot-text" name="body" placeholder="{{$share}}">{{if $content}}{{$content nofilter}}{{/if}}</textarea>
<textarea rows="5" cols="64" class="profile-jot-text" id="profile-jot-text" name="body" placeholder="{{$share}}" dir="auto">{{if $content}}{{$content nofilter}}{{/if}}</textarea>
<ul id="jot-tools" class="jothidden" style="display:none">
<li><a href="#" onclick="return false;" id="wall-image-upload" title="{{$upload}}">{{$shortupload}}</a></a></li>

View file

@ -16,16 +16,16 @@
<input type="hidden" name="preview" id="jot-preview" value="0" />
<input type="hidden" name="post_id_random" value="{{$rand_num}}" />
<div id="jot-title-wrap">
<input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" value="{{$title}}" class="jothidden" style="display:none">
<input name="title" id="jot-title" type="text" placeholder="{{$placeholdertitle}}" value="{{$title}}" class="jothidden" style="display:none" dir="auto">
</div>
{{if $placeholdercategory}}
<div id="jot-category-wrap">
<input name="category" id="jot-category" type="text" placeholder="{{$placeholdercategory}}" value="{{$category}}" class="jothidden" style="display:none" />
<input name="category" id="jot-category" type="text" placeholder="{{$placeholdercategory}}" value="{{$category}}" class="jothidden" style="display:none" dir="auto" />
</div>
{{/if}}
<div id="jot-text-wrap">
<img id="profile-jot-text-loading" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait}}" style="display: none;" /><br>
<textarea rows="5" cols="80" class="profile-jot-text" id="profile-jot-text" name="body" placeholder="{{$share}}">
<textarea rows="5" cols="80" class="profile-jot-text" id="profile-jot-text" name="body" placeholder="{{$share}}" dir="auto">
{{if $content}}{{$content nofilter}}{{/if}}
</textarea>
</div>

View file

@ -15,7 +15,7 @@
<a class="comment-edit-photo-link" href="{{$mylink}}" title="{{$mytitle}}"><img class="my-comment-photo" src="{{$myphoto}}" alt="{{$mytitle}}" title="{{$mytitle}}" /></a>
</div>
<div class="comment-edit-photo-end"></div>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" placeholder="{{$comment}}" onFocus="commentOpen(this,{{$id}});">{{if $threaded != false}}{{$default}}{{/if}}</textarea>
<textarea id="comment-edit-text-{{$id}}" class="comment-edit-text-empty" name="body" placeholder="{{$comment}}" onFocus="commentOpen(this,{{$id}});" dir="auto">{{if $threaded != false}}{{$default}}{{/if}}</textarea>
{{if $qcomment}}
<select id="qcomment-select-{{$id}}" name="qcomment-{{$id}}" class="qcomment" onchange="qCommentInsert(this,{{$id}});">
<option value=""></option>

View file

@ -25,7 +25,7 @@
<div id="event-desc-text">{{$d_text}}</div>
<textarea id="comment-edit-text-desc" rows="8" cols="64" name="desc" autocomplete="off">{{$d_orig}}</textarea>
<textarea id="comment-edit-text-desc" rows="8" cols="64" name="desc" autocomplete="off" dir="auto">{{$d_orig}}</textarea>
<div id="event-desc-text-edit-bb" class="comment-edit-bb">
<a title="{{$edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="desc"><i class="icon-picture"></i></a>
<a title="{{$edurl}}" data-role="insert-formatting" data-bbcode="url" data-id="desc"><i class="icon-link"></i></a>
@ -38,7 +38,7 @@
</div>
<div id="event-location-text">{{$l_text}}</div>
<textarea id="comment-edit-text-location" rows="4" cols="64" name="location">{{$l_orig}}</textarea>
<textarea id="comment-edit-text-location" rows="4" cols="64" name="location" dir="auto">{{$l_orig}}</textarea>
<div id="event-location-text-edit-bb" class="comment-edit-bb">
<a title="{{$edimg}}" data-role="insert-formatting" data-bbcode="img" data-id="location"><i class="icon-picture"></i></a>
<a title="{{$edurl}}" data-role="insert-formatting" data-bbcode="url" data-id="location"><i class="icon-link"></i></a>