sparql

src/actions/index.js

@@ -14,6 +14,7 @@ import {
   SET_SECTION_TABS,
   GET_PARENT_FOLDER_DATA,
   GET_PAGE,
+  GET_SPARQL_DATA,
 } from '~/constants/ActionTypes';
 
 export function setSectionTabs(payload) {
@@ -43,3 +44,14 @@ export function getPage(url) {
     },
   };
 }
+
+export function getSparqlData(path) {
+  return {
+    type: GET_SPARQL_DATA,
+    path,
+    request: {
+      op: 'get',
+      path: `${path}/@sparql-data`,
+    },
+  };
+}

src/components/manage/Blocks/ArticlesSparql/Edit.jsx

@@ -0,0 +1,40 @@
+/**
+ * Edit map block.
+ * @module components/manage/Blocks/Maps/Edit
+ */
+import React, { useState } from 'react';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import { SidebarPortal } from '@plone/volto/components';
+import View from './View';
+import getSchema from './schema';
+
+const Edit = (props) => {
+  const [state, setState] = useState({
+    schema: getSchema(props),
+  });
+
+  const handleChangeBlock = (id, value) => {
+    const { data } = props;
+    props.onChangeBlock(props.block, {
+      ...data,
+      [id]: value,
+    });
+  };
+
+  return (
+    <div>
+      <SidebarPortal selected={props.selected}>
+        <InlineForm
+          schema={state.schema}
+          title={state.schema.title}
+          onChangeField={handleChangeBlock}
+          formData={props.data}
+          block={props.block}
+        />
+      </SidebarPortal>
+      <View {...props} mode="edit" />
+    </div>
+  );
+};
+
+export default Edit;

src/components/manage/Blocks/ArticlesSparql/View.jsx

@@ -0,0 +1,145 @@
+import React, { useState, useEffect } from 'react';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import { Link } from 'react-router-dom';
+import { getSparqlData } from '~/actions';
+import { Image } from 'semantic-ui-react';
+import moment from 'moment';
+import cx from 'classnames';
+import downSVG from '@plone/volto/icons/down.svg';
+import upSVG from '@plone/volto/icons/up.svg';
+import placeholderImage from './placeholder.png';
+import './style.css';
+
+const View = (props) => {
+  const [activeItem, setActiveItem] = useState(1);
+  const { page = '/', redirectPage = null, preview = false } = props.data || {};
+  const items = props.sparql_data[page]?.items || [];
+
+  useEffect(() => {
+    if (!props.sparql_data[page]) {
+      props.getSparqlData(page);
+    }
+    /* eslint-disable-next-line */
+  }, []);
+
+  const isVisible = (index) => {
+    if (!preview) return true;
+    if (activeItem === 0) {
+      return index < 3;
+    } else {
+      return Math.abs(index - activeItem) < 2;
+    }
+  };
+
+  return (
+    <div className="articles-sparql">
+      {props.mode === 'edit' && !props.data.page ? (
+        <p>Select SPARQL data from sidebar</p>
+      ) : (
+        ''
+      )}
+      {props.mode === 'edit' && props.data.page && !items.length ? (
+        <p>There is no SPARQL data</p>
+      ) : (
+        ''
+      )}
+      {items.length ? (
+        <div className="grid-layout articles">
+          {items.map((item, index) =>
+            isVisible(index) ? (
+              <div
+                className={cx(
+                  'row articles-row mb-1 sm-height-fit-content',
+                  index !== activeItem && preview ? 'can-be-half' : '',
+                )}
+                key={`sparql-row-${index}-${item.title}`}
+              >
+                <div className="column-4 sm-12 article hero pa-1">
+                  <Image src={item.image || placeholderImage} />
+                </div>
+                <div className="column-8 sm-12 article pa-1">
+                  <div className="article-header">
+                    <h3 className="mb-0">{item.title}</h3>
+                  </div>
+                  <div className="article-metadata  mb-1">
+                    <p className="info">
+                      {moment(item.time).format('DD MMM YYYY')}
+                    </p>
+                  </div>
+                  <div className="article-description mb-1">
+                    <p>{item.description}</p>
+                  </div>
+                  <div className="article-footer">
+                    <a
+                      className="outline dark-blue display-inline-block"
+                      href={item.resource}
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      READ ARTICLE
+                    </a>
+                  </div>
+                </div>
+              </div>
+            ) : (
+              ''
+            ),
+          )}
+        </div>
+      ) : (
+        ''
+      )}
+      {preview && redirectPage && items.length ? (
+        <Link
+          className="solid dark-blue articles-redirect"
+          as="a"
+          to={redirectPage}
+          title="READ MORE"
+        >
+          READ MORE
+        </Link>
+      ) : (
+        ''
+      )}
+      {/* {items.length > 2 ? (
+        <div className="articles-slideshow">
+          {activeItem > 1 ? (
+            <Icon
+              onClick={() => {
+                setActiveItem(activeItem - 1);
+              }}
+              name={upSVG}
+              size="24px"
+            />
+          ) : (
+            ''
+          )}
+          {activeItem < items.length - 1 ? (
+            <Icon
+              onClick={() => {
+                setActiveItem(activeItem + 1);
+              }}
+              name={downSVG}
+              size="24px"
+            />
+          ) : (
+            ''
+          )}
+        </div>
+      ) : (
+        ''
+      )} */}
+    </div>
+  );
+};
+
+export default compose(
+  connect(
+    (state, props) => ({
+      sparql_data: state.sparql.items,
+    }),
+    { getSparqlData },
+  ),
+)(View);

src/components/manage/Blocks/ArticlesSparql/schema.jsx

@@ -0,0 +1,33 @@
+export const getSchema = (props) => {
+  return {
+    title: 'Detailed Link',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['page', 'preview', 'redirectPage'],
+      },
+    ],
+
+    properties: {
+      page: {
+        title: 'Page',
+        widget: 'object_by_path',
+      },
+      preview: {
+        title: 'Preview',
+        type: 'boolean',
+      },
+      redirectPage: {
+        title: 'Redirect page',
+        widget: 'object_by_path',
+        description: 'Applies if preview is selected',
+      },
+    },
+
+    required: ['page'],
+  };
+};
+
+export default getSchema;

src/components/manage/Blocks/ArticlesSparql/style.css

@@ -0,0 +1,80 @@
+.articles-sparql {
+  position: relative;
+}
+
+.articles .articles-row {
+  align-items: center;
+  height: 250px;
+  justify-content: center;
+}
+
+.articles .article {
+  display: block;
+}
+
+.articles .articles-row.can-be-half:last-child  {
+  -webkit-mask-image: -webkit-gradient(linear, left top, 
+    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+}
+.articles .articles-row.can-be-half:last-child .article {
+  height: 50%;
+  overflow: hidden;
+  -webkit-mask-image: -webkit-gradient(linear, left top, 
+    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
+}
+
+.articles .article.hero img {
+  border-radius: 2em;
+}
+
+.articles .article-header,
+.articles .article-description {
+  display: block;
+  position: relative;
+}
+
+.articles .article-header h3 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  line-height: 1.5em;
+  max-height: 1.5em;
+}
+
+.articles .article-description p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-height: 1.5em;
+  max-height: 4.5em;
+}
+
+.articles-slideshow {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 50%;
+  right: 1em;
+  transform: translateY(-50%);
+}
+
+.articles-slideshow .icon {
+  cursor: pointer;
+}
+
+.articles-redirect {
+  position: absolute;
+  bottom: 7em;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+@media (min-width: 500px) and (max-width: 768px) {
+  .sm-height-fit-content {
+    height: fit-content !important;
+  }
+}

src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx

@@ -502,10 +502,6 @@ const OpenlayersMapView = (props) => {
                   callback: function () {},
                 },
               );
-            setTimeout(() => {
-              stateRef?.current?.map?.sitesSourceLayer &&
-                stateRef.current.map.sitesSourceLayer.getSource().refresh();
-            }, options.duration + 100);
           }
         })
         .catch((error) => {});
@@ -532,10 +528,6 @@ const OpenlayersMapView = (props) => {
               zoom: 15,
             });
           }
-          setTimeout(() => {
-            stateRef?.current?.map?.sitesSourceLayer &&
-              stateRef.current.map.sitesSourceLayer.getSource().refresh();
-          }, 1100);
         })
         .catch((error) => {});
     }
@@ -896,7 +888,7 @@ const OpenlayersMapView = (props) => {
         });
       }
 
-      map.once('postrender', function(event) {
+      map.once('postrender', function (event) {
         sitesSourceLayer.getSource().refresh();
       });