From f24a6b50990b0ba214db535b642d75935a830fdc Mon Sep 17 00:00:00 2001 From: Ro Date: Wed, 23 Feb 2022 15:48:11 -0800 Subject: [PATCH] implemented video uploading, updated styles and templates --- brain/controller/RouteControl.inc.php | 2 + brain/data/Book.inc.php | 17 +- brain/data/Contents.inc.php | 13 +- brain/utility/FileUploader.inc.php | 2 +- brain/views/dash/page-edit.twig | 13 +- brain/views/dash/partials/index.twig | 63 +-- brain/views/dash/partials/recent-options.twig | 45 ++ brain/views/dash/start.twig | 4 +- public/assets/css/dash.css | 74 ++-- public/assets/images/global/upload-audio.png | Bin 0 -> 8199 bytes public/assets/images/global/upload-doc.png | Bin 0 -> 2984 bytes public/assets/images/global/upload-video.png | Bin 0 -> 3343 bytes public/assets/scripts/Start.js | 95 +++-- src/com/Base.js | 393 +++++++++--------- src/com/actions/PageActions.js | 176 ++++---- src/com/controllers/PageEditor.js | 45 +- src/com/ui/FileManager.js | 58 ++- src/styles/main/_index.sass | 6 +- src/styles/main/_posts.sass | 162 ++++---- 19 files changed, 640 insertions(+), 528 deletions(-) create mode 100644 brain/views/dash/partials/recent-options.twig create mode 100644 public/assets/images/global/upload-audio.png create mode 100644 public/assets/images/global/upload-doc.png create mode 100644 public/assets/images/global/upload-video.png diff --git a/brain/controller/RouteControl.inc.php b/brain/controller/RouteControl.inc.php index b207b1f..c54fc38 100644 --- a/brain/controller/RouteControl.inc.php +++ b/brain/controller/RouteControl.inc.php @@ -33,6 +33,8 @@ class RouteControl ): ResponseInterface { switch (isset($args["first"]) ? $args["first"] : "index") { case "api": + //$result = APIControl::post($request, $response, $args); + //var_dump($result); return APIControl::post($request, $response, $args); break; default: diff --git a/brain/data/Book.inc.php b/brain/data/Book.inc.php index 9af08c6..9708743 100644 --- a/brain/data/Book.inc.php +++ b/brain/data/Book.inc.php @@ -57,7 +57,7 @@ class Book //var_dump($files); if ($task != "create") { $imageList = ""; - $imagesPath = "/assets/images/blog/" . $path . "/"; + //var_dump($files["page_files"] ); foreach ($files["page_files"] as $file) { $type = $file->getClientMediaType(); switch ($type) { @@ -65,17 +65,30 @@ class Book case "image/png": case "image/gif": case "image/svg": + $imagesPath = "/assets/images/blog/" . $path . "/"; $imageList = - $imageList . $imagesPath . $file->getClientFileName() . ", "; + $imageList . $imagesPath . urlencode($file->getClientFileName()). ", "; FileUploader::uploadFile( "../public/assets/images/blog/" . $path . "/", $file ); break; + case "video/mp4": + $videosPath = "/assets/video/blog/" . $path . "/"; + $imageList = + $imageList . $videosPath . urlencode($file->getClientFileName()) . ", "; + + FileUploader::uploadFile( + "../public/assets/video/blog/" . $path . "/", + $file + ); + break; } } $feature = $imageList; + //var_dump($feature); + //return ["message" => "JUST DEBUGGING"]; } else { $feature = "/assets/images/blog/" . diff --git a/brain/data/Contents.inc.php b/brain/data/Contents.inc.php index f16cc9f..d2bb0d3 100644 --- a/brain/data/Contents.inc.php +++ b/brain/data/Contents.inc.php @@ -100,12 +100,13 @@ class Contents $scrubbed = $sanitizer->sanitize($result->getContent()); - $imageList = explode(",", $meta["feature"]); - $images = []; - foreach ($imageList as $item) { - $image = trim($item); + $featureList = explode(",", $meta["feature"]); + $media = []; + foreach ($featureList as $file) { + $item = trim($file); + $ext = explode(".", $item); if ($item != null || $item != "") { - array_push($images, $item); + array_push($media, ["file"=>$item, "type"=>trim($ext[1])]); } } @@ -133,7 +134,7 @@ class Contents "filePath" => $file, "content" => $parsed->getContent(), "html" => $scrubbed, - "media" => $images, + "media" => $media, ]; //checks for duplicates $uuid = $meta["uuid"]; diff --git a/brain/utility/FileUploader.inc.php b/brain/utility/FileUploader.inc.php index be3df13..47e3774 100644 --- a/brain/utility/FileUploader.inc.php +++ b/brain/utility/FileUploader.inc.php @@ -21,7 +21,7 @@ class FileUploader //echo "**FILE** " . $file->getClientFileName(); - $file->moveTo($directory . "/" . $file->getClientFileName()); + $file->moveTo($directory . "/" . urlencode($file->getClientFileName())); } catch (RuntimeException $e) { echo "ERROR " . $e->getMessage(); diff --git a/brain/views/dash/page-edit.twig b/brain/views/dash/page-edit.twig index 5d02d9b..6ee6a92 100644 --- a/brain/views/dash/page-edit.twig +++ b/brain/views/dash/page-edit.twig @@ -34,7 +34,7 @@ {% endblock %} {% block stylesheets %} - + {% endblock %} {% block mainContent %} @@ -54,14 +54,19 @@ IMAGES AND VIDEO
{% if media|length > 1 %} - {% for image in media %} -
+ {% for item in media %} + {% if item.type == "mp4"%} +
+ {% else %} +
+ {% endif %} {% endfor %} {% else %}
{% endif %}
+ FILES
@@ -132,5 +137,5 @@ {% endblock %} {% block javascripts %} - + {% endblock %} \ No newline at end of file diff --git a/brain/views/dash/partials/index.twig b/brain/views/dash/partials/index.twig index 2bbcf90..379eb0e 100644 --- a/brain/views/dash/partials/index.twig +++ b/brain/views/dash/partials/index.twig @@ -25,53 +25,24 @@
{% if data["entryCount"] != 0 %} {% for page in data['pages'] %} - - -
- {% if page.menu == 'true' %} - {% set menu = "true" %} - {% else %} - {% set menu = "false" %} - {% endif %} - {% if page.published == 'true' %} - {% set published = "true" %} - {% else %} - {% set published = "false" %} - {% endif %} - {% if page.featured == 'true' %} - {% set featured = "true" %} - {% else %} - {% set featured = "false" %} - {% endif %} -
- - - - - -
-
- - {{ page.updated }} - -
+ {% if page.media[0].type == 'mp4' %} -
- + + + {{ include("dash/partials/recent-options.twig") }} + + + {% else %} + + + {{ include("dash/partials/recent-options.twig") }} + + {% endif %} + {% endfor %} {% else %} There are no pages diff --git a/brain/views/dash/partials/recent-options.twig b/brain/views/dash/partials/recent-options.twig new file mode 100644 index 0000000..1c0dc22 --- /dev/null +++ b/brain/views/dash/partials/recent-options.twig @@ -0,0 +1,45 @@ + +
+ {% if page.menu == 'true' %} + {% set menu = "true" %} + {% else %} + {% set menu = "false" %} + {% endif %} + {% if page.published == 'true' %} + {% set published = "true" %} + {% else %} + {% set published = "false" %} + {% endif %} + {% if page.featured == 'true' %} + {% set featured = "true" %} + {% else %} + {% set featured = "false" %} + {% endif %} +
+ + + + + +
+
+ + {{ page.updated }} + +
+ +
\ No newline at end of file diff --git a/brain/views/dash/start.twig b/brain/views/dash/start.twig index da57bd8..059dd2e 100644 --- a/brain/views/dash/start.twig +++ b/brain/views/dash/start.twig @@ -5,7 +5,7 @@ {% endblock %} {% block stylesheets %} - + {% endblock %} {% block mainContent %} @@ -23,5 +23,5 @@ {% endblock %} {% block javascripts %} - + {% endblock %} \ No newline at end of file diff --git a/public/assets/css/dash.css b/public/assets/css/dash.css index 8ba6e18..f651ff6 100644 --- a/public/assets/css/dash.css +++ b/public/assets/css/dash.css @@ -2278,7 +2278,7 @@ svg.icons { height: 20px; fill: #EFEBE3; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link { font-size: 1.5em; font-weight: 300; display: inline-block; @@ -2286,8 +2286,13 @@ svg.icons { vertical-align: top; text-decoration: none; position: relative; + overflow: hidden; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link label { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link .post-video, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link .post-video { + width: 100%; + position: absolute; +} +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link label, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link label { font-size: 1.4em; font-weight: 700; color: #EFEBE3; @@ -2301,53 +2306,53 @@ svg.icons { top: 35%; text-shadow: 2px 2px 0 #32302f; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options { width: 100%; position: absolute; bottom: 0; border-radius: 0 0 3px 3px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%); } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left { display: inline-block; vertical-align: top; width: 50%; position: relative; background: none; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button { border-radius: 3px; background: #1D3040; margin: 0 0 10px 10px; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button svg { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button svg, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button svg { width: 40px; height: 20px; fill: #b2cce5; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left .item-options { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left .item-options, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left .item-options { border-radius: 3px; margin: 5px; display: inline-block; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false], #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button[data-active=false] { background: #1D3040; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] svg { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=false] svg, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button[data-active=false] svg { fill: #b2cce5; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true], #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button[data-active=true] { background: #f5ab35; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] svg { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-left button[data-active=true] svg, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-left button[data-active=true] svg { fill: #1D3040; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-right { display: inline-block; width: 50%; text-align: right; } -#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right span { +#dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-link div#options #option-right span, #dash-index-content #dash-index #dash-index-wrapper #dash-recent #recent-list a.post-video-link div#options #option-right span { font-weight: bold; display: block; background: #EFEBE3; @@ -2911,7 +2916,7 @@ select { margin-left: 10px; width: 55px; } -#post-index #post-index-wrapper #post-index-header #post-index-header-right a button svg { +#post-index #post-index-wrapper #post-index-header #post-index-header-right a svg { width: 20px; height: 17px; fill: #EFEBE3; @@ -2947,6 +2952,8 @@ select { height: 350px; background-color: #fc6399; position: relative; + text-shadow: 2px 2px 0 #32302f; + text-shadow: 2px 2px 0 #32302f; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg label { font-size: 2em; @@ -2960,8 +2967,6 @@ select { text-align: center; position: relative; top: 35%; - text-shadow: 2px 2px 0 #32302f; - text-shadow: 2px 2px 0 #32302f; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta { width: 100%; @@ -2989,7 +2994,7 @@ select { background: #1D3040; margin: 0 0 10px 10px; } -#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button svg { +#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg { width: 40px; height: 20px; fill: #b2cce5; @@ -3002,13 +3007,13 @@ select { #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] { background: #1D3040; } -#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=false] svg { +#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg { fill: #b2cce5; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] { background: #f5ab35; } -#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left button[data-active=true] svg { +#post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-left svg { fill: #1D3040; } #post-index #post-index-wrapper #posts-list a.page-link div.page-bg #meta #options #option-right { @@ -3217,6 +3222,26 @@ select { display: inline-block; cursor: pointer; } +#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list .audio-item { + height: 150px; + width: 23.8%; + border-radius: 3px; + margin: 0 10px 10px 0; + display: inline-block; + cursor: pointer; + background: #1D3040; + background: url("/assets/images/global/upload-audio.png") no-repeat center center/cover; +} +#post-edit-index #post-edit-index-wrapper #post-feature #page-file-manager #page-file-wrapper #page-images-list .video-item { + height: 150px; + width: 23.8%; + border-radius: 3px; + margin: 0 10px 10px 0; + display: inline-block; + cursor: pointer; + background: #1D3040; + background: url("/assets/images/global/upload-video.png") no-repeat center center/cover; +} #post-edit-index #post-edit-index-wrapper #post-feature #featured-new-image-btn { position: absolute; margin: 20px; @@ -3245,17 +3270,6 @@ select { } #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #edit, #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight { /* Both elements need the same text and space styling so they are directly on top of each other */ - border: 0; - width: 100%; - min-height: 300px; - height: auto; - position: absolute; - top: 0; - left: 0; - overflow: auto; - word-wrap: normal; - white-space: pre-wrap; - line-break: normal; } #post-edit-index #post-edit-index-wrapper #edit-post #edit-post-wrapper #highlight-content { word-wrap: normal; diff --git a/public/assets/images/global/upload-audio.png b/public/assets/images/global/upload-audio.png new file mode 100644 index 0000000000000000000000000000000000000000..137cd0cb83c5a73fc1927004799a1b9c044689ce GIT binary patch literal 8199 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 HD=PP&ZjkES literal 0 HcmV?d00001 diff --git a/public/assets/images/global/upload-video.png b/public/assets/images/global/upload-video.png new file mode 100644 index 0000000000000000000000000000000000000000..96b9a5d6e7efd85a2458f46eba67a50201238179 GIT binary patch literal 3343 zcmeH~=~og67si1saVt8SOCu>QYGZ}H=8A%YW%XuiWlfE1Sy_QgLYO*)8tRytOIeu$ zHkMQ_xg%&;Hd2~OYUYYcHc~2}$qvfv`~mN``7&qvaKGH=-gD1+&b_~LZf1brek1*j z`TzjH=-`39M*#rfj=us7TFJ<)EH(oGh93{^{VDJ&P{`}f;ho!{JI{=wQ-BFI29J&Q zojHR|_3BNtslDI}G2OUTzc)J*8yGy}voX7O-YR*cnYmeha_a8d_mm?pHl10I((P<~ z^q#b21|TQ|_t0Zbl##o*Br#K<^py8+=uZ&2ahHk(qY3vJh>`fo$$XR!_=6s{98>8C z1ZhnnXhE`9O)|uEomUbF{lySsX9{Wi1iawy1*QN&?I83?4}ee){Ls;>wq2BaMmCwomNXeK+LKNvXF z^s-m!(w#7hg&6jQMfPaU3w399y8Hr0U~*M6EQ}|{4BBfgDY$)R;x9^f_hoatl1a;2U`S4*dMol~{S@Y|k|{(FKWdO>uBvm@E+f|Qm9!T5TJ+>cOj<1Dy8Eb& zyjA*nczI;P$hSo8Ce!52=Z6@~7dE7YS>} z+dhakryN&}WzPb6rNxQ;>RmDC91rSQ zVEp$`GB$~oB{I!3Uw-}oHbZMPTKb1$xUN^a7a~6 zhTiFjRfVyLXu5G~LsKv~sJQb{QXGO3Sn*Vf9{S)~Hqy1y%464}3eLQ`o>mR;eEz3` zpn6Mc6@L);Efz-xF$FY80$-{ZI`wDmKsUv>G!&ydQM0?(JKvNfSsr-J9sE(Ly2 zY%8=$QU_;mK1AIkQy72{Y9f&jH!Ej8M5HBmMdtyhf3$P3{V)TFHY$I15KI^BxjG!3fOR^zr za@|AXW(X>NOeIqO3_g6k=Oox(`YvfgAEkR+zsG5q!dMAQ zQO!Y`^uAZtJ&C1gS4{7TSthB`y>J^0OW5N$dS5N*vcu`?oxX)}JkCQES+u*k^x?o( z?8Pr`G`aT0)HB``yy%KF@>gw(x=dR1K%)^PRk^$M;yI}CfdOnIvXJV1wVS$nN#d=R za}N=sLhI-ZlC;qVlgdb3%hxf4?!2P49CJvEjopF}qzAD{R9ydf&F8w(5X;nsrNtgO zR6D08E)jF5Bzdv95eQsLKKBCz(zYf&+#qYGH95}AXr&;7(colCE<JCG%q=B&W+4%u_iBO{Wp{@ z5)7@76yGEe-|R+6Dvyh<-CD8r)tkE{IfF_I$6V|f;$BT%=jr?kbK~qBtob}QQljAW z(XE0LrrW8s2$}Lpr8dKik!{<=KGK{e5sku|Kg~#Nt{8=)oD)C0yxX6XBMW6EC}+;| zeDGA?N&n|qwG4i5ohNIypma%_L*$}5@tmQb2|Ge+H)ljXsaH&6Fr^K~JEM18^f!<^ z%~}W^3>9l>1COr%j-@7R!#eAZ7kVA=0(<+Ku77I`Y4Zpw&?D=R9sW4GKE(qF>-sK# gx8)zW4hpl5-rKE#PMq46M+b0lpWogpba?9j0JXu$&;S4c literal 0 HcmV?d00001 diff --git a/public/assets/scripts/Start.js b/public/assets/scripts/Start.js index 9c8ba2b..e55e8dc 100644 --- a/public/assets/scripts/Start.js +++ b/public/assets/scripts/Start.js @@ -140,9 +140,9 @@ this[globalName] = mainExports; } } -})({"fQadY":[function(require,module,exports) { +})({"jRsG2":[function(require,module,exports) { var HMR_HOST = null; -var HMR_PORT = 59457; +var HMR_PORT = 1234; var HMR_SECURE = false; var HMR_ENV_HASH = "4a236f9275d0a351"; module.bundle.HMR_BUNDLE_ID = "770375bf412ba982"; @@ -1639,7 +1639,7 @@ class PostEditor { //-------------------------- constructor(){ this.processing = false; - let self = this; + let self = "this"; this.admin = new _fipamoAdminAPIDefault.default(null, document.getElementById('notify-progress')); this.mm = new _maintenanceManagerDefault.default(null, null, document.getElementById('notify-progress')); this.urlPieces = document.URL.split('/'); @@ -1789,34 +1789,34 @@ class PostActions { collectInfo(files) { return new Promise((resolve, reject)=>{ let pageInfo = new FormData(); - let txt = document.createElement("textarea"); - txt.innerHTML = document.getElementById("highlight-content").innerHTML; + let txt = document.createElement('textarea'); + txt.innerHTML = document.getElementById('highlight-content').innerHTML; let html = txt.value; - html = html.replace(/<\/?span[^>]*>/g, ""); //removes prism styling - html = html.replace(/<\/?br[^>]*>/g, "\n"); //convert back to encoded line break for storage - pageInfo.append("id", document.getElementById("post-edit-index").getAttribute("data-index")); - pageInfo.append("uuid", document.getElementById("post-edit-index").getAttribute("data-uuid")); - pageInfo.append("layout", document.getElementById("post-edit-index").getAttribute("data-layout")); - pageInfo.append("current_title", document.getElementById("post-edit-index").getAttribute("data-slug")); - pageInfo.append("content", html); - pageInfo.append("title", document.getElementById("post_title").value); - pageInfo.append("created", document.getElementById("post-date").getAttribute("data-raw")); - pageInfo.append("slug", new _stringUtilsDefault.default().cleanString(document.getElementById("post_title").value)); - pageInfo.append("tags", document.getElementById("post_tags").value); - pageInfo.append("menu", document.getElementById("option-menu-pin").getAttribute("data-active")); - pageInfo.append("featured", document.getElementById("option-feature").getAttribute("data-active")); - pageInfo.append("published", document.getElementById("option-published").getAttribute("data-active")); - pageInfo.append("layout", document.getElementById("page-templates").value); - pageInfo.append("form_token", document.getElementById("form_token").value); + html = html.replace(/<\/?span[^>]*>/g, ''); //removes prism styling + html = html.replace(/<\/?br[^>]*>/g, '\n'); //convert back to encoded line break for storage + pageInfo.append('id', document.getElementById('post-edit-index').getAttribute('data-index')); + pageInfo.append('uuid', document.getElementById('post-edit-index').getAttribute('data-uuid')); + pageInfo.append('layout', document.getElementById('post-edit-index').getAttribute('data-layout')); + pageInfo.append('current_title', document.getElementById('post-edit-index').getAttribute('data-slug')); + pageInfo.append('content', html); + pageInfo.append('title', document.getElementById('post_title').value); + pageInfo.append('created', document.getElementById('post-date').getAttribute('data-raw')); + pageInfo.append('slug', new _stringUtilsDefault.default().cleanString(document.getElementById('post_title').value)); + pageInfo.append('tags', document.getElementById('post_tags').value); + pageInfo.append('menu', document.getElementById('option-menu-pin').getAttribute('data-active')); + pageInfo.append('featured', document.getElementById('option-feature').getAttribute('data-active')); + pageInfo.append('published', document.getElementById('option-published').getAttribute('data-active')); + pageInfo.append('layout', document.getElementById('page-templates').value); + pageInfo.append('form_token', document.getElementById('form_token').value); if (files.length > 0 && files != null) for(var i = 0; i < files.length; i++){ var file = files[i]; - if (file.type.match("image.*")) pageInfo.append("page_files[]", file, file.name); - else reject("Not an image file"); + if (file.type.match('image.*') || file.type.match('video.mp4')) pageInfo.append('page_files[]', file, file.name); + else reject('Not an image file'); } else //check to see if image exists - if (document.getElementById("featured-image")) { - var imageURL = document.getElementById("featured-image").src; - imageURL != null || imageURL != undefined ? pageInfo.append("feature_image", imageURL) : pageInfo.append("feature_image", null); + if (document.getElementById('featured-image')) { + var imageURL = document.getElementById('featured-image').src; + imageURL != null || imageURL != undefined ? pageInfo.append('feature_image', imageURL) : pageInfo.append('feature_image', null); } //console.log("FILES", files); resolve(pageInfo); @@ -5399,6 +5399,9 @@ var _sortablejs = require("sortablejs"); var _sortablejsDefault = parcelHelpers.interopDefault(_sortablejs); var _dataUtils = require("../utils/DataUtils"); var _dataUtilsDefault = parcelHelpers.interopDefault(_dataUtils); +var _notificationsJs = require("./Notifications.js"); +var _notificationsJsDefault = parcelHelpers.interopDefault(_notificationsJs); +const notify = new _notificationsJsDefault.default(); class FileManager { //-------------------------- // constructor @@ -5412,7 +5415,9 @@ class FileManager { 'image/jpeg', 'image/gif', 'image/png', - 'image/svg' + 'image/svg', + 'audio/mpeg', + 'video/mp4' ]; this.files = []; this.sortedFiles = []; @@ -5430,13 +5435,17 @@ class FileManager { , false); _sortablejsDefault.default.create(this.imageList, { onUpdate: (e)=>{ + notify.alert('REINDEXING FILES', null); let currentFiles = []; //store current list let items = e.target.children; for(let index = 0; index < items.length; index++){ var item = items[index]; + let url = ''; + if (item.className == 'img-item') url = item.style.backgroundImage.slice(4, -1).replace(/"/g, ''); + else url = item.getAttribute('data-source'); currentFiles.push({ id: item.getAttribute('id'), - earl: item.style.backgroundImage.slice(4, -1).replace(/"/g, '') + earl: url }); } this.reindexFiles(currentFiles, 0); @@ -5457,8 +5466,10 @@ class FileManager { ], path[6], { type: blob.type }); + console.log('FRESH FILE', fresh); this.files.push(fresh); if (this.files.length <= count - 1) this.reindexFiles(sortOrder, ++step); + else notify.alert('FILES READY TO UPLOAD', true); }); } sortFiles(files) { @@ -5482,7 +5493,7 @@ class FileManager { image.title = escape(theFile.name); var span = document.createElement('div'); span.style.background = 'url(' + f.target.result + ') no-repeat center center / cover'; - span.className = 'img-item'; + span.className = 'img-item'; //span.setAttribute('data-source', theFile.name); image.setAttribute('id', i); self.storage.push([ { @@ -5495,6 +5506,18 @@ class FileManager { self.imageList.appendChild(span); //add to files list self.files.push(theFile); break; + case 'video/mp4': + var video = document.createElement('div'); + video.className = 'video-item'; + video.setAttribute('data-source', f.target.result); + self.imageList.appendChild(video); + self.files.push(theFile); + break; + case 'audio/mpeg': + var sound = document.createElement('div'); + sound.className = 'audio-item'; + self.fileList.appendChild(sound); + break; } }; })(file); // Read in the image file as a data URL. @@ -5517,10 +5540,12 @@ class FileManager { case 'change': case 'drop': e.type == 'drop' ? rawList = e.dataTransfer.files : rawList = e.target.files; //this.sortFiles(freshList); - for(var i = 0, f; f = rawList[i]; i++)// check witch files are cool to upload - if (this.accetableFiles.includes(f.type)) sortedList.push(f); - else notOnTheList.push(f); - //send for sorting + for(var i = 0, f; f = rawList[i]; i++){ + // check witch files are cool to upload + console.log('TYPE', f.type); + if (this.accetableFiles.includes(f.type)) sortedList.push(f); + else notOnTheList.push(f); + } //send for sorting self.sortFiles(sortedList); break; } @@ -5528,7 +5553,7 @@ class FileManager { } exports.default = FileManager; -},{"sortablejs":"fLJM6","../utils/DataUtils":"lpIyf","@parcel/transformer-js/src/esmodule-helpers.js":"ciiiV"}],"fLJM6":[function(require,module,exports) { +},{"sortablejs":"fLJM6","../utils/DataUtils":"lpIyf","@parcel/transformer-js/src/esmodule-helpers.js":"ciiiV","./Notifications.js":"fmUxI"}],"fLJM6":[function(require,module,exports) { var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js"); parcelHelpers.defineInteropFlag(exports); parcelHelpers.export(exports, "MultiDrag", ()=>MultiDragPlugin @@ -8475,6 +8500,6 @@ class NavActions { } exports.default = NavActions; -},{"@parcel/transformer-js/src/esmodule-helpers.js":"ciiiV"}]},["fQadY","bEyX8"], "bEyX8", "parcelRequiredac0") +},{"@parcel/transformer-js/src/esmodule-helpers.js":"ciiiV"}]},["jRsG2","bEyX8"], "bEyX8", "parcelRequiredac0") //# sourceMappingURL=Start.js.map diff --git a/src/com/Base.js b/src/com/Base.js index 01d5e49..18b9f61 100644 --- a/src/com/Base.js +++ b/src/com/Base.js @@ -8,210 +8,205 @@ const data = new DataUitls(); const notify = new Notfications(); export default class Base { - //-------------------------- - // constructor - //-------------------------- - constructor() { - this.processing = false; - this.start(); - } + //-------------------------- + // constructor + //-------------------------- + constructor() { + this.processing = false; + this.start(); + } - //-------------------------- - // methods - //-------------------------- - start() { - if ( - document.getElementById('dash-form') || - document.getElementById('dash-init') - ) { - var options = document.getElementsByClassName('init-option'); - for (let index = 0; index < options.length; index++) { - options[index].addEventListener('click', e => - this.handleOptions(e) - ); - } - if (document.getElementById('dash-form')) { - document - .getElementById('login-btn') - .addEventListener('click', e => this.handleLogin(e)); - } else { - document - .getElementById('init-blog') - .addEventListener('click', e => this.handleSetup(e)); - document - .getElementById('blog-restore') - .addEventListener('click', e => this.handleRestore(e)); - } - } else if (document.getElementById('dash-reset')) { - document - .getElementById('get-secret-btn') - .addEventListener('click', e => this.handleReset(e)); + //-------------------------- + // methods + //-------------------------- + start() { + if ( + document.getElementById('dash-form') || + document.getElementById('dash-init') + ) { + var options = document.getElementsByClassName('init-option'); + for (let index = 0; index < options.length; index++) { + options[index].addEventListener('click', e => this.handleOptions(e)); + } + if (document.getElementById('dash-form')) { + document + .getElementById('login-btn') + .addEventListener('click', e => this.handleLogin(e)); + } else { + document + .getElementById('init-blog') + .addEventListener('click', e => this.handleSetup(e)); + document + .getElementById('blog-restore') + .addEventListener('click', e => this.handleRestore(e)); + } + } else if (document.getElementById('dash-reset')) { + document + .getElementById('get-secret-btn') + .addEventListener('click', e => this.handleReset(e)); - document - .getElementById('reset-btn') - .addEventListener('click', e => this.handleReset(e)); - } else { - new DashManager(); - } - } - //-------------------------- - // event handlers - //-------------------------- - handleLogin(e) { - if (this.processing) return; - let self = this; - e.stopPropagation(); - e.preventDefault(); - let authForm = data.formDataToJSON(document.getElementById('login')); - notify.alert('Looking, hold up', null); - let api = new FipamoAdminAPI(); - this.processing = true; - api.login(authForm) - .then(response => { - self.processing = false; - if (response.type === DataEvent.REQUEST_LAME) { - notify.alert(response.message, false); - } else { - notify.alert(response.message, true); - e.target.innerHTML = response.message; - setTimeout(() => { - window.location = '/dashboard'; - }, 500); - } - }) - .catch(err => { - self.processing = false; - notify.alert(err, false); - }); - } + document + .getElementById('reset-btn') + .addEventListener('click', e => this.handleReset(e)); + } else { + new DashManager(); + } + } + //-------------------------- + // event handlers + //-------------------------- + handleLogin(e) { + if (this.processing) return; + let self = this; + e.stopPropagation(); + e.preventDefault(); + let authForm = data.formDataToJSON(document.getElementById('login')); + notify.alert('Looking, hold up', null); + let api = new FipamoAdminAPI(); + this.processing = true; + api.login(authForm) + .then(response => { + self.processing = false; + if (response.type === DataEvent.REQUEST_LAME) { + notify.alert(response.message, false); + } else { + notify.alert(response.message, true); + e.target.innerHTML = response.message; + setTimeout(() => { + window.location = '/dashboard'; + }, 500); + } + }) + .catch(err => { + self.processing = false; + notify.alert(err, false); + }); + } - handleSetup(e) { - if (this.processing) return; - let self = this; - e.stopPropagation(); - e.preventDefault(); - let setUpForm = data.formDataToJSON( - document.getElementById('init-form') - ); - let mm = new Maintenance(); - this.processing = true; - mm.create(setUpForm) - .then(response => { - if (response.type === DataEvent.API_INIT_LAME) { - self.processing = false; - notify.alert(response.message, false); - } else { - self.processing = false; - notify.alert(response.message, true); - setTimeout(() => { - window.location = '/dashboard'; - }, 700); - } - }) - .catch(err => { - self.processing = false; - notify.alert(err, false); - }); - } + handleSetup(e) { + if (this.processing) return; + let self = this; + e.stopPropagation(); + e.preventDefault(); + let setUpForm = data.formDataToJSON(document.getElementById('init-form')); + let mm = new Maintenance(); + this.processing = true; + mm.create(setUpForm) + .then(response => { + if (response.type === DataEvent.API_INIT_LAME) { + self.processing = false; + notify.alert(response.message, false); + } else { + self.processing = false; + notify.alert(response.message, true); + setTimeout(() => { + window.location = '/dashboard'; + }, 700); + } + }) + .catch(err => { + self.processing = false; + notify.alert(err, false); + }); + } - handleRestore(e) { - if (this.processing) return; - let self = this; - e.stopPropagation(); - e.preventDefault(); - let mm = new Maintenance(); - var form = document.getElementById('init-restore'); - this.processing = true; - mm.restore(form) - .then(response => { - if (response.type === DataEvent.REQUEST_LAME) { - self.processing = false; - notify.alert(response.message, false); - } else { - self.processing = false; - notify.alert(response.message, true); - setTimeout(() => { - window.location = '/dashboard'; - }, 1500); - } - }) - .catch(err => { - self.processing = false; - notify.alert(err, false); - }); - } + handleRestore(e) { + if (this.processing) return; + let self = this; + e.stopPropagation(); + e.preventDefault(); + let mm = new Maintenance(); + var form = document.getElementById('init-restore'); + this.processing = true; + mm.restore(form) + .then(response => { + if (response.type === DataEvent.REQUEST_LAME) { + self.processing = false; + notify.alert(response.message, false); + } else { + self.processing = false; + notify.alert(response.message, true); + setTimeout(() => { + window.location = '/dashboard'; + }, 1500); + } + }) + .catch(err => { + self.processing = false; + notify.alert(err, false); + }); + } - handleReset(e) { - e.stopPropagation(); - e.preventDefault(); - let self = this; - let mm = new Maintenance(); - if (e.target.id == 'get-secret-btn') { - let data = { - email: document.getElementById('email').value, - task: 'retrieveSecret' - }; - this.processing = true; - mm.secret(data) - .then(response => { - self.processing = false; - if (response.secret) { - document.getElementById('secret').value = - response.secret; - notify.alert(response.message, true); - } else { - if (response.type == 'mailSent') { - notify.alert(response.message, true); - } else { - notify.alert(response.message, false); - } - } - }) - .catch(err => { - self.processing = false; - notify.alert(err, false); - }); - } else { - let data = { - newPass: document.getElementById('new_password').value, - newPassConfirm: document.getElementById('new_password2').value, - secret: document.getElementById('secret').value - }; - mm.newPass(data) - .then(response => { - self.processing = false; - if (response.type == 'passNotCreated') { - notify.alert(response.message, false); - } else { - notify.alert(response.message, true); - setTimeout(() => { - window.location = '/dashboard'; - }, 1000); - } - }) - .catch(err => { - self.processing = false; - notify.alert(err, false); - }); - } - } - handleOptions(e) { - e.stopPropagation(); - e.preventDefault(); - let init = document.getElementById('dash-init'); - let restore = document.getElementById('dash-restore'); - if (e.target.id === 'init-switch-restore') { - init.style.display = 'none'; - init.style.visibility = 'hidden'; + handleReset(e) { + e.stopPropagation(); + e.preventDefault(); + let self = this; + let mm = new Maintenance(); + if (e.target.id == 'get-secret-btn') { + let data = { + email: document.getElementById('email').value, + task: 'retrieveSecret' + }; + this.processing = true; + mm.secret(data) + .then(response => { + self.processing = false; + if (response.secret) { + document.getElementById('secret').value = response.secret; + notify.alert(response.message, true); + } else { + if (response.type == 'mailSent') { + notify.alert(response.message, true); + } else { + notify.alert(response.message, false); + } + } + }) + .catch(err => { + self.processing = false; + notify.alert(err, false); + }); + } else { + let data = { + newPass: document.getElementById('new_password').value, + newPassConfirm: document.getElementById('new_password2').value, + secret: document.getElementById('secret').value + }; + mm.newPass(data) + .then(response => { + self.processing = false; + if (response.type == 'passNotCreated') { + notify.alert(response.message, false); + } else { + notify.alert(response.message, true); + setTimeout(() => { + window.location = '/dashboard'; + }, 1000); + } + }) + .catch(err => { + self.processing = false; + notify.alert(err, false); + }); + } + } + handleOptions(e) { + e.stopPropagation(); + e.preventDefault(); + let init = document.getElementById('dash-init'); + let restore = document.getElementById('dash-restore'); + if (e.target.id === 'init-switch-restore') { + init.style.display = 'none'; + init.style.visibility = 'hidden'; - restore.style.display = 'flex'; - restore.style.visibility = 'visible'; - } else { - init.style.display = 'flex'; - init.style.visibility = 'visible'; + restore.style.display = 'flex'; + restore.style.visibility = 'visible'; + } else { + init.style.display = 'flex'; + init.style.visibility = 'visible'; - restore.style.display = 'none'; - restore.style.visibility = 'hidden'; - } - } + restore.style.display = 'none'; + restore.style.visibility = 'hidden'; + } + } } diff --git a/src/com/actions/PageActions.js b/src/com/actions/PageActions.js index 66f32b3..6f4adf8 100644 --- a/src/com/actions/PageActions.js +++ b/src/com/actions/PageActions.js @@ -1,94 +1,86 @@ -import StringUtils from "../utils/StringUtils"; +import StringUtils from '../utils/StringUtils'; export default class PostActions { - //-------------------------- - // constructor - //-------------------------- - constructor() {} - //-------------------------- - // methods - //-------------------------- - collectInfo(files) { - return new Promise((resolve, reject) => { - let pageInfo = new FormData(); - let txt = document.createElement("textarea"); - txt.innerHTML = document.getElementById("highlight-content").innerHTML; - let html = txt.value; - html = html.replace(/<\/?span[^>]*>/g, ""); //removes prism styling - html = html.replace(/<\/?br[^>]*>/g, "\n"); //convert back to encoded line break for storage - pageInfo.append( - "id", - document.getElementById("post-edit-index").getAttribute("data-index") - ); - pageInfo.append( - "uuid", - document.getElementById("post-edit-index").getAttribute("data-uuid") - ); - pageInfo.append( - "layout", - document.getElementById("post-edit-index").getAttribute("data-layout") - ); - pageInfo.append( - "current_title", - document.getElementById("post-edit-index").getAttribute("data-slug") - ); - pageInfo.append("content", html); - pageInfo.append("title", document.getElementById("post_title").value); - pageInfo.append( - "created", - document.getElementById("post-date").getAttribute("data-raw") - ); - pageInfo.append( - "slug", - new StringUtils().cleanString( - document.getElementById("post_title").value - ) - ); - pageInfo.append("tags", document.getElementById("post_tags").value); - pageInfo.append( - "menu", - document.getElementById("option-menu-pin").getAttribute("data-active") - ); - pageInfo.append( - "featured", - document.getElementById("option-feature").getAttribute("data-active") - ); - pageInfo.append( - "published", - document.getElementById("option-published").getAttribute("data-active") - ); - pageInfo.append( - "layout", - document.getElementById("page-templates").value - ); - pageInfo.append( - "form_token", - document.getElementById("form_token").value - ); - if (files.length > 0 && files != null) { - for (var i = 0; i < files.length; i++) { - var file = files[i]; - if (file.type.match("image.*")) { - pageInfo.append("page_files[]", file, file.name); - } else { - reject("Not an image file"); - } - } - } else { - //check to see if image exists - if (document.getElementById("featured-image")) { - var imageURL = document.getElementById("featured-image").src; - imageURL != null || imageURL != undefined - ? pageInfo.append("feature_image", imageURL) - : pageInfo.append("feature_image", null); - } else { - //pageInfo.append("feature_image", null); - } - } - //console.log("FILES", files); - resolve(pageInfo); - }); - } - //-------------------------- - // event handlers - //-------------------------- + //-------------------------- + // constructor + //-------------------------- + constructor() {} + //-------------------------- + // methods + //-------------------------- + collectInfo(files) { + return new Promise((resolve, reject) => { + let pageInfo = new FormData(); + let txt = document.createElement('textarea'); + txt.innerHTML = document.getElementById('highlight-content').innerHTML; + let html = txt.value; + html = html.replace(/<\/?span[^>]*>/g, ''); //removes prism styling + html = html.replace(/<\/?br[^>]*>/g, '\n'); //convert back to encoded line break for storage + pageInfo.append( + 'id', + document.getElementById('post-edit-index').getAttribute('data-index') + ); + pageInfo.append( + 'uuid', + document.getElementById('post-edit-index').getAttribute('data-uuid') + ); + pageInfo.append( + 'layout', + document.getElementById('post-edit-index').getAttribute('data-layout') + ); + pageInfo.append( + 'current_title', + document.getElementById('post-edit-index').getAttribute('data-slug') + ); + pageInfo.append('content', html); + pageInfo.append('title', document.getElementById('post_title').value); + pageInfo.append( + 'created', + document.getElementById('post-date').getAttribute('data-raw') + ); + pageInfo.append( + 'slug', + new StringUtils().cleanString(document.getElementById('post_title').value) + ); + pageInfo.append('tags', document.getElementById('post_tags').value); + pageInfo.append( + 'menu', + document.getElementById('option-menu-pin').getAttribute('data-active') + ); + pageInfo.append( + 'featured', + document.getElementById('option-feature').getAttribute('data-active') + ); + pageInfo.append( + 'published', + document.getElementById('option-published').getAttribute('data-active') + ); + pageInfo.append('layout', document.getElementById('page-templates').value); + pageInfo.append('form_token', document.getElementById('form_token').value); + if (files.length > 0 && files != null) { + for (var i = 0; i < files.length; i++) { + var file = files[i]; + if (file.type.match('image.*') || file.type.match('video.mp4')) { + pageInfo.append('page_files[]', file, file.name); + } else { + reject('Not an image file'); + } + } + } else { + //check to see if image exists + if (document.getElementById('featured-image')) { + var imageURL = document.getElementById('featured-image').src; + imageURL != null || imageURL != undefined + ? pageInfo.append('feature_image', imageURL) + : pageInfo.append('feature_image', null); + } else { + //pageInfo.append("feature_image", null); + } + } + //console.log("FILES", files); + resolve(pageInfo); + }); + } + //-------------------------- + // event handlers + //-------------------------- } diff --git a/src/com/controllers/PageEditor.js b/src/com/controllers/PageEditor.js index f0d5014..f335227 100644 --- a/src/com/controllers/PageEditor.js +++ b/src/com/controllers/PageEditor.js @@ -19,27 +19,16 @@ export default class PostEditor { //-------------------------- constructor() { this.processing = false; - let self = this; - this.admin = new FipamoAdminAPI( - null, - document.getElementById('notify-progress') - ); - this.mm = new Maintenance( - null, - null, - document.getElementById('notify-progress') - ); + let self = "this"; + this.admin = new FipamoAdminAPI(null, document.getElementById('notify-progress')); + this.mm = new Maintenance(null, null, document.getElementById('notify-progress')); this.urlPieces = document.URL.split('/'); this.post = []; this.postID = null; this.postUUID = null; this.postLayout = null; this.fm = null; - if ( - document - .getElementById('post-edit-index') - .getAttribute('data-index') - ) { + if (document.getElementById('post-edit-index').getAttribute('data-index')) { this.postID = document .getElementById('post-edit-index') .getAttribute('data-index'); @@ -54,8 +43,8 @@ export default class PostEditor { this.editor = new TextEditor( document.getElementById('edit'), document.getElementById('header').offsetHeight + - document.getElementById('post-header').offsetHeight + - document.getElementById('post-feature').offsetHeight + document.getElementById('post-header').offsetHeight + + document.getElementById('post-feature').offsetHeight ); this.editor.addListener( EditorEvent.EDITOR_DELETE, @@ -64,10 +53,7 @@ export default class PostEditor { ); this.editor.addListener( EditorEvent.EDITOR_UPLOAD_POST_IMAGE, - () => - this.handleEditorOptions( - EditorEvent.EDITOR_UPLOAD_POST_IMAGE - ), + () => this.handleEditorOptions(EditorEvent.EDITOR_UPLOAD_POST_IMAGE), false ); this.editor.addListener( @@ -175,8 +161,7 @@ export default class PostEditor { notify.alert(r.message, true); } else { notify.alert(r.message, true); - window.location = - '/dashboard/page/edit/' + r.id; + window.location = '/dashboard/page/edit/' + r.id; } } }) @@ -191,13 +176,10 @@ export default class PostEditor { notify.alert('Index cannot be deleted', false); return; } - if ( - confirm("AYE! You know you're deleting this post, right?") - ) { + if (confirm("AYE! You know you're deleting this post, right?")) { new PageActions() .collectInfo( - document.getElementById('featured-image-upload') - .files[0] + document.getElementById('featured-image-upload').files[0] ) .then(page => { self.processing = true; @@ -212,7 +194,7 @@ export default class PostEditor { notify.alert(err, false); }); }) - .catch(() => {}); + .catch(() => { }); } else { // Do nothing! } @@ -231,10 +213,7 @@ export default class PostEditor { .imageUpload(type, files) .then(r => { if (r.type == DataEvent.POST_IMAGE_ADDED) { - self.editor.notify( - EditorEvent.EDITOR_UPLOAD_POST_IMAGE, - r.url - ); + self.editor.notify(EditorEvent.EDITOR_UPLOAD_POST_IMAGE, r.url); notify.alert('Image Added to Entry', true); } else { notify.alert('Uh oh. Image not added', false); diff --git a/src/com/ui/FileManager.js b/src/com/ui/FileManager.js index d252783..8c9a6d0 100644 --- a/src/com/ui/FileManager.js +++ b/src/com/ui/FileManager.js @@ -1,5 +1,7 @@ import Sortable from 'sortablejs'; import DataUtils from '../utils/DataUtils'; +import Notfications from './Notifications.js'; +const notify = new Notfications(); export default class FileManager { //-------------------------- @@ -10,7 +12,14 @@ export default class FileManager { this.input = input; this.imageList = imageList; this.fileList = fileList; - this.accetableFiles = ['image/jpeg', 'image/gif', 'image/png', 'image/svg']; + this.accetableFiles = [ + 'image/jpeg', + 'image/gif', + 'image/png', + 'image/svg', + 'audio/mpeg', + 'video/mp4' + ]; this.files = []; this.sortedFiles = []; this.storage = []; @@ -26,13 +35,21 @@ export default class FileManager { Sortable.create(this.imageList, { onUpdate: e => { + notify.alert('REINDEXING FILES', null); let currentFiles = []; //store current list let items = e.target.children; for (let index = 0; index < items.length; index++) { var item = items[index]; + let url = ''; + if (item.className == 'img-item') { + url = item.style.backgroundImage.slice(4, -1).replace(/"/g, ''); + } else { + url = item.getAttribute('data-source'); + } + currentFiles.push({ id: item.getAttribute('id'), - earl: item.style.backgroundImage.slice(4, -1).replace(/"/g, '') + earl: url }); } this.reindexFiles(currentFiles, 0); @@ -51,11 +68,12 @@ export default class FileManager { var path = sortOrder[step].earl.split('/'); utils.imgLoad(sortOrder[step].earl).then(blob => { var fresh = new File([blob], path[6], { type: blob.type }); + console.log('FRESH FILE', fresh); this.files.push(fresh); if (this.files.length <= count - 1) { this.reindexFiles(sortOrder, ++step); } else { - //console.log('FILES', this.files); + notify.alert('FILES READY TO UPLOAD', true); } }); } @@ -87,6 +105,7 @@ export default class FileManager { f.target.result + ') no-repeat center center / cover'; span.className = 'img-item'; + //span.setAttribute('data-source', theFile.name); image.setAttribute('id', i); self.storage.push([ { @@ -100,6 +119,38 @@ export default class FileManager { //add to files list self.files.push(theFile); + break; + case 'video/mp4': + var video = document.createElement('div'); + video.className = 'video-item'; + video.setAttribute('data-source', f.target.result); + self.imageList.appendChild(video); + self.files.push(theFile); + /* + var video = document.createElement('video'); + video.setAttribute('id', escape(theFile.name)); + video.className = 'video-item'; + video.src = f.target.result; + video.controls = 'controls'; + video.type = f.type; + self.imageList.appendChild(video); + */ + break; + case 'audio/mpeg': + var sound = document.createElement('div'); + sound.className = 'audio-item'; + self.fileList.appendChild(sound); + + /* + var sound = document.createElement('audio'); + sound.setAttribute('id', escape(theFile.name)); + sound.className = 'audio-item'; + sound.src = f.target.result; + sound.controls = 'controls'; + sound.type = f.type; + self.imageList.appendChild(sound); + */ + break; } }; @@ -132,6 +183,7 @@ export default class FileManager { //this.sortFiles(freshList); for (var i = 0, f; (f = rawList[i]); i++) { // check witch files are cool to upload + console.log('TYPE', f.type); if (this.accetableFiles.includes(f.type)) { sortedList.push(f); } else { diff --git a/src/styles/main/_index.sass b/src/styles/main/_index.sass index 8ca6fee..1bb5c0a 100644 --- a/src/styles/main/_index.sass +++ b/src/styles/main/_index.sass @@ -147,7 +147,7 @@ height: 20px fill: $white - a.post-link + a.post-link, a.post-video-link font-size: 1.5em font-weight: 300 display: inline-block @@ -155,6 +155,10 @@ vertical-align: top text-decoration: none position: relative + overflow: hidden + .post-video + width: 100% + position: absolute label font-size: 1.4em diff --git a/src/styles/main/_posts.sass b/src/styles/main/_posts.sass index 250d9f7..42e4201 100644 --- a/src/styles/main/_posts.sass +++ b/src/styles/main/_posts.sass @@ -13,22 +13,22 @@ width: 50% color: $white font-size: 3em - #post-index-header-right + #post-index-header-right text-align: right display: inline-block width: 50% a button - color: $white - border-radius: 3px - margin-left: 10px - width: 55px - svg + color: $white + border-radius: 3px + margin-left: 10px + width: 55px + svg //@include object-transitions(0.1s) width: 20px height: 17px fill: $white - + .current-filter color: $highlight text-decoration-color: $secondary @@ -61,24 +61,24 @@ background-color: $highlight position: relative label - font-size: 2em - font-weight: 700 - color: $white - padding: 5px - vertical-align: top - display: inline-block - word-wrap: break-word - width: 100% - text-align: center - position: relative - top: 35% - @include text-drop-shadow($black, 1, 2px, 2px, 0) - @include text-drop-shadow($black, 1, 2px, 2px, 0) + font-size: 2em + font-weight: 700 + color: $white + padding: 5px + vertical-align: top + display: inline-block + word-wrap: break-word + width: 100% + text-align: center + position: relative + top: 35% + @include text-drop-shadow($black, 1, 2px, 2px, 0) + @include text-drop-shadow($black, 1, 2px, 2px, 0) #meta width: 100% - background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%) + background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%) border-radius: 3px - margin: auto + margin: auto bottom: 0 position: absolute padding: 0 0 20px 0 @@ -93,44 +93,44 @@ position: relative background: none button - border-radius: 3px - background: $primary - margin: 0 0 10px 10px - svg + border-radius: 3px + background: $primary + margin: 0 0 10px 10px + svg //@include object-transitions(0.1s) width: 40px height: 20px fill: $secondary .item-options - border-radius: 3px - margin: 5px - display: inline-block + border-radius: 3px + margin: 5px + display: inline-block button[data-active='false'] - background: $primary - svg + background: $primary + svg fill: $secondary - + button[data-active='true'] - background: $tertiary - svg - fill: $primary + background: $tertiary + svg + fill: $primary #option-right display: inline-block width: 50% text-align: right span - font-weight: bold - display: block - background: $white - color: $primary - border-radius: 3px - font-size: .6em - text-align: center - position: relative - padding: 5px - float: right - margin: 0 10px 0 0 - bottom: -15px + font-weight: bold + display: block + background: $white + color: $primary + border-radius: 3px + font-size: .6em + text-align: center + position: relative + padding: 5px + float: right + margin: 0 10px 0 0 + bottom: -15px p padding: 5px 10px 5px 10px @@ -142,7 +142,7 @@ margin: 0 auto a display: inline-block - vertical-align: top + vertical-align: top span.count text-align: center padding: 5px @@ -151,7 +151,6 @@ width: 190px font-size: 1.5em color: $tertiary - #post-edit-index width: 100% @@ -161,13 +160,13 @@ width: 100% #post-header // width 100% - + background: $highlight #post-header-wrapper max-width: 900px margin: 0 auto padding: 0.75rem - label + label color: $white font-size: 0.9em font-family: $baseType @@ -190,7 +189,6 @@ padding: 5px margin: 0 0 5px 0 - #calendar-icon background: color.adjust($primary, $lightness: -15%) border-radius: 3px 0 0 3px @@ -218,7 +216,7 @@ color: $primary padding: 5px margin: 0 0 5px 0 - + #post-options display: inline-block vertical-align: top @@ -231,11 +229,10 @@ button:nth-child(4) border-radius: 0 3px 3px 0 - + a button border-radius: 0 3px 3px 0 !important - button width: 25% @@ -286,13 +283,13 @@ color: $primary vertical-align: middle border-radius: 5px - margin: 0 0 10px 0 - + margin: 0 0 10px 0 + label cursor: pointer font-weight: 600px text-transform: capitalize - + img width: 100% margin: 0 @@ -306,6 +303,24 @@ margin: 0 10px 10px 0 display: inline-block cursor: pointer + .audio-item + height: 150px + width: 23.8% + border-radius: 3px + margin: 0 10px 10px 0 + display: inline-block + cursor: pointer + background: $primary + background: url('/assets/images/global/upload-audio.png') no-repeat center center / cover + .video-item + height: 150px + width: 23.8% + border-radius: 3px + margin: 0 10px 10px 0 + display: inline-block + cursor: pointer + background: $primary + background: url('/assets/images/global/upload-video.png') no-repeat center center / cover #featured-new-image-btn position: absolute @@ -335,34 +350,34 @@ textarea:focus outline: none border-color: $highlight - + #edit // overflow: hidden !important - #edit, #highlight + #edit, #highlight /* Both elements need the same text and space styling so they are directly on top of each other */ //margin: 10px //padding: 10px - border: 0 - width: 100% - min-height: 300px - height: auto - position: absolute - top: 0 - left: 0 - overflow: auto - word-wrap: normal - white-space: pre-wrap - line-break: normal + border: 0 + width: 100% + min-height: 300px + height: auto + position: absolute + top: 0 + left: 0 + overflow: auto + word-wrap: normal + white-space: pre-wrap + line-break: normal #highlight-content word-wrap: normal white-space: pre-wrap line-break: normal - + #edit, #highlight, #hightlight * font-size: 1.2em font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace line-height: 22pt - + #edit z-index: 1 color: transparent @@ -370,7 +385,6 @@ caret-color: $highlight #highlight z-index: 0 - //pre margin: 0