frio: events - split event form in different sections

include/datetime.php

@@ -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') : '';
 	$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)" : '';
 
 	$pickers = '';
@@ -283,7 +283,7 @@ function datetimesel($format, $min, $max, $default, $label, $id = 'datetimepicke
 	$extra_js = '';
 	$pickers .= ",dayOfWeekStart: ".$firstDay.",lang:'".$lang."'";
 	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 != '')
 		$extra_js .= "\$('#id_$maxfrom').data('xdsoft_datetimepicker').setOptions({onChangeDateTime: function (currentDateTime) { \$('#id_$id').data('xdsoft_datetimepicker').setOptions({maxDate: currentDateTime})}})";
 
@@ -296,7 +296,7 @@ function datetimesel($format, $min, $max, $default, $label, $id = 'datetimepicke
 
 	$tpl = get_markup_template('field_input.tpl');
 	$o .= replace_macros($tpl,array(
-			'$field' => array($id, $label, $input_text, '', (($required) ? '*' : ''), 'placeholder="' . $readable_format . '" '),
+			'$field' => array($id, $label, $input_text, '', (($required) ? '*' : ''), 'placeholder="' . $readable_format . '"'),
 		));
 //	$o .= "<div class='date'><input type='text' placeholder='$readable_format' name='$id' id='$id' $input_text />";
 //	$o .= '</div>';

view/theme/frio/templates/event_form.tpl

@@ -1,28 +1,40 @@
 
 <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" >
 
-<input type="hidden" name="event_id" value="{{$eid}}" />
+	<input type="hidden" name="event_id" value="{{$eid}}" />
-<input type="hidden" name="cid" value="{{$cid}}" />
+	<input type="hidden" name="cid" value="{{$cid}}" />
-<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" />
 
-{{$s_dsel}}
+	<div id="event-edit-wrapper">
+		<p>
+		{{$desc}}
+		</p>
 
-{{$f_dsel}}
+		{{$s_dsel}}
 
-{{include file="field_checkbox.tpl" field=$nofinish}}
+		{{$f_dsel}}
 
-{{include file="field_checkbox.tpl" field=$adjust}}
+		{{include file="field_checkbox.tpl" field=$nofinish}}
 
-{{include file="field_input.tpl" field=$summary}}
+		{{include file="field_checkbox.tpl" field=$adjust}}
 
-<div class="form-group">
+		{{include file="field_input.tpl" field=$summary}}
+
+
+		<div class="form-group">
 			<div id="event-desc-text"><b>{{$d_text}}</b></div>
 			<textarea id="comment-edit-text-desc" class="form-control" name="desc" >{{$d_orig}}</textarea>
 			<ul id="event-desc-text-edit-bb" class="comment-edit-bb comment-icon-list nav nav-pills hidden-xs pull-left">
@@ -64,21 +76,64 @@
 				</li>
 			</ul>
 			<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>
+					</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>
 
-<div id="event-location-break"></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>
 
-<input type="checkbox" name="share" value="1" id="event-share-checkbox" {{$sh_checked}} /> <div id="event-share-text">{{$sh_text}}</div>
+		<input id="event-edit-preview" type="submit" name="preview" value="{{$preview|escape:'html'}}" onclick="doEventPreview(); return false;" />
-<div id="event-share-break"></div>
+		<input id="event-submit" type="submit" name="submit" value="{{$submit|escape:'html'}}" />
+	</div>
 
-{{$acl}}
+	<div id="event-acl-wrapper" style="display: none">
+		{{$acl}}
+	</div>
+
+	<div class="clear"></div>
 
-<div class="clear"></div>
-<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'}}" />
 </form>
 

view/theme/frio/templates/event_head.tpl

@@ -159,13 +159,17 @@
 		$("#comment-edit-text-desc").bbco_autocomplete('bbcode');
 		{{/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();
+				$("a#event-perms-lnk").parent("li").show();
+				toggleEventNav("a#event-perms-lnk");
+				eventAclActive();
 			}
 			else {
 				$('#acl-wrapper').hide();
+				$("a#event-perms-lnk").parent("li").hide();
 			}
 		}).trigger('change');
 
@@ -182,7 +186,44 @@
 
 		}).trigger('change');
 
+		// Event nav menu.
+		$("body").on("click", "#event-nav li a", function(e){
+			e.preventDefault();
+			toggleEventNav(this);
+		});
+
 	});
 
 </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>