Deeplink to resource - fix #1275

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Ignore celery tasks results except for tasks which require it and lower the default results expiration to 6 hours [#1281](https://github.com/opendatateam/udata/pull/1281)
 - Import community resource avatar style from udata-gouvfr [#1288](https://github.com/opendatateam/udata/pull/1288)
 - Terms are now handled from markdown and customizable with the `SITE_TERMS_LOCATION` setting. [#1285](https://github.com/opendatateam/udata/pull/1285)
+- Deeplink to resource [#1289](https://github.com/opendatateam/udata/pull/1289)
 
 ## 1.2.3 (2017-10-27)
 

js/front/dataset/index.js

@@ -28,6 +28,8 @@ function parseUrl(url) {
     return a;
 }
 
+const RESOURCE_REGEX = /^#resource(-community)?-([0-9a-f-]{36})$/;
+
 new Vue({
     mixins: [FrontMixin],
     components: {
@@ -43,6 +45,11 @@ new Vue({
         this.loadCoverageMap();
         this.checkResources();
         this.fetchReuses();
+        if (document.location.hash) {
+            this.$nextTick(() => { // Wait for data to be binded
+                this.openResourceFromHash(document.location.hash);
+            });
+        }
         log.debug('Dataset display page ready');
     },
     methods: {
@@ -64,13 +71,16 @@ new Vue({
         /**
          * Display a resource or a community ressource in a modal
          */
-        showResource(id, e, isCommunity) {
-            // Ensure edit button work
-            if ([e.target, e.target.parentNode].some(el => el.classList.contains('btn-edit'))) return;
-            e.preventDefault();
+        showResource(id, isCommunity) {
             const attr = isCommunity ? 'communityResources' : 'resources';
             const resource = this.dataset[attr].find(resource => resource['@id'] === id);
-            this.$modal(ResourceModal, {resource});
+            const communityPrefix = isCommunity ? '-community' : '';
+            location.hash = `resource${communityPrefix}-${id}`;
+            const modal = this.$modal(ResourceModal, {resource});
+            modal.$on('modal:closed', () => {
+                // prevent scrolling to top
+                location.hash = '_';
+            });
         },
 
         /**
@@ -233,6 +243,18 @@ new Vue({
                 this._('New tag suggestion to improve metadata'),
                 this._('Hello,\n\nI propose this new tag: ')
             );
-        }
+        },
+
+        /**
+         * Open resource modal if corresponding hash in URL.
+         * /!\ there is a similar function in <discussion-threads> (jumpToHash),
+         * jump may come from there too.
+         */
+        openResourceFromHash(hash) {
+            if (RESOURCE_REGEX.test(hash)) {
+                const [, isCommunity, id] = hash.match(RESOURCE_REGEX);
+                this.showResource(id, isCommunity);
+            }
+        },
     }
 });

less/udata/resource.less

@@ -90,6 +90,12 @@
         }
     }
 
+    .list-group-item-link {
+        float: right;
+        margin-top: 5px;
+        margin-right: 5px;
+    }
+
     .format-label {
         width: 52px;
         height: 52px;

udata/templates/dataset/resource/list-item.html

@@ -1,12 +1,17 @@
 {% set resource_format = resource.format|trim|lower or 'data' %}
-<div id="resource-{{resource.id}}" class="list-group-item"
+<div id="resource{% if resource.from_community %}-community{% endif %}-{{resource.id}}" class="list-group-item"
     data-checkurl="{{ url_for('api.check_dataset_resource', dataset=dataset.id, rid=resource.id) }}"
-    @click="showResource('{{resource.id}}', $event, {{ resource.owner is defined|tojson }})">
+    @click.prevent="showResource('{{resource.id}}', {{ resource.owner is defined|tojson }})">
     <div class="format-label pull-left" v-tooltip tooltip-placement="left">
         <span class="ellipsis" data-format="{{ resource_format }}">
             {{ resource_format }}
         </span>
     </div>
+    <span class="list-group-item-link">
+        <a @click.stop href="#resource{% if resource.from_community %}-community{% endif %}-{{ resource.id }}">
+            <span class="fa fa-link"></span>
+        </a>
+    </span>
     <h4 class="list-group-item-heading ellipsis">
         <a href="{{resource.url}}">
             <span>{{ resource.title or _('Nameless resource') }}</span>
@@ -28,7 +33,7 @@ <h4 class="list-group-item-heading ellipsis">
             {% set edit_path = 'dataset/{id}/resource/{rid}' %}
         {% endif %}
         <div class="btn-group btn-group-xs tools">
-            <a class="btn btn-default btn-edit" v-tooltip title="{{ _('Edit') }}"
+            <a @click.stop class="btn btn-default btn-edit" v-tooltip title="{{ _('Edit') }}"
                 href="{{ url_for('admin.index', path=edit_path.format(id=dataset.id, rid=resource.id)) }}">
                 <span class="fa fa-pencil"></span>
             </a>