frontend add smart-link

.gitignore

@@ -50,3 +50,4 @@ seahub/frontend/webpack-stats.dev.json
 seahub/frontend/webpack-stats.pro.json
 seahub/frontend/node_modules
 
+/.idea

media/css/seahub.css

@@ -2460,13 +2460,66 @@ button.sf-dropdown-toggle:focus {
     text-align:center;
 }
 .repo-file-list .dirent-name {
-    display:inline-block;
+    display: inline;
+    vertical-align: middle;
 }
+.repo-file-list .dirent-smart-link {
+    display: none;
+    margin-left: 4px;
+    color: #aaa;
+    cursor: pointer;
+}
+.hl .dirent-smart-link {
+    display: inline;
+    vertical-align: middle;
+}
+.smart-link-container {
+    width: 400px;
+    box-sizing: border-box;
+    overflow: hidden;
+    padding:10px 20px;
+    position: relative;
+}
+.smart-link-wraper {
+    width: 100%;
+    margin-bottom: 15px;
+    word-break: break-all;
+}
+.smart-link-wraper .smart-link-href {
+    display: none;
+}
+.input-copy-wrapper {
+    position: absolute;
+    left:-99999px;
+    top: 100px;
+}
+.smart-link-loading {
+    border: 2px solid #eee;
+    border-left: 2px solid #aaa;
+    border-radius: 50%;
+    display: block;
+    height: 20px;
+    width: 20px;
+    margin: 0 auto;
+    animation: loading 0.9s infinite linear;
+}
+.smart-link-operation {
+    display: none;
+}
+.smart-link-close {
+    margin-left: 5px;
+}
+
 @media (max-width:767px) {
     .repo-file-list .dirent-name,
     .repo-file-list .img-name-link {
         display:block;
     }
+    .repo-file-list .dirent-name a,
+    .repo-file-list .img-name-link a {
+        vertical-align: middle;
+    }
+
 }
 .repo-file-list .file-locked-icon {
     position:absolute;
@@ -2516,7 +2569,7 @@ button.sf-dropdown-toggle:focus {
     padding:10px 20px;
 }
 @media (max-width:579px) {
-    .file-choose-form {
+    .file-choose-form,.smart-link-container {
         padding:0;
         width:280px;
     }

seahub/templates/js/templates.html

@@ -553,6 +553,7 @@
     <td class="dirent-icon"><img src="<%= icon_url %>" width="24" alt="" /></td>
     <td>
         <span class="dirent-name"><a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
+        <span class="dirent-smart-link sf2-icon-link" title="{% trans 'Smart link' %}"></span>
     </td>
     <td class="dirent-op">
         <div class="op-container">
@@ -622,6 +623,7 @@
     <td>
         <span class="dirent-name">
         <a href="<%= url %>" class="dir-link normal"><%- dirent.obj_name %></a>
+        <span class="dirent-smart-link sf2-icon-link" title="{% trans 'Smart link' %}"></span>
         <br />
         <% if (dirent.last_modified) { %>
         <span class="dirent-meta-info"><%= dirent.last_update %></span>
@@ -707,6 +709,7 @@
             <a class="normal" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
             <% } %>
         </span>
+        <span class="dirent-smart-link sf2-icon-link" title="{% trans 'Smart link' %}"></span>
     </td>
     <td class="dirent-op">
         <div class="op-container">
@@ -821,8 +824,10 @@
         <span class="dirent-name">
             <% if (dirent.is_img) { %>
             <a class="normal img-name-link" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
+            <span class="dirent-smart-link sf2-icon-link" title= "{% trans 'Smart link' %}"></span>
             <% } else { %>
             <a class="normal" href="<%= url %>" target="_blank"><%- dirent.obj_name %></a>
+            <span class="dirent-smart-link sf2-icon-link" title= "{% trans 'Smart link' %}"></span>
             <br />
             <% } %>
             <span class="dirent-meta-info"><%= dirent.file_size %></span>
@@ -2786,3 +2791,20 @@
     <div class="msg-content"><%= content_marked %></div>
 </div>
 </script>
+<script type="text/template" id="smart-link-tmpl">
+    <div class="smart-link-container">
+        <h3 id="dialogTitle">{% trans "Smart link" %}</h3>
+        <div class="smart-link-wraper">
+            <div class="smart-link-loading"></div>
+            <a target="_blank" class="smart-link-href" href=""></a>
+        </div>
+        <div class="smart-link-operation">
+            <button class="smart-link-copy">{% trans "Copy" %}</button>
+            <button class="smart-link-close">{% trans "Close" %}</button>
+        </div>
+        <!-- used to copy text to clipBoard-->
+        <div class="input-copy-wrapper">
+            <input class="copy-input" type="text">
+        </div>
+    </div>
+</script>

static/scripts/app/views/dialogs/dirent-smart-link.js

@@ -0,0 +1,61 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+], function($, _, Backbone, Common) {
+    'use strict';
+
+    var DirentSmartLinkDialog = Backbone.View.extend({
+        smartLinkTemplate: _.template($("#smart-link-tmpl").html()),
+
+        initialize: function(options) {
+            this.attributes = options.attributes;
+            this.dir = options.dir;
+            this.render({attributes: this.attributes, dir:this.dir});
+            this.$el.modal({autoResize:true, focus:false});
+            $('#simplemodal-container').css({'width':'auto', 'height':'auto'});
+        },
+
+        render: function() {
+            var url = Common.getUrl({name: 'smart_link'}) + "?repo_id=" + this.dir.repo_id + "&path=" + encodeURIComponent(this.dir.path + "/" + this.attributes.obj_name) + "&is_dir=" + !this.attributes.is_file;
+            var $el = this.$el;
+            $.ajax({
+                url: url,
+                type: 'GET',
+                dataType: 'json',
+                beforeSend: Common.prepareCSRFToken,
+                success: function(data) {
+                    $el.find('.smart-link-loading').hide();
+                    $el.find('.smart-link-operation').show();
+                    $el.find('.smart-link-href').attr("href",data.smart_link).show().html(data.smart_link);
+                },
+                error: function(xhr) {
+                    Common.ajaxErrorHandler(xhr);
+                }
+            });
+            this.$el.html(this.smartLinkTemplate());
+            return this;
+        },
+
+        events: {
+            "click .smart-link-copy": 'smartLinkCopy',
+            "click .smart-link-close": 'smartLinkClose'
+        },
+
+        smartLinkCopy: function () {
+            var $el = this.$el;
+            $el.find('.copy-input').val($el.find('.smart-link-href').html()).select();
+            document.execCommand('copy');
+            Common.feedback(gettext("Smart link copied to clipboard"), 'success');
+            $.modal.close();
+        },
+
+        smartLinkClose: function () {
+            $.modal.close();
+        }
+
+    });
+
+    return DirentSmartLinkDialog;
+});

static/scripts/app/views/dirent.js

@@ -6,10 +6,11 @@ define([
     'file-tree',
     'app/views/share',
     'app/views/dialogs/dirent-mvcp',
+    "app/views/dialogs/dirent-smart-link",
     'app/views/folder-perm',
     'app/views/widgets/hl-item-view',
     'app/views/widgets/dropdown'
-], function($, _, Backbone, Common, FileTree, ShareView, DirentMvcpDialog,
+], function($, _, Backbone, Common, FileTree, ShareView, DirentMvcpDialog, DirentSmartLinkDialog,
     FolderPermView, HLItemView, DropdownView) {
     'use strict';
 
@@ -94,7 +95,7 @@ define([
             'click .file-star': 'starFile',
             'click .dirent-name': 'visitDirent',
             'click .img-name-link': 'viewImageWithPopup',
-
+            'click .dirent-smart-link': 'getSmartLink',
             // mv by 'drag & drop'
             'dragstart': 'itemDragstart',
             'dragover': 'itemDragover',
@@ -116,6 +117,11 @@ define([
             'click .open-via-client': 'open_via_client'
         },
 
+        getSmartLink: function() {
+            new DirentSmartLinkDialog({dir: this.dir, attributes: this.model.attributes});
+            return false;
+        },
+
         _hideMenu: function() {
             this.dropdown.hide();
         },

static/scripts/common.js

@@ -140,6 +140,7 @@ define([
                 // Links
                 case 'send_shared_download_link': return siteRoot + 'share/link/send/';
                 case 'send_shared_upload_link': return siteRoot + 'share/upload_link/send/';
+                case 'smart_link': return siteRoot + 'api/v2.1/smart-link/';
 
                 // Group
                 case 'groups': return siteRoot + 'api/v2.1/groups/';