frio: events - split event form in different sections

This commit is contained in:
rabuzarus 2016-06-16 20:16:16 +02:00
parent 5e98f27fcd
commit 8b4c416713
3 changed files with 168 additions and 72 deletions

View file

@ -273,7 +273,7 @@ function datetimesel($format, $min, $max, $default, $label, $id = 'datetimepicke
$minjs = $min ? ",minDate: new Date({$min->getTimestamp()}*1000), yearStart: " . $min->format('Y') : ''; $minjs = $min ? ",minDate: new Date({$min->getTimestamp()}*1000), yearStart: " . $min->format('Y') : '';
$maxjs = $max ? ",maxDate: new Date({$max->getTimestamp()}*1000), yearEnd: " . $max->format('Y') : ''; $maxjs = $max ? ",maxDate: new Date({$max->getTimestamp()}*1000), yearEnd: " . $max->format('Y') : '';
$input_text = $default ? 'value="' . date($dateformat, $default->getTimestamp()) . '"' : ''; $input_text = $default ? date($dateformat, $default->getTimestamp()) : '';
$defaultdatejs = $default ? ",defaultDate: new Date({$default->getTimestamp()}*1000)" : ''; $defaultdatejs = $default ? ",defaultDate: new Date({$default->getTimestamp()}*1000)" : '';
$pickers = ''; $pickers = '';
@ -283,7 +283,7 @@ function datetimesel($format, $min, $max, $default, $label, $id = 'datetimepicke
$extra_js = ''; $extra_js = '';
$pickers .= ",dayOfWeekStart: ".$firstDay.",lang:'".$lang."'"; $pickers .= ",dayOfWeekStart: ".$firstDay.",lang:'".$lang."'";
if($minfrom != '') if($minfrom != '')
$extra_js .= "\$('id_#$minfrom').data('xdsoft_datetimepicker').setOptions({onChangeDateTime: function (currentDateTime) { \$('#id_$id').data('xdsoft_datetimepicker').setOptions({minDate: currentDateTime})}})"; $extra_js .= "\$('#id_$minfrom').data('xdsoft_datetimepicker').setOptions({onChangeDateTime: function (currentDateTime) { \$('#id_$id').data('xdsoft_datetimepicker').setOptions({minDate: currentDateTime})}})";
if($maxfrom != '') if($maxfrom != '')
$extra_js .= "\$('#id_$maxfrom').data('xdsoft_datetimepicker').setOptions({onChangeDateTime: function (currentDateTime) { \$('#id_$id').data('xdsoft_datetimepicker').setOptions({maxDate: currentDateTime})}})"; $extra_js .= "\$('#id_$maxfrom').data('xdsoft_datetimepicker').setOptions({onChangeDateTime: function (currentDateTime) { \$('#id_$id').data('xdsoft_datetimepicker').setOptions({maxDate: currentDateTime})}})";

View file

@ -1,9 +1,15 @@
<h3 class="heading">{{$title}}</h3> <h3 class="heading">{{$title}}</h3>
<p> {{* The event edit navigation menu (text input, permissions, preview, filebrowser) *}}
{{$desc}} <ul id="event-nav" class="nav nav-tabs hidden-xs event-nav" role="menubar" data-tabs="tabs">
</p> {{* Mark the first list entry as active because it is the first which is active after opening
the modal. Changing of the activity status is done by js in event_head.tpl *}}
<li class="active" role="menuitem"><a id="event-edit-lnk" onclick="eventEditActive(); return false;">Text</a></li>
{{if $acl}}<li role="menuitem" {{if !$sh_checked}} style="display: none"{{/if}}><a id="event-perms-lnk" onclick="eventAclActive();return false;">Permissions</a></li>{{/if}}
{{if $preview}}<li role="menuitem"><a id="event-preview-lnk" onclick="eventPreviewActive();return false;">{{$preview}}</a></li>{{/if}}
<li role="menuitem"><a id="event-preview-link" onclick="fbrowserActive(); return false;"> Browser </a></li>
</ul>
<form id="event-edit-form" action="{{$post}}" method="post" > <form id="event-edit-form" action="{{$post}}" method="post" >
@ -12,6 +18,11 @@
<input type="hidden" name="uri" value="{{$uri}}" /> <input type="hidden" name="uri" value="{{$uri}}" />
<input type="hidden" name="preview" id="event-edit-preview" value="0" /> <input type="hidden" name="preview" id="event-edit-preview" value="0" />
<div id="event-edit-wrapper">
<p>
{{$desc}}
</p>
{{$s_dsel}} {{$s_dsel}}
{{$f_dsel}} {{$f_dsel}}
@ -22,6 +33,7 @@
{{include file="field_input.tpl" field=$summary}} {{include file="field_input.tpl" field=$summary}}
<div class="form-group"> <div class="form-group">
<div id="event-desc-text"><b>{{$d_text}}</b></div> <div id="event-desc-text"><b>{{$d_text}}</b></div>
<textarea id="comment-edit-text-desc" class="form-control" name="desc" >{{$d_orig}}</textarea> <textarea id="comment-edit-text-desc" class="form-control" name="desc" >{{$d_orig}}</textarea>
@ -66,19 +78,62 @@
<div class="clear"></div> <div class="clear"></div>
</div> </div>
<div class="form-group">
<div id="event-location-text"><b>{{$l_text}}</b></div>
<textarea id="comment-edit-text-loc" class="form-control" name="location">{{$l_orig}}</textarea>
<ul id="comment-tools-loc" class="comment-edit-bb comment-icon-list nav nav-pills hidden-xs pull-left">
<li>
<a class="icon" style="cursor: pointer;" title="{{$edimg|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="img" data-id="loc">
<i class="fa fa-picture-o"></i>
</a>
</li>
<li>
<a class="icon bb-url" style="cursor: pointer;" title="{{$edurl|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="url" data-id="loc">
<i class="fa fa-link"></i>
</a>
</li>
<li>
<a class="icon bb-video" style="cursor: pointer;" title="{{$edvideo|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="video" data-id="loc">
<i class="fa fa-video-camera"></i>
</a>
</li>
<div id="event-location-text">{{$l_text}}</div> <li>
<textarea id="event-location-textarea" name="location">{{$l_orig}}</textarea> <a class="icon underline" style="cursor: pointer;" title="{{$eduline|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="u" data-id="loc">
<i class="fa fa-underline"></i>
<div id="event-location-break"></div> </a>
</li>
<li>
<a class="icon italic" style="cursor: pointer;" title="{{$editalic|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="i" data-id="loc">
<i class="fa fa-italic"></i>
</a>
</li>
<li>
<a class="icon bold" style="cursor: pointer;" title="{{$edbold|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="b" data-id="loc">
<i class="fa fa-bold"></i>
</a>
</li>
<li>
<a class="icon quote" style="cursor: pointer;" title="{{$edquote|escape:'html'}}" data-role="insert-formatting" data-comment=" " data-bbcode="quote" data-id="loc">
<i class="fa fa-quote-left"></i>
</a>
</li>
</ul>
<div class="clear"></div>
</div>
<input type="checkbox" name="share" value="1" id="event-share-checkbox" {{$sh_checked}} /> <div id="event-share-text">{{$sh_text}}</div> <input type="checkbox" name="share" value="1" id="event-share-checkbox" {{$sh_checked}} /> <div id="event-share-text">{{$sh_text}}</div>
<div id="event-share-break"></div> <div id="event-share-break"></div>
{{$acl}}
<div class="clear"></div>
<input id="event-edit-preview" type="submit" name="preview" value="{{$preview|escape:'html'}}" onclick="doEventPreview(); return false;" /> <input id="event-edit-preview" type="submit" name="preview" value="{{$preview|escape:'html'}}" onclick="doEventPreview(); return false;" />
<input id="event-submit" type="submit" name="submit" value="{{$submit|escape:'html'}}" /> <input id="event-submit" type="submit" name="submit" value="{{$submit|escape:'html'}}" />
</div>
<div id="event-acl-wrapper" style="display: none">
{{$acl}}
</div>
<div class="clear"></div>
</form> </form>

View file

@ -159,13 +159,17 @@
$("#comment-edit-text-desc").bbco_autocomplete('bbcode'); $("#comment-edit-text-desc").bbco_autocomplete('bbcode');
{{/if}} {{/if}}
$('#event-share-checkbox').change(function() { $('body').change("#event-share-checkbox", function() {
if ($('#event-share-checkbox').is(':checked')) { if ($('#event-share-checkbox').is(':checked') && !( $('#event-share-checkbox').attr("disabled"))) {
$('#acl-wrapper').show(); $('#acl-wrapper').show();
$("a#event-perms-lnk").parent("li").show();
toggleEventNav("a#event-perms-lnk");
eventAclActive();
} }
else { else {
$('#acl-wrapper').hide(); $('#acl-wrapper').hide();
$("a#event-perms-lnk").parent("li").hide();
} }
}).trigger('change'); }).trigger('change');
@ -182,7 +186,44 @@
}).trigger('change'); }).trigger('change');
// Event nav menu.
$("body").on("click", "#event-nav li a", function(e){
e.preventDefault();
toggleEventNav(this);
});
}); });
</script> </script>
<script>
// the following functions show/hide the specific event-edit content
// in dependence of the selected nav
function eventAclActive() {
$("#event-edit-wrapper, .modal-body #jot-preview-content, .modal-body #jot-fbrowser-wrapper").hide();
$("#event-acl-wrapper").show();
}
function previewActive() {
$(".modal-body #profile-jot-wrapper, .modal-body #profile-jot-acl-wrapper,.modal-body #jot-fbrowser-wrapper").hide();
preview_post();
}
function eventEditActive() {
$("#event-acl-wrapper, .modal-body #jot-preview-content, .modal-body #jot-fbrowser-wrapper").hide();
$("#event-edit-wrapper").show();
//make sure jot text does have really the active class (we do this because there are some
// other events which trigger jot text
toggleEventNav($("#event-edit-lnk"));
}
// Give the active "event-nav" list element the class "active"
function toggleEventNav (elm) {
// select all li of #event-nav and remove the active class
$(elm).closest("#event-nav").children("li").removeClass("active");
// add the active class to the parent of the link which was selected
$(elm).parent("li").addClass("active");
}
</script>