kallithea Changeset - 2e7ffb755d4f

Changeset - 2e7ffb755d4f

Parent rev.

Child rev.

[Not reviewed]

default

0 8 0

domruf - 7 years ago 2018-12-10 22:54:04
dominikruf@gmail.com

front-end: use At.js for MentionsAutoComplete

We want to get rid of YUI, and select2 is not well suited for this purpose.
So use At.js, which is made just for this use case.

Original implementation was modified by Mads Kiilerich.

8 files changed with 73 insertions and 61 deletions:

.hgignore

LICENSE.md

kallithea/bin/kallithea_cli_front_end.py

kallithea/front-end/package.json

kallithea/public/js/base.js

kallithea/public/less/main.less

kallithea/public/less/style.less

kallithea/templates/base/root.html

0 comments (0 inline, 0 general)

.hgignore

➞

Show inline comments

@@ @@ -11,40 +11,42 @@ tarballcache/ @@
 syntax: regexp
 ^rcextensions
 ^build
 ^dist/
 ^docs/build/
 ^docs/_build/
 ^data$
 ^sql_dumps/
 ^\.settings$
 ^\.project$
 ^\.pydevproject$
 ^\.coverage$
 ^kallithea/front-end/node_modules$
 ^kallithea/front-end/package-lock\.json$
 ^kallithea/front-end/tmp$
 ^kallithea/public/codemirror$
 ^kallithea/public/css/select2-spinner\.gif$
 ^kallithea/public/css/select2\.png$
 ^kallithea/public/css/select2x2\.png$
 ^kallithea/public/css/style\.css$
 ^kallithea/public/css/style\.css\.map$
 ^kallithea/public/js/bootstrap\.js$
 ^kallithea/public/js/dataTables\.bootstrap\.js$
 ^kallithea/public/js/jquery\.atwho\.min\.js$
 ^kallithea/public/js/jquery\.caret\.min\.js$
 ^kallithea/public/js/jquery\.dataTables\.js$
 ^kallithea/public/js/jquery\.flot\.js$
 ^kallithea/public/js/jquery\.flot\.selection\.js$
 ^kallithea/public/js/jquery\.flot\.time\.js$
 ^kallithea/public/js/jquery\.min\.js$
 ^kallithea/public/js/select2\.js$
 ^theme\.less$
 ^kallithea\.db$
 ^test\.db$
 ^Kallithea\.egg-info$
 ^my\.ini$
 ^fabfile.py
 ^\.idea$
 ^\.cache$
 ^\.pytest_cache$
 /__pycache__$

LICENSE.md

➞

Show inline comments

@@ @@ -63,48 +63,80 @@ and licensed under the MIT-permissive li @@
 [included in this distribution](MIT-Permissive-License.txt).
 Additional files from upstream Codemirror are copyrighted by various authors
 and licensed under other permissive licenses.
 It is not distributed with Kallithea, but will be downloaded
 using the ''kallithea-cli front-end-build'' command.
 jQuery
 ------
 Kallithea uses the Javascript system called
 [jQuery](http://jquery.org/).
 It is Copyright 2013 jQuery Foundation and other contributors http://jquery.com/ and is under an
 [MIT-permissive license](MIT-Permissive-License.txt).
 It is not distributed with Kallithea, but will be downloaded
 using the ''kallithea-cli front-end-build'' command.
 At.js
 -----
 Kallithea uses the Javascript system called
 [At.js](http://ichord.github.com/At.js),
 which can be found together with its Corresponding Source in
 https://github.com/ichord/At.js at tag v1.5.4.
 It is Copyright 2013 chord.luo@gmail.com and is under an
 [MIT-permissive license](MIT-Permissive-License.txt).
 It is not distributed with Kallithea, but will be downloaded
 using the ''kallithea-cli front-end-build'' command.
 Caret.js
 --------
 Kallithea uses the Javascript system called
 [Caret.js](http://ichord.github.com/Caret.js/),
 which can be found together with its Corresponding Source in
 https://github.com/ichord/Caret.js at tag v0.3.1.
 It is Copyright 2013 chord.luo@gmail.com and is under an
 [MIT-permissive license](MIT-Permissive-License.txt).
 It is not distributed with Kallithea, but will be downloaded
 using the ''kallithea-cli front-end-build'' command.
 DataTables
 ----------
 Kallithea uses the Javascript system called
 [DataTables](http://www.datatables.net/).
 It is Copyright 2008-2015 SpryMedia Ltd. and is under an
 [MIT-permissive license](MIT-Permissive-License.txt).
 It is not distributed with Kallithea, but will be downloaded
 using the ''kallithea-cli front-end-build'' command.
 Mergely
 -------
 Kallithea incorporates some code from the Javascript system called
 [Mergely](http://www.mergely.com/), version 3.3.9.
 [Mergely's license](http://www.mergely.com/license.php), a
 [copy of which is included in this repository](LICENSE-MERGELY.html),
 is (GPL|LGPL|MPL).  Kallithea as GPLv3'd project chooses the GPL arm of that
 tri-license.

kallithea/bin/kallithea_cli_front_end.py

➞

Show inline comments

@@ @@ -45,53 +45,55 @@ def front_end_build(install_deps, genera @@
         subprocess.check_call(['npm', 'install'], cwd=front_end_dir)
     if generate:
         tmp_dir = os.path.join(front_end_dir, 'tmp')
         if not os.path.isdir(tmp_dir):
             os.mkdir(tmp_dir)
         click.echo("Building CSS styling based on Bootstrap")
         with open(os.path.join(tmp_dir, 'pygments.css'), 'w') as f:
             subprocess.check_call(['pygmentize',
                     '-S', 'default',
                     '-f', 'html',
                     '-a', '.code-highlight'],
                     stdout=f)
         lesscpath = os.path.join(front_end_dir, 'node_modules', '.bin', 'lessc')
         lesspath = os.path.join(public_dir, 'less', 'main.less')
         csspath = os.path.join(public_dir, 'css', 'style.css')
         subprocess.check_call([lesscpath, '--relative-urls', '--source-map',
                 '--source-map-less-inline', lesspath, csspath],
                 cwd=front_end_dir)
         click.echo("Preparing Bootstrap JS")
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'bootstrap', 'dist', 'js', 'bootstrap.js'), os.path.join(public_dir, 'js', 'bootstrap.js'))
         click.echo("Preparing jQuery JS with Flot")
+        click.echo("Preparing jQuery JS with Flot, Caret and Atwho")
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'jquery', 'dist', 'jquery.min.js'), os.path.join(public_dir, 'js', 'jquery.min.js'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'jquery.flot', 'jquery.flot.js'), os.path.join(public_dir, 'js', 'jquery.flot.js'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'jquery.flot', 'jquery.flot.selection.js'), os.path.join(public_dir, 'js', 'jquery.flot.selection.js'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'jquery.flot', 'jquery.flot.time.js'), os.path.join(public_dir, 'js', 'jquery.flot.time.js'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'jquery.caret', 'dist', 'jquery.caret.min.js'), os.path.join(public_dir, 'js', 'jquery.caret.min.js'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'at.js', 'dist', 'js', 'jquery.atwho.min.js'), os.path.join(public_dir, 'js', 'jquery.atwho.min.js'))
         click.echo("Preparing DataTables JS")
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'datatables.net', 'js', 'jquery.dataTables.js'), os.path.join(public_dir, 'js', 'jquery.dataTables.js'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'datatables.net-bs', 'js', 'dataTables.bootstrap.js'), os.path.join(public_dir, 'js', 'dataTables.bootstrap.js'))
         click.echo("Preparing Select2 JS")
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'select2', 'select2.js'), os.path.join(public_dir, 'js', 'select2.js'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'select2', 'select2.png'), os.path.join(public_dir, 'css', 'select2.png'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'select2', 'select2x2.png'), os.path.join(public_dir, 'css', 'select2x2.png'))
         shutil.copy(os.path.join(front_end_dir, 'node_modules', 'select2', 'select2-spinner.gif'), os.path.join(public_dir, 'css', 'select2-spinner.gif'))
         click.echo("Preparing CodeMirror JS")
         if os.path.isdir(os.path.join(public_dir, 'codemirror')):
             shutil.rmtree(os.path.join(public_dir, 'codemirror'))
         shutil.copytree(os.path.join(front_end_dir, 'node_modules', 'codemirror'), os.path.join(public_dir, 'codemirror'))
         click.echo("Generating LICENSES.txt")
         check_licensing_json_path = os.path.join(tmp_dir, 'licensing.json')
         licensing_txt_path = os.path.join(public_dir, 'LICENSES.txt')
         subprocess.check_call([
             os.path.join(front_end_dir, 'node_modules', '.bin', 'license-checker'),
             '--json',
             '--out', check_licensing_json_path,
             ], cwd=front_end_dir)

kallithea/front-end/package.json

➞

Show inline comments

+{
   "name": "kallithea",
   "private": true,
   "dependencies": {
     "at.js": "1.5.4",
     "bootstrap": "3.3.7",
     "codemirror": "4.7",
     "datatables.net": "1.10.13",
     "datatables.net-bs": "1.10.13",
     "jquery": "1.12.3",
     "jquery.caret": "0.3.1",
     "jquery.flot": "0.8.3",
     "select2": "3.5.1",
     "select2-bootstrap-css": "1.2.4"
   },
   "devDependencies": {
     "less": "~2.7",
     "less-plugin-clean-css": "~1.5",
     "license-checker": "24.1.0"
+  }
+}

kallithea/public/js/base.js

➞

Show inline comments

@@ @@ -730,49 +730,49 @@ function _comment_div_append_form($comme @@
                     text: _TM['Retry']
                 }).click(function() {
                     $status.text(_TM['Submitting ...']);
                     $preview.addClass('submitting').removeClass('failed');
                     ajaxPOST(AJAX_COMMENT_URL, postData, success, failure);
                 }),
                 $('<button>', {
                     'class': 'btn btn-default btn-xs',
                     text: _TM['Cancel']
                 }).click(function() {
                     comment_div_state($comment_div, f_path, line_no);
                 })
             ).appendTo($status);
         };
         ajaxPOST(AJAX_COMMENT_URL, postData, success, failure);
     });
     // add event handler for hide/cancel buttons
     $form.find('.hide-inline-form').click(function(e) {
         comment_div_state($comment_div, f_path, line_no);
     });
     tooltip_activate();
     if ($textarea.length > 0) {
-        MentionsAutoComplete($textarea, _USERS_AC_DATA);
         MentionsAutoComplete($textarea);
+    }
     if (f_path) {
         $textarea.focus();
+    }
+}
 function deleteComment(comment_id) {
     var url = AJAX_COMMENT_DELETE_URL.replace('__COMMENT_ID__', comment_id);
     var postData = {};
     var success = function(o) {
         $('#comment-'+comment_id).remove();
         // Ignore that this might leave a stray Add button (or have a pending form with another comment) ...
+    }
     ajaxPOST(url, postData, success);
+}
 /**
  * Double link comments
  */
 var linkInlineComments = function($firstlinks, $comments){
     if ($comments.length > 0) {
         $firstlinks.html('<a href="#{0}">First comment</a>'.format($comments.prop('id')));
@@ @@ -1134,107 +1134,72 @@ var MembersAutoComplete = function ($inp @@
         ajax: {
             url: pyroutes.url('users_and_groups_data'),
             dataType: 'json',
             data: function(term, page){
               return {
                 query: term,
                 types: 'users,groups'
               };
             },
             results: function (data, page){
               return data;
             },
             cache: true
         },
         formatSelection: autocompleteFormatter,
         formatResult: autocompleteFormatter,
         escapeMarkup: function(m) { return m; },
         id: function(item) { return item.type == 'user' ? item.nname : item.grname },
     }).on("select2-selecting", function(e) {
         // e.choice.id is automatically used as selection value - just set the type of the selection
         $typeElement.val(e.choice.type);
     });
+}
 var MentionsAutoComplete = function ($inputElement, users_list) {
     var $container = $('<div/>').insertAfter($inputElement);
     var matchUsers = function (sQuery) {
             // use the search string from $inputElement instead of sQuery
             if(!$container.data('search')){
                 // return empty list so the input list isn't shown
                 return []
+            }
             return autocompleteMatchUsers($container.data('search'), users_list);
+    }
     var datasource = new YAHOO.util.FunctionDataSource(matchUsers);
     var mentionsAC = new YAHOO.widget.AutoComplete($inputElement[0], $container[0], datasource);
     mentionsAC.useShadow = false;
     mentionsAC.resultTypeList = false;
     mentionsAC.animVert = false;
     mentionsAC.animHoriz = false;
     mentionsAC.animSpeed = 0.1;
     mentionsAC.suppressInputUpdate = true;
     mentionsAC.formatResult = function (oResultData, sQuery, sResultMatch) {
         // use the search string from $inputElement instead of sQuery
         return autocompleteFormatter(oResultData, $container.data('search'), sResultMatch);
+    }
     // Handler for selection of an entry
     if(mentionsAC.itemSelectEvent){
         mentionsAC.itemSelectEvent.subscribe(function (sType, aArgs) {
             var myAC = aArgs[0]; // reference back to the AC instance
             var elLI = aArgs[1]; // reference to the selected LI element
             var oData = aArgs[2]; // object literal of selected item's result data
             myAC.getInputEl().value = $container.data('before') + oData.nname + ' ' + $container.data('after');
             _setCaretPosition($(myAC.getInputEl()), myAC.dataSource.before.length + oData.nname.length + 1);
         });
+    }
     // Must match utils2.py MENTIONS_REGEX.
     // Operates on a string from char before @ up to cursor.
     // Check that the char before @ doesn't look like an email address, and match to end of string.
     var mentionRe = new RegExp('(?:^|[^a-zA-Z0-9])@([a-zA-Z0-9][-_.a-zA-Z0-9]*[a-zA-Z0-9])$');
     $inputElement.keyup(function(e){
             var currentMessage = $inputElement.val();
             var currentCaretPosition = $inputElement[0].selectionStart;
             $container.data('search', '');
             var messageBeforeCaret = currentMessage.substr(0, currentCaretPosition);
             var lastAtPos = messageBeforeCaret.lastIndexOf('@');
             if(lastAtPos >= 0){
                 // Search from one char before last @ ... if possible
                 var m = mentionRe.exec(messageBeforeCaret.substr(Math.max(0, lastAtPos - 1)));
                 if(m){
                     $container.data('before', currentMessage.substr(0, lastAtPos + 1));
                     $container.data('search', currentMessage.substr(lastAtPos + 1, currentCaretPosition - lastAtPos - 1));
                     $container.data('after', currentMessage.substr(currentCaretPosition));
+                }
+            }
         });
+}
 var MentionsAutoComplete = function ($inputElement) {
   $inputElement.atwho({
     at: "@",
     callbacks: {
       remoteFilter: function(query, callback) {
         $.getJSON(
           pyroutes.url('users_and_groups_data'),
+          {
             query: query,
             types: 'users'
           },
           function(data) {
             callback(data.results)
+          }
         );
       },
       sorter: function(query, items, searchKey) {
         return items;
+      }
     },
     displayTpl: "<li>" + autocompleteGravatar('${fname} ${lname} (${nname})', '${gravatar_lnk}', 16) + "</li>",
     insertTpl: "${atwho-at}${nname}"
   });
 };
 // Set caret at the given position in the input element
 function _setCaretPosition($inputElement, caretPos) {
     $inputElement.each(function(){
         if(this.createTextRange) { // IE
             var range = this.createTextRange();
             range.move('character', caretPos);
             range.select();
+        }
         else if(this.selectionStart) { // other recent browsers
             this.focus();
             this.setSelectionRange(caretPos, caretPos);
+        }
         else // last resort - very old browser
             this.focus();
     });
+}
 var addReviewMember = function(id,fname,lname,nname,gravatar_link,gravatar_size){
     var displayname = nname;
     if ((fname != "") && (lname != "")) {
         displayname = "{0} {1} ({2})".format(fname, lname, nname);

kallithea/public/less/main.less

➞

Show inline comments

 /*!
  * Don't edit the css file directly.
+ *
  * Instead, edit the less file(s) and regenerate the css:
+ *
  * npm install
  * npm run less
+ *
  */
 /* 3rd party styles */
 @import "node_modules/bootstrap/less/bootstrap.less";
 @import (inline) "node_modules/datatables.net-bs/css/dataTables.bootstrap.css";
 @import (inline) "node_modules/at.js/dist/css/jquery.atwho.css";
 @import (less) "node_modules/select2/select2.css";
 @import (less) "node_modules/select2-bootstrap-css/select2-bootstrap.css";
 @import (less) "tmp/pygments.css";
 @import (less) "../fontello/css/kallithea.css";
 /* kallithea styles */
 @import "kallithea-variables.less";
 @import "kallithea-labels.less";
 @import "yui-ac.less";
 @import "kallithea-select2.less";
 @import "kallithea-diff.less";
 @import "style.less";
 /* finally, import the optional theme file with local customizations */
 @import (optional) "theme.less";

kallithea/public/less/style.less

➞

Show inline comments

@@ @@ -908,24 +908,30 @@ div.annotatediv { @@
 .code-highlight pre,
 .linenodiv pre {
   padding: 5px 2px 0px 5px;
   margin: 0;
+}
 .code-highlight pre div:target {
   background-color: #FFFFBE !important;
+}
 .linenos a { text-decoration: none; }
 /* Stylesheets for the context bar */
 #quick_login > .pull-right .list-group-item {
   background-color: @kallithea-theme-main-color;
   border: 0;
+}
 #content #context-pages .follow .show-following,
 #content #context-pages .following .show-follow {
   display: none;
+}
 nav.navbar #quick > li > a,
 #context-pages > ul > li > a {
   height: @navbar-height;
+}
 /* at.js */
 .atwho-view strong {
   /* the blue color doesn't look good, use normal color */
   color: inherit;
+}

kallithea/templates/base/root.html

➞

Show inline comments

@@ @@ -53,48 +53,50 @@ @@
                 'MSG_SORTASC': ${h.jshtml(_('Click to sort ascending'))},
                 'MSG_SORTDESC': ${h.jshtml(_('Click to sort descending'))},
                 'MSG_EMPTY': ${h.jshtml(_('No records found.'))},
                 'MSG_ERROR': ${h.jshtml(_('Data error.'))},
                 'MSG_LOADING': ${h.jshtml(_('Loading...'))}
             };
             var _TM = TRANSLATION_MAP;
             var TOGGLE_FOLLOW_URL  = ${h.js(h.url('toggle_following'))};
             var REPO_NAME = "";
             %if hasattr(c, 'repo_name'):
                 var REPO_NAME = ${h.js(c.repo_name)};
             %endif
             var _authentication_token = ${h.js(h.authentication_token())};
         </script>
         <script type="text/javascript" src="${h.url('/js/yui.2.9.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/jquery.min.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/jquery.dataTables.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/dataTables.bootstrap.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/bootstrap.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/select2.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/native.history.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/jquery.caret.min.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/jquery.atwho.min.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript" src="${h.url('/js/base.js', ver=c.kallithea_version)}"></script>
         ## EXTRA FOR JS
         <%block name="js_extra"/>
         <script type="text/javascript">
             (function(window,undefined){
                 var History = window.History; // Note: We are using a capital H instead of a lower h
                 if ( !History.enabled ) {
                      // History.js is disabled for this browser.
                      // This is because we can optionally choose to support HTML4 browsers or not.
                     return false;
+                }
             })(window);
             $(document).ready(function(){
               tooltip_activate();
               show_more_event();
               // routes registration
               pyroutes.register('home', ${h.js(h.url('home'))}, []);
               pyroutes.register('new_gist', ${h.js(h.url('new_gist'))}, []);
               pyroutes.register('gists', ${h.js(h.url('gists'))}, []);
               pyroutes.register('new_repo', ${h.js(h.url('new_repo'))}, []);
               pyroutes.register('summary_home', ${h.js(h.url('summary_home', repo_name='%(repo_name)s'))}, ['repo_name']);
               pyroutes.register('changelog_home', ${h.js(h.url('changelog_home', repo_name='%(repo_name)s'))}, ['repo_name']);

0 comments (0 inline, 0 general)