From 78155f83b8b8fbe72dab0a4d4f422f6406de019d Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Thu, 24 Dec 2020 17:11:51 +0100 Subject: [PATCH] added pathauto, refactored article to load gql directly from path, the vuejs route and drupal route can finally match, HALLELUYA git status --- .../sync/pathauto.pattern.blabla_article_.yml | 22 ++ config/sync/pathauto.settings.yml | 55 +++++ ...stem.action.pathauto_update_alias_node.yml | 16 ++ ...stem.action.pathauto_update_alias_user.yml | 16 ++ .../graphql/materio_extension.base.graphqls | 8 +- .../materio_extension.extension.graphqls | 4 + .../Plugin/GraphQL/Schema/MaterioSchema.php | 33 ++- .../MaterioSchemaExtension.php | 35 +++- .../custom/materiotheme/assets/dist/main.js | 4 +- .../assets/styles/base/_colors.scss | 6 +- .../vuejs/components/Content/ArticleCard.vue | 4 +- .../vuejs/components/Pages/Article.vue | 198 +++--------------- 12 files changed, 220 insertions(+), 181 deletions(-) create mode 100644 config/sync/pathauto.pattern.blabla_article_.yml create mode 100644 config/sync/pathauto.settings.yml create mode 100644 config/sync/system.action.pathauto_update_alias_node.yml create mode 100644 config/sync/system.action.pathauto_update_alias_user.yml diff --git a/config/sync/pathauto.pattern.blabla_article_.yml b/config/sync/pathauto.pattern.blabla_article_.yml new file mode 100644 index 0000000..b583a2e --- /dev/null +++ b/config/sync/pathauto.pattern.blabla_article_.yml @@ -0,0 +1,22 @@ +uuid: 5fdb800c-8953-42ec-b3c3-a1bdd8ff2817 +langcode: en +status: true +dependencies: + module: + - node +id: blabla_article_ +label: 'blabla/article ' +type: 'canonical_entities:node' +pattern: 'blabla/[node:title]' +selection_criteria: + d0ad31d5-4ed3-40f7-84ed-297271c60fc7: + id: node_type + bundles: + article: article + negate: false + context_mapping: + node: node + uuid: d0ad31d5-4ed3-40f7-84ed-297271c60fc7 +selection_logic: and +weight: -5 +relationships: { } diff --git a/config/sync/pathauto.settings.yml b/config/sync/pathauto.settings.yml new file mode 100644 index 0000000..4303c7c --- /dev/null +++ b/config/sync/pathauto.settings.yml @@ -0,0 +1,55 @@ +enabled_entity_types: + - user +punctuation: + double_quotes: 0 + quotes: 0 + backtick: 0 + comma: 0 + period: 0 + hyphen: 1 + underscore: 0 + colon: 0 + semicolon: 0 + pipe: 0 + left_curly: 0 + left_square: 0 + right_curly: 0 + right_square: 0 + plus: 0 + equal: 0 + asterisk: 0 + ampersand: 0 + percent: 0 + caret: 0 + dollar: 0 + hash: 0 + at: 0 + exclamation: 0 + tilde: 0 + left_parenthesis: 0 + right_parenthesis: 0 + question_mark: 0 + less_than: 0 + greater_than: 0 + slash: 0 + back_slash: 0 +verbose: true +separator: '-' +max_length: 100 +max_component_length: 100 +transliterate: true +reduce_ascii: false +case: true +ignore_words: 'a, an, as, at, before, but, by, for, from, is, in, into, like, of, off, on, onto, per, since, than, the, this, that, to, up, via, with' +update_action: 2 +langcode: fr +safe_tokens: + - alias + - alias + - path + - join-path + - login-url + - url + - url-brief +_core: + default_config_hash: QDedIRjSYDH1ZiuQZ1LIkF9_wOwsokd_Cidr-mXA25E diff --git a/config/sync/system.action.pathauto_update_alias_node.yml b/config/sync/system.action.pathauto_update_alias_node.yml new file mode 100644 index 0000000..88402a8 --- /dev/null +++ b/config/sync/system.action.pathauto_update_alias_node.yml @@ -0,0 +1,16 @@ +uuid: 455dc6bb-c7a5-4e86-83e7-2bd8bc7619b4 +langcode: en +status: true +dependencies: + enforced: + module: + - node + module: + - pathauto +_core: + default_config_hash: lno8QThS348UX-kaUsagJtCnuPHKLXYnTQiF_9HSDWA +id: pathauto_update_alias_node +label: 'Update URL alias' +type: node +plugin: pathauto_update_alias +configuration: { } diff --git a/config/sync/system.action.pathauto_update_alias_user.yml b/config/sync/system.action.pathauto_update_alias_user.yml new file mode 100644 index 0000000..f478bf7 --- /dev/null +++ b/config/sync/system.action.pathauto_update_alias_user.yml @@ -0,0 +1,16 @@ +uuid: 8ead36aa-aaf2-4a9f-a87f-addc4992695d +langcode: en +status: true +dependencies: + enforced: + module: + - user + module: + - pathauto +_core: + default_config_hash: x_ok_ZsfA4Xk4B_hVW3O4-3PcNoK57nXLz_Dlletidg +id: pathauto_update_alias_user +label: 'Update URL alias' +type: user +plugin: pathauto_update_alias +configuration: { } diff --git a/web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls b/web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls index b8f148e..6a614e9 100644 --- a/web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls +++ b/web/modules/custom/materio_graphql/graphql/materio_extension.base.graphqls @@ -1,6 +1,10 @@ scalar Violation -type Materiau { +interface NodeInterface { + id: Int! +} + +type Materiau implements NodeInterface { id: Int! uuid: String! title: String! @@ -23,7 +27,7 @@ type Materiau { samples: [Sample] } -type Article { +type Article implements NodeInterface { id: Int! uuid: String! title: String! diff --git a/web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls b/web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls index 4cc081d..d07a655 100644 --- a/web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls +++ b/web/modules/custom/materio_graphql/graphql/materio_extension.extension.graphqls @@ -1,3 +1,7 @@ +extend type Query { + route(path: String!): NodeInterface +} + extend type Query { materiau(id: Int!): Materiau } diff --git a/web/modules/custom/materio_graphql/src/Plugin/GraphQL/Schema/MaterioSchema.php b/web/modules/custom/materio_graphql/src/Plugin/GraphQL/Schema/MaterioSchema.php index 3e89ff3..ad3a9cb 100644 --- a/web/modules/custom/materio_graphql/src/Plugin/GraphQL/Schema/MaterioSchema.php +++ b/web/modules/custom/materio_graphql/src/Plugin/GraphQL/Schema/MaterioSchema.php @@ -3,7 +3,10 @@ namespace Drupal\materio_graphql\Plugin\GraphQL\Schema; use Drupal\graphql\Plugin\GraphQL\Schema\ComposableSchema; - +use Drupal\graphql\GraphQL\ResolverBuilder; +use Drupal\graphql\GraphQL\ResolverRegistry; +// use Drupal\graphql\Plugin\GraphQL\Schema\SdlSchemaPluginBase; +use GraphQL\Error\Error; /** * @Schema( * id = "materio", @@ -13,4 +16,32 @@ use Drupal\graphql\Plugin\GraphQL\Schema\ComposableSchema; */ class MaterioSchema extends ComposableSchema { + // /** + // * {@inheritdoc} + // */ + // public function getResolverRegistry() { + // $builder = new ResolverBuilder(); + // $registry = new ResolverRegistry(); + // + // // Tell GraphQL how to resolve types of a common interface. + // $registry->addTypeResolver('NodeInterface', function ($value) { + // if ($value instanceof NodeInterface) { + // switch ($value->bundle()) { + // case 'article': return 'Article'; + // case 'materiau': return 'Materiau'; + // } + // } + // throw new Error('Could not resolve content type.'); + // }); + // + // $registry->addFieldResolver('Query', 'route', $builder->compose( + // $builder->produce('route_load') + // ->map('path', $builder->fromArgument('path')), + // $builder->produce('route_entity') + // ->map('url', $builder->fromParent()) + // )); + // + // return $registry; + // } + } diff --git a/web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php b/web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php index 661bd77..262e68b 100644 --- a/web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php +++ b/web/modules/custom/materio_graphql/src/Plugin/GraphQL/SchemaExtension/MaterioSchemaExtension.php @@ -8,6 +8,9 @@ use Drupal\graphql\GraphQL\Response\ResponseInterface; use Drupal\graphql\Plugin\GraphQL\SchemaExtension\SdlSchemaExtensionPluginBase; use Drupal\materio_graphql\GraphQL\Response\MaterioResponse; use Drupal\Core\Url; + +use GraphQL\Error\Error; + /** * @SchemaExtension( * id = "materio_extension", @@ -24,6 +27,30 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase { public function registerResolvers(ResolverRegistryInterface $registry) { $builder = new ResolverBuilder(); + // Tell GraphQL how to resolve types of a common interface. + $registry->addTypeResolver('NodeInterface', function ($value) { + + $path = explode('\\', get_class($value)); + $class = array_pop($path); + + if ($class === 'Node') { + switch ($value->bundle()) { + case 'article': return 'Article'; + case 'materiau': return 'Materiau'; + } + } + throw new Error('Could not resolve content type.'); + }); + + $registry->addFieldResolver('Query', 'route', + $builder->compose( + $builder->produce('route_load') + ->map('path', $builder->fromArgument('path')), + $builder->produce('route_entity') + ->map('url', $builder->fromParent()) + )); + + $this->addMateriau($registry, $builder); $this->addSearchResult($registry, $builder); @@ -577,12 +604,12 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase { protected function addLink(ResolverRegistryInterface $registry, ResolverBuilder $builder) { $registry->addFieldResolver('Link', 'url', $builder->callback(function ($parent, $args) { - return $parent[0]['uri']; + return isset($parent[0]) ? $parent[0]['uri'] : null; }) ); $registry->addFieldResolver('Link', 'title', $builder->callback(function ($parent, $args) { - return $parent[0]['title']; + return isset($parent[0]) ? $parent[0]['title'] : null; }) ); } @@ -594,12 +621,12 @@ class MaterioSchemaExtension extends SdlSchemaExtensionPluginBase { protected function addDate(ResolverRegistryInterface $registry, ResolverBuilder $builder) { $registry->addFieldResolver('Date', 'start', $builder->callback(function ($parent, $args) { - return $parent[0]['value']; + return isset($parent[0]) ? $parent[0]['value'] : null; }) ); $registry->addFieldResolver('Date', 'end', $builder->callback(function ($parent, $args) { - return $parent[0]['end_value']; + return isset($parent[0]) ? $parent[0]['end_value'] : null; }) ); } diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js index 9b324c1..1e2c298 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.js +++ b/web/themes/custom/materiotheme/assets/dist/main.js @@ -905,7 +905,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n})); /***/ ((__unused_webpack_module, exports, __webpack_require__) => { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n// import { JSONAPI } from 'vuejs/api/json-axios'\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar _default = {\n name: \"ArticleCard\",\n router: _route.default,\n props: ['item'],\n data: function data() {\n return {\n alias: this.item.view_node.replace(/^.?\\/blabla\\//g, '')\n };\n },\n methods: {\n onclick: function onclick() {\n console.log('clicked on article', this.alias);\n this.$router.push({\n name: \"article\",\n params: {\n alias: this.alias\n },\n query: {\n nid: this.item.nid\n } // meta: { uuid:this.item.uuid },\n\n });\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n// import { JSONAPI } from 'vuejs/api/json-axios'\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar _default = {\n name: \"ArticleCard\",\n router: _route.default,\n props: ['item'],\n data: function data() {\n return {\n alias: this.item.view_node.replace(/^.?\\/blabla\\//g, '')\n };\n },\n methods: {\n onclick: function onclick() {\n console.log('clicked on article', this.alias);\n this.$router.push({\n name: \"article\",\n params: {\n alias: this.alias\n } // query: { nid: this.item.nid }\n // meta: { uuid:this.item.uuid },\n\n });\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), @@ -1129,7 +1129,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n})); /***/ ((__unused_webpack_module, exports, __webpack_require__) => { "use strict"; -eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _store = _interopRequireDefault(__webpack_require__(/*! vuejs/store */ \"./web/themes/custom/materiotheme/vuejs/store/index.js\"));\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _graphqlAxios = __webpack_require__(/*! vuejs/api/graphql-axios */ \"./web/themes/custom/materiotheme/vuejs/api/graphql-axios.js\");\n\nvar _printer = __webpack_require__(/*! graphql/language/printer */ \"./node_modules/graphql/language/printer.js\");\n\nvar _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ \"./node_modules/graphql-tag/src/index.js\"));\n\nvar _articleFragment = _interopRequireDefault(__webpack_require__(/*! vuejs/api/gql/article.fragment.gql */ \"./web/themes/custom/materiotheme/vuejs/api/gql/article.fragment.gql\"));\n\nvar _Card = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Card */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === \"undefined\" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \"number\") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }\n\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === \"string\") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === \"Object\" && o.constructor) n = o.constructor.name; if (n === \"Map\" || n === \"Set\") return Array.from(o); if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\n\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }\n\nfunction _wrapRegExp(re, groups) { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, undefined, groups); }; var _RegExp = _wrapNativeSuper(RegExp); var _super = RegExp.prototype; var _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = _RegExp.call(this, re, flags); _groups.set(_this, groups || _groups.get(re)); return _this; } _inherits(BabelRegExp, _RegExp); BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) result.groups = buildGroups(result, this); return result; }; BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if (typeof substitution === \"string\") { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\\$<([^>]+)>/g, function (_, name) { return \"$\" + groups[name]; })); } else if (typeof substitution === \"function\") { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = []; args.push.apply(args, arguments); if (_typeof(args[args.length - 1]) !== \"object\") { args.push(buildGroups(args, _this)); } return substitution.apply(this, args); }); } else { return _super[Symbol.replace].call(this, str, substitution); } }; function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { groups[name] = result[g[name]]; return groups; }, Object.create(null)); } return _wrapRegExp.apply(this, arguments); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _wrapNativeSuper(Class) { var _cache = typeof Map === \"function\" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== \"function\") { throw new TypeError(\"Super expression must either be null or a function\"); } if (typeof _cache !== \"undefined\") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }\n\nfunction _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _isNativeFunction(fn) { return Function.toString.call(fn).indexOf(\"[native code]\") !== -1; }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"{\\n article(id: \", \") {\\n ...ArticleFields\\n }\\n }\\n \", \"\\n \"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n name: \"Article\",\n router: _route.default,\n store: _store.default,\n props: ['item'],\n data: function data() {\n return {\n index: -1,\n prevnext: {},\n uuid: null,\n article: null,\n image_accroche: null,\n lightbox_items: null,\n loading: true,\n lightbox_index: null\n };\n },\n computed: _objectSpread({}, (0, _vuex.mapState)({\n items: function items(state) {\n return state.Blabla.items;\n }\n })),\n created: function created() {\n this.getArticle();\n },\n methods: _objectSpread(_objectSpread({}, (0, _vuex.mapActions)({\n getItems: 'Blabla/getItems',\n getItemIndex: 'Blabla/getItemIndex',\n getPrevNextItems: 'Blabla/getPrevNextItems'\n })), {}, {\n getArticle: function getArticle() {\n var _this = this;\n\n console.log(this.$route); // get the article uuid\n\n if (this.$route.query.nid) {\n // we come from internal link with vuejs\n // directly record uuid\n this.nid = this.$route.query.nid;\n } else if (drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article') {\n // we landed in an internal page\n // get the uuid from drupalDeclouped, provided by materio_decoupled.module\n this.nid = drupalDecoupled.entity_id;\n }\n\n if (this.nid) {\n this.loadArticle(); // get the prev next items\n\n if (!this.items.length) {\n // if items list not yet loaded preload them\n this.getItems().then(function () {\n // then get the index\n _this.getIndex();\n });\n } else {\n // or directly get the index\n this.getIndex();\n }\n } else {\n // if for any reason we dont have the uuid\n // redirect to home\n this.$route.replace('home');\n }\n },\n getIndex: function getIndex() {\n var _this2 = this;\n\n console.log(\"Article getIndex\");\n this.getItemIndex(this.nid).then(function (index) {\n _this2.index = index; // console.log('article index', index, this);\n\n _this2.getPrevNextItems(index).then(function (pn) {\n _this2.prevnext = pn;\n });\n });\n },\n loadArticle: function loadArticle() {\n var _this3 = this;\n\n console.log('loadArticle', this.nid);\n this.loading = true; // let params = {\n // include:'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid'\n // }\n // let q = qs.stringify(params)\n // JSONAPI.get(`node/article/${this.uuid}?${q}`)\n // .then(({ data }) => {\n // console.log('loadArticle data', data)\n // this.parseDataJSONAPI(data)\n // })\n // .catch(( error ) => {\n // console.warn('Issue with loadArticle', error)\n // Promise.reject(error)\n // })\n\n var ast = (0, _graphqlTag.default)(_templateObject(), this.nid, _articleFragment.default);\n\n _graphqlAxios.MGQ.post('', {\n query: (0, _printer.print)(ast)\n }).then(function (_ref) {\n var article = _ref.data.data.article;\n console.log('loadArticle', article);\n\n _this3.parseDataGQL(article);\n }).catch(function (error) {\n console.warn('Issue with loadArticle', error);\n Promise.reject(error);\n });\n },\n parseDataGQL: function parseDataGQL(article) {\n console.log('parseDataGQL article', article);\n this.article = article;\n this.image_accroche = article.images[0];\n this.lightbox_items = []; // fill the lightbox\n\n for (var i = 0; i < article.images.length; i++) {\n article.images[i].thumb = article.images[i].style_articlecardmedium.url;\n this.lightbox_items.push(article.images[i]);\n } // parse embeded videos pushing it in lightbox\n\n\n for (var i = 0; i < article.videos.length; i++) {\n var videoUrl = article.videos[i].url;\n\n var provider_regex = /*#__PURE__*/_wrapRegExp(/https:\\/\\/(www\\.)?(youtube|vimeo)\\.com\\/.+/, {\n provider: 2\n });\n\n var match = provider_regex.exec(videoUrl); // console.log('provider', match.groups.provider);\n\n var video_id = null;\n var video_thumb = null;\n\n switch (match.groups.provider) {\n case 'vimeo':\n var vimeo_regex = /*#__PURE__*/_wrapRegExp(/https:\\/\\/vimeo\\.com\\/([0-9]+)/, {\n id: 1\n });\n\n video_id = vimeo_regex.exec(videoUrl).groups.id || null; // TODO: get the vimeo thumb https://coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video\n\n video_thumb = \"http://blogpeda.ac-poitiers.fr/ent-lyc/files/2015/06/Vimeo_icon_block.png\";\n break;\n\n case 'youtube':\n var youtube_regex = /*#__PURE__*/_wrapRegExp(/https:\\/\\/(www\\.)?youtube\\.com\\/watch\\?v=(.+)/, {\n id: 2\n });\n\n video_id = youtube_regex.exec(videoUrl).groups.id || null;\n video_thumb = \"http://img.youtube.com/vi/\" + video_id + \"/0.jpg\";\n break;\n } // console.log('video_id', video_id);\n\n\n this.lightbox_items.push({\n url: videoUrl,\n title: \"\",\n description: \"\",\n thumb: video_thumb\n });\n }\n\n console.log('this.content.lightbox_items', this.lightbox_items); // update main page title\n\n this.$store.commit('Common/setPagetitle', article.title);\n this.loading = false;\n },\n parseDataJSONAPI: function parseDataJSONAPI(data) {\n var _this4 = this;\n\n var attrs = data.data.attributes;\n var relations = data.data.relationships;\n console.log('relations', relations);\n var inc = data.included;\n console.log('included', inc);\n this.content = {\n title: attrs.title,\n body: attrs.body.value\n }; // build lightbox array\n // will be filled by videos and field_visuel\n\n this.content.lightbox_items = []; // parse embeded videos pushing it in lightbox\n\n for (var key in attrs.field_video) {\n var videolink = attrs.field_video[key]; // console.log('videolink', videolink);\n\n var provider_regex = /*#__PURE__*/_wrapRegExp(/https:\\/\\/(www\\.)?(youtube|vimeo)\\.com\\/.+/, {\n provider: 2\n });\n\n var match = provider_regex.exec(videolink); // console.log('provider', match.groups.provider);\n\n var video_id = null;\n var video_thumb = null;\n\n switch (match.groups.provider) {\n case 'vimeo':\n var vimeo_regex = /*#__PURE__*/_wrapRegExp(/https:\\/\\/vimeo\\.com\\/([0-9]+)/, {\n id: 1\n });\n\n video_id = vimeo_regex.exec(videolink).groups.id || null; // TODO: get the vimeo thumb https://coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video\n\n video_thumb = \"http://blogpeda.ac-poitiers.fr/ent-lyc/files/2015/06/Vimeo_icon_block.png\";\n break;\n\n case 'youtube':\n var youtube_regex = /*#__PURE__*/_wrapRegExp(/https:\\/\\/(www\\.)?youtube\\.com\\/watch\\?v=(.+)/, {\n id: 2\n });\n\n video_id = youtube_regex.exec(videolink).groups.id || null;\n video_thumb = \"http://img.youtube.com/vi/\" + video_id + \"/0.jpg\";\n break;\n } // console.log('video_id', video_id);\n\n\n this.content.lightbox_items.push({\n src: videolink,\n title: \"\",\n description: \"\",\n thumb: video_thumb\n }); // this.content.videos.push({\n // provider: match.groups.provider,\n // id: video_id,\n // href: videolink\n // });\n } // parse all relationships\n\n\n var _loop = function _loop(_key) {\n // skip loop if the property is from prototype\n if (!relations.hasOwnProperty(_key)) return \"continue\";\n var relation_obj = relations[_key];\n console.log(\"relation\", _key, relation_obj); // console.log('typeof relation_obj.data', typeof relation_obj.data);\n\n if (!relation_obj.data) return \"continue\"; // showroom is unique field so no array in data\n // we parse it here\n\n switch (_key) {\n case 'field_showroom':\n var included = inc.find(function (i) {\n return i.id == relation_obj.data.id;\n }); // console.log('included',included);\n\n _this4.content[_key] = included.attributes;\n break;\n } // skip relation_obj if data is not array\n\n\n if (!Array.isArray(relation_obj.data)) return \"continue\"; // create empty field array\n\n _this4.content[_key] = []; // parse relationship values using included\n\n var field = {}; // loop through all relation items\n\n relation_obj.data.forEach(function (e) {\n // get the included values for each item using id\n var included = inc.find(function (i) {\n return i.id == e.id;\n }); // if we not found an included item skip the item\n\n if (typeof included != 'undefined') {\n // fill the item values\n switch (_key) {\n case 'field_visuel':\n // build the field object (not used for now)\n field = e.meta;\n field.id = e.id;\n field.src = included.attributes.uri.url;\n field.thumb = included.links.article_card_medium.href;\n break;\n\n case 'field_linked_materials':\n field = included.attributes;\n field.id = field.uuid = included.id; // get the linked material included images\n\n field.images = [];\n included.relationships.images.data.forEach(function (img) {\n // console.log('href', img.meta.imageDerivatives.links.card_medium.href);\n if (img.meta.imageDerivatives) {\n field.images.push({\n title: img.meta.title,\n src: img.meta.imageDerivatives.links.hd.href,\n img_styles: {\n card_medium: img.meta.imageDerivatives.links.card_medium.href,\n card_full: img.meta.imageDerivatives.links.card_full.href\n }\n });\n }\n });\n break;\n\n case 'field_thesaurus':\n case 'field_tags':\n field = included.attributes;\n field.id = included.id;\n break;\n\n default:\n }\n\n _this4.content[_key].push(field);\n }\n });\n };\n\n for (var _key in relations) {\n var _ret = _loop(_key);\n\n if (_ret === \"continue\") continue;\n } // extract first visuel as accroche\n\n\n this.content.image_accroche = this.content.field_visuel.shift(); // fill the lightbox\n\n var _iterator = _createForOfIteratorHelper(this.content.field_visuel),\n _step;\n\n try {\n for (_iterator.s(); !(_step = _iterator.n()).done;) {\n var visuel = _step.value;\n this.content.lightbox_items.push(visuel);\n }\n } catch (err) {\n _iterator.e(err);\n } finally {\n _iterator.f();\n }\n\n console.log('this.content.lightbox_items', this.content.lightbox_items); // update main page title\n\n this.$store.commit('Common/setPagetitle', this.content.title);\n this.loading = false;\n console.log('article.content', this.content);\n },\n onNext: function onNext() {\n // console.log('clicked on next', this.prevnext.next);\n var alias = this.prevnext.next.view_node.replace(/^.?\\/blabla\\//g, '');\n this.$router.push({\n name: \"article\",\n params: {\n alias: alias\n },\n query: {\n uuid: this.prevnext.next.uuid\n }\n });\n },\n onPrev: function onPrev() {\n // console.log('clicked on prev', this.prevnext.next);\n var alias = this.prevnext.prev.view_node.replace(/^.?\\/blabla\\//g, '');\n this.$router.push({\n name: \"article\",\n params: {\n alias: alias\n },\n query: {\n uuid: this.prevnext.prev.uuid\n }\n });\n },\n setLightboxIndex: function setLightboxIndex(index) {\n this.lightbox_index = index;\n }\n }),\n components: {\n Card: _Card.default\n },\n watch: {\n '$route': function $route(to, from) {\n console.log('route change');\n this.getArticle();\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); +eval("\n\nfunction _typeof(obj) { \"@babel/helpers - typeof\"; if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nObject.defineProperty(exports, \"__esModule\", ({\n value: true\n}));\nexports.default = void 0;\n\nvar _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nvar _store = _interopRequireDefault(__webpack_require__(/*! vuejs/store */ \"./web/themes/custom/materiotheme/vuejs/store/index.js\"));\n\nvar _restAxios = __webpack_require__(/*! vuejs/api/rest-axios */ \"./web/themes/custom/materiotheme/vuejs/api/rest-axios.js\");\n\nvar _graphqlAxios = __webpack_require__(/*! vuejs/api/graphql-axios */ \"./web/themes/custom/materiotheme/vuejs/api/graphql-axios.js\");\n\nvar _printer = __webpack_require__(/*! graphql/language/printer */ \"./node_modules/graphql/language/printer.js\");\n\nvar _graphqlTag = _interopRequireDefault(__webpack_require__(/*! graphql-tag */ \"./node_modules/graphql-tag/src/index.js\"));\n\nvar _articleFragment = _interopRequireDefault(__webpack_require__(/*! vuejs/api/gql/article.fragment.gql */ \"./web/themes/custom/materiotheme/vuejs/api/gql/article.fragment.gql\"));\n\nvar _Card = _interopRequireDefault(__webpack_require__(/*! vuejs/components/Content/Card */ \"./web/themes/custom/materiotheme/vuejs/components/Content/Card.vue\"));\n\nvar _vuex = __webpack_require__(/*! vuex */ \"./node_modules/vuex/dist/vuex.common.js\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _wrapRegExp(re, groups) { _wrapRegExp = function _wrapRegExp(re, groups) { return new BabelRegExp(re, undefined, groups); }; var _RegExp = _wrapNativeSuper(RegExp); var _super = RegExp.prototype; var _groups = new WeakMap(); function BabelRegExp(re, flags, groups) { var _this = _RegExp.call(this, re, flags); _groups.set(_this, groups || _groups.get(re)); return _this; } _inherits(BabelRegExp, _RegExp); BabelRegExp.prototype.exec = function (str) { var result = _super.exec.call(this, str); if (result) result.groups = buildGroups(result, this); return result; }; BabelRegExp.prototype[Symbol.replace] = function (str, substitution) { if (typeof substitution === \"string\") { var groups = _groups.get(this); return _super[Symbol.replace].call(this, str, substitution.replace(/\\$<([^>]+)>/g, function (_, name) { return \"$\" + groups[name]; })); } else if (typeof substitution === \"function\") { var _this = this; return _super[Symbol.replace].call(this, str, function () { var args = []; args.push.apply(args, arguments); if (_typeof(args[args.length - 1]) !== \"object\") { args.push(buildGroups(args, _this)); } return substitution.apply(this, args); }); } else { return _super[Symbol.replace].call(this, str, substitution); } }; function buildGroups(result, re) { var g = _groups.get(re); return Object.keys(g).reduce(function (groups, name) { groups[name] = result[g[name]]; return groups; }, Object.create(null)); } return _wrapRegExp.apply(this, arguments); }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function\"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }\n\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) { return call; } return _assertThisInitialized(self); }\n\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return self; }\n\nfunction _wrapNativeSuper(Class) { var _cache = typeof Map === \"function\" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== \"function\") { throw new TypeError(\"Super expression must either be null or a function\"); } if (typeof _cache !== \"undefined\") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }\n\nfunction _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); }\n\nfunction _isNativeReflectConstruct() { if (typeof Reflect === \"undefined\" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === \"function\") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }\n\nfunction _isNativeFunction(fn) { return Function.toString.call(fn).indexOf(\"[native code]\") !== -1; }\n\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\n\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\n\nfunction _templateObject() {\n var data = _taggedTemplateLiteral([\"{\\n route(path: \\\"\", \"\\\") {\\n ...ArticleFields\\n }\\n }\\n \", \"\\n \"]);\n\n _templateObject = function _templateObject() {\n return data;\n };\n\n return data;\n}\n\nfunction _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nvar _default = {\n name: \"Article\",\n router: _route.default,\n store: _store.default,\n props: ['item'],\n data: function data() {\n return {\n index: -1,\n prevnext: {},\n nid: null,\n path: null,\n article: null,\n image_accroche: null,\n lightbox_items: null,\n loading: true,\n lightbox_index: null\n };\n },\n computed: _objectSpread({}, (0, _vuex.mapState)({\n items: function items(state) {\n return state.Blabla.items;\n }\n })),\n created: function created() {\n this.getArticle();\n },\n methods: _objectSpread(_objectSpread({}, (0, _vuex.mapActions)({\n getItems: 'Blabla/getItems',\n getItemIndex: 'Blabla/getItemIndex',\n getPrevNextItems: 'Blabla/getPrevNextItems'\n })), {}, {\n getArticle: function getArticle() {\n var _this = this;\n\n console.log(this.$route); // get the article uuid\n // if(this.$route.query.nid){\n // // we come from internal link with vuejs\n // // directly record uuid\n // this.nid = this.$route.query.nid\n //\n // }else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){\n // // we landed in an internal page\n // // get the uuid from drupalDeclouped, provided by materio_decoupled.module\n // this.nid = drupalDecoupled.entity_id\n // }\n\n if (this.$route.path) {\n // we come from internal link with vuejs\n this.path = this.$route.path;\n } else {\n // we landed in an internal page\n this.path = window.location.pathname;\n }\n\n if (this.path) {\n this.loadArticle(); // get the prev next items\n\n if (!this.items.length) {\n // if items list not yet loaded preload them\n this.getItems().then(function () {\n // then get the index\n _this.getIndex();\n });\n } else {\n // or directly get the index\n this.getIndex();\n }\n } else {\n // if for any reason we dont have the uuid\n // redirect to home\n this.$route.replace('home');\n }\n },\n getIndex: function getIndex() {\n var _this2 = this;\n\n console.log(\"Article getIndex\");\n this.getItemIndex(this.nid).then(function (index) {\n _this2.index = index; // console.log('article index', index, this);\n\n _this2.getPrevNextItems(index).then(function (pn) {\n _this2.prevnext = pn;\n });\n });\n },\n loadArticle: function loadArticle() {\n var _this3 = this;\n\n console.log('loadArticle');\n this.loading = true; // let ast = gql`{\n // article(id: ${this.nid}) {\n // ...ArticleFields\n // }\n // }\n // ${ articleFields }\n // `\n\n var ast = (0, _graphqlTag.default)(_templateObject(), this.path, _articleFragment.default);\n\n _graphqlAxios.MGQ.post('', {\n query: (0, _printer.print)(ast)\n }).then(function (_ref) {\n var route = _ref.data.data.route;\n console.log('loadArticle', route);\n\n _this3.parseDataGQL(route);\n }).catch(function (error) {\n console.warn('Issue with loadArticle', error);\n Promise.reject(error);\n });\n },\n parseDataGQL: function parseDataGQL(article) {\n console.log('parseDataGQL article', article);\n this.article = article;\n this.image_accroche = article.images[0];\n this.lightbox_items = []; // fill the lightbox\n\n for (var i = 0; i < article.images.length; i++) {\n article.images[i].thumb = article.images[i].style_articlecardmedium.url;\n this.lightbox_items.push(article.images[i]);\n } // parse embeded videos pushing it in lightbox\n\n\n for (var i = 0; i < article.videos.length; i++) {\n var videoUrl = article.videos[i].url;\n\n var provider_regex = /*#__PURE__*/_wrapRegExp(/https:\\/\\/(www\\.)?(youtube|vimeo)\\.com\\/.+/, {\n provider: 2\n });\n\n var match = provider_regex.exec(videoUrl); // console.log('provider', match.groups.provider);\n\n var video_id = null;\n var video_thumb = null;\n\n switch (match.groups.provider) {\n case 'vimeo':\n var vimeo_regex = /*#__PURE__*/_wrapRegExp(/https:\\/\\/vimeo\\.com\\/([0-9]+)/, {\n id: 1\n });\n\n video_id = vimeo_regex.exec(videoUrl).groups.id || null; // TODO: get the vimeo thumb https://coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video\n\n video_thumb = \"http://blogpeda.ac-poitiers.fr/ent-lyc/files/2015/06/Vimeo_icon_block.png\";\n break;\n\n case 'youtube':\n var youtube_regex = /*#__PURE__*/_wrapRegExp(/https:\\/\\/(www\\.)?youtube\\.com\\/watch\\?v=(.+)/, {\n id: 2\n });\n\n video_id = youtube_regex.exec(videoUrl).groups.id || null;\n video_thumb = \"http://img.youtube.com/vi/\" + video_id + \"/0.jpg\";\n break;\n } // console.log('video_id', video_id);\n\n\n this.lightbox_items.push({\n url: videoUrl,\n title: \"\",\n description: \"\",\n thumb: video_thumb\n });\n }\n\n console.log('this.content.lightbox_items', this.lightbox_items); // update main page title\n\n this.$store.commit('Common/setPagetitle', article.title);\n this.loading = false;\n },\n onNext: function onNext() {\n // console.log('clicked on next', this.prevnext.next);\n var alias = this.prevnext.next.view_node.replace(/^.?\\/blabla\\//g, '');\n this.$router.push({\n name: \"article\",\n params: {\n alias: alias\n },\n query: {\n uuid: this.prevnext.next.uuid\n }\n });\n },\n onPrev: function onPrev() {\n // console.log('clicked on prev', this.prevnext.next);\n var alias = this.prevnext.prev.view_node.replace(/^.?\\/blabla\\//g, '');\n this.$router.push({\n name: \"article\",\n params: {\n alias: alias\n },\n query: {\n uuid: this.prevnext.prev.uuid\n }\n });\n },\n setLightboxIndex: function setLightboxIndex(index) {\n this.lightbox_index = index;\n }\n }),\n components: {\n Card: _Card.default\n },\n watch: {\n '$route': function $route(to, from) {\n console.log('route change');\n this.getArticle();\n }\n }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options"); /***/ }), diff --git a/web/themes/custom/materiotheme/assets/styles/base/_colors.scss b/web/themes/custom/materiotheme/assets/styles/base/_colors.scss index fc64c0e..6ef4e6c 100644 --- a/web/themes/custom/materiotheme/assets/styles/base/_colors.scss +++ b/web/themes/custom/materiotheme/assets/styles/base/_colors.scss @@ -1,10 +1,10 @@ $transparent-bg: rgba(255,255,255, 0.95); $transparent-bg-blk: rgba(0,0,0, 0.75); -$alpha: 0.90; $color-base:#69cdcf; -$color-base-transparent: change-color($color-base, $alpha: $alpha); $color-showrooms:#50aa3c; -$color-showrooms-transparent: change-color($color-showrooms, $alpha: $alpha); $color-blabla:#9458aa; +$alpha: 0.90; +$color-base-transparent: change-color($color-base, $alpha: $alpha); +$color-showrooms-transparent: change-color($color-showrooms, $alpha: $alpha); $color-blabla-transparent: change-color($color-blabla, $alpha: $alpha); diff --git a/web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue b/web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue index a5b55c1..b014666 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue @@ -37,8 +37,8 @@ export default { console.log('clicked on article', this.alias); this.$router.push({ name:`article`, - params: { alias:this.alias }, - query: { nid: this.item.nid } + params: { alias:this.alias } + // query: { nid: this.item.nid } // meta: { uuid:this.item.uuid }, }) } diff --git a/web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue b/web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue index 8c048ab..e1b66f9 100644 --- a/web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue +++ b/web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue @@ -140,7 +140,8 @@ export default { return { index:-1, prevnext:{}, - uuid:null, + nid:null, + path: null, article:null, image_accroche: null, lightbox_items: null, @@ -165,17 +166,26 @@ export default { getArticle(){ console.log(this.$route); // get the article uuid - if(this.$route.query.nid){ + // if(this.$route.query.nid){ + // // we come from internal link with vuejs + // // directly record uuid + // this.nid = this.$route.query.nid + // + // }else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){ + // // we landed in an internal page + // // get the uuid from drupalDeclouped, provided by materio_decoupled.module + // this.nid = drupalDecoupled.entity_id + // } + + if (this.$route.path) { // we come from internal link with vuejs - // directly record uuid - this.nid = this.$route.query.nid - }else if(drupalDecoupled.entity_type == 'node' && drupalDecoupled.entity_bundle == 'article'){ + this.path = this.$route.path + } else { // we landed in an internal page - // get the uuid from drupalDeclouped, provided by materio_decoupled.module - this.nid = drupalDecoupled.entity_id + this.path = window.location.pathname } - if(this.nid){ + if(this.path){ this.loadArticle() // get the prev next items if(!this.items.length){ @@ -205,33 +215,29 @@ export default { }) }, loadArticle(){ - console.log('loadArticle', this.nid) + console.log('loadArticle') this.loading = true - // let params = { - // include:'field_linked_materials.images,field_showroom,field_tags,field_thesaurus,field_visuel,uid' + + // let ast = gql`{ + // article(id: ${this.nid}) { + // ...ArticleFields + // } // } - // let q = qs.stringify(params) - // JSONAPI.get(`node/article/${this.uuid}?${q}`) - // .then(({ data }) => { - // console.log('loadArticle data', data) - // this.parseDataJSONAPI(data) - // }) - // .catch(( error ) => { - // console.warn('Issue with loadArticle', error) - // Promise.reject(error) - // }) + // ${ articleFields } + // ` let ast = gql`{ - article(id: ${this.nid}) { + route(path: "${this.path}") { ...ArticleFields } } ${ articleFields } ` + MGQ.post('', { query: print(ast) }) - .then(({ data:{data:{article}}}) => { - console.log('loadArticle', article ) - this.parseDataGQL(article) + .then(({ data:{data:{route}}}) => { + console.log('loadArticle', route ) + this.parseDataGQL(route) }) .catch(error => { console.warn('Issue with loadArticle', error) @@ -290,148 +296,6 @@ export default { this.loading = false; }, - parseDataJSONAPI(data){ - let attrs = data.data.attributes - let relations = data.data.relationships - console.log('relations', relations); - let inc = data.included - console.log('included', inc); - - this.content = { - title:attrs.title, - body: attrs.body.value - } - - // build lightbox array - // will be filled by videos and field_visuel - this.content.lightbox_items = []; - - // parse embeded videos pushing it in lightbox - for(let key in attrs.field_video){ - let videolink = attrs.field_video[key] - // console.log('videolink', videolink); - let provider_regex = /https:\/\/(www\.)?(?youtube|vimeo)\.com\/.+/; - let match = provider_regex.exec(videolink) - // console.log('provider', match.groups.provider); - let video_id = null; - let video_thumb = null; - switch (match.groups.provider) { - case 'vimeo': - let vimeo_regex = /https:\/\/vimeo\.com\/(?\d+)/; - video_id = vimeo_regex.exec(videolink).groups.id || null; - // TODO: get the vimeo thumb https://coderwall.com/p/fdrdmg/get-a-thumbnail-from-a-vimeo-video - video_thumb = "http://blogpeda.ac-poitiers.fr/ent-lyc/files/2015/06/Vimeo_icon_block.png" - break; - case 'youtube': - let youtube_regex = /https:\/\/(www\.)?youtube\.com\/watch\?v=(?.+)/; - video_id = youtube_regex.exec(videolink).groups.id || null; - video_thumb = "http://img.youtube.com/vi/"+video_id+"/0.jpg" - break; - } - // console.log('video_id', video_id); - - this.content.lightbox_items.push({ - src: videolink, - title: "", - description: "", - thumb: video_thumb - }); - // this.content.videos.push({ - // provider: match.groups.provider, - // id: video_id, - // href: videolink - // }); - } - - // parse all relationships - for (let key in relations) { - // skip loop if the property is from prototype - if (!relations.hasOwnProperty(key)) continue; - - let relation_obj = relations[key] - console.log("relation", key, relation_obj); - // console.log('typeof relation_obj.data', typeof relation_obj.data); - if(!relation_obj.data) continue; - - // showroom is unique field so no array in data - // we parse it here - switch (key) { - case 'field_showroom': - let included = inc.find((i) => { return i.id == relation_obj.data.id }) - // console.log('included',included); - this.content[key] = included.attributes; - break - } - - // skip relation_obj if data is not array - if(!Array.isArray(relation_obj.data)) continue - // create empty field array - this.content[key] = [] - // parse relationship values using included - let field = {} - // loop through all relation items - relation_obj.data.forEach((e) => { - // get the included values for each item using id - let included = inc.find((i) => { return i.id == e.id }) - // if we not found an included item skip the item - if(typeof included != 'undefined'){ - // fill the item values - switch (key) { - case 'field_visuel': - // build the field object (not used for now) - field = e.meta - field.id = e.id - field.src = included.attributes.uri.url - field.thumb = included.links.article_card_medium.href - break; - case 'field_linked_materials': - field = included.attributes - field.id = field.uuid = included.id - // get the linked material included images - field.images = []; - included.relationships.images.data.forEach((img) => { - // console.log('href', img.meta.imageDerivatives.links.card_medium.href); - if(img.meta.imageDerivatives){ - field.images.push({ - title:img.meta.title, - src: img.meta.imageDerivatives.links.hd.href, - img_styles: { - card_medium: img.meta.imageDerivatives.links.card_medium.href, - card_full: img.meta.imageDerivatives.links.card_full.href - } - }) - } - }) - break; - case 'field_thesaurus': - case 'field_tags': - field = included.attributes - field.id = included.id - break; - default: - } - this.content[key].push(field) - - } - }) - } - // extract first visuel as accroche - this.content.image_accroche = this.content.field_visuel.shift() - - // fill the lightbox - for(let visuel of this.content.field_visuel){ - this.content.lightbox_items.push(visuel); - } - console.log('this.content.lightbox_items', this.content.lightbox_items); - - // update main page title - this.$store.commit('Common/setPagetitle', this.content.title) - - this.loading = false; - console.log('article.content',this.content); - - }, - onNext(){ // console.log('clicked on next', this.prevnext.next); let alias = this.prevnext.next.view_node.replace(/^.?\/blabla\//g, '')