Mobile version of forum #21: Create new topic.

static/js/mobile.new.function.js

@@ -0,0 +1,225 @@
+/*
+ * Carbon-Forum
+ * https://github.com/lincanbin/Carbon-Forum
+ *
+ * Copyright 2014, Lin Canbin
+ * http://www.94cb.com/
+ *
+ * Licensed under the Apache License, Version 2.0:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * A high performance open-source forum software written in PHP. 
+ */
+
+//话题自动补全
+$(function() {
+	//'use strict';
+	// Initialize ajax autocomplete:
+	$("#AlternativeTag").autocomplete({
+		serviceUrl: WebsitePath + '/json/tag_autocomplete',
+		type: 'post'
+		/*,
+		lookupFilter: function(suggestion, originalQuery, queryLowerCase) {
+			var re = new RegExp('\\b' + $.Autocomplete.utils.escapeRegExChars(queryLowerCase), 'gi');
+			return re.test(suggestion.value);
+		},
+		onSelect: function(suggestion) {
+			//AddTag(document.NewForm.AlternativeTag.value, Math.round(new Date().getTime()/1000));
+		}, 
+		onHint: function (hint) {
+            alert(hint);
+        },*/
+	});
+
+});
+
+//提交前的检查
+function CreateNewTopic() {
+	if (!document.NewForm.Title.value.length) {
+		alert(Lang['Title_Can_Not_Be_Empty']);
+		document.NewForm.Title.focus();
+		return false;
+	} else if (document.NewForm.Title.value.replace(/[^\x00-\xff]/g, "***").length > MaxTitleChars) {
+		alert(Lang['Title_Too_Long'].replace("{{MaxTitleChars}}", MaxTitleChars).replace("{{Current_Title_Length}}", document.NewForm.Title.value.replace(/[^\x00-\xff]/g, "***").length));
+		document.NewForm.Title.focus();
+		return false;
+	} else if (!$("#SelectTags").html()) {
+		alert(Lang['Tags_Empty']);
+		document.NewForm.AlternativeTag.focus();
+		return false;
+	} else {
+		UE.getEditor('editor').setDisabled('fullscreen');
+		$.ajax({
+			url: WebsitePath + '/new',
+			data: {
+				FormHash: document.NewForm.FormHash.value,
+				Title: document.NewForm.Title.value,
+				Content: document.NewForm.Content.value,
+				Tag: $("input[name='Tag[]']").map(function() {
+					return $(this).val();
+				}).get()
+			},
+			type: 'post',
+			cache: false,
+			dataType: 'json',
+			async: false,
+			//阻塞防止干扰
+			success: function(data) {
+				if (data.Status == 1) {
+					$("#PublishButton").val(Lang['Submit_Success']);
+					location.href = WebsitePath + "/t/" + data.TopicID;
+					if (window.localStorage) {
+						//清空草稿箱
+						StopAutoSave();
+					}
+				} else {
+					alert(data.ErrorMessage);
+					UE.getEditor('editor').setEnabled();
+				}
+			},
+			error: function() {
+				alert(Lang['Submit_Failure']);
+				UE.getEditor('editor').setEnabled();
+				$("#PublishButton").val(Lang['Submit_Again']);
+			}
+		});
+	}
+	return true;
+}
+
+function CheckTag(TagName, IsAdd) {
+	var show = true;
+	var i = 1;
+	$("input[name='Tag[]']").each(function(index) {
+		if (IsAdd && i >= MaxTagNum) {
+			alert(Lang['Tags_Too_Much'].replace("{{MaxTagNum}}", MaxTagNum));
+			show = false;
+		}
+		if (TagName == $(this).val() || TagName == '') {
+			show = false;
+		}
+		i++;
+	});
+	return show;
+}
+
+function GetTags() {
+	var CurrentContentHash = md5(document.NewForm.Title.value + document.NewForm.Content.value);
+	//取Title与Content 联合Hash值，与之前input的内容比较，不同则开始获取话题，随后保存进hidden input。
+	if (CurrentContentHash != document.NewForm.ContentHash.value) {
+		if (document.NewForm.Title.value.length || document.NewForm.Content.value.length) {
+			$.ajax({
+				url: WebsitePath + '/json/get_tags',
+				data: {
+					Title: document.NewForm.Title.value,
+					Content: document.NewForm.Content.value
+				},
+				type: 'post',
+				dataType: 'json',
+				success: function(data) {
+					if (data.status) {
+						$("#TagsList").html('');
+						for (var i = 0; i < data.lists.length; i++) {
+							if (CheckTag(data.lists[i], 0)) {
+								TagsListAppend(data.lists[i], i);
+							}
+						}
+						//$("#TagsList").append('<div class="c"></div>');
+					}
+				}
+			});
+		}
+		document.NewForm.ContentHash.value = CurrentContentHash;
+	}
+}
+
+function TagsListAppend(TagName, id) {
+	$("#TagsList").append('<a href="###" onclick="javascript:AddTag(\'' + TagName + '\',' + id + ');" id="TagsList' + id + '">' + TagName + '&nbsp;+</a>');
+	//document.NewForm.AlternativeTag.focus();
+}
+
+function AddTag(TagName, id) {
+	if (CheckTag(TagName, 1)) {
+		$("#SelectTags").append('<a href="###" onclick="javascript:TagRemove(\'' + TagName + '\',' + id + ');" id="Tag' + id + '">' + TagName + '&nbsp;×<input type="hidden" name="Tag[]" value="' + TagName + '" /></a>');
+		$("#TagsList" + id).remove();
+	}
+	//document.NewForm.AlternativeTag.focus();
+	$("#AlternativeTag").val("");
+	if ($("input[name='Tag[]']").length == MaxTagNum) {
+		$("#AlternativeTag").attr("disabled", true);
+		$("#AlternativeTag").attr("placeholder", Lang['Tags_Too_Much'].replace("{{MaxTagNum}}", MaxTagNum));
+	}
+}
+
+$(function() {
+	$("#AlternativeTag").keydown(function(e) {
+		var e = e || event;
+		switch (e.keyCode) {
+		case 13:
+			if ($("#AlternativeTag").val().length != 0) {
+				AddTag($("#AlternativeTag").val(), Math.round(new Date().getTime() / 1000));
+			}
+			break;
+		case 8:
+			if ($("#AlternativeTag").val().length == 0) {
+				var LastTag = $("#SelectTags").children().last();
+				TagRemove(LastTag.children().attr("value"), LastTag.attr("id").replace("Tag", ""));
+			}
+			break;
+		default:
+			return true;
+		}
+	});
+});
+
+function TagRemove(TagName, id) {
+	$("#Tag" + id).remove();
+	TagsListAppend(TagName, id);
+	if ($("input[name='Tag[]']").length < MaxTagNum) {
+		$("#AlternativeTag").attr("disabled", false);
+		$("#AlternativeTag").attr("placeholder", Lang['Add_Tags']);
+	}
+	document.NewForm.AlternativeTag.focus();
+}
+
+if (window.localStorage) {
+	var saveTimer = setInterval(function() {
+		var TagsList = JSON.stringify($("input[name='Tag[]']").map(function() {
+			return $(this).val();
+		}).get());
+		if (document.NewForm.Title.value.length >= 4) {
+			localStorage.setItem(Prefix + "TopicTitle", document.NewForm.Title.value);
+		}
+		if (document.NewForm.Content.value.length >= 10) {
+			localStorage.setItem(Prefix + "TopicContent", document.NewForm.Content.value);
+		}
+		if (TagsList) {
+			localStorage.setItem(Prefix + "TopicTagsList", TagsList);
+		}
+	},
+	1000); //每隔N秒保存一次
+	function StopAutoSave() {
+		clearInterval(saveTimer); //停止保存
+		localStorage.removeItem(Prefix + "TopicTitle"); //清空标题
+		localStorage.removeItem(Prefix + "TopicContent"); //清空内容
+		localStorage.removeItem(Prefix + "TopicTagsList"); //清空标签
+		UE.getEditor('editor').execCommand("clearlocaldata"); //清空Ueditor草稿箱
+	}
+
+	function RecoverContents() {
+		var DraftTitle = localStorage.getItem(Prefix + "TopicTitle");
+		var DraftContent = localStorage.getItem(Prefix + "TopicContent");
+		var DraftTagsList = JSON.parse(localStorage.getItem(Prefix + "TopicTagsList"));
+		if (DraftTitle) {
+			document.NewForm.Title.value = DraftTitle;
+		}
+		if (DraftContent) {
+			UE.getEditor('editor').setContent(DraftContent);
+		}
+		if (DraftTagsList) {
+			for (var i = DraftTagsList.length - 1; i >= 0; i--) {
+				AddTag(DraftTagsList[i], Math.round(new Date().getTime() / 1000) + i * 314159);
+			};
+		}
+	}
+}

styles/mobile/template/new.php

@@ -1,61 +1,48 @@
 <?php
 if (!defined('InternalAccess')) exit('error: 403 Access Denied');
+if(!$IsAjax){
 ?>
+<div id="header">
+
+</div>
+<div id="content">
+<?php } ?>
 <!-- main-content start -->
-<script>
-var MaxTagNum = <?php echo $Config["MaxTagsNum"]; ?>;//最多的话题数量
-var MaxTitleChars = <?php echo $Config['MaxTitleChars']; ?>;//主题标题最多字节数
-var MaxPostChars = <?php echo $Config['MaxPostChars']; ?>;//主题内容最多字节数
-</script>
-<script type="text/javascript" charset="utf-8" src="<?php echo $Config['WebsitePath']; ?>/static/editor/ueditor.config.js?version=<?php echo $Config['Version']; ?>"></script>
-<script type="text/javascript" charset="utf-8" src="<?php echo $Config['WebsitePath']; ?>/static/editor/ueditor.all.min.js?version=<?php echo $Config['Version']; ?>"> </script>
-<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
-<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
-<script type="text/javascript" charset="utf-8" src="<?php echo $Config['WebsitePath']; ?>/static/editor/lang/<?php echo ForumLanguage; ?>/<?php echo ForumLanguage; ?>.js?version=<?php echo $Config['Version']; ?>"></script>
-<script type="text/javascript" charset="utf-8" src="<?php echo $Config['WebsitePath']; ?>/static/js/jquery.autocomplete.min.js?version=<?php echo $Config['Version']; ?>"></script>
-<script type="text/javascript" charset="utf-8" src="<?php echo $Config['WebsitePath']; ?>/static/js/new.function.js?version=<?php echo $Config['Version']; ?>"></script>
-<div class="main-content">
-		<div class="main-box">
-			<form name="NewForm" onkeydown="if(event.keyCode==13)return false;">
+	<div data-title="<?php echo $PageTitle; ?>" id="New" class="panel" selected="true">
+		<script type="text/javascript">
+			loadScript("<?php echo $Config['WebsitePath']; ?>/static/js/mobile.new.function.js", function() {
+				// body...
+				console.log("Loaded");
+			});
+		</script>
+		<form name="NewForm" onkeydown="if(event.keyCode==13)return false;">
 			<input type="hidden" name="FormHash" value="<?php echo $FormHash; ?>" />
 			<input type="hidden" name="ContentHash" value="" />
-			<p><input type="text" name="Title" id="Title" value="<?php echo htmlspecialchars($Title); ?>" style="width:624px;" placeholder="<?php echo $Lang['Title']; ?>" /></p>
+			<p><input type="text" name="Title" id="Title" value="<?php echo htmlspecialchars($Title); ?>" placeholder="<?php echo $Lang['Title']; ?>" /></p>
 			<p>
-				<script id="editor" type="text/plain" style="width:648px;height:500px;"></script>
-				<script type="text/javascript">
-					//实例化编辑器
-					//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
-					window.UEDITOR_CONFIG['textarea'] = 'Content';
-					window.UEDITOR_CONFIG['toolbars'] = [['fullscreen', 'source', '|', 'bold', 'italic', 'underline', 'paragraph', 'fontsize', 'fontfamily', 'forecolor', '|', 'justifyleft','justifycenter', 'justifyright', 'justifyjustify', '|','undo', 'redo'],['insertcode', 'link','inserttable', 'blockquote', 'insertorderedlist', 'insertunorderedlist', '|', 'emotion', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'music', 'attachment', '|', 'removeformat', 'autotypeset']];
-					UE.getEditor('editor',{onready:function(){
-						if(window.localStorage){
-							//从草稿中恢复
-							RecoverContents();
-						}
-						var content='<?php echo $Content; ?>';
-						if(content){
-							this.setContent(content);
-						}
-					}});
-				</script>
+				<textarea name="Content"></textarea>
 			</p>
 			<p>
-				<div class="tags-list bth" style="width:624px;height:33px;" onclick="JavaScript:document.NewForm.AlternativeTag.focus();">
-					<span id="SelectTags" class="btn"></span>
+				<div onclick="JavaScript:document.NewForm.AlternativeTag.focus();">
+					<span id="SelectTags"></span>
 					<input type="text" name="AlternativeTag" id="AlternativeTag" value="" class="tag-input" onfocus="JavaScript:GetTags();" placeholder="<?php echo $Lang['Add_Tags']; ?>" />
 				</div>
 			</p>
 			<p>
-				<div id="TagsList" class="btn">
+				<div id="TagsList">
 				</div>
 			</p>
-			<p><div class="text-center"><input type="button" value="<?php echo $Lang['Submit']; ?>" name="submit" class="textbtn" onclick="JavaScript:CreateNewTopic();" id="PublishButton" /></div><div class="c"></div></p>
-			</form>
+			<p><input type="button" value="<?php echo $Lang['Submit']; ?>" name="submit" class="button" onclick="JavaScript:CreateNewTopic();" id="PublishButton" /></p>
+		</form>
+	<!-- main-content end -->
+<?php
+if(!$IsAjax){
+?>
 	</div>
-</div>
-<!-- main-content end -->
-<!-- main-sider start -->
-<div class="main-sider">
-	<?php include($TemplatePath.'sider.php'); ?>
-</div>
-<!-- main-sider end -->
+<!-- this is the default left side nav menu.  If you do not want any, do not include these -->
+<nav>
+	<ul class="list">
+		<?php include($TemplatePath.'sider.php'); ?>
+	</ul>
+</nav>
+<?php } ?>