Image uploader

admin/themes/default/css/form-file.min.css

@@ -0,0 +1,2 @@
+/*! UIkit 2.23.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+.uk-form-file{display:inline-block;vertical-align:middle;position:relative;overflow:hidden}.uk-form-file input[type=file]{position:absolute;top:0;z-index:1;width:100%;opacity:0;cursor:pointer;left:0;font-size:500px}

admin/themes/default/css/placeholder.min.css

@@ -0,0 +1,2 @@
+/*! UIkit 2.23.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+.uk-placeholder{margin-bottom:15px;padding:15px;border:1px dashed #ddd;background:#fafafa;color:#444}*+.uk-placeholder{margin-top:15px}.uk-placeholder>:last-child{margin-bottom:0}.uk-placeholder-large{padding-top:80px;padding-bottom:80px}

admin/themes/default/css/progress.min.css

@@ -0,0 +1,2 @@
+/*! UIkit 2.23.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+.uk-progress{box-sizing:border-box;height:20px;margin-bottom:15px;background:#eee;overflow:hidden;line-height:20px}*+.uk-progress{margin-top:15px}.uk-progress-bar{width:0;height:100%;background:#00a8e6;float:left;-webkit-transition:width .6s ease;transition:width .6s ease;font-size:12px;color:#fff;text-align:center}.uk-progress-mini{height:6px}.uk-progress-small{height:12px}.uk-progress-success .uk-progress-bar{background-color:#8cc14c}.uk-progress-warning .uk-progress-bar{background-color:#faa732}.uk-progress-danger .uk-progress-bar{background-color:#da314b}.uk-progress-striped .uk-progress-bar{background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-size:30px 30px}.uk-progress-striped.uk-active .uk-progress-bar{-webkit-animation:uk-progress-bar-stripes 2s linear infinite;animation:uk-progress-bar-stripes 2s linear infinite}@-webkit-keyframes uk-progress-bar-stripes{0%{background-position:0 0}100%{background-position:30px 0}}@keyframes uk-progress-bar-stripes{0%{background-position:0 0}100%{background-position:30px 0}}

admin/themes/default/css/upload.min.css

@@ -0,0 +1,2 @@
+/*! UIkit 2.23.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+.uk-dragover{box-shadow:0 0 20px rgba(100,100,100,.3)}

admin/themes/default/index.php

@@ -15,11 +15,16 @@
 	<link rel="stylesheet" type="text/css" href="./css/uikit.almost-flat.min.css?version=<?php echo BLUDIT_VERSION ?>">
 	<link rel="stylesheet" type="text/css" href="./css/default.css?version=<?php echo BLUDIT_VERSION ?>">
 	<link rel="stylesheet" type="text/css" href="./css/jquery.datetimepicker.css?version=<?php echo BLUDIT_VERSION ?>">
+	<link rel="stylesheet" type="text/css" href="./css/upload.min.css?version=<?php echo BLUDIT_VERSION ?>">
+	<link rel="stylesheet" type="text/css" href="./css/form-file.min.css?version=<?php echo BLUDIT_VERSION ?>">
+	<link rel="stylesheet" type="text/css" href="./css/placeholder.min.css?version=<?php echo BLUDIT_VERSION ?>">
+	<link rel="stylesheet" type="text/css" href="./css/progress.min.css?version=<?php echo BLUDIT_VERSION ?>">
 
 	<!-- Javascript -->
 	<script charset="utf-8" src="./js/jquery.min.js?version=<?php echo BLUDIT_VERSION ?>"></script>
 	<script charset="utf-8" src="./js/uikit.min.js?version=<?php echo BLUDIT_VERSION ?>"></script>
 	<script charset="utf-8" src="./js/jquery.datetimepicker.js?version=<?php echo BLUDIT_VERSION ?>"></script>
+	<script charset="utf-8" src="./js/upload.min.js?version=<?php echo BLUDIT_VERSION ?>"></script>
 
 	<!-- Plugins -->
 	<?php Theme::plugins('adminHead') ?>

admin/themes/default/init.php

@@ -125,4 +125,78 @@ class HTML {
 		$html = '';
 	}
 
+	public static function uploader()
+	{
+		global $L;
+
+		$html = '
+		<div id="upload-drop" class="uk-placeholder uk-text-center">
+		<i class="uk-icon-cloud-upload uk-icon-medium uk-text-muted uk-margin-small-right"></i>'.$L->g('Upload Image').'<br><a class="uk-form-file">'.$L->g('Drag and drop or click here').'<input id="upload-select" type="file"></a>
+		</div>
+
+		<div id="progressbar" class="uk-progress uk-hidden">
+		<div class="uk-progress-bar" style="width: 0%;">0%</div>
+		</div>
+		';
+
+		$html .= '<select id="jsimageList" class="uk-width-1-1" size="10">';
+		$imagesList = Filesystem::listFiles(PATH_UPLOADS,'*','*',true);
+		foreach($imagesList as $file) {
+			$html .= '<option value="">'.basename($file).'</option>';
+		}
+		$html .= '</select>';
+
+		$html .= '
+		<div class="uk-form-row uk-margin-top">
+		<button id="jsaddImage" class="uk-button uk-button-primary" type="button"><i class="uk-icon-angle-double-left"></i> '.$L->g('Insert Image').'</button>
+		</div>
+		';
+
+		$html .= '
+		<script>
+		$(document).ready(function() {
+
+			$("#jsaddImage").on("click", function() {
+				var filename = $("#jsimageList option:selected").text();
+				var textareaValue = $("#jscontent").val();
+				$("#jscontent").val(textareaValue + filename + "\n");
+			});
+
+			$(function()
+			{
+				var progressbar = $("#progressbar");
+				var bar = progressbar.find(".uk-progress-bar");
+				var settings =
+				{
+					type: "json",
+					action: "'.HTML_PATH_ADMIN_ROOT.'ajax/uploader",
+					allow : "*.(jpg|jpeg|gif|png)",
+
+					loadstart: function() {
+						bar.css("width", "0%").text("0%");
+						progressbar.removeClass("uk-hidden");
+					},
+
+					progress: function(percent) {
+						percent = Math.ceil(percent);
+						bar.css("width", percent+"%").text(percent+"%");
+					},
+
+					allcomplete: function(response) {
+						bar.css("width", "100%").text("100%");
+						setTimeout(function() { progressbar.addClass("uk-hidden"); }, 250);
+						$("#jsimageList").prepend("<option value=\'"+response.filename+"\' selected=\'selected\'>"+response.filename+"</option>");
+					}
+				};
+
+				var select = UIkit.uploadSelect($("#upload-select"), settings);
+				var drop = UIkit.uploadDrop($("#upload-drop"), settings);
+			});
+
+		});
+		</script>';
+
+		echo $html;
+	}
+
 }

admin/themes/default/js/upload.min.js

@@ -0,0 +1,2 @@
+/*! UIkit 2.23.0 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
+!function(e){var t;window.UIkit&&(t=e(UIkit)),"function"==typeof define&&define.amd&&define("uikit-upload",["uikit"],function(){return t||e(UIkit)})}(function(e){"use strict";function t(o,a){function r(t,n){var o=new FormData,a=new XMLHttpRequest;if(n.before(n,t)!==!1){for(var r,i=0;r=t[i];i++)o.append(n.param,r);for(var l in n.params)o.append(l,n.params[l]);a.upload.addEventListener("progress",function(e){var t=e.loaded/e.total*100;n.progress(t,e)},!1),a.addEventListener("loadstart",function(e){n.loadstart(e)},!1),a.addEventListener("load",function(e){n.load(e)},!1),a.addEventListener("loadend",function(e){n.loadend(e)},!1),a.addEventListener("error",function(e){n.error(e)},!1),a.addEventListener("abort",function(e){n.abort(e)},!1),a.open(n.method,n.action,!0),"json"==n.type&&a.setRequestHeader("Accept","application/json"),a.onreadystatechange=function(){if(n.readystatechange(a),4==a.readyState){var t=a.responseText;if("json"==n.type)try{t=e.$.parseJSON(t)}catch(o){t=!1}n.complete(t,a)}},n.beforeSend(a),a.send(o)}}if(!e.support.ajaxupload)return this;if(a=e.$.extend({},t.defaults,a),o.length){if("*.*"!==a.allow)for(var i,l=0;i=o[l];l++)if(!n(a.allow,i.name))return"string"==typeof a.notallowed?alert(a.notallowed):a.notallowed(i,a),void 0;var s=a.complete;if(a.single){var d=o.length,f=0,p=!0;a.beforeAll(o),a.complete=function(e,t){f+=1,s(e,t),a.filelimit&&f>=a.filelimit&&(p=!1),p&&d>f?r([o[f]],a):a.allcomplete(e,t)},r([o[0]],a)}else a.complete=function(e,t){s(e,t),a.allcomplete(e,t)},r(o,a)}}function n(e,t){var n="^"+e.replace(/\//g,"\\/").replace(/\*\*/g,"(\\/[^\\/]+)*").replace(/\*/g,"[^\\/]+").replace(/((?!\\))\?/g,"$1.")+"$";return n="^"+n+"$",null!==t.match(new RegExp(n,"i"))}return e.component("uploadSelect",{init:function(){var e=this;this.on("change",function(){t(e.element[0].files,e.options);var n=e.element.clone(!0).data("uploadSelect",e);e.element.replaceWith(n),e.element=n})}}),e.component("uploadDrop",{defaults:{dragoverClass:"uk-dragover"},init:function(){var e=this,n=!1;this.on("drop",function(n){n.dataTransfer&&n.dataTransfer.files&&(n.stopPropagation(),n.preventDefault(),e.element.removeClass(e.options.dragoverClass),e.element.trigger("dropped.uk.upload",[n.dataTransfer.files]),t(n.dataTransfer.files,e.options))}).on("dragenter",function(e){e.stopPropagation(),e.preventDefault()}).on("dragover",function(t){t.stopPropagation(),t.preventDefault(),n||(e.element.addClass(e.options.dragoverClass),n=!0)}).on("dragleave",function(t){t.stopPropagation(),t.preventDefault(),e.element.removeClass(e.options.dragoverClass),n=!1})}}),e.support.ajaxupload=function(){function e(){var e=document.createElement("INPUT");return e.type="file","files"in e}function t(){var e=new XMLHttpRequest;return!!(e&&"upload"in e&&"onprogress"in e.upload)}function n(){return!!window.FormData}return e()&&t()&&n()}(),e.support.ajaxupload&&e.$.event.props.push("dataTransfer"),t.defaults={action:"",single:!0,method:"POST",param:"files[]",params:{},allow:"*.*",type:"text",filelimit:!1,before:function(){},beforeSend:function(){},beforeAll:function(){},loadstart:function(){},load:function(){},loadend:function(){},error:function(){},abort:function(){},progress:function(){},complete:function(){},allcomplete:function(){},readystatechange:function(){},notallowed:function(e,t){alert("Only the following file types are allowed: "+t.allow)}},e.Utils.xhrupload=t,t});

admin/views/edit-page.php

@@ -57,6 +57,7 @@ echo '<div class="uk-width-large-3-10">';
 	// Tabs, general and advanced mode
 	echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';
 	echo '<li><a href="">'.$L->g('General').'</a></li>';
+	echo '<li><a href="">'.$L->g('Images').'</a></li>';
 	echo '<li><a href="">'.$L->g('Advanced').'</a></li>';
 	echo '</ul>';
 
@@ -86,6 +87,13 @@ echo '<div class="uk-width-large-3-10">';
 
 	echo '</li>';
 
+	// ---- IMAGES TAB ----
+	echo '<li>';
+
+	HTML::uploader();
+
+	echo '</li>';
+
 	// ---- ADVANCED TAB ----
 	echo '<li>';
 

admin/views/edit-post.php

@@ -51,6 +51,7 @@ echo '<div class="uk-width-large-3-10">';
 	// Tabs, general and advanced mode
 	echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';
 	echo '<li><a href="">'.$L->g('General').'</a></li>';
+	echo '<li><a href="">'.$L->g('Images').'</a></li>';
 	echo '<li><a href="">'.$L->g('Advanced').'</a></li>';
 	echo '</ul>';
 
@@ -80,6 +81,13 @@ echo '<div class="uk-width-large-3-10">';
 
 	echo '</li>';
 
+	// ---- IMAGES TAB ----
+	echo '<li>';
+
+	HTML::uploader();
+
+	echo '</li>';
+
 	// ---- ADVANCED TAB ----
 	echo '<li>';
 

admin/views/new-page.php

@@ -44,8 +44,10 @@ echo '<div class="uk-width-large-3-10">';
 	// Tabs, general and advanced mode
 	echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';
 	echo '<li><a href="">'.$L->g('General').'</a></li>';
+	echo '<li><a href="">'.$L->g('Images').'</a></li>';
 	echo '<li><a href="">'.$L->g('Advanced').'</a></li>';
 	echo '</ul>';
+
 	echo '<ul id="tab-options" class="uk-switcher uk-margin">';
 
 	// ---- GENERAL TAB ----
@@ -72,6 +74,13 @@ echo '<div class="uk-width-large-3-10">';
 
 	echo '</li>';
 
+	// ---- IMAGES TAB ----
+	echo '<li>';
+
+	HTML::uploader();
+
+	echo '</li>';
+
 	// ---- ADVANCED TAB ----
 	echo '<li>';
 

admin/views/new-post.php

@@ -44,6 +44,7 @@ echo '<div class="uk-width-large-3-10">';
 	// Tabs, general and advanced mode
 	echo '<ul class="uk-tab" data-uk-tab="{connect:\'#tab-options\'}">';
 	echo '<li><a href="">'.$L->g('General').'</a></li>';
+	echo '<li><a href="">Images</a></li>';
 	echo '<li><a href="">'.$L->g('Advanced').'</a></li>';
 	echo '</ul>';
 
@@ -73,6 +74,13 @@ echo '<div class="uk-width-large-3-10">';
 
 	echo '</li>';
 
+	// ---- IMAGES TAB ----
+	echo '<li>';
+
+	HTML::uploader();
+
+	echo '</li>';
+
 	// ---- ADVANCED TAB ----
 	echo '<li>';
 

kernel/ajax/uploader.php

@@ -0,0 +1,35 @@
+<?php header('Content-Type: application/json');
+
+// Source
+$source = $_FILES['files']['tmp_name'][0];
+
+// Filename
+$filename = Text::lowercase($_FILES['files']['name'][0]);
+$fileExtension = pathinfo($filename, PATHINFO_EXTENSION);
+$filename = pathinfo($filename, PATHINFO_FILENAME);
+$filename = Text::replace(' ', '', $filename);
+$filename = Text::replace('_', '', $filename);
+
+if( file_exists(PATH_UPLOADS.$filename.'.'.$fileExtension) )
+{
+	$number = 0;
+	$tmpName = $filename.'_'.$number.'.'.$fileExtension;
+	while(file_exists(PATH_UPLOADS.$tmpName)) {
+		$number++;
+		$tmpName = $filename.'_'.$number.'.'.$fileExtension;
+	}
+}
+
+if(empty($tmpName)) {
+	$tmpName = $filename.'.'.$fileExtension;
+}
+
+move_uploaded_file($source, PATH_UPLOADS.$tmpName);
+
+exit(json_encode(array(
+	'status'=>0,
+	'filename'=>$tmpName,
+	'date'=>date("F d Y H:i:s.", filemtime(PATH_UPLOADS.$tmpName))
+)));
+
+?>

kernel/helpers/filesystem.class.php

@@ -16,7 +16,7 @@ class Filesystem {
 		return $directories;
 	}
 
-	public static function listFiles($path, $regex='*', $extension)
+	public static function listFiles($path, $regex='*', $extension='*', $sortByDate=false)
 	{
 		$files = glob($path.$regex.'.'.$extension);
 
@@ -24,6 +24,10 @@ class Filesystem {
 			return array();
 		}
 
+		if($sortByDate) {
+			usort($files, create_function('$a,$b', 'return filemtime($b) - filemtime($a);'));
+		}
+
 		return $files;
 	}
 

kernel/js/functions.php

@@ -5,6 +5,7 @@ echo '<script>'.PHP_EOL;
 echo 'var HTML_PATH_ROOT = "'.HTML_PATH_ROOT.'";'.PHP_EOL;
 echo 'var HTML_PATH_ADMIN_ROOT = "'.HTML_PATH_ADMIN_ROOT.'";'.PHP_EOL;
 echo 'var HTML_PATH_ADMIN_THEME = "'.HTML_PATH_ADMIN_THEME.'";'.PHP_EOL;
+echo 'var HTML_PATH_UPLOADS = "'.HTML_PATH_UPLOADS.'";'.PHP_EOL;
 
 echo 'var NO_PARENT_CHAR = "'.NO_PARENT_CHAR.'";'.PHP_EOL;
 

languages/en_US.json

@@ -199,5 +199,9 @@
 	"manage-users": "Manage users",
 	"view-and-edit-your-profile": "View and edit your profile.",
 
-	"password-must-be-at-least-6-characters-long": "Password must be at least 6 characters long"
+	"password-must-be-at-least-6-characters-long": "Password must be at least 6 characters long",
+	"images": "Images",
+	"upload-image": "Upload image",
+	"drag-and-drop-or-click-here": "Drag and drop or click here",
+	"insert-image": "Insert image"
 }

plugins/simplemde/js/README.md

@@ -0,0 +1,9 @@
+This version of SimpleMDE have a little changes for Bludit.
+
+--- Image preview hack ---
+
+Original
+<img src="'+e+'"
+
+Bludit hack
+<img src="'+HTML_PATH_UPLOADS+e+'"

plugins/simplemde/plugin.php

@@ -46,10 +46,13 @@ class pluginsimpleMDE extends Plugin {
 			// Path plugin.
 			$pluginPath = $this->htmlPath();
 
-			// Load CSS
+			// SimpleMDE css
 			$html .= '<link rel="stylesheet" href="'.$pluginPath.'css/simplemde.min.css">';
 
-			// Load Javascript
+			// Font-awesome is a dependency of SimpleMDE
+			$html .= '<link rel="stylesheet" href="'.$pluginPath.'css/font-awesome.min.css">';
+
+			// SimpleMDE js
 			$html .= '<script src="'.$pluginPath.'js/simplemde.min.js"></script>';
 
 			// Hack for Bludit
@@ -85,11 +88,19 @@ class pluginsimpleMDE extends Plugin {
 					toolbarGuideIcon: true,
 					autofocus: false,
 					lineWrapping: true,
+					autoDownloadFontAwesome: false,
 					indentWithTabs: true,
 					tabSize: '.$this->getDbField('tabSize').',
 					spellChecker: false,
 					toolbar: ['.Sanitize::htmlDecode($this->getDbField('toolbar')).']
 				});';
+
+			$html .= '$("#jsaddImage").on("click", function() {
+					var filename = $("#jsimageList option:selected" ).text();
+					var text = simplemde.value();
+					simplemde.value(text + "![alt text]("+filename+")" + "\n");
+				});';
+
 			$html .= '}); </script>';
 		}