deform: add deform.js to compiled scripts.js

rhodecode/public/js/src/deform.js

@@ -0,0 +1,194 b''
+/*
+ * Register a top-level callback to the deform.load() function
+ * this will be called when the DOM has finished loading. No need
+ * to include the call at the end of the page.
+ */
+
+$(document).ready(function(){
+    deform.load();
+});
+
+
+var deform_loaded = false;
+
+var deform  = {
+    callbacks: [],
+
+    addCallback: function (oid, callback) {
+        deform.callbacks.push([oid, callback]);
+    },
+
+    clearCallbacks: function () {
+        deform.callbacks = [];
+    },
+
+    load: function() {
+      $(function() {
+        if (!deform_loaded) {
+            deform.processCallbacks();
+            deform.focusFirstInput();
+            deform_loaded = true;
+      }});
+    },
+
+
+    processCallbacks: function () {
+        $(deform.callbacks).each(function(num, item) {
+            var oid = item[0];
+            var callback = item[1];
+            callback(oid);
+            }
+            );
+        deform.clearCallbacks();
+    },
+
+    addSequenceItem: function (protonode, before) {
+        // - Clone the prototype node and add it before the "before" node.
+        //   Also ensure any callbacks are run for the widget.
+
+        // In order to avoid breaking accessibility:
+        //
+        // - Find each tag within the prototype node with an id
+        //   that has the string ``deformField(\d+)`` within it, and modify
+        //   its id to have a random component.
+        // - For each label referencing an change id, change the label's
+        //   for attribute to the new id.
+
+        var fieldmatch = /deformField(\d+)/;
+        var namematch = /(.+)?-[#]{3}/;
+        var code = protonode.attr('prototype');
+        var html = decodeURIComponent(code);
+        var $htmlnode = $(html);
+        var $idnodes = $htmlnode.find('[id]');
+        var $namednodes = $htmlnode.find('[name]');
+        var genid = deform.randomString(6);
+        var idmap = {};
+
+        // replace ids containing ``deformField`` and associated label for=
+        // items which point at them
+
+        $idnodes.each(function(idx, node) {
+            var $node = $(node);
+            var oldid = $node.attr('id');
+            var newid = oldid.replace(fieldmatch, "deformField$1-" + genid);
+            $node.attr('id', newid);
+            idmap[oldid] = newid;
+            var labelselector = 'label[for=' + oldid + ']';
+            var $fornodes = $htmlnode.find(labelselector);
+            $fornodes.attr('for', newid);
+            });
+
+        // replace names a containing ```deformField`` like we do for ids
+
+        $namednodes.each(function(idx, node) {
+            var $node = $(node);
+            var oldname = $node.attr('name');
+            var newname = oldname.replace(fieldmatch, "deformField$1-" + genid);
+            $node.attr('name', newname);
+            });
+
+        $htmlnode.insertBefore(before);
+
+        $(deform.callbacks).each(function(num, item) {
+            var oid = item[0];
+            var callback = item[1];
+            var newid = idmap[oid];
+            if (newid) {
+                callback(newid);
+                }
+            });
+
+        deform.clearCallbacks();
+        var old_len = parseInt(before.attr('now_len')||'0', 10);
+        before.attr('now_len', old_len + 1);
+        // we added something to the dom, trigger a change event
+        var e = jQuery.Event("change");
+        $('#deform').trigger(e);
+    },
+
+    appendSequenceItem: function(node) {
+        var $oid_node = $(node).closest('.deform-seq');
+        var $proto_node = $oid_node.find('.deform-proto').first();
+        var $before_node = $oid_node.find('.deform-insert-before').last();
+        var min_len = parseInt($before_node.attr('min_len')||'0', 10);
+        var max_len = parseInt($before_node.attr('max_len')||'9999', 10);
+        var now_len = parseInt($before_node.attr('now_len')||'0', 10);
+        var orderable = parseInt($before_node.attr('orderable')||'0', 10);
+
+        if (now_len < max_len) {
+          deform.addSequenceItem($proto_node, $before_node);
+            deform.processSequenceButtons($oid_node, min_len, max_len,
+                                          now_len + 1, orderable);
+        }
+        return false;
+    },
+
+    removeSequenceItem: function(clicked) {
+        var $item_node = $(clicked).closest('.deform-seq-item');
+        var $oid_node = $item_node.closest('.deform-seq');
+        var $before_node = $oid_node.find('.deform-insert-before').last();
+        var min_len = parseInt($before_node.attr('min_len')||'0', 10);
+        var max_len = parseInt($before_node.attr('max_len')||'9999', 10);
+        var now_len = parseInt($before_node.attr('now_len')||'0', 10);
+        var orderable = parseInt($before_node.attr('orderable')||'0', 10);
+        if (now_len > min_len) {
+            $before_node.attr('now_len', now_len - 1);
+            $item_node.remove();
+            deform.processSequenceButtons($oid_node, min_len, max_len,
+                                          now_len-1, orderable);
+        }
+        // we removed something from the dom, trigger a change event
+        var e = jQuery.Event("change");
+        $('#deform').trigger(e);
+        return false;
+    },
+
+    processSequenceButtons: function(oid_node, min_len, max_len, now_len,
+                                     orderable) {
+        orderable = !!orderable; // convert to bool
+        var has_multiple = now_len > 1;
+        var $ul = oid_node.find('.deform-seq-container').not(oid_node.find('.deform-seq-container .deform-seq-container'));
+        var $lis = $ul.find('.deform-seq-item').not($ul.find('.deform-seq-container .deform-seq-item'));
+        var show_closebutton = now_len > min_len;
+        var show_addbutton = now_len < max_len;
+        $lis.find('.deform-close-button').not($lis.find('.deform-seq-container .deform-close-button')).toggle(show_closebutton);
+        oid_node.find('.deform-seq-add').not(oid_node.find('.deform-seq-container .deform-seq-add')).toggle(show_addbutton);
+        $lis.find('.deform-order-button').not($lis.find('.deform-seq-container .deform-order-button')).toggle(orderable && has_multiple);
+     },
+
+    focusFirstInput: function (el) {
+        el = el || document.body;
+        var input = $(el).find(':input')
+          .filter('[id ^= deformField]')
+          .filter('[type != hidden]')
+          .first();
+        if (input) {
+            var raw = input.get(0);
+            if (raw) {
+                if (raw.type === 'text' || raw.type === 'file' ||
+                    raw.type == 'password' || raw.type == 'text' ||
+                    raw.type == 'textarea') {
+                    if (!input.hasClass("hasDatepicker")) {
+                        input.focus();
+                    }
+                }
+            }
+        }
+    },
+
+    randomString: function (length) {
+        var chr='0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
+        chr = chr.split('');
+
+        if (! length) {
+            length = Math.floor(Math.random() * chr.length);
+        }
+
+        var str = '';
+        for (var i = 0; i < length; i++) {
+            str += chr[Math.floor(Math.random() * chr.length)];
+        }
+        return str;
+    }
+
+};

Gruntfile.js

@@ -1,140 +1,141 b''
 module.exports = function(grunt) {
   grunt.initConfig({
 
     dirs: {
       css: "rhodecode/public/css",
       js: {
         "src": "rhodecode/public/js/src",
         "dest": "rhodecode/public/js"
       }
     },
 
     concat: {
       dist: {
         src: [
           // Base libraries
           '<%= dirs.js.src %>/jquery-1.11.1.min.js',
           '<%= dirs.js.src %>/logging.js',
           '<%= dirs.js.src %>/bootstrap.js',
           '<%= dirs.js.src %>/mousetrap.js',
           '<%= dirs.js.src %>/moment.js',
           '<%= dirs.js.src %>/appenlight-client-0.4.1.min.js',
           '<%= dirs.js.src %>/i18n_utils.js',
+          '<%= dirs.js.src %>/deform.js',
 
           // Plugins
           '<%= dirs.js.src %>/plugins/jquery.pjax.js',
           '<%= dirs.js.src %>/plugins/jquery.dataTables.js',
           '<%= dirs.js.src %>/plugins/flavoured_checkbox.js',
           '<%= dirs.js.src %>/plugins/jquery.auto-grow-input.js',
           '<%= dirs.js.src %>/plugins/jquery.autocomplete.js',
           '<%= dirs.js.src %>/plugins/jquery.debounce.js',
           '<%= dirs.js.src %>/plugins/jquery.mark.js',
           '<%= dirs.js.src %>/plugins/jquery.timeago.js',
           '<%= dirs.js.src %>/plugins/jquery.timeago-extension.js',
 
           // Select2
           '<%= dirs.js.src %>/select2/select2.js',
 
           // Code-mirror
           '<%= dirs.js.src %>/codemirror/codemirror.js',
           '<%= dirs.js.src %>/codemirror/codemirror_loadmode.js',
           '<%= dirs.js.src %>/codemirror/codemirror_hint.js',
           '<%= dirs.js.src %>/codemirror/codemirror_overlay.js',
           '<%= dirs.js.src %>/codemirror/codemirror_placeholder.js',
           // TODO: mikhail: this is an exception. Since the code mirror modes
           // are loaded "on the fly", we need to keep them in a public folder
           '<%= dirs.js.dest %>/mode/meta.js',
           '<%= dirs.js.dest %>/mode/meta_ext.js',
           '<%= dirs.js.dest %>/rhodecode/i18n/select2/translations.js',
 
           // Rhodecode utilities
           '<%= dirs.js.src %>/rhodecode/utils/array.js',
           '<%= dirs.js.src %>/rhodecode/utils/string.js',
           '<%= dirs.js.src %>/rhodecode/utils/pyroutes.js',
           '<%= dirs.js.src %>/rhodecode/utils/ajax.js',
           '<%= dirs.js.src %>/rhodecode/utils/autocomplete.js',
           '<%= dirs.js.src %>/rhodecode/utils/colorgenerator.js',
           '<%= dirs.js.src %>/rhodecode/utils/ie.js',
           '<%= dirs.js.src %>/rhodecode/utils/os.js',
           '<%= dirs.js.src %>/rhodecode/utils/topics.js',
 
           // Rhodecode widgets
           '<%= dirs.js.src %>/rhodecode/widgets/multiselect.js',
 
           // Rhodecode components
           '<%= dirs.js.src %>/rhodecode/init.js',
           '<%= dirs.js.src %>/rhodecode/codemirror.js',
           '<%= dirs.js.src %>/rhodecode/comments.js',
           '<%= dirs.js.src %>/rhodecode/constants.js',
           '<%= dirs.js.src %>/rhodecode/files.js',
           '<%= dirs.js.src %>/rhodecode/followers.js',
           '<%= dirs.js.src %>/rhodecode/menus.js',
           '<%= dirs.js.src %>/rhodecode/notifications.js',
           '<%= dirs.js.src %>/rhodecode/permissions.js',
           '<%= dirs.js.src %>/rhodecode/pjax.js',
           '<%= dirs.js.src %>/rhodecode/pullrequests.js',
           '<%= dirs.js.src %>/rhodecode/settings.js',
           '<%= dirs.js.src %>/rhodecode/select2_widgets.js',
           '<%= dirs.js.src %>/rhodecode/tooltips.js',
           '<%= dirs.js.src %>/rhodecode/users.js',
           '<%= dirs.js.src %>/rhodecode/appenlight.js',
 
           // Rhodecode main module
           '<%= dirs.js.src %>/rhodecode.js'
         ],
         dest: '<%= dirs.js.dest %>/scripts.js',
         nonull: true
       }
     },
 
     less: {
       development: {
         options: {
           compress: false,
           yuicompress: false,
           optimization: 0
         },
         files: {
           "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less"
         }
       },
       production: {
         options: {
           compress: true,
           yuicompress: true,
           optimization: 2
         },
         files: {
           "<%= dirs.css %>/style.css": "<%= dirs.css %>/main.less"
         }
       }
     },
 
     watch: {
       less: {
         files: ["<%= dirs.css %>/*.less"],
         tasks: ["less:production"]
       },
       js: {
         files: ["<%= dirs.js.src %>/**/*.js"],
         tasks: ["concat:dist"]
       }
     },
 
     jshint: {
       rhodecode: {
         src: '<%= dirs.js.src %>/rhodecode/**/*.js',
         options: {
           jshintrc: '.jshintrc'
         }
       }
     }
   });
 
   grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-jshint');
 
   grunt.registerTask('default', ['less:production', 'concat:dist']);
 };

rhodecode/templates/base/root.html

@@ -1,139 +1,138 b''
 ## -*- coding: utf-8 -*-
 <!DOCTYPE html>
 
 <%
 c.template_context['repo_name'] = getattr(c, 'repo_name', '')
 
 if hasattr(c, 'rhodecode_db_repo'):
     c.template_context['repo_type'] = c.rhodecode_db_repo.repo_type
     c.template_context['repo_landing_commit'] = c.rhodecode_db_repo.landing_rev[1]
 
 if getattr(c, 'rhodecode_user', None) and c.rhodecode_user.user_id:
     c.template_context['rhodecode_user']['username'] = c.rhodecode_user.username
     c.template_context['rhodecode_user']['email'] = c.rhodecode_user.email
 
 c.template_context['visual']['default_renderer'] = h.get_visual_attr(c, 'default_renderer')
 %>
 
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <title>${self.title()}</title>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
         <%def name="robots()">
             <meta name="robots" content="index, nofollow"/>
         </%def>
         ${self.robots()}
         <link rel="icon" href="${h.asset('images/favicon.ico', ver=c.rhodecode_version_hash)}" sizes="16x16 32x32" type="image/png" />
 
         ## CSS definitions
         <%def name="css()">
             <link rel="stylesheet" type="text/css" href="${h.asset('css/style.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             <!--[if lt IE 9]>
                 <link rel="stylesheet" type="text/css" href="${h.asset('css/ie.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             <![endif]-->
             ## EXTRA FOR CSS
             ${self.css_extra()}
         </%def>
         ## CSS EXTRA - optionally inject some extra CSS stuff needed for specific websites
         <%def name="css_extra()">
         </%def>
 
         ${self.css()}
 
         ## JAVASCRIPT
         <%def name="js()">
             <script src="${h.asset('js/rhodecode/i18n/%s.js' % c.language, ver=c.rhodecode_version_hash)}"></script>
             <script type="text/javascript">
             // register templateContext to pass template variables to JS
             var templateContext = ${h.json.dumps(c.template_context)|n};
 
             var REPO_NAME = "${getattr(c, 'repo_name', '')}";
             %if hasattr(c, 'rhodecode_db_repo'):
             var REPO_LANDING_REV = '${c.rhodecode_db_repo.landing_rev[1]}';
             var REPO_TYPE = '${c.rhodecode_db_repo.repo_type}';
             %else:
             var REPO_LANDING_REV = '';
             var REPO_TYPE = '';
             %endif
             var APPLICATION_URL = "${h.url('home').rstrip('/')}";
             var ASSET_URL = "${h.asset('')}";
             var DEFAULT_RENDERER = "${h.get_visual_attr(c, 'default_renderer')}";
             var CSRF_TOKEN = "${getattr(c, 'csrf_token', '')}";
             % if getattr(c, 'rhodecode_user', None):
             var USER = {name:'${c.rhodecode_user.username}'};
             % else:
             var USER = {name:null};
             % endif
 
             var APPENLIGHT = {
               enabled: ${'true' if getattr(c, 'appenlight_enabled', False) else 'false'},
               key: '${getattr(c, "appenlight_api_public_key", "")}',
               serverUrl: '${getattr(c, "appenlight_server_url", "")}',
               requestInfo: {
               % if getattr(c, 'rhodecode_user', None):
                   ip: '${c.rhodecode_user.ip_addr}',
                   username: '${c.rhodecode_user.username}'
               % endif
               }
             };
             </script>
 
             <!--[if lt IE 9]>
             <script language="javascript" type="text/javascript" src="${h.asset('js/excanvas.min.js')}"></script>
             <![endif]-->
             <script language="javascript" type="text/javascript" src="${h.asset('js/rhodecode/routes.js', ver=c.rhodecode_version_hash)}"></script>
             <script language="javascript" type="text/javascript" src="${h.asset('js/scripts.js', ver=c.rhodecode_version_hash)}"></script>
-            <script language="javascript" type="text/javascript" src="${h.static_url('deform:static/scripts/deform.js')}"></script>
             ## avoide esaping the %N
             <script>CodeMirror.modeURL = "${h.asset('') + 'js/mode/%N/%N.js'}";</script>
 
 
             ## JAVASCRIPT EXTRA - optionally inject some extra JS for specificed templates
             ${self.js_extra()}
 
             <script type="text/javascript">
             $(document).ready(function(){
               show_more_event();
               timeagoActivate();
             })
             </script>
 
         </%def>
 
         ## JAVASCRIPT EXTRA - optionally inject some extra JS for specificed templates
         <%def name="js_extra()"></%def>
         ${self.js()}
 
         <%def name="head_extra()"></%def>
         ${self.head_extra()}
 
         <%include file="/base/plugins_base.html"/>
 
         ## extra stuff
         %if c.pre_code:
             ${c.pre_code|n}
         %endif
     </head>
     <body id="body">
         <noscript>
             <div class="noscript-error">
                 ${_('Please enable JavaScript to use RhodeCode Enterprise')}
             </div>
         </noscript>
      ## IE hacks
       <!--[if IE 7]>
       <script>$(document.body).addClass('ie7')</script>
       <![endif]-->
       <!--[if IE 8]>
       <script>$(document.body).addClass('ie8')</script>
       <![endif]-->
       <!--[if IE 9]>
       <script>$(document.body).addClass('ie9')</script>
       <![endif]-->
 
       ${next.body()}
       %if c.post_code:
         ${c.post_code|n}
       %endif
     </body>
 </html>