[share.js] download/upload link: added 'click to select' feature

media/css/seahub.css

@@ -2742,10 +2742,12 @@ button.sf-dropdown-toggle:focus {
 .file-view-meta-info {
     margin:0;
 }
+.shared-link,
 #shared-link,
 #shared-upload-link,
 #shared-link-text,
 #shared-upload-link-text {
+    background:transparent;
     border:0;
 }
 #shared-link-text,

seahub/templates/js/templates.html

@@ -1046,10 +1046,16 @@
                 <div id="download-link-operations" class="hide">
                     <dl>
                         <dt>{% trans "Link: " %}</dt>
-                        <dd id="download-link"></dd>
+                        <dd id="download-link">
+                            <span></span>
+                            <input type="text" readonly="readonly" value="" class="shared-link hide" />
+                        </dd>
                         <% if (!is_dir) { %>
                         <dt>{% trans "Direct Download Link: " %}</dt>
-                        <dd id="direct-dl-link"></dd>
+                        <dd id="direct-dl-link">
+                            <span></span>
+                            <input type="text" readonly="readonly" value="" class="shared-link hide" />
+                        </dd>
                         <% } %>
                     </dl>
                     {% if user.permissions.can_send_share_link_mail %}
@@ -1094,7 +1100,12 @@
                     <input type="submit" value="{% trans 'Generate'%}" />
                 </form>
                 <div id="upload-link-operations" class="hide">
-                    <p><span class="vam">{% trans 'Upload Link: ' %}</span><span id="upload-link"></span><!--input type="text" readonly="readonly" id="shared-link-text" class="vam" /--></p>
+                    <dl>
+                        <dt>{% trans "Upload Link: " %}</dt>
+                        <dd id="upload-link">
+                            <input type="text" readonly="readonly" value="" class="shared-link hide" />
+                        </dd>
+                    </dl>
                     {% if user.permissions.can_send_share_link_mail %}
                         <button id="send-upload-link">{% trans 'Send' %}</button>
                     {% endif %}

static/scripts/app/views/share.js

@@ -83,6 +83,7 @@ define([
 
         events: {
             'click [type="checkbox"]': 'clickCheckbox',
+            'click .shared-link': 'clickToSelect',
 
             // download link
             'submit #generate-download-link-form': 'generateDownloadLink',
@@ -117,6 +118,54 @@ define([
             $el.closest('.checkbox-label').next('div').toggleClass('hide');
         },
 
+        clickToSelect: function(e) {
+            $(e.currentTarget).select();
+        },
+
+        renderDownloadLink: function(link_data) {
+            var link = link_data.link,
+                d_link = link + '?dl=1'; // direct download link
+            var $link = this.$('#download-link'),
+                $dLink = this.$('#direct-dl-link');
+            var $span = $('span', $link),
+                $input = $('input', $link),
+                $dSpan = $('span', $dLink),
+                $dInput = $('input', $dLink);
+
+            this.download_link = link; // for 'link send'
+            this.download_link_token = link_data.token; // for 'link delete'
+
+            $span.html(link);
+            if (link_data.permissions.can_download) {
+                $dLink.show().prev('dt').show();
+                $dSpan.html(d_link);
+            } else {
+                $dLink.hide().prev('dt').hide();
+            }
+
+            if (link_data.is_expired) {
+                this.$('#send-download-link').addClass('hide');
+                this.$('#download-link, #direct-dl-link').append(' <span class="error">(' + gettext('Expired') + ')</span>');
+            }
+            this.$('#download-link-operations').removeClass('hide');
+
+            $input.val(link).css({'width': $span.width() + 2}).show();
+            $span.hide();
+            $dInput.val(d_link).css({'width': $dSpan.width() + 2}).show();
+            $dSpan.hide();
+        },
+
+        renderUploadLink: function(link_data) {
+            var link = link_data.link;
+            this.upload_link = link;
+            this.upload_link_token = link_data.token;
+
+            var $link = this.$('#upload-link'),
+                $input = $('input', $link);
+            $input.val(link).attr({'size': link.length}).show();
+            this.$('#upload-link-operations').removeClass('hide');
+        },
+
         downloadLinkPanelInit: function() {
             var $panel = $('#download-link-share');
             var $loadingTip = this.$('.loading-tip');
@@ -133,22 +182,8 @@ define([
                 dataType: 'json',
                 success: function(data) { // data is [] or [{...}]
                     if (data.length == 1) {
-                        var link_data = data[0],
+                        var link_data = data[0];
-                            link = link_data.link;
+                        _this.renderDownloadLink(link_data);
-                        _this.download_link = link; // for 'link send'
-                        _this.download_link_token = link_data.token; // for 'link delete'
-                        _this.$('#download-link').html(link);
-
-                        if (app.pageOptions.is_pro && !link_data.permissions.can_download) {
-                            _this.$('#direct-dl-link').hide().prev('dt').hide();
-                        }
-
-                        _this.$('#direct-dl-link').html(link + '?dl=1');
-                        if (link_data.is_expired) {
-                            _this.$('#send-download-link').addClass('hide');
-                            _this.$('#download-link, #direct-dl-link').append(' <span class="error">(' + gettext('Expired') + ')</span>');
-                        }
-                        _this.$('#download-link-operations').removeClass('hide');
                     } else {
                         _this.$('#generate-download-link-form').removeClass('hide');
                     }
@@ -314,22 +349,9 @@ define([
                 }
 
                 if (link_type == 'download') {
-                    _this.$('#download-link').html(data["link"]); // TODO: add 'click & select' func
+                    _this.renderDownloadLink(data);
-                    if (data.permissions.can_download) {
-                        _this.$('#direct-dl-link').show().prev('dt').show();
-                    } else {
-                        _this.$('#direct-dl-link').hide().prev('dt').hide();
-                    }
-                    _this.$('#direct-dl-link').html(data['link'] + '?dl=1');
-
-                    _this.download_link = data["link"]; // for 'link send'
-                    _this.download_link_token = data["token"]; // for 'link delete'
-                    _this.$('#download-link-operations').removeClass('hide');
                 } else {
-                    _this.$('#upload-link').html(data["link"]);
+                    _this.renderUploadLink(data);
-                    _this.upload_link = data["link"];
-                    _this.upload_link_token = data["token"];
-                    _this.$('#upload-link-operations').removeClass('hide');
                 }
             };
 
@@ -465,12 +487,8 @@ define([
                 dataType: 'json',
                 success: function(data) { // data is [] or [{...}]
                     if (data.length == 1) {
-                        var link_data = data[0],
+                        var link_data = data[0];
-                            link = link_data.link;
+                        _this.renderUploadLink(link_data);
-                        _this.upload_link_token = link_data.token;
-                        _this.upload_link = link;
-                        _this.$('#upload-link').html(link);
-                        _this.$('#upload-link-operations').removeClass('hide');
                     } else {
                         _this.$('#generate-upload-link-form').removeClass('hide');
                     }