Fix reply button, fixes #282 (#283)

nitely · Aug 15, 2020 · 2c0629f · 2c0629f
1 parent 2d51ff1
commit 2c0629f
Show file tree

Hide file tree

Showing 10 changed files with 3,772 additions and 1,689 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,5 +1,5 @@
 var gulp = require('gulp');
-var gutil = require('gulp-util');
+var log = require('fancy-log');
 var sass = require('gulp-ruby-sass');
 var coffee = require('gulp-coffee');
 var sourcemaps = require('gulp-sourcemaps');
@@ -9,6 +9,7 @@ var rename = require("gulp-rename");
 var concat = require('gulp-concat');
 var uglify = require('gulp-uglify');
 var gulpif = require('gulp-if');
+var babel = require('gulp-babel');
 
 var assetsPath = 'spirit/core/static/spirit/';
 var cssPath = assetsPath + 'stylesheets/';
@@ -22,7 +23,7 @@ gulp.task('_sass', function () {
 });
 
 
-gulp.task('_css-minify', ['_sass'], function() {
+gulp.task('_css-minify', gulp.series('_sass', function() {
     var path = cssPath + 'vendors/';
     return gulp.src([
             path + '*.css',
@@ -31,10 +32,10 @@ gulp.task('_css-minify', ['_sass'], function() {
         .pipe(minifyCss({compatibility: 'ie8', target: cssPath, relativeTo: cssPath}))
         .pipe(concat('styles.all.min.css'))
         .pipe(gulp.dest(cssPath))
-});
+}));
 
 
-gulp.task('css', ['_sass', '_css-minify']);
+gulp.task('css', gulp.series('_sass', '_css-minify'));
 
 
 gulp.task('coffee', function() {
@@ -51,11 +52,11 @@ gulp.task('coffee', function() {
             pathCoffee + '*.coffee'
         ])
         .pipe(sourcemaps.init())
-            .pipe(gulpif(/\.coffee$/, rename({suffix: ".no-min"})))
-            .pipe(gulpif(/\.coffee$/, coffee({bare: false}).on('error', gutil.log)))
-            .pipe(gulpif(/\.no-min\.js$/, gulp.dest(pathJs)))  // JS Preview
-            .pipe(gulpif(/\.no-min\.js$/, uglify({mangle: false})))
-            .pipe(concat('all.min.js'))
+        .pipe(gulpif(/\.coffee$/, rename({suffix: ".no-min"})))
+        .pipe(gulpif(/\.coffee$/, coffee({bare: false}).on('error', log.error)))
+        .pipe(gulpif(/\.no-min\.js$/, gulp.dest(pathJs)))  // JS Preview
+        .pipe(uglify({mangle: false}))
+        .pipe(concat('all.min.js'))
         .pipe(sourcemaps.write('.'))
         .pipe(gulp.dest(jsPath))
 });
@@ -64,18 +65,18 @@ gulp.task('coffee', function() {
 gulp.task('_coffee-test', function() {
     return gulp.src(jsPath + 'test/suites/*.coffee')
         .pipe(sourcemaps.init())
-            .pipe(coffee({bare: false}).on('error', gutil.log))
+            .pipe(coffee({bare: false}).on('error', log.error))
         .pipe(sourcemaps.write('.'))
         .pipe(gulp.dest(jsPath + 'test/suites/'))
 });
 
 
-gulp.task('_test', ['coffee', '_coffee-test'], function (done) {
+gulp.task('_test', gulp.series('coffee', '_coffee-test', function (done) {
     new Server({
         configFile: __dirname + '/' + jsPath + 'test/karma.conf.js',
         singleRun: true
     }, done).start();
-});
+}));
 
 
-gulp.task('test', ['coffee', '_coffee-test', '_test']);
+gulp.task('test', gulp.series('coffee', '_coffee-test', '_test'));
diff --git a/package.json b/package.json
@@ -1,20 +1,22 @@
 {
   "devDependencies": {
-    "coffee-script": "^1.10.0",
-    "gulp": "^3.9.0",
-    "gulp-coffee": "^2.3.1",
+    "@babel/core": "^7.11.1",
+    "@babel/preset-env": "^7.11.0",
+    "fancy-log": "^1.3.3",
+    "gulp": "^4.0.2",
+    "gulp-babel": "^8.0.0",
+    "gulp-coffee": "2.3.5",
     "gulp-concat": "^2.6.0",
-    "gulp-if": "^2.0.0",
+    "gulp-if": "^3.0.0",
     "gulp-minify-css": "^1.2.1",
-    "gulp-rename": "^1.2.2",
-    "gulp-ruby-sass": "^1.4.0",
-    "gulp-sourcemaps": "^1.6.0",
-    "gulp-uglify": "^1.4.2",
-    "gulp-util": "^3.0.6",
-    "jasmine-core": "^2.8.0",
-    "karma": "^1.7.1",
-    "karma-cli": "^1.0.1",
-    "karma-jasmine": "^1.1.0"
+    "gulp-rename": "^2.0.0",
+    "gulp-ruby-sass": "^4.0.0",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-uglify": "^3.0.2",
+    "jasmine-core": "^3.6.0",
+    "karma": "^5.1.1",
+    "karma-cli": "^2.0.0",
+    "karma-jasmine": "^4.0.1"
   },
   "scripts": {
     "gulp": "gulp"
@@ -23,5 +25,6 @@
   "version": "1.0.0",
   "repository": "https://github.com/nitely/Spirit.git",
   "author": "nitely <ecastroborsani@gmail.com>",
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {}
 }
diff --git a/spirit/comment/templates/spirit/comment/_editor.html b/spirit/comment/templates/spirit/comment/_editor.html
@@ -69,6 +69,7 @@
 
     (function () {
       var editorElms = document.querySelectorAll('.js-reply');
+      var replyButtonElms = document.querySelectorAll('.js-reply-button');
 
       {% if st_settings.ST_UPLOAD_IMAGE_ENABLED %}
         stModules.editorImageUpload(editorElms, {
@@ -88,7 +89,8 @@
         });
       {% endif %}
 
-      stModules.editor(editorElms, {
+      var editors = stModules.editor(editorElms, {
+        replyButtons: replyButtonElms,
         boldedText: "{% trans "bolded text" %}",
         italicisedText: "{% trans "italicised text" %}",
         listItemText: "{% trans "list item" %}",

diff --git a/spirit/comment/templates/spirit/comment/_render_list.html b/spirit/comment/templates/spirit/comment/_render_list.html
@@ -102,7 +102,7 @@
           <a href="{% url "spirit:comment:publish" topic_id=topic.pk pk=c.pk %}">{% trans "quote" %}</a>
         </li>
         <li>
-          <a href="#reply" >{% trans "reply" %}</a>
+          <a href="#reply" class="js-reply-button" data="@{{ c.user.username }}">{% trans "reply" %}</a>
         </li>
       {% endifnotequal %}
       {% endif %}

diff --git a/spirit/core/static/spirit/scripts/all.min.js b/spirit/core/static/spirit/scripts/all.min.js
diff --git a/spirit/core/static/spirit/scripts/all.min.js.map b/spirit/core/static/spirit/scripts/all.min.js.map
diff --git a/spirit/core/static/spirit/scripts/js/editor.no-min.js b/spirit/core/static/spirit/scripts/js/editor.no-min.js
@@ -10,6 +10,7 @@
 
   Editor = (function() {
     Editor.prototype.defaults = {
+      replyButtons: [],
       boldedText: "bolded text",
       italicisedText: "italicised text",
       listItemText: "list item",
@@ -22,6 +23,7 @@
     };
 
     function Editor(el, options) {
+      this.replyButton = bind(this.replyButton, this);
       this.togglePreview = bind(this.togglePreview, this);
       this.addPoll = bind(this.addPoll, this);
       this.addImage = bind(this.addImage, this);
@@ -40,13 +42,21 @@
     }
 
     Editor.prototype.setUp = function() {
+      var elm, i, len, ref, results;
       this.el.querySelector('.js-box-bold').addEventListener('click', this.addBold);
       this.el.querySelector('.js-box-italic').addEventListener('click', this.addItalic);
       this.el.querySelector('.js-box-list').addEventListener('click', this.addList);
       this.el.querySelector('.js-box-url').addEventListener('click', this.addUrl);
       this.el.querySelector('.js-box-image').addEventListener('click', this.addImage);
       this.el.querySelector('.js-box-poll').addEventListener('click', this.addPoll);
-      return this.el.querySelector('.js-box-preview').addEventListener('click', this.togglePreview);
+      this.el.querySelector('.js-box-preview').addEventListener('click', this.togglePreview);
+      ref = this.options.replyButtons;
+      results = [];
+      for (i = 0, len = ref.length; i < len; i++) {
+        elm = ref[i];
+        results.push(elm.addEventListener('click', this.replyButton));
+      }
+      return results;
     };
 
     Editor.prototype.wrapSelection = function(preTxt, postTxt, defaultTxt) {
@@ -110,6 +120,15 @@
       return this.stopClick(e);
     };
 
+    Editor.prototype.replyButton = function(e) {
+      this.wrapSelection("", ", ", e.currentTarget.getAttribute('data'));
+      return setTimeout(((function(_this) {
+        return function() {
+          return _this.textBox.focus();
+        };
+      })(this)), 1);
+    };
+
     Editor.prototype.stopClick = function(e) {
       e.preventDefault();
       return e.stopPropagation();

diff --git a/spirit/core/static/spirit/scripts/src/README.md b/spirit/core/static/spirit/scripts/src/README.md
@@ -1,12 +1,13 @@
 # Installation
 
-## Ubuntu 16.04
+## Ubuntu 20.04
 
 ### Install Node.js
 
 ```
-$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
-$ sudo apt-get install -y nodejs
+$ sudo apt install gcc g++ make
+$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
+$ sudo apt install -y nodejs
 ```
 
 > If you are a node.js user then install nvm to manage the versions
@@ -16,18 +17,16 @@ $ sudo apt-get install -y nodejs
 ```
 $ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
 $ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
-$ sudo apt-get update && sudo apt-get install yarn
+$ sudo apt update && sudo apt install yarn
 ```
 
-> On Ubuntu 17 you may want to remove `cmdtest` if you get any error `sudo apt remove cmdtest`
-
 ## Fedora 26
 
 ### Install Node.js
 
 ```
 $ sudo dnf install -y gcc-c++ make
-$ curl -sL https://rpm.nodesource.com/setup_6.x | sudo -E bash -
+$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
 $ sudo dnf install -y nodejs
 ```
 

diff --git a/spirit/core/static/spirit/scripts/src/editor.coffee b/spirit/core/static/spirit/scripts/src/editor.coffee
@@ -7,6 +7,7 @@
 class Editor
 
     defaults: {
+        replyButtons: [],
         boldedText: "bolded text",
         italicisedText: "italicised text",
         listItemText: "list item",
@@ -35,6 +36,8 @@ class Editor
         @el.querySelector('.js-box-image').addEventListener('click', @addImage)
         @el.querySelector('.js-box-poll').addEventListener('click', @addPoll)
         @el.querySelector('.js-box-preview').addEventListener('click', @togglePreview)
+        for elm in @options.replyButtons
+            elm.addEventListener('click', @replyButton)
 
     wrapSelection: (preTxt, postTxt, defaultTxt) =>
         preSelection = @textBox.value.substring(0, @textBox.selectionStart)
@@ -95,6 +98,10 @@ class Editor
 
         @stopClick(e)
 
+    replyButton: (e) =>
+        @wrapSelection("", ", ", e.currentTarget.getAttribute('data'))
+        setTimeout((() => @textBox.focus()), 1)  # 1 ms
+
     stopClick: (e) ->
         e.preventDefault()
         e.stopPropagation()