bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

integrated vuejs into theme (builded with webpack

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2019-04-09 00:21:00 +02:00
parent c344c09c96
commit 9dfc5af5c0
22 changed files with 14317 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/themes/custom/materiotheme/assets/dist/3f2f1fc790d5507ed234.hot-update.json vendored Normal file
View File

@@ -0,0 +1 @@
{"h":"9b06c7ef8366e03bb4ea","c":{"main":true}}

15
web/themes/custom/materiotheme/assets/dist/main.3f2f1fc790d5507ed234.hot-update.js vendored Normal file
View File

@@ -0,0 +1,15 @@
webpackHotUpdate("main",{
/***/ "./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./web/themes/custom/materiotheme/vuejs/components/Login.vue?vue&type=template&id=39c106f7&scoped=true&lang=html&":
/*!******************************************************************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./web/themes/custom/materiotheme/vuejs/components/Login.vue?vue&type=template&id=39c106f7&scoped=true&lang=html& ***!
\******************************************************************************************************************************************************************************************************************************************************/
/*! exports provided: render, staticRenderFns */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });\nvar render = function() {\n var _vm = this\n var _h = _vm.$createElement\n var _c = _vm._self._c || _h\n return _c(\"div\", { attrs: { id: \"block-userlogin\" } }, [\n _c(\"h2\", [_vm._v(\"Login Hello!\")]),\n _vm._v(\" \"),\n _c(\"section\", [\n _c(\"input\", {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.mail,\n expression: \"mail\"\n }\n ],\n staticClass: \"form-email\",\n attrs: {\n id: \"edit-name\",\n type: \"text\",\n placeholder: \"Email\",\n name: \"name\"\n },\n domProps: { value: _vm.mail },\n on: {\n keyup: function($event) {\n if (\n !$event.type.indexOf(\"key\") &&\n _vm._k($event.keyCode, \"enter\", 13, $event.key, \"Enter\")\n ) {\n return null\n }\n return _vm.login($event)\n },\n input: function($event) {\n if ($event.target.composing) {\n return\n }\n _vm.mail = $event.target.value\n }\n }\n }),\n _vm._v(\" \"),\n _c(\"input\", {\n directives: [\n {\n name: \"model\",\n rawName: \"v-model\",\n value: _vm.password,\n expression: \"password\"\n }\n ],\n staticClass: \"form-text\",\n attrs: {\n id: \"edit-pass\",\n type: \"password\",\n placeholder: \"Password\",\n name: \"pass\"\n },\n domProps: { value: _vm.password },\n on: {\n keyup: function($event) {\n if (\n !$event.type.indexOf(\"key\") &&\n _vm._k($event.keyCode, \"enter\", 13, $event.key, \"Enter\")\n ) {\n return null\n }\n return _vm.login($event)\n },\n input: function($event) {\n if ($event.target.composing) {\n return\n }\n _vm.password = $event.target.value\n }\n }\n }),\n _vm._v(\" \"),\n _c(\n \"button\",\n {\n staticClass: \"button\",\n attrs: { id: \"edit-submit\" },\n on: {\n click: function($event) {\n $event.stopPropagation()\n return _vm.login($event)\n }\n }\n },\n [_vm._v(\"\\n login\\n \")]\n )\n ])\n ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack:///./web/themes/custom/materiotheme/vuejs/components/Login.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options");
/***/ })
})

1037
web/themes/custom/materiotheme/assets/dist/main.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

645
web/themes/custom/materiotheme/assets/dist/main.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
web/themes/custom/materiotheme/assets/dist/scripts/main.min.js vendored
View File

@@ -1,3 +0,0 @@
(function($,Drupal,drupalSettings){MaterioTheme=function(){var _$body=$('body');function init(){void 0;};init();}
$(document).ready(function($){if(drupalSettings.path.isFront){var materiotheme=new MaterioTheme();}else{$('body').attr('booted','booted');}});})(jQuery,Drupal,drupalSettings);

1
web/themes/custom/materiotheme/assets/dist/styles/app.min.css vendored
View File

File diff suppressed because one or more lines are too long

32
web/themes/custom/materiotheme/assets/scripts/main.js
View File

@@ -1,7 +1,19 @@
(function($, Drupal, drupalSettings) {
import Vue from 'vue'
import store from 'vuejs/store'
import VLogin from 'vuejs/components/Login'
MaterioTheme = function(){
var _$body = $('body');
// require('theme/assets/styles/main.scss');
import 'theme/assets/styles/main.scss'
(function(Drupal, drupalSettings) {
var v_login = new Vue({
store,
render: h => h(VLogin)
}).$mount('#block-userlogin')
var MaterioTheme = function(){
// var _is_front = drupalSettings.path.isFront;
// ___ _ _
@@ -17,12 +29,12 @@
init();
} // end MaterioTheme()
$(document).ready(function($) {
if(drupalSettings.path.isFront){
// $(document).ready(function($) {
// if(drupalSettings.path.isFront){
var materiotheme = new MaterioTheme();
}else{
$('body').attr('booted', 'booted');
}
});
// }else{
// $('body').attr('booted', 'booted');
// }
// });
})(jQuery, Drupal, drupalSettings);
})(Drupal, drupalSettings);

12
web/themes/custom/materiotheme/assets/styles/app.scss → web/themes/custom/materiotheme/assets/styles/main.scss
View File

@@ -6,12 +6,12 @@
// @Last modified time: 20-12-2017
// @License: GPL-V3
@import 'base/reset';
@import 'base/variables';
@import 'base/colors';
@import 'base/grid';
@import 'base/layout';
@import 'base/fonts';
@import './base/reset';
@import './base/variables';
@import './base/colors';
@import './base/grid';
@import './base/layout';
@import './base/fonts';
html{

6
web/themes/custom/materiotheme/materiotheme.libraries.yml
View File

@@ -4,7 +4,7 @@ global-css:
theme:
assets/fonts/ubuntu/ubuntu.css: {}
assets/fonts/icon/foundation-icons.css: {}
assets/dist/styles/app.min.css: {}
assets/dist/main.css: {}
global-js:
version: VERSION
@@ -12,14 +12,14 @@ global-js:
# assets/dist/bower/jquery.hotkeys.js: { scope: footer }
# assets/dist/bower/imagesloaded.pkgd.min.js: { minified: true }
# assets/dist/bower/masonry.pkgd.min.js: { minified: true }
assets/dist/scripts/main.min.js: { minified: true }
assets/dist/main.js: { }
dependencies:
- core/drupal
# - core/drupal.ajax
# - core/drupal.autocomplete
- core/matchmedia
- core/matchmedia.addListener
- core/jquery
# - core/jquery
# - core/jquery.once
# - core/jquery.ui.draggable
# - core/jquery.ui.dropable

76
web/themes/custom/materiotheme/vuejs/components/Login.vue Normal file
View File

@@ -0,0 +1,76 @@
<template lang="html">
<div id="block-userlogin" class="">
<h2>Login Hello!</h2>
<section>
<input
id="edit-name"
class="form-email"
type="text"
placeholder="Email" name="name"
v-model="mail"
@keyup.enter="login"/>
<input
id="edit-pass"
class="form-text"
type="password"
placeholder="Password" name="pass"
v-model="password"
@keyup.enter="login"
/>
<button
id="edit-submit"
class="button"
@click.stop="login"
>
login
</button>
</section>
</div>
</template>
<script>
// https://github.com/alvar0hurtad0/drupal-vuejs-todo
import { mapState, mapActions } from 'vuex'
export default {
data () {
return {
mail: '',
password: ''
}
},
computed: {
...mapState(['User']),
// ...mapState({
// isloggedin: state => state.user.isloggedin,
// username: state => state.user.username,
// token: state => state.user.token
// })
},
methods: {
...mapActions({
getToken: 'User/getToken'
}),
// usernameInputHandler(input) {
// this.username = input;
// },
// passwordInputHandler(input) {
// this.password = input;
// },
login () {
this.getToken({
mail: this.mail,
pass: this.password
})
}
}
}
</script>
<style lang="scss" scoped>
</style>

10
web/themes/custom/materiotheme/vuejs/rest/http-axios.js Normal file
View File

@@ -0,0 +1,10 @@
import axios from 'axios'
// console.log('drupalSettings', drupalSettings);
export const HTTP = axios.create({
baseURL: `http://dev.materio.com`,
headers: {
Authorization: 'Bearer {token}'
}
})

12
web/themes/custom/materiotheme/vuejs/store/index.js Normal file
View File

@@ -0,0 +1,12 @@
import Vue from 'vue'
import Vuex from 'vuex'
import User from './modules/user'
// https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
User
}
})

59
web/themes/custom/materiotheme/vuejs/store/modules/user.js Normal file
View File

@@ -0,0 +1,59 @@
import { HTTP } from 'vuejs/rest/http-axios'
export default {
namespaced: true,
// initial state
state : {
isloggedin: false,
username: '',
token: null
},
// getters
getters : {},
// mutations
mutations : {
// setUser (state, posts) {
// state.all = posts
// }
// setOpened (state, post) {
// state.opened = post
// },
// clearOpened (state) {
// state.opened = null
// }
},
// actions
actions : {
getToken ({ commit, state }, data) {
// console.log('getToken data', data)
let config = {
headers: {
"Content-Type": "application/json"
}
}
// console.log('data', data)
// console.log('config', config)
HTTP.post('/user/login?_format=json', data, config)
.then(response => {
console.log('response', response)
// cb(response.data)
})
.catch(({ error }) => {
console.log('Issue with login', error);
Promise.reject(error);
})
}
// ,
// logout ({ commit }) {
//
// }
}
}