├── .gitignore
├── LICENSE
├── README.md
├── firebase.json
├── functions
    ├── package-lock.json
    ├── package.json
    └── src
    │   ├── attachUserToProject.js
    │   ├── createUser.js
    │   ├── deleteProject.js
    │   ├── index.js
    │   ├── initSettings.js
    │   └── publishJson.js
├── package.json
├── public
    ├── favicon.ico
    ├── index.html
    ├── powered-by-editlayer.png
    └── powered-by-editlayer.svg
├── rules
    ├── cors.json
    ├── firestore.rules
    └── storage.rules
├── scripts
    ├── cors.js
    ├── deploy.js
    └── open.js
└── src
    ├── App.vue
    ├── assets
        └── image-background.png
    ├── components
        ├── SideItem.vue
        ├── content
        │   ├── Editor.vue
        │   ├── PartnerInfo.vue
        │   └── PublishButton.vue
        ├── core
        │   ├── Alert.vue
        │   ├── Button.vue
        │   ├── Card.vue
        │   ├── Heading.vue
        │   ├── Notification.vue
        │   └── registerAll.js
        ├── dashboard
        │   ├── Navigation.vue
        │   ├── NewProjectButton.vue
        │   ├── NewProjectModal.vue
        │   └── Projects.vue
        ├── navigation
        │   ├── BackButton.vue
        │   ├── Breadcrumb.vue
        │   └── Navigation.vue
        ├── panel
        │   ├── Item.vue
        │   ├── ItemsFromArray.vue
        │   ├── ItemsFromObject.vue
        │   └── Panel.vue
        ├── schema
        │   └── SchemaEditor.vue
        ├── settings
        │   ├── DeleteProject.vue
        │   ├── FileLocation.vue
        │   ├── NewUserButton.vue
        │   ├── NewUserModal.vue
        │   ├── Users.vue
        │   └── Webhook.vue
        └── utils
        │   ├── FooterContent.vue
        │   ├── LoaderOverlay.vue
        │   └── Notifications.vue
    ├── editors
        ├── Calendar.vue
        ├── Checkbox.vue
        ├── Code.vue
        ├── Color.vue
        ├── Image.vue
        ├── Markdown.vue
        ├── Number.vue
        ├── Radio.vue
        ├── RichText.vue
        ├── Select.vue
        ├── SelectImage.vue
        ├── Text.vue
        ├── Textarea.vue
        ├── Video.vue
        ├── common
        │   ├── BaseEditor.vue
        │   └── BasePreview.vue
        ├── config.js
        └── previews
        │   ├── Array.vue
        │   ├── Calendar.vue
        │   ├── Code.vue
        │   ├── Color.vue
        │   ├── Image.vue
        │   ├── Option.vue
        │   ├── Text.vue
        │   └── Video.vue
    ├── main.js
    ├── router.js
    ├── sass
        ├── codemirror.sass
        ├── core
        │   ├── _breakpoint.sass
        │   ├── _center.sass
        │   ├── _chain.sass
        │   ├── _container.sass
        │   ├── _gap.sass
        │   ├── _grid.sass
        │   ├── _hx.sass
        │   ├── _invert.sass
        │   ├── _mask.sass
        │   ├── initialize.sass
        │   └── mixins.sass
        ├── transitions.sass
        └── variables.sass
    ├── store
        ├── index.js
        └── modules
        │   ├── auth.js
        │   ├── content.js
        │   ├── firestore.js
        │   ├── notifications.js
        │   ├── projects.js
        │   ├── schema.js
        │   ├── structure.js
        │   ├── uploader.js
        │   └── utils.js
    ├── utils
        ├── buildJson.js
        ├── buildStructure.js
        ├── codemirror.js
        ├── firebase.js
        ├── icons.js
        └── webhook.js
    └── views
        ├── Auth.vue
        ├── Content.vue
        ├── Dashboard.vue
        ├── Schema.vue
        └── Settings.vue


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | dist
 4 | __*
 5 | .env*.local
 6 | .firebaserc
 7 | editalyer-archive.zip
 8 | .firebase
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | 
15 | # Editor directories and files
16 | .idea
17 | .vscode
18 | *.suo
19 | *.ntvs*
20 | *.njsproj
21 | *.sln
22 | *.sw*
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Editlayer documentation
2 | https://editlayer.rane.io/documentation
3 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "firestore": {
 3 |     "rules": "rules/firestore.rules"
 4 |   },
 5 |   "hosting": {
 6 |     "public": "dist",
 7 |     "ignore": [
 8 |       "firebase.json",
 9 |       "**/.*",
10 |       "**/node_modules/**"
11 |     ],
12 |     "rewrites": [
13 |       {
14 |         "source": "**",
15 |         "destination": "/index.html"
16 |       }
17 |     ]
18 |   },
19 |   "storage": {
20 |     "rules": "rules/storage.rules"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/functions/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "editlayer-functions",
 3 |   "description": "Firebase Cloud Functions for Editlayer",
 4 |   "main": "dist/index.js",
 5 |   "dependencies": {
 6 |     "firebase-admin": "~8.4.0",
 7 |     "firebase-functions": "^3.2.0",
 8 |     "js-base64": "^2.5.1",
 9 |     "lodash": "^4.17.21"
10 |   },
11 |   "babel": {
12 |     "presets": [
13 |       [
14 |         "env",
15 |         {
16 |           "targets": {
17 |             "node": "6.14.0"
18 |           }
19 |         }
20 |       ]
21 |     ]
22 |   },
23 |   "private": true
24 | }
25 | 


--------------------------------------------------------------------------------
/functions/src/attachUserToProject.js:
--------------------------------------------------------------------------------
 1 | import admin from 'firebase-admin'
 2 | import _ from 'lodash'
 3 | import { Base64 } from 'js-base64'
 4 | 
 5 | export default {
 6 |   async whenAdded (snap, context) {
 7 |     const firestore = admin.firestore()
 8 |     const auth = admin.auth()
 9 |     const jobData = snap.data()
10 | 
11 |     if (jobData.job !== 'attachUserToProject') return false
12 | 
13 |     const userId = await auth
14 |       .getUserByEmail(jobData.email)
15 |       .then(userRecord => userRecord.uid)
16 |       .catch(error => {
17 |         console.error(error)
18 |         return false
19 |       })
20 | 
21 |     if (userId === false) return false
22 | 
23 |     const project = await firestore
24 |       .collection('projects')
25 |       .doc(jobData.projectId)
26 |       .get()
27 | 
28 |     const projectData = project.data()
29 |     const user = projectData.users[jobData.awaitId]
30 | 
31 |     let updateData = {}
32 | 
33 |     // Create new user with real id
34 |     updateData[`users.${userId}`] = {
35 |       email: user.email,
36 |       permissions: user.permissions,
37 |       userExist: true,
38 |     }
39 | 
40 |     // Remove await user
41 |     updateData[`users.${jobData.awaitId}`] = admin.firestore.FieldValue.delete()
42 | 
43 |     firestore
44 |       .collection('projects')
45 |       .doc(context.params.projectId)
46 |       .update(updateData)
47 | 
48 |     console.log('attachUserToProjectWhenAdded done')
49 |     return true
50 |   },
51 | 
52 |   whenRegister (userRecord, context) {
53 |     const firestore = admin.firestore()
54 |     const awaitId = `await-${Base64.encodeURI(userRecord.email)}`
55 | 
56 |     return firestore
57 |       .collection('projects')
58 |       .get()
59 |       .then(querySnapshot => {
60 |         querySnapshot.forEach((doc) => {
61 |           if (_.has(doc.data().users, awaitId)) {
62 |             const user = doc.data().users[awaitId]
63 |             let updateData = {}
64 | 
65 |             // Create new user with real id
66 |             updateData[`users.${userRecord.uid}`] = {
67 |               email: user.email,
68 |               permissions: user.permissions,
69 |               userExist: true,
70 |             }
71 | 
72 |             // Remove await user
73 |             updateData[`users.${awaitId}`] = admin.firestore.FieldValue.delete()
74 | 
75 |             firestore
76 |               .collection('projects')
77 |               .doc(doc.id)
78 |               .update(updateData)
79 |           }
80 |         })
81 | 
82 |         console.log('attachUserToProjectWhenRegister done')
83 |         return true
84 |       })
85 |       .catch(error => console.error('User adding when register failed', error))
86 |   },
87 | }
88 | 


--------------------------------------------------------------------------------
/functions/src/createUser.js:
--------------------------------------------------------------------------------
 1 | import admin from 'firebase-admin'
 2 | 
 3 | export default async (userRecord, context) => {
 4 |   const firestore = admin.firestore()
 5 | 
 6 |   const settings = await firestore
 7 |     .collection('settings')
 8 |     .doc('general')
 9 |     .get()
10 |     .then(snap => snap.data())
11 |     .catch(error => console.error('Settings getting failed', error))
12 | 
13 |   const firstUser = await firestore
14 |     .collection('users')
15 |     .get()
16 |     .then(snap => snap.size === 0)
17 |     .catch(error => console.error('Users getting failed', error))
18 | 
19 |   const allowCreateProject = settings.allowNewUsersCreateProject === true || firstUser === true
20 | 
21 |   await firestore
22 |     .collection('users')
23 |     .doc(userRecord.uid)
24 |     .set({
25 |       email: userRecord.email,
26 |       permissions: {
27 |         createProject: allowCreateProject,
28 |       },
29 |     })
30 |     .catch(error => console.error('User added failed', error))
31 | 
32 |   console.log('createUser done')
33 |   return true
34 | }
35 | 


--------------------------------------------------------------------------------
/functions/src/deleteProject.js:
--------------------------------------------------------------------------------
 1 | import admin from 'firebase-admin'
 2 | 
 3 | export default (snap, context) => {
 4 |   const firestore = admin.firestore()
 5 |   const bucket = admin.storage().bucket()
 6 |   const storeData = snap.data()
 7 | 
 8 |   if (storeData.job !== 'deleteProject') return false
 9 |   if (storeData.deleteProjectId !== context.params.projectId) return false
10 | 
11 |   return bucket
12 |     .getFiles({ prefix: context.params.projectId })
13 |     .then((result) => {
14 |       let files = result[0]
15 | 
16 |       files.forEach((file) => {
17 |         bucket.file(file.name).delete()
18 |       })
19 | 
20 |       return true
21 |     })
22 |     .then(() => {
23 |       return firestore
24 |         .collection('projects')
25 |         .doc(context.params.projectId)
26 |         .collection('versions')
27 |         .get()
28 |     })
29 |     .then((versions) => {
30 |       versions.forEach(doc => {
31 |         firestore
32 |           .collection('projects')
33 |           .doc(context.params.projectId)
34 |           .collection('versions')
35 |           .doc(doc.id)
36 |           .delete()
37 |       })
38 | 
39 |       return firestore
40 |         .collection('projects')
41 |         .doc(context.params.projectId)
42 |         .collection('jobs')
43 |         .get()
44 |     })
45 |     .then((jobs) => {
46 |       jobs.forEach(doc => {
47 |         firestore
48 |           .collection('projects')
49 |           .doc(context.params.projectId)
50 |           .collection('jobs')
51 |           .doc(doc.id)
52 |           .delete()
53 |       })
54 | 
55 |       console.log('deleteProject done')
56 |       return firestore
57 |         .collection('projects')
58 |         .doc(context.params.projectId)
59 |         .delete()
60 |     })
61 |     .catch(error => {
62 |       console.log('Project deleting failed', error)
63 |       return false
64 |     })
65 | }
66 | 


--------------------------------------------------------------------------------
/functions/src/index.js:
--------------------------------------------------------------------------------
 1 | import * as functions from 'firebase-functions'
 2 | import admin from 'firebase-admin'
 3 | import publishJson from './publishJson'
 4 | import attachUserToProject from './attachUserToProject'
 5 | import createUser from './createUser'
 6 | import deleteProject from './deleteProject'
 7 | import initSettings from './initSettings'
 8 | 
 9 | admin.initializeApp()
10 | 
11 | exports.newUser = functions
12 |   .auth
13 |   .user()
14 |   .onCreate(async (snap, context) => {
15 |     await initSettings(snap, context)
16 |     await createUser(snap, context)
17 |     await attachUserToProject.whenRegister(snap, context)
18 |     return true
19 |   })
20 | 
21 | exports.newVersion = functions
22 |   .firestore
23 |   .document('projects/{projectId}/versions/{versionId}')
24 |   .onCreate(async (snap, context) => {
25 |     await publishJson(snap, context)
26 |     return true
27 |   })
28 | 
29 | exports.newJob = functions
30 |   .firestore
31 |   .document('projects/{projectId}/jobs/{jobId}')
32 |   .onCreate(async (snap, context) => {
33 |     await attachUserToProject.whenAdded(snap, context)
34 |     await deleteProject(snap, context)
35 |     return true
36 |   })
37 | 


--------------------------------------------------------------------------------
/functions/src/initSettings.js:
--------------------------------------------------------------------------------
 1 | import admin from 'firebase-admin'
 2 | 
 3 | export default async (userRecord, context) => {
 4 |   const firestore = admin.firestore()
 5 | 
 6 |   const isSettingsExsist = await firestore
 7 |     .collection('settings')
 8 |     .get()
 9 |     .then(snap => snap.size > 0)
10 |     .catch(error => console.error('Settings failed', error))
11 | 
12 |   if (isSettingsExsist === false) {
13 |     await firestore
14 |       .collection('settings')
15 |       .doc('general')
16 |       .set({
17 |         allowNewUsersCreateProject: false,
18 |       })
19 |   }
20 | 
21 |   console.log('initSettings done')
22 |   return false
23 | }
24 | 


--------------------------------------------------------------------------------
/functions/src/publishJson.js:
--------------------------------------------------------------------------------
 1 | import admin from 'firebase-admin'
 2 | import fs from 'fs'
 3 | import _ from 'lodash'
 4 | 
 5 | export default (snap, context) => {
 6 |   const bucket = admin.storage().bucket()
 7 |   const firestore = admin.firestore()
 8 |   const tempFilePath = '/tmp/tempfile.json'
 9 |   const versionData = snap.data()
10 |   const destinationPath = `${context.params.projectId}/content.json`
11 | 
12 |   const jsonFileContent = _.merge(versionData.json, {
13 |     PUBLISHED_AT: versionData.publishedAt,
14 |     VERSION_ID: context.params.versionId,
15 |   })
16 | 
17 |   const json = JSON.stringify(jsonFileContent, null, 2)
18 | 
19 |   fs.writeFileSync(tempFilePath, json)
20 | 
21 |   return bucket
22 |     .upload(tempFilePath, {
23 |       destination: destinationPath,
24 |       metadata: {
25 |         metadata: {
26 |           firebaseStorageDownloadTokens: versionData.token,
27 |         },
28 |       },
29 |     })
30 |     .then(() => {
31 |       console.log('JSON publishing done')
32 | 
33 |       let updateData = {}
34 |       updateData[`publishedVersion`] = {
35 |         draft: versionData.draft,
36 |         schema: versionData.schema,
37 |         json: json,
38 |         publishedAt: versionData.publishedAt,
39 |         versionId: context.params.versionId,
40 |       }
41 | 
42 |       firestore
43 |         .collection('projects')
44 |         .doc(context.params.projectId)
45 |         .update(updateData)
46 | 
47 |       console.log('publishJson done')
48 |       return true
49 |     })
50 |     .catch((error) => console.error('JSON publishing failed', error.message))
51 | }
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "editlayer-cms",
 3 |   "description": "Editlayer is headless CMS that saves content as JSON",
 4 |   "version": "0.7.0",
 5 |   "private": true,
 6 |   "scripts": {
 7 |     "init": "npm install && cd functions && npm install",
 8 |     "serve": "vue-cli-service serve --port 8000 --open",
 9 |     "deploy": "node scripts/deploy.js",
10 |     "cors": "node scripts/cors.js",
11 |     "open": "node scripts/open.js",
12 |     "archive": "git archive --format=zip --output=editlayer-archive.zip HEAD"
13 |   },
14 |   "dependencies": {
15 |     "@jaames/iro": "^4.5.1",
16 |     "animejs": "^3.1.0",
17 |     "autosize": "^4.0.2",
18 |     "axios": "^0.19.0",
19 |     "blob-util": "^2.0.2",
20 |     "caret-pos": "^1.2.1",
21 |     "copy-to-clipboard": "^3.2.0",
22 |     "dayjs": "^1.8.16",
23 |     "firebase": "^6.5.0",
24 |     "image-compressor.js": "^1.1.4",
25 |     "is-upper-case": "^1.1.2",
26 |     "js-base64": "^2.5.1",
27 |     "js-video-url-parser": "^0.4.0",
28 |     "lodash": "^4.17.15",
29 |     "nanoid": "^2.1.0",
30 |     "parse-json": "^5.0.0",
31 |     "slugg": "^1.2.1",
32 |     "title-case": "^2.1.1",
33 |     "typeface-open-sans": "0.0.75",
34 |     "v-calendar": "^0.9.7",
35 |     "vue": "^2.6.10",
36 |     "vue-awesome": "^3.5.4",
37 |     "vue-codemirror": "^4.0.6",
38 |     "vue-quill-editor": "^3.0.6",
39 |     "vue-router": "^3.1.3",
40 |     "vuex": "^3.1.1",
41 |     "vuex-router-sync": "^5.0.0"
42 |   },
43 |   "devDependencies": {
44 |     "@vue/cli": "^3.11.0",
45 |     "@vue/cli-plugin-babel": "^3.11.0",
46 |     "@vue/cli-plugin-eslint": "^3.11.0",
47 |     "@vue/cli-service": "^3.11.0",
48 |     "@vue/eslint-config-standard": "^4.0.0",
49 |     "babel-cli": "^6.26.0",
50 |     "babel-core": "7.0.0-bridge.0",
51 |     "babel-preset-env": "^1.7.0",
52 |     "firebase-tools": "^7.3.0",
53 |     "node-sass": "^4.12.0",
54 |     "open": "^6.4.0",
55 |     "sass-loader": "^8.0.0",
56 |     "vue-template-compiler": "^2.6.10"
57 |   },
58 |   "babel": {
59 |     "presets": [
60 |       "@vue/app"
61 |     ]
62 |   },
63 |   "eslintConfig": {
64 |     "root": true,
65 |     "env": {
66 |       "node": true
67 |     },
68 |     "extends": [
69 |       "plugin:vue/essential",
70 |       "@vue/standard"
71 |     ],
72 |     "rules": {
73 |       "comma-dangle": [
74 |         "error",
75 |         "always-multiline"
76 |       ],
77 |       "brace-style": [
78 |         "error",
79 |         "stroustrup"
80 |       ]
81 |     },
82 |     "parserOptions": {
83 |       "parser": "babel-eslint"
84 |     }
85 |   },
86 |   "postcss": {
87 |     "plugins": {
88 |       "autoprefixer": {}
89 |     }
90 |   },
91 |   "browserslist": [
92 |     "> 1%",
93 |     "last 2 versions",
94 |     "not ie <= 8"
95 |   ]
96 | }
97 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneio/editlayer/9fe46e34377c13a6626780acc98971eb023eca5a/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Editlayer</title>
 9 |     <style>
10 |       body {
11 |         background-image: linear-gradient(to right, #fbfbfc, #efeff1)
12 |       }
13 |     </style>
14 |   </head>
15 |   <body>
16 |     <section id="app"></section>
17 |     <!-- built files will be auto injected -->
18 |   </body>
19 | </html>
20 | 


--------------------------------------------------------------------------------
/public/powered-by-editlayer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneio/editlayer/9fe46e34377c13a6626780acc98971eb023eca5a/public/powered-by-editlayer.png


--------------------------------------------------------------------------------
/rules/cors.json:
--------------------------------------------------------------------------------
1 | [
2 |   {
3 |     "origin": ["*"],
4 |     "method": ["GET"],
5 |     "maxAgeSeconds": 3600
6 |   }
7 | ]
8 | 


--------------------------------------------------------------------------------
/rules/firestore.rules:
--------------------------------------------------------------------------------
  1 | service cloud.firestore {
  2 |   match /databases/{database}/documents {
  3 | 
  4 |     match /users/{userId} {
  5 |       allow read:
  6 |         if request.auth != null
  7 |         && request.auth.uid == userId;
  8 |     }
  9 | 
 10 |     match /projects/{projectId} {
 11 |       function existingData() {
 12 |         return resource.data;
 13 |       }
 14 | 
 15 |       function incomingData() {
 16 |         return request.resource.data;
 17 |       }
 18 | 
 19 |       function allowListProject() {
 20 |         return request.auth != null
 21 |             && existingData().users[request.auth.uid].email == request.auth.token.email;
 22 |       }
 23 | 
 24 |       function allowCreateProject() {
 25 |       	return request.auth != null
 26 |             && get(/databases/$(database)/documents/users/$(request.auth.uid)).data.permissions.createProject == true
 27 |     				&& incomingData().users[request.auth.uid].email == request.auth.token.email
 28 |     				&& incomingData().users[request.auth.uid].userExist == true
 29 |     				&& incomingData().users[request.auth.uid].permissions.updateDraft == true
 30 |     				&& incomingData().users[request.auth.uid].permissions.updateSchema == true
 31 |     				&& incomingData().users[request.auth.uid].permissions.updateSettings == true
 32 |     				&& incomingData().users[request.auth.uid].permissions.updateUsers == true
 33 |     				&& incomingData().users[request.auth.uid].permissions.publish == true
 34 |     				&& incomingData().users[request.auth.uid].permissions.createJob == true
 35 |             && projectId != 'index'
 36 |             && projectId != 'edit'
 37 |     				&& projectId != 'content'
 38 |     				&& projectId != 'schema'
 39 |     				&& projectId != 'settings'
 40 |     				&& projectId != 'project';
 41 |       }
 42 | 
 43 |       function allowUpdateDraft() {
 44 |       	return request.auth != null
 45 |             && existingData().users[request.auth.uid].permissions.updateDraft == true
 46 |         		&& request.writeFields.size() == 1
 47 |         		&& request.writeFields[0].matches('^draft\\..*');
 48 |       }
 49 | 
 50 |       function allowUpdatePublished() {
 51 |       	return request.auth != null
 52 |             && existingData().users[request.auth.uid].permissions.publish == true
 53 |         		&& request.writeFields.size() == 1
 54 |         		&& request.writeFields[0] == 'published';
 55 |       }
 56 | 
 57 |       function allowUpdateSchema() {
 58 |       	return request.auth != null
 59 |             && existingData().users[request.auth.uid].permissions.updateSchema == true
 60 |         		&& request.writeFields.size() == 1
 61 |         		&& request.writeFields[0] == 'schema';
 62 |       }
 63 | 
 64 |       function allowUpdateSettings() {
 65 |       	return request.auth != null
 66 |             && existingData().users[request.auth.uid].permissions.updateSettings == true
 67 |         		&& request.writeFields.size() == 1
 68 |         		&& request.writeFields[0].matches('^settings\\..*');
 69 |       }
 70 | 
 71 |       function allowUpdateUsers() {
 72 |       	return request.auth != null
 73 |             && existingData().users[request.auth.uid].permissions.updateUsers == true
 74 |         		&& request.writeFields.size() == 1
 75 |         		&& request.writeFields[0].matches('^users\\..*');
 76 |       }
 77 | 
 78 |     	allow list:
 79 |         if allowListProject();
 80 | 
 81 |       allow create:
 82 |         if allowCreateProject();
 83 | 
 84 |       allow update:
 85 |         if allowUpdateDraft()
 86 |         || allowUpdatePublished()
 87 | 				|| allowUpdateSchema()
 88 | 				|| allowUpdateSettings()
 89 | 				|| allowUpdateUsers();
 90 |     }
 91 | 
 92 |     match /projects/{projectId}/versions/{versionId} {
 93 |       allow create:
 94 |         if request.auth != null
 95 |         && get(/databases/$(database)/documents/projects/$(projectId)).data.users[request.auth.uid].permissions.publish == true;
 96 |     }
 97 | 
 98 |     match /projects/{projectId}/jobs/{jobId} {
 99 |       allow create:
100 |         if request.auth != null
101 |         && get(/databases/$(database)/documents/projects/$(projectId)).data.users[request.auth.uid].permissions.createJob == true;
102 |     }
103 |   }
104 | }
105 | 


--------------------------------------------------------------------------------
/rules/storage.rules:
--------------------------------------------------------------------------------
 1 | service firebase.storage {
 2 |   match /b/{bucket}/o {
 3 |     match /{projectId}/{file} {
 4 |       allow write:  if request.auth != null
 5 |                     && resource == null
 6 |                     && request.resource.size < 5 * 1024 * 1024
 7 |                     && request.resource.contentType.matches('image/.*');
 8 | 
 9 |       allow read: if request.auth != null
10 |                   && resource.contentType.matches('image/.*');
11 |     }
12 | 
13 |     // match /{projectId}/public/{file} {
14 |     //   allow read: if resource.contentType.matches('application/json; charset=utf-8');
15 |     // }
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/scripts/cors.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | const path = require('path')
 3 | const execa = require('execa')
 4 | 
 5 | ;(async () => {
 6 |   const firebasersPath = path.join(__dirname, '/../.firebaserc')
 7 |   const firebaserc = JSON.parse(fs.readFileSync(firebasersPath).toString())
 8 |   const aliases = Object.keys(firebaserc.projects)
 9 |   const arguments = process.argv.slice(2)
10 |   const job = arguments[0]
11 |   const alias = arguments[1]
12 |   const envPath = path.join(__dirname, `/../.env.${alias}.local`)
13 | 
14 |   // Is gsutil installed
15 |   try {
16 |     execa.shellSync(`gsutil version`)
17 |   }
18 |   catch (error) {
19 |     console.log(`
20 | You need to install gsutil
21 | https://cloud.google.com/storage/docs/gsutil_install
22 | `)
23 |     return false
24 |   }
25 | 
26 |   // Job is required
27 |   if (!['allow', 'disallow', 'status'].includes(job)) {
28 |     console.log(`
29 | Job "${job}" is not available. Use can use the following:
30 |  - allow
31 |  - disallow
32 |  - status
33 | Example: npm run cors allow production
34 | `)
35 |     return false
36 |   }
37 | 
38 |   // Alias need to be in .firebaserc
39 |   if (!aliases.includes(alias)) {
40 |     console.log(`
41 | Alias "${alias}" is not available. Use can use the following:
42 |  - ${aliases.join('\n - ')}
43 | Example: npm run deploy production
44 | `)
45 |     return false
46 |   }
47 | 
48 |   // Get storage bucket name
49 |   const storageBucket = fs.readFileSync(envPath)
50 |     .toString()
51 |     .split('\n')
52 |     .filter(line => {
53 |       return line.startsWith('VUE_APP_FIREBASE_STORAGE_BUCKET=')
54 |     })
55 |     .toString()
56 |     .replace('VUE_APP_FIREBASE_STORAGE_BUCKET=', '')
57 | 
58 |   // Run the job
59 |   if (job === 'allow') {
60 |     console.log(`Allow CORS on the alias ${alias}`)
61 |     const rulesCorsPath = path.join(__dirname, `/../rules/cors.json`)
62 |     execa.shellSync(`gsutil cors set ${rulesCorsPath} gs://${storageBucket}`, { stdio: 'inherit' })
63 |   }
64 |   else if (job === 'disallow') {
65 |     console.log(`Disallow CORS on the alias ${alias}`)
66 |     const tempPath = path.join(__dirname, `/tempDisallow.json`)
67 |     fs.writeFileSync(tempPath, '[]', 'utf-8')
68 |     execa.shellSync(`gsutil cors set ${tempPath} gs://${storageBucket}`, { stdio: 'inherit' })
69 |     fs.unlinkSync(tempPath)
70 |   }
71 |   else if (job === 'status') {
72 |     console.log(`Get CORS status from the alias ${alias}`)
73 |   }
74 | 
75 |   execa.shellSync(`gsutil cors get gs://${storageBucket}`, { stdio: 'inherit' })
76 | 
77 | })().catch(err => console.error(err))
78 | 


--------------------------------------------------------------------------------
/scripts/deploy.js:
--------------------------------------------------------------------------------
  1 | const fs = require('fs')
  2 | const path = require('path')
  3 | const execa = require('execa')
  4 | 
  5 | const createEnvFile = (envPath, alias) => {
  6 |   const setupWeb = execa.shellSync(`firebase setup:web`)
  7 |   const envFileContent = setupWeb.stdout
  8 |     .toString()
  9 |     .split('\n')
 10 |     .map(line => {
 11 |       if (line.includes('": "')) {
 12 |         const pair = line.split('"')
 13 |         const key = pair[1]
 14 |         const value = pair[3]
 15 | 
 16 |         if (key === 'apiKey') {
 17 |           return `VUE_APP_FIREBASE_API_KEY=${value}`
 18 |         }
 19 |         else if (key === 'authDomain') {
 20 |           return `VUE_APP_FIREBASE_AUTH_DOMAIN=${value}`
 21 |         }
 22 |         else if (key === 'databaseURL') {
 23 |           return `VUE_APP_FIREBASE_DATABASE_URL=${value}`
 24 |         }
 25 |         else if (key === 'projectId') {
 26 |           return `VUE_APP_FIREBASE_PROJECT_ID=${value}`
 27 |         }
 28 |         else if (key === 'storageBucket') {
 29 |           return `VUE_APP_FIREBASE_STORAGE_BUCKET=${value}`
 30 |         }
 31 |       }
 32 | 
 33 |       return null
 34 |     })
 35 |     .filter(line => line)
 36 |     .join('\n')
 37 | 
 38 |   fs.writeFileSync(envPath, envFileContent, 'utf-8')
 39 | 
 40 |   console.log(`
 41 | Created file .env.${alias}.local
 42 | ${envFileContent}
 43 | `)
 44 | }
 45 | 
 46 | ;(async () => {
 47 |   const firebasersPath = path.join(__dirname, '/../.firebaserc')
 48 |   const firebaserc = JSON.parse(fs.readFileSync(firebasersPath).toString())
 49 |   const aliases = Object.keys(firebaserc.projects)
 50 |   const arguments = process.argv.slice(2)
 51 |   const alias = arguments[0]
 52 |   const envPath = path.join(__dirname, `/../.env.${alias}.local`)
 53 | 
 54 |   // Is firebase-tools installed
 55 |   try {
 56 |     execa.shellSync(`npx firebase --version`)
 57 |   }
 58 |   catch (error) {
 59 |     console.log(`
 60 | You need to Firebase Tools
 61 | npm install -g firebase-tools
 62 | https://firebase.google.com/docs/cli/
 63 | `)
 64 |     return false
 65 |   }
 66 | 
 67 |   // Alias need to be in .firebaserc
 68 |   if (!aliases.includes(alias)) {
 69 |     console.log(`
 70 | Alias "${alias}" is not available. Use can use the following:
 71 |  - ${aliases.join('\n - ')}
 72 | Example: npm run deploy production
 73 | `)
 74 |     return false
 75 |   }
 76 | 
 77 |   // Lint
 78 |   execa.shellSync(`npx vue-cli-service lint`, { stdio: 'inherit' })
 79 |   execa.shellSync(`npx eslint ./functions/src`, { stdio: 'inherit' })
 80 | 
 81 |   // Use selected alias
 82 |   execa.shellSync(`npx firebase use ${alias}`, { stdio: 'inherit' })
 83 | 
 84 |   // Create .env.[alias].local File if not exists or project id is changed
 85 |   if (!fs.existsSync(envPath)) {
 86 |     createEnvFile(envPath, alias)
 87 |   }
 88 |   else {
 89 |     const projectId = fs.readFileSync(envPath)
 90 |       .toString()
 91 |       .split('\n')
 92 |       .map(line => {
 93 |         const pair = line.split('=')
 94 |         const key = pair[0]
 95 |         const value = pair[1]
 96 | 
 97 |         if (key === 'VUE_APP_FIREBASE_PROJECT_ID') {
 98 |           return value
 99 |         }
100 | 
101 |         return null
102 |       })
103 |       .filter(line => line)
104 |       .toString()
105 | 
106 |     if (firebaserc.projects[alias] !== projectId) {
107 |       createEnvFile(envPath, alias)
108 |     }
109 |   }
110 | 
111 |   // Build functions
112 |   execa.shellSync('npx babel functions/src --out-dir functions/dist', { stdio: 'inherit' })
113 | 
114 |   // Build app if not development
115 |   if (alias !== 'development') {
116 |     execa.shellSync(`npx vue-cli-service build --mode ${alias}`, { stdio: 'inherit' })
117 |   }
118 | 
119 |   // Deploy to Firebase
120 |   if (alias !== 'development') {
121 |     execa.shellSync('npx firebase deploy', { stdio: 'inherit' })
122 |   }
123 |   else {
124 |     execa.shellSync('npx firebase deploy --only functions,firestore,storage', { stdio: 'inherit' })
125 |   }
126 | 
127 |   // Back to development env if exsist
128 |   if (aliases.includes('development')) {
129 |     execa.shellSync(`npx firebase use development`, { stdio: 'inherit' })
130 |   }
131 | 
132 | })().catch(err => console.error(err))
133 | 


--------------------------------------------------------------------------------
/scripts/open.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs')
 2 | const path = require('path')
 3 | const execa = require('execa')
 4 | const open = require('open')
 5 | 
 6 | ;(async () => {
 7 |   const firebasersPath = path.join(__dirname, '/../.firebaserc')
 8 |   const firebaserc = JSON.parse(fs.readFileSync(firebasersPath).toString())
 9 |   const aliases = Object.keys(firebaserc.projects)
10 |   const arguments = process.argv.slice(2)
11 |   const alias = arguments[0]
12 |   const envPath = path.join(__dirname, `/../.env.${alias}.local`)
13 | 
14 |   // Alias need to be in .firebaserc
15 |   if (!aliases.includes(alias)) {
16 |     console.log(`
17 | Alias "${alias}" is not available. You can use the following:
18 |  - ${aliases.join('\n - ')}
19 | Example: npm run deploy production
20 | `)
21 |     return false
22 |   }
23 | 
24 |   // Get url
25 |   const url = fs.readFileSync(envPath)
26 |     .toString()
27 |     .split('\n')
28 |     .filter(line => {
29 |       return line.startsWith('VUE_APP_FIREBASE_AUTH_DOMAIN=')
30 |     })
31 |     .toString()
32 |     .replace('VUE_APP_FIREBASE_AUTH_DOMAIN=', 'https://')
33 | 
34 |   if (alias !== 'development') {
35 |     console.log(`Opening URL ${url} in the browser.`)
36 |     open(url, {wait: false})
37 |   }
38 |   else {
39 |     execa.shellSync(`npm run serve`, { stdio: 'inherit' })
40 |   }
41 | 
42 | })().catch(err => console.error(err))
43 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | // import _ from 'lodash'
  3 | import Navigation from '@/components/navigation/Navigation'
  4 | import Panel from '@/components/panel/Panel'
  5 | import Breadcrumb from '@/components/navigation/Breadcrumb'
  6 | import FooterContent from '@/components/utils/FooterContent'
  7 | import Notifications from '@/components/utils/Notifications'
  8 | import LoaderOverlay from '@/components/utils/LoaderOverlay'
  9 | import Dashboard from '@/views/Dashboard'
 10 | import Auth from '@/views/Auth'
 11 | 
 12 | export default {
 13 |   name: 'App',
 14 | 
 15 |   components: {
 16 |     Navigation,
 17 |     Panel,
 18 |     Breadcrumb,
 19 |     FooterContent,
 20 |     Auth,
 21 |     Notifications,
 22 |     LoaderOverlay,
 23 |     Dashboard,
 24 |   },
 25 | 
 26 |   computed: {
 27 | 
 28 |     activeProject () {
 29 |       return this.$store.getters.activeProject
 30 |     },
 31 | 
 32 |     activeItem () {
 33 |       return this.$store.getters.activeItem
 34 |     },
 35 | 
 36 |     showRouterView () {
 37 |       return this.activeProject &&
 38 |         this.$store.getters.isLoggedIn === true &&
 39 |         this.$store.state.projects.admin !== null &&
 40 |         this.$store.state.projects.editor !== null
 41 |     },
 42 | 
 43 |     showNavPanel () {
 44 |       return !!this.activeProject
 45 |     },
 46 | 
 47 |     showSidePanel () {
 48 |       return !!this.activeProject &&
 49 |         this.$store.state.route.name !== 'Settings' &&
 50 |         (this.$store.state.route.name !== 'Schema' || this.$store.state.utils.windowWidth > 900) &&
 51 |         (this.activeItem._type !== 'item' || this.$store.state.utils.windowWidth > 900)
 52 |       // return !!this.activeProject && this.$store.state.route.name !== 'Settings' && (!this.isMobile || this.mobileView === 'side')
 53 |     },
 54 | 
 55 |     showBreadcrumb () {
 56 |       return !!this.activeProject &&
 57 |         (this.$store.state.route.name === 'Content' || this.$store.state.route.name === 'Schema')
 58 |     },
 59 | 
 60 |     showLoaderOverlay () {
 61 |       return this.$store.getters.isLoggedIn === null || this.$store.getters.projects === null
 62 |     },
 63 | 
 64 |     showAuth () {
 65 |       return this.$store.getters.isLoggedIn === false
 66 |     },
 67 | 
 68 |     showMainPanel () {
 69 |       return this.$store.state.route.name !== 'Dashboard' &&
 70 |         (this.$store.state.route.name !== 'Content' || (this.activeItem._type === 'item' || this.$store.state.utils.windowWidth > 900))
 71 |     },
 72 | 
 73 |     showDashboard () {
 74 |       return this.$store.getters.isLoggedIn === true &&
 75 |         this.$store.state.route.name === 'Dashboard'
 76 |     },
 77 | 
 78 |     showFooterContent () {
 79 |       return !!this.activeProject
 80 |     },
 81 | 
 82 |   },
 83 | 
 84 |   created () {
 85 |     this.$store.dispatch('authState')
 86 |     this.$store.dispatch('resizeListener')
 87 |   },
 88 | }
 89 | </script>
 90 | 
 91 | <template>
 92 | <section id="app">
 93 |   <Navigation class="nav-panel" v-if="showNavPanel"/>
 94 | 
 95 |   <Panel class="side-panel" v-show="showSidePanel"/>
 96 | 
 97 |   <section class="main-panel" v-if="showMainPanel">
 98 |     <header class="header">
 99 |       <Breadcrumb class="readcrumb" v-if="showBreadcrumb"/>
100 |     </header>
101 | 
102 |     <router-view class="router-view" v-if="showRouterView"/>
103 | 
104 |     <footer class="footer" v-if="showFooterContent">
105 |       <FooterContent/>
106 |     </footer>
107 |   </section>
108 | 
109 |   <Dashboard v-if="showDashboard"/>
110 | 
111 |   <transition name="fade">
112 |     <Auth v-if="showAuth"/>
113 |   </transition>
114 | 
115 |   <Notifications/>
116 | 
117 |   <transition name="fade">
118 |     <LoaderOverlay v-if="showLoaderOverlay"/>
119 |   </transition>
120 | </section>
121 | </template>
122 | 
123 | <style lang="sass" scoped>
124 | @import './sass/variables'
125 | @import './sass/core/mixins'
126 | 
127 | #app
128 |   display: flex
129 |   width: 100%
130 |   height: 100%
131 |   background-image: linear-gradient(to right, $color-gray--lightest, $color-gray--lighter)
132 | 
133 | .nav-panel
134 |   flex-shrink: 0
135 |   width: 3.5rem
136 |   font-size: .8rem
137 | 
138 |   +breakpoint('medium')
139 |     width: 5rem
140 | 
141 | .side-panel
142 |   flex-grow: 1
143 | 
144 |   +breakpoint('medium')
145 |     flex-shrink: 0
146 |     width: 22rem
147 | 
148 | .main-panel
149 |   background-color: $background-color
150 |   display: flex
151 |   flex-direction: column
152 |   overflow-y: auto
153 |   width: 100%
154 | 
155 |   .header
156 |     flex-shrink: 0
157 |     padding-left: 1.5rem
158 |     padding-right: 1.5rem
159 | 
160 |     +breakpoint('medium')
161 |       padding-left: 3rem
162 |       padding-right: 3rem
163 | 
164 |   .router-view
165 |     flex-grow: 1
166 | 
167 |   .footer
168 |     flex-shrink: 0
169 |     box-shadow: 0 0 5rem $background-color, 0 0 15rem $background-color, 0 0 25rem $background-color
170 |     padding-top: 3rem
171 |     padding-bottom: 1rem
172 | 
173 | </style>
174 | 


--------------------------------------------------------------------------------
/src/assets/image-background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/raneio/editlayer/9fe46e34377c13a6626780acc98971eb023eca5a/src/assets/image-background.png


--------------------------------------------------------------------------------
/src/components/content/Editor.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import editorConfig from '@/editors/config'
  4 | 
  5 | let components = {}
  6 | let editors = []
  7 | 
  8 | _.each(editorConfig, configItem => {
  9 |   components[configItem.editor.name] = configItem.editor
 10 |   editors.push(configItem.schemaName)
 11 | })
 12 | 
 13 | export default {
 14 |   name: 'Editor',
 15 | 
 16 |   data () {
 17 |     return {
 18 |       editors: editors,
 19 |       forceEditorReload: false,
 20 |     }
 21 |   },
 22 | 
 23 |   components,
 24 | 
 25 |   computed: {
 26 |     activeItem () {
 27 |       return this.$store.getters.activeItem
 28 |     },
 29 | 
 30 |     activeComponentName () {
 31 |       let configItem = _.find(editorConfig, { 'schemaName': this.activeItem.EDITOR })
 32 |       return configItem.editor.name
 33 |     },
 34 | 
 35 |     isSupported () {
 36 |       return _.includes(this.editors, this.activeItem.EDITOR)
 37 |     },
 38 | 
 39 |     editorContentIsValid () {
 40 |       return this.$store.state.utils.editorContentIsValid
 41 |     },
 42 |   },
 43 | 
 44 |   watch: {
 45 |     'activeItem._path' (value) {
 46 |       this.forceEditorReload = true
 47 |       this.$nextTick(() => {
 48 |         this.forceEditorReload = false
 49 |       })
 50 |     },
 51 |   },
 52 | 
 53 |   methods: {
 54 |     closeEditor () {
 55 |       let pathItems = _.chain(this.$route.params.path).split('>').dropRight().value()
 56 | 
 57 |       while (pathItems.length > 0) {
 58 |         let path = _.join(pathItems, '.')
 59 |         let item = _.get(this.schema, path)
 60 | 
 61 |         if (item && !_.has(item, '_order')) {
 62 |           this.$router.push({ name: 'Content', params: { projectId: this.$store.getters.activeProject.id, path: item._path } })
 63 |           return false
 64 |         }
 65 | 
 66 |         pathItems = _.dropRight(pathItems)
 67 |       }
 68 | 
 69 |       this.$router.push({ name: 'Content', params: { projectId: this.$store.getters.activeProject.id } })
 70 |     },
 71 |   },
 72 | 
 73 | }
 74 | </script>
 75 | 
 76 | <template>
 77 | <section class="editor">
 78 |   <heading-core mode="primary">
 79 |     <h1>{{activeItem.TITLE}}</h1>
 80 |   </heading-core>
 81 | 
 82 |   <alert-core mode="info" v-if="activeItem.INFO">
 83 |     {{activeItem.INFO}}
 84 |   </alert-core>
 85 | 
 86 |   <component :is="activeComponentName" v-if="isSupported && !forceEditorReload"/>
 87 | 
 88 |   <alert-core mode="warning" v-if="!isSupported && activeItem.EDITOR">
 89 |     Editor "<strong>{{activeItem.EDITOR}}</strong>" is not supported, please change editor in the schema. Following editors are supported: <i>{{editors.join(', ')}}</i>
 90 |   </alert-core>
 91 | 
 92 |   <div class="error" v-if="!editorContentIsValid">
 93 |     <div class="message">Invalid Content</div>
 94 |   </div>
 95 | 
 96 |   <footer class="close-button">
 97 |     <button-core @click.native="closeEditor()">Close</button-core>
 98 |   </footer>
 99 | 
100 | </section>
101 | </template>
102 | 
103 | <style lang="sass" scoped>
104 | @import '../../sass/variables'
105 | @import '../../sass/core/mixins'
106 | 
107 | .editor
108 |   position: relative
109 |   width: 100%
110 |   flex-shrink: 0
111 |   +gap()
112 | 
113 | .error
114 |   position: absolute
115 |   top: -1.5rem
116 |   left: -.5rem
117 |   right: -.5rem
118 |   bottom: -.5rem
119 |   box-shadow: 0 .3rem .7rem 0 mix(transparent, $color-black, 90%), 0 .25rem .4rem 0 mix(transparent, $color-black, 93%), 0 0 0 .2rem $color-danger
120 |   border-radius: $input-border-radius
121 |   pointer-events: none
122 | 
123 |   .message
124 |     position: absolute
125 |     right: 0
126 |     top: -2rem
127 |     font-weight: 800
128 |     color: $color-danger
129 | 
130 | .close-button
131 |   +center()
132 |   margin-top: 3rem
133 | 
134 |   +breakpoint('medium')
135 |     display: none
136 | 
137 | </style>
138 | 


--------------------------------------------------------------------------------
/src/components/content/PartnerInfo.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'PartnerInfo',
 4 | 
 5 |   computed: {
 6 |     partnersUrl () {
 7 |       return `${this.$store.state.utils.editlayerUrl}/partners`
 8 |     },
 9 |   },
10 | }
11 | </script>
12 | 
13 | <template>
14 | <section class="partner-info">
15 | 
16 |   <alert-core mode="warning">
17 |     This editor is available only for official partners of Editlayer.
18 |   </alert-core>
19 | 
20 |   <button-core :href="partnersUrl" target="editlayer" mode="primary">
21 |     Become a partner
22 |   </button-core>
23 | </section>
24 | </template>
25 | 
26 | <style lang="sass" scoped>
27 | @import '../../sass/variables'
28 | @import '../../sass/core/mixins'
29 | 
30 | .partner-info
31 |   +gap()
32 | 
33 | </style>
34 | 


--------------------------------------------------------------------------------
/src/components/content/PublishButton.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import anime from 'animejs'
  4 | import buildJson from '@/utils/buildJson'
  5 | 
  6 | export default {
  7 |   name: 'PublishButton',
  8 | 
  9 |   computed: {
 10 | 
 11 |     structure () {
 12 |       return this.$store.getters.structure
 13 |     },
 14 | 
 15 |     activeProject () {
 16 |       return this.$store.getters.activeProject
 17 |     },
 18 | 
 19 |     isDraft () {
 20 |       if (!this.activeProject.publishedVersion) return true
 21 |       return !_.isEqual(this.activeProject.draft, this.activeProject.publishedVersion.draft) || this.activeProject.schema !== this.activeProject.publishedVersion.schema
 22 |     },
 23 | 
 24 |     neverPublished () {
 25 |       return this.activeProject.publishedVersion === null
 26 |     },
 27 | 
 28 |     publishProcess () {
 29 |       if (_.has(this.$store.state.projects.processes, this.activeProject.id)) {
 30 |         return _.get(this.$store.state.projects.processes, this.activeProject.id)
 31 |       }
 32 |       else {
 33 |         return null
 34 |       }
 35 |     },
 36 | 
 37 |     publishStatus () {
 38 |       if (this.publishProcess && this.publishProcess.status === 'publishing') {
 39 |         return 'publishing'
 40 |       }
 41 |       else if (this.isDraft === true) {
 42 |         return 'publish'
 43 |       }
 44 |       else {
 45 |         return 'published'
 46 |       }
 47 |     },
 48 | 
 49 |   },
 50 | 
 51 |   methods: {
 52 | 
 53 |     publish () {
 54 |       let json = buildJson(this.structure)
 55 | 
 56 |       let webhookConfig = _.has(this.$store.getters.activeProject, 'settings.webhook.config') ? this.$store.getters.activeProject.settings.webhook.config : null
 57 |       let webhookEnabled = _.has(this.$store.getters.activeProject, 'settings.webhook.enabled') ? this.$store.getters.activeProject.settings.webhook.enabled : null
 58 | 
 59 |       this.$store.dispatch('publishJson', {
 60 |         projectId: this.activeProject.id,
 61 |         projectName: this.activeProject.name,
 62 |         publishedBy: this.$store.getters.auth.id,
 63 |         json: json,
 64 |         // filename: this.activeProject.filename,
 65 |         token: this.activeProject.token,
 66 |         draft: this.activeProject.draft,
 67 |         schema: this.activeProject.schema,
 68 |         jsonUrl: this.activeProject.jsonUrl,
 69 |         webhookConfig: webhookConfig,
 70 |         webhookEnabled: webhookEnabled,
 71 |         email: this.$store.getters.auth.email,
 72 |         showLink: this.activeProject.auth.permissions.updateSettings,
 73 |       })
 74 |     },
 75 | 
 76 |   },
 77 | 
 78 |   mounted () {
 79 |     anime({
 80 |       targets: this.$refs['rotate-icon'],
 81 |       rotate: '360deg',
 82 |       easing: 'linear',
 83 |       duration: 1000,
 84 |       loop: true,
 85 |     })
 86 |   },
 87 | 
 88 | }
 89 | </script>
 90 | 
 91 | <template>
 92 | <section class="publish-button">
 93 | 
 94 |   <div
 95 |     v-if="publishStatus === 'published'"
 96 |     class="item -published"
 97 |     title="Publised"
 98 |   >
 99 |     <icon name="check"/>
100 |   </div>
101 | 
102 |   <a
103 |     v-if="publishStatus === 'publish'"
104 |     class="item -publish"
105 |     @click="publish()"
106 |     title="Publish"
107 |   >
108 |     <icon name="cloud-upload-alt"/>
109 |     <div class="text">
110 |       Publish
111 |     </div>
112 |   </a>
113 | 
114 |   <div
115 |     v-show="publishStatus === 'publishing'"
116 |     class="item -publishing"
117 |     title="Publishing"
118 |   >
119 |     <icon name="spinner" spin/>
120 |   </div>
121 | 
122 | </section>
123 | </template>
124 | 
125 | <style lang="sass" scoped>
126 | @import '../../sass/variables'
127 | @import '../../sass/core/mixins'
128 | 
129 | .item
130 |   +gap(.2rem)
131 |   display: flex
132 |   flex-direction: column
133 |   justify-content: center
134 |   align-items: center
135 |   height: 5rem
136 |   font-size: .7rem
137 |   font-weight: 800
138 |   background-color: mix($color-black, transparent, 30%)
139 |   color: $color-white
140 | 
141 |   .fa-icon
142 |     width: 2rem
143 | 
144 |   &.-published
145 | 
146 |     .fa-icon
147 |       opacity: .4
148 |       // color: $color-success
149 | 
150 |   &.-publish
151 | 
152 |     .fa-icon,
153 |     .text
154 |       transition: opacity $time--small
155 |       opacity: .7
156 | 
157 |     &:hover
158 |       .fa-icon,
159 |       .text
160 |         opacity: 1
161 | 
162 |   &.-publishing
163 | 
164 |     .fa-icon
165 |       width: 2rem
166 | 
167 | </style>
168 | 


--------------------------------------------------------------------------------
/src/components/core/Alert.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'Alert',
 4 | 
 5 |   props: {
 6 |     mode: {
 7 |       type: String,
 8 |       default: 'default',
 9 |     },
10 |     size: {
11 |       type: [String],
12 |       default: 'medium',
13 |     },
14 |   },
15 | 
16 | }
17 | </script>
18 | 
19 | <template>
20 | <div
21 |   class="alert-core"
22 |   :class="[
23 |     '-mode-'+mode,
24 |     '-size-'+size,
25 |   ]"
26 | >
27 |   <slot></slot>
28 | </div>
29 | </template>
30 | 
31 | <style lang="sass" scoped>
32 | @import '../../sass/variables'
33 | @import '../../sass/core/mixins'
34 | 
35 | @mixin mode($color)
36 |   border: 1px solid mix($color, $color-white, 30%)
37 |   background-color: mix($color, $color-white, 10%)
38 |   color: mix($color, $content-color, 40%)
39 | 
40 | .alert-core
41 |   padding: .75em 1rem
42 |   border-radius: $radius--small
43 |   // overflow: hidden
44 |   // text-overflow: ellipsis
45 | 
46 |   &.-mode-default
47 |     +mode($color-gray--dark)
48 | 
49 |   &.-mode-success
50 |     +mode($color-success)
51 | 
52 |   &.-mode-warning
53 |     +mode($color-warning)
54 | 
55 |   &.-mode-danger
56 |     +mode($color-danger)
57 | 
58 |   &.-mode-info
59 |     +mode($color-info)
60 | 
61 |   &.-size-small
62 |     font-size: .9rem
63 |     line-height: 1.3em
64 | 
65 |   &.-size-large
66 |     font-size: 1.4rem
67 | 
68 | </style>
69 | 


--------------------------------------------------------------------------------
/src/components/core/Button.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | export default {
  3 |   name: 'Button',
  4 | 
  5 |   props: {
  6 |     mode: {
  7 |       type: String,
  8 |       default: 'secondary',
  9 |     },
 10 |     size: {
 11 |       type: String,
 12 |       default: 'medium',
 13 |     },
 14 |     light: {
 15 |       type: Boolean,
 16 |       default: false,
 17 |     },
 18 |     circle: {
 19 |       type: Boolean,
 20 |       default: false,
 21 |     },
 22 |     active: {
 23 |       type: Boolean,
 24 |       default: false,
 25 |     },
 26 |     href: {
 27 |       type: [String, Boolean],
 28 |       default: false,
 29 |     },
 30 |   },
 31 | 
 32 |   computed: {
 33 |     tag () {
 34 |       if (this.href === false) {
 35 |         return 'button'
 36 |       }
 37 |       else {
 38 |         return 'a'
 39 |       }
 40 |     },
 41 |   },
 42 | 
 43 | }
 44 | </script>
 45 | 
 46 | <template>
 47 | <component
 48 |   :is="tag"
 49 |   class="button-core"
 50 |   :href="href"
 51 |   :class="[
 52 |     '-mode-'+mode,
 53 |     '-size-'+size,
 54 |     {'-light': light},
 55 |     {'-circle': circle},
 56 |     {'-active': active},
 57 |   ]"
 58 | >
 59 |   <slot></slot>
 60 | </component>
 61 | </template>
 62 | 
 63 | <style lang="sass" scoped>
 64 | @import '../../sass/variables'
 65 | @import '../../sass/core/mixins'
 66 | 
 67 | @mixin mode($color, $hover: $color-white)
 68 |   background: $color
 69 |   color: $button-text-color
 70 | 
 71 |   &:hover
 72 |     background: mix($color, $hover, 90%)
 73 |     color: $button-text-color--hover
 74 | 
 75 |   &:active,
 76 |   &.-active
 77 |     background: mix($color, $hover, 88%)
 78 |     color: $button-text-color--active
 79 |     // transform: translateY(1px)
 80 | 
 81 |   &[disabled]
 82 |     background: mix($color, $hover, 30%)
 83 |     color: $button-text-color--disabled
 84 | 
 85 |   &.-light
 86 |     background: transparent
 87 |     box-shadow: none
 88 |     color: $color
 89 |     padding-left: 0
 90 |     padding-right: 0
 91 | 
 92 |     &:hover
 93 |       color: mix($color, $hover, 90%)
 94 | 
 95 |     &:active,
 96 |     &.-active
 97 |       color: mix($color, $hover, 88%)
 98 | 
 99 |     &[disabled]
100 |       color: mix($color, $hover, 30%)
101 | 
102 | .button-core
103 |   +chain(.5em)
104 |   box-shadow: inset 0 -.1em .5em 0 mix($color-black, transparent, 5%), $shadow
105 |   display: inline-flex
106 |   position: relative
107 |   transition: box-shadow $time--small, background-color $time--small
108 | 
109 |   &:hover
110 |     box-shadow: inset 0 -.1em .5em 0 mix($color-black, transparent, 5%), $shadow--large
111 | 
112 |   &.-mode-primary
113 |     +mode($color-primary)
114 | 
115 |   &.-mode-secondary
116 |     +mode($color-secondary)
117 | 
118 |   &.-mode-success
119 |     +mode($color-success)
120 | 
121 |   &.-mode-warning
122 |     +mode($color-warning)
123 | 
124 |   &.-mode-danger
125 |     +mode($color-danger)
126 | 
127 |   &.-mode-info
128 |     +mode($color-info)
129 | 
130 |   &.-mode-invert
131 |     +mode($color-white, $color-black)
132 | 
133 |   &.-size-small
134 |     font-size: .8em
135 | 
136 |   &.-size-large
137 |     font-size: 1.3em
138 | 
139 |   &.-circle
140 |     +center()
141 |     border-radius: 50%
142 |     height: 2.75em
143 |     padding: 0
144 |     width: 2.75em
145 | 
146 |   > .fa-icon
147 |     height: 1em
148 | 
149 | </style>
150 | 


--------------------------------------------------------------------------------
/src/components/core/Card.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'Card',
 4 | 
 5 |   props: {
 6 |     mode: {
 7 |       type: String,
 8 |       default: 'default',
 9 |     },
10 |     size: {
11 |       type: [String],
12 |       default: 'medium',
13 |     },
14 |     link: {
15 |       type: [Boolean],
16 |       default: false,
17 |     },
18 |   },
19 | 
20 | }
21 | </script>
22 | 
23 | <template>
24 | <section
25 |   class="card-core"
26 |   :class="[
27 |     '-mode-'+mode,
28 |     '-size-'+size,
29 |     {'-link': link}
30 |   ]"
31 | >
32 |   <slot></slot>
33 | </section>
34 | </template>
35 | 
36 | <style lang="sass" scoped>
37 | @import '../../sass/variables'
38 | @import '../../sass/core/mixins'
39 | 
40 | .card-core
41 |   box-shadow: $shadow--small
42 |   background-color: $background-color
43 |   width: 100%
44 |   border-radius: $radius
45 |   transition: box-shadow $time--small
46 | 
47 |   .header,
48 |   .footer,
49 |     +chain(1em)
50 |     padding: .5em 1rem
51 | 
52 |   .header
53 |     border-top-left-radius: $radius
54 |     border-top-right-radius: $radius
55 |     background-color: $color-gray--lightest
56 |     border-bottom: 1px solid $color-gray--lighter
57 | 
58 |     +hx
59 |       font-size: 1.25em
60 |       font-weight: 400
61 |       overflow: hidden
62 |       text-overflow: ellipsis
63 |       white-space: nowrap
64 | 
65 |     &:last-child
66 |       border-bottom: 0
67 | 
68 |   .main
69 |     padding: 1em 1.5rem
70 | 
71 |   .footer
72 |     border-bottom-left-radius: $radius
73 |     border-bottom-right-radius: $radius
74 | 
75 |   &.-link:hover
76 |     cursor: pointer
77 |     box-shadow: $shadow
78 | 
79 |   &.-size-small
80 |     font-size: .8rem
81 | 
82 |     .header
83 |       +hx
84 |         font-weight: 600
85 | 
86 |     &.-link:hover
87 |       cursor: pointer
88 |       box-shadow: $shadow
89 | 
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/components/core/Heading.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'Heading',
 4 | 
 5 |   props: {
 6 |     mode: {
 7 |       type: String,
 8 |       default: 'secondary',
 9 |     },
10 |   },
11 | 
12 | }
13 | </script>
14 | 
15 | <template>
16 | <header
17 |   class="heading-core"
18 |   :class="['-mode-'+mode,]"
19 | >
20 |   <slot></slot>
21 | </header>
22 | </template>
23 | 
24 | <style lang="sass" scoped>
25 | @import '../../sass/variables'
26 | @import '../../sass/core/mixins'
27 | 
28 | .heading-core
29 |   color: $color-gray
30 | 
31 |   &.-mode-primary
32 |     font-size: 1.2rem
33 | 
34 |     +hx
35 |       font-size: 2.4rem
36 | 
37 |   &.-mode-secondary
38 |     font-size: 1rem
39 | 
40 |     +hx
41 |       font-size: 1.4rem
42 |       font-weight: 800
43 |       text-transform: uppercase
44 | 
45 | </style>
46 | 


--------------------------------------------------------------------------------
/src/components/core/Notification.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | 
  4 | export default {
  5 |   name: 'Notification',
  6 | 
  7 |   props: {
  8 |     mode: {
  9 |       type: String,
 10 |       default: 'default',
 11 |     },
 12 |     message: {
 13 |       type: String,
 14 |       default: '',
 15 |       required: true,
 16 |     },
 17 |     link: {
 18 |       type: [Object, Boolean],
 19 |       default: false,
 20 |     },
 21 |     progress: {
 22 |       type: [Number, Boolean],
 23 |       default: 0,
 24 |     },
 25 |     id: String,
 26 |     required: true,
 27 |   },
 28 | 
 29 |   data () {
 30 |     return {
 31 |       progressPrecent: 0,
 32 |       isMouseOver: false,
 33 |     }
 34 |   },
 35 | 
 36 |   watch: {
 37 | 
 38 |     progress (value) {
 39 |       if (_.isNumber(value)) {
 40 |         this.progressPrecent = value
 41 |       }
 42 |     },
 43 | 
 44 |   },
 45 | 
 46 |   methods: {
 47 | 
 48 |     runProgress () {
 49 |       if (this.isMouseOver !== true && this.progress !== false) {
 50 |         this.progressPrecent = this.progressPrecent + 2
 51 |       }
 52 | 
 53 |       _.delay(() => {
 54 |         if (this.progressPrecent >= 100) {
 55 |           _.delay(() => {
 56 |             this.close()
 57 |           }, 1000)
 58 |           return null
 59 |         }
 60 | 
 61 |         this.runProgress()
 62 |       }, 200)
 63 |     },
 64 | 
 65 |     mouseover () {
 66 |       this.isMouseOver = true
 67 |     },
 68 | 
 69 |     mouseleave () {
 70 |       this.isMouseOver = false
 71 |     },
 72 | 
 73 |     close () {
 74 |       this.$store.commit('deleteNotification', { id: this.id })
 75 |     },
 76 | 
 77 |   },
 78 | 
 79 |   created () {
 80 |     this.runProgress()
 81 |   },
 82 | 
 83 | }
 84 | </script>
 85 | 
 86 | <template>
 87 | <alert-core class="notification" :mode="mode" size="small" @mouseover.native="mouseover" @mouseleave.native="mouseleave">
 88 |   <button-core class="close" light @click.native="close()">
 89 |     <icon name="times"/>
 90 |   </button-core>
 91 | 
 92 |   <main class="main" v-text="message"></main>
 93 | 
 94 |   <button-core :mode="mode" size="small" :href="link.url" :target="link.target" v-if="link.url">
 95 |     {{link.text}}
 96 |   </button-core>
 97 | 
 98 |   <div class="progress" :style="{ width: progressPrecent + '%'}"></div>
 99 | </alert-core>
100 | </template>
101 | 
102 | <style lang="sass" scoped>
103 | @import '../../sass/variables'
104 | @import '../../sass/core/mixins'
105 | 
106 | .notification
107 |   box-shadow: $shadow--large
108 |   position: relative
109 |   +gap(.5em)
110 | 
111 |   .close
112 |     position: absolute
113 |     top: -.5rem
114 |     right: .5rem
115 | 
116 |     .fa-icon
117 |       height: 1rem
118 | 
119 |   .progress
120 |     position: absolute
121 |     left: 0
122 |     bottom: 0
123 |     background-color: $color-gray
124 |     height: .25em
125 |     transition: width .3s linear
126 | 
127 |   &.-mode-default
128 |     .progress
129 |       background-color: $color-gray
130 | 
131 |   &.-mode-success
132 |     .progress
133 |       background-color: $color-success
134 | 
135 |   &.-mode-warning
136 |     .progress
137 |       background-color: $color-warning
138 | 
139 |   &.-mode-danger
140 |     .progress
141 |       background-color: $color-danger
142 | 
143 |   &.-mode-info
144 |     .progress
145 |       background-color: $color-info
146 | 
147 | </style>
148 | 


--------------------------------------------------------------------------------
/src/components/core/registerAll.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Alert from '@/components/core/Alert'
 3 | import Button from '@/components/core/Button'
 4 | import Heading from '@/components/core/Heading'
 5 | import Card from '@/components/core/Card'
 6 | import Notification from '@/components/core/Notification'
 7 | 
 8 | Vue.component('alert-core', Alert)
 9 | Vue.component('button-core', Button)
10 | Vue.component('heading-core', Heading)
11 | Vue.component('card-core', Card)
12 | Vue.component('notification-core', Notification)
13 | 


--------------------------------------------------------------------------------
/src/components/dashboard/Navigation.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import firebase from '@/utils/firebase'
 3 | 
 4 | export default {
 5 |   name: 'Navigation',
 6 | 
 7 |   computed: {
 8 |     email () {
 9 |       return this.$store.getters.auth.email
10 |     },
11 |   },
12 | 
13 |   methods: {
14 | 
15 |     logout () {
16 |       firebase.auth.signOut()
17 |         .catch(error => console.error('Logout failed', error))
18 |     },
19 | 
20 |   },
21 | 
22 | }
23 | </script>
24 | 
25 | <template>
26 | <nav class="navigation">
27 |   <button-core mode="invert" light class="logo" href="https://editlayer.org">
28 |     <icon name="editlayer"/>
29 |     <span>Editlayer</span>
30 |   </button-core>
31 | 
32 |   <hr>
33 | 
34 |   <button-core mode="invert" light class="logout" @click.native="logout()">
35 |     <div class="text">
36 |       <span>Logout</span>
37 |       <div class="email" v-text="email"></div>
38 |     </div>
39 | 
40 |     <icon class="icon -logout" name="sign-out-alt"/>
41 | 
42 |   </button-core>
43 | </nav>
44 | </template>
45 | 
46 | <style lang="sass" scoped>
47 | @import '../../sass/variables'
48 | @import '../../sass/core/mixins'
49 | 
50 | .navigation
51 |   +container('huge')
52 |   padding-top: .5rem
53 |   padding-bottom: .5rem
54 |   width: 100%
55 |   background: linear-gradient(to bottom, $color-primary, mix($color-primary, $color-black, 85%))
56 |   justify-content: space-between
57 |   flex-shrink: 0
58 |   text-align: center
59 | 
60 |   +breakpoint('small')
61 |     +chain()
62 | 
63 |   .logo
64 |     +chain(.5rem)
65 |     +center()
66 |     font-weight: 900
67 |     font-size: 1.7rem
68 |     text-transform: none
69 | 
70 |     .light
71 |       font-weight: 300
72 | 
73 | .logout
74 | 
75 |   .text
76 |     text-align: right
77 |     line-height: 1.2em
78 | 
79 |   .email
80 |     text-transform: none
81 |     font-weight: 400
82 |     font-size: .8rem
83 | 
84 |   .icon.-logout
85 |     width: 2rem
86 |     height: 1.5rem
87 | 
88 | </style>
89 | 


--------------------------------------------------------------------------------
/src/components/dashboard/NewProjectButton.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import NewProjectModal from '@/components/dashboard/NewProjectModal'
 3 | 
 4 | export default {
 5 |   name: 'NewProjectButton',
 6 | 
 7 |   components: {
 8 |     NewProjectModal,
 9 |   },
10 | 
11 |   data () {
12 |     return {
13 |       name: '',
14 |     }
15 |   },
16 | 
17 |   computed: {
18 | 
19 |     activeModal () {
20 |       return this.$store.state.utils.activeModal
21 |     },
22 | 
23 |   },
24 | 
25 |   methods: {
26 |     openModal () {
27 |       this.$store.commit('setActiveModal', 'new-project')
28 |     },
29 |   },
30 | 
31 | }
32 | </script>
33 | 
34 | <template>
35 | <section class="new-project">
36 |   <button-core
37 |     size="large"
38 |     mode="success"
39 |     @click.native="openModal()"
40 |   >
41 |     <icon name="plus"/>
42 |     <span>New Project</span>
43 |   </button-core>
44 | 
45 |   <transition name="fade--fast">
46 |     <NewProjectModal v-if="activeModal === 'new-project'"/>
47 |   </transition>
48 | </section>
49 | </template>
50 | 
51 | <style lang="sass" scoped>
52 | @import '../../sass/variables'
53 | @import '../../sass/core/mixins'
54 | </style>
55 | 


--------------------------------------------------------------------------------
/src/components/dashboard/NewProjectModal.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | 
 3 | export default {
 4 |   name: 'NewProjectModal',
 5 | 
 6 |   data () {
 7 |     return {
 8 |       name: '',
 9 |     }
10 |   },
11 | 
12 |   methods: {
13 | 
14 |     newProject () {
15 |       if (this.name !== null && this.name !== '') {
16 |         this.$store.dispatch('newProject', {
17 |           name: this.name,
18 |         })
19 | 
20 |         this.closeModal()
21 |       }
22 |     },
23 | 
24 |     closeModal () {
25 |       this.$store.commit('setActiveModal', null)
26 |     },
27 | 
28 |   },
29 | 
30 |   mounted () {
31 |     this.$refs.projectName.focus()
32 |   },
33 | 
34 | }
35 | </script>
36 | 
37 | <template>
38 | <form class="modal" @click.self="closeModal()" @submit.prevent="newProject()" method="post">
39 |   <card-core>
40 |     <header class="header">
41 |       <h1 class="heading -feature">New Project</h1>
42 |     </header>
43 | 
44 |     <main class="main">
45 |       <label class="label">
46 |         <div>Project name</div>
47 |         <input type="text" v-model="name" ref="projectName">
48 |       </label>
49 |     </main>
50 | 
51 |     <footer class="footer">
52 |       <hr>
53 |       <button-core light @click.native="closeModal()">Cancel</button-core>
54 |       <button-core type="submit" mode="success">Create new project</button-core>
55 |     </footer>
56 |   </card-core>
57 | </form>
58 | </template>
59 | 
60 | <style lang="sass" scoped>
61 | @import '../../sass/variables'
62 | @import '../../sass/core/mixins'
63 | 
64 | .modal
65 |   position: fixed
66 |   top: 0
67 |   left: 0
68 |   right: 0
69 |   bottom: 0
70 |   background-color: mix($color-black, transparent, 80%)
71 |   z-index: 99999
72 |   +center()
73 | 
74 |   .card-core
75 |     width: $breakpoint--small
76 |     box-shadow: $shadow--small, $shadow--large
77 |     border: 1px solid $color-gray--light
78 | 
79 |   .label
80 |     +gap(.5rem)
81 | 
82 | </style>
83 | 


--------------------------------------------------------------------------------
/src/components/dashboard/Projects.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import dayjs from 'dayjs'
  4 | import relativeTime from 'dayjs/plugin/relativeTime'
  5 | 
  6 | dayjs.extend(relativeTime)
  7 | 
  8 | export default {
  9 |   name: 'Projects',
 10 | 
 11 |   computed: {
 12 | 
 13 |     projects () {
 14 |       return this.$store.getters.projects
 15 |     },
 16 | 
 17 |   },
 18 | 
 19 |   methods: {
 20 | 
 21 |     selectProject (project) {
 22 |       this.$router.push({ name: 'Content', params: { projectId: project.id } })
 23 |     },
 24 | 
 25 |     usersCount (project, role) {
 26 |       return _.filter(project.users, { role: role }).length
 27 |     },
 28 | 
 29 |     usersText (project, role, singular, plural) {
 30 |       let count = this.usersCount(project, role)
 31 |       return count > 1 ? `${count} ${plural}` : `${count} ${singular}`
 32 |     },
 33 | 
 34 |     publishedAgo (project) {
 35 |       let milliseconds = _.get(project, 'publishedVersion.publishedAt.seconds') * 1000
 36 |       let published = dayjs(milliseconds).fromNow()
 37 |       return milliseconds ? `Published ${published}` : 'Never published'
 38 |     },
 39 | 
 40 |   },
 41 | 
 42 | }
 43 | </script>
 44 | 
 45 | <template>
 46 | <section class="projects">
 47 |   <div class="project" v-for="project in projects" :key="project.id">
 48 | 
 49 |     <card-core link @click.native="selectProject(project, $event)">
 50 |       <header class="header">
 51 |         <h2 v-text="project.name"></h2>
 52 |         <div class="draft" v-if="project.status === 'draft'">draft</div>
 53 |       </header>
 54 | 
 55 |       <main class="main">
 56 | 
 57 |         <div class="line">
 58 |           <icon name="regular/user"/>
 59 |           <span class="text">
 60 |             <span v-if="usersCount(project, 'admin')" :class="{'my-role': project.auth.role === 'admin'}">
 61 |               {{usersText(project, 'admin', 'Admin', 'Admins')}}
 62 |             </span>
 63 | 
 64 |             <span v-if="usersCount(project, 'admin') && usersCount(project, 'editor')">, </span>
 65 | 
 66 |             <span v-if="usersCount(project, 'editor')" :class="{'my-role': project.auth.role === 'editor'}">
 67 |               {{usersText(project, 'editor', 'Editor', 'Editors')}}
 68 |             </span>
 69 |           </span>
 70 |         </div>
 71 | 
 72 |         <div class="line">
 73 |           <icon name="regular/clock"/>
 74 |           <span class="text" v-text="publishedAgo(project)"></span>
 75 |         </div>
 76 | 
 77 |       </main>
 78 |     </card-core>
 79 | 
 80 |   </div>
 81 | </section>
 82 | </template>
 83 | 
 84 | <style lang="sass" scoped>
 85 | @import '../../sass/variables'
 86 | @import '../../sass/core/mixins'
 87 | 
 88 | .projects
 89 |   +grid(1, 2rem)
 90 | 
 91 |   +breakpoint('small')
 92 |     +grid(2)
 93 | 
 94 |   +breakpoint('medium')
 95 |     +grid(3)
 96 | 
 97 |   +breakpoint('large')
 98 |     +grid(4)
 99 | 
100 |   +breakpoint('huge')
101 |     +grid(5)
102 | 
103 |   .main
104 |     +gap(.5rem)
105 |     font-size: .9rem
106 | 
107 |   .line
108 |     +chain(.75rem)
109 | 
110 |     .text
111 |       overflow: hidden
112 |       text-overflow: ellipsis
113 |       white-space: nowrap
114 | 
115 |     .fa-icon
116 |       width: 1.2rem
117 |       height: 1.2rem
118 |       fill: $color-gray--dark
119 | 
120 |   .my-role
121 |     font-weight: 700
122 | 
123 |   .draft
124 |     color: $color-warning
125 | 
126 | </style>
127 | 


--------------------------------------------------------------------------------
/src/components/navigation/BackButton.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import anime from 'animejs'
  4 | 
  5 | export default {
  6 |   name: 'BackButton',
  7 | 
  8 |   computed: {
  9 | 
 10 |     activeProject () {
 11 |       return this.$store.getters.activeProject
 12 |     },
 13 | 
 14 |     structure () {
 15 |       return this.$store.getters.structure
 16 |     },
 17 | 
 18 |     activeItem (state, getters) {
 19 |       return this.$store.getters.activeItem
 20 |     },
 21 | 
 22 |     breadcrumb () {
 23 |       let breadcrumb = []
 24 |       let breadcrumbItems = []
 25 | 
 26 |       if (this.$route.params.path) {
 27 |         breadcrumbItems = _.split(this.$route.params.path, '>')
 28 |       }
 29 | 
 30 |       if (_.has(this.activeItem, 'EDITOR')) {
 31 |         breadcrumbItems = _.dropRight(breadcrumbItems)
 32 |       }
 33 | 
 34 |       while (breadcrumbItems.length > 0) {
 35 |         let path = _.join(breadcrumbItems, '.')
 36 |         let item = _.get(this.structure, path)
 37 | 
 38 |         if (item && !_.has(item, '_order')) {
 39 |           breadcrumb.unshift({
 40 |             path: path,
 41 |             projectId: this.$route.params.projectId,
 42 |           })
 43 |         }
 44 | 
 45 |         breadcrumbItems = _.dropRight(breadcrumbItems)
 46 |       }
 47 | 
 48 |       if (this.$route.params.projectId && this.activeProject) {
 49 |         breadcrumb.unshift({
 50 |           name: this.activeProject.name,
 51 |           projectId: this.$route.params.projectId,
 52 |         })
 53 |       }
 54 | 
 55 |       return breadcrumb
 56 |     },
 57 | 
 58 |   },
 59 | 
 60 |   methods: {
 61 | 
 62 |     goBack () {
 63 |       let backItem = this.breadcrumb[this.breadcrumb.length - 2]
 64 |       if (backItem) {
 65 |         this.selectItem(backItem)
 66 |       }
 67 |       else {
 68 |         this.$router.push({ name: 'Dashboard' })
 69 |       }
 70 |     },
 71 | 
 72 |     selectItem (item) {
 73 |       let path = _.replace(item.path, /\./g, '>')
 74 | 
 75 |       anime.timeline()
 76 |         .add({
 77 |           targets: '.js-panel',
 78 |           translateX: '100%',
 79 |           opacity: 0,
 80 |           easing: 'linear',
 81 |           duration: 150,
 82 |         })
 83 |         .add({
 84 |           targets: '.js-panel',
 85 |           translateX: '-100%',
 86 |           duration: 0,
 87 |           complete: (anim) => {
 88 |             if (item.projectId && path) {
 89 |               this.$router.push({ name: this.$route.name, params: { projectId: item.projectId, path: path } })
 90 |             }
 91 |             else if (item.projectId) {
 92 |               this.$router.push({ name: this.$route.name, params: { projectId: item.projectId } })
 93 |             }
 94 |           },
 95 |         })
 96 |         .add({
 97 |           targets: '.js-panel',
 98 |           translateX: 0,
 99 |           opacity: 1,
100 |           easing: 'linear',
101 |           duration: 150,
102 |         })
103 |     },
104 | 
105 |   },
106 | 
107 | }
108 | </script>
109 | 
110 | <template>
111 | <button-core light @click.native="goBack()">
112 |   <icon name="chevron-left"/>
113 |   <span v-if="breadcrumb.length === 1">Dashboard</span>
114 |   <span v-if="breadcrumb.length > 1">Back</span>
115 | </button-core>
116 | </template>
117 | 
118 | <style lang="sass" scoped>
119 | @import '../../sass/variables'
120 | @import '../../sass/core/mixins'
121 | 
122 | </style>
123 | 


--------------------------------------------------------------------------------
/src/components/navigation/Breadcrumb.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import anime from 'animejs'
  4 | 
  5 | export default {
  6 |   name: 'Breadcrumb',
  7 | 
  8 |   computed: {
  9 | 
 10 |     activeProject () {
 11 |       return this.$store.getters.activeProject
 12 |     },
 13 | 
 14 |     structure () {
 15 |       return this.$store.getters.structure
 16 |     },
 17 | 
 18 |     activeItem (state, getters) {
 19 |       return this.$store.getters.activeItem
 20 |     },
 21 | 
 22 |     breadcrumb () {
 23 |       let breadcrumb = []
 24 |       let breadcrumbItems = []
 25 | 
 26 |       if (this.$route.params.path) {
 27 |         breadcrumbItems = _.split(this.$route.params.path, '>')
 28 |       }
 29 | 
 30 |       if (_.has(this.activeItem, 'EDITOR')) {
 31 |         breadcrumbItems = _.dropRight(breadcrumbItems)
 32 |       }
 33 | 
 34 |       while (breadcrumbItems.length > 0) {
 35 |         let path = _.join(breadcrumbItems, '.')
 36 |         let item = _.get(this.structure, path)
 37 | 
 38 |         if (item && !_.has(item, '_order')) {
 39 |           breadcrumb.unshift({
 40 |             name: item.TITLE,
 41 |             path: path,
 42 |             projectId: this.$route.params.projectId,
 43 |           })
 44 |         }
 45 | 
 46 |         breadcrumbItems = _.dropRight(breadcrumbItems)
 47 |       }
 48 | 
 49 |       if (this.$route.params.projectId && this.activeProject) {
 50 |         breadcrumb.unshift({
 51 |           name: this.activeProject.name,
 52 |           projectId: this.$route.params.projectId,
 53 |         })
 54 |       }
 55 | 
 56 |       return breadcrumb
 57 |     },
 58 | 
 59 |     // isMobile () {
 60 |     //   return this.$store.getters.isMobile
 61 |     // },
 62 | 
 63 |   },
 64 | 
 65 |   methods: {
 66 | 
 67 |     selectItem (item) {
 68 |       let path = _.replace(item.path, /\./g, '>')
 69 | 
 70 |       anime.timeline()
 71 |         .add({
 72 |           targets: '.js-panel',
 73 |           translateX: '100%',
 74 |           opacity: 0,
 75 |           easing: 'linear',
 76 |           duration: 150,
 77 |         })
 78 |         .add({
 79 |           targets: '.js-panel',
 80 |           translateX: '-100%',
 81 |           duration: 0,
 82 |           complete: (anim) => {
 83 |             if (item.projectId && path) {
 84 |               this.$router.push({ name: this.$route.name, params: { projectId: item.projectId, path: path } })
 85 |             }
 86 |             else if (item.projectId) {
 87 |               this.$router.push({ name: this.$route.name, params: { projectId: item.projectId } })
 88 |             }
 89 |           },
 90 |         })
 91 |         .add({
 92 |           targets: '.js-panel',
 93 |           translateX: 0,
 94 |           opacity: 1,
 95 |           easing: 'linear',
 96 |           duration: 150,
 97 |         })
 98 |     },
 99 | 
100 |   },
101 | 
102 | }
103 | </script>
104 | 
105 | <template>
106 | <section class="breadcrumb">
107 | 
108 |   <div
109 |     class="crumb"
110 |     v-for="(item, idx) in breadcrumb"
111 |     :key="idx"
112 |   >
113 | 
114 |     <icon name="chevron-right" v-if="idx > 0"/>
115 | 
116 |     <button-core
117 |       light
118 |       v-if="idx < breadcrumb.length-1 || $store.state.utils.windowWidth <= 900"
119 |       @click.native="selectItem(item)"
120 |     >
121 |       {{item.name}}
122 |     </button-core>
123 | 
124 |     <span v-else>
125 |       {{item.name}}
126 |     </span>
127 | 
128 |   </div>
129 | </section>
130 | </template>
131 | 
132 | <style lang="sass" scoped>
133 | @import '../../sass/variables'
134 | @import '../../sass/core/mixins'
135 | 
136 | .breadcrumb
137 |   +chain(.6em)
138 |   transition: opacity .2s
139 |   font-size: .9rem
140 |   // border-bottom: 1px solid $color-gray--light
141 |   height: 3rem
142 |   color: $color-gray
143 | 
144 | .button-core
145 |   text-transform: none
146 | 
147 | .crumb
148 |   +chain(.6em)
149 |   line-height: 1em
150 | 
151 | .fa-icon
152 |   width: .4rem
153 |   color: $color-gray--light
154 | 
155 | </style>
156 | 


--------------------------------------------------------------------------------
/src/components/navigation/Navigation.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import Breadcrumb from '@/components/navigation/Breadcrumb'
  4 | import PublishButton from '@/components/content/PublishButton'
  5 | 
  6 | export default {
  7 |   name: 'Navigation',
  8 | 
  9 |   components: {
 10 |     Breadcrumb,
 11 |     PublishButton,
 12 |   },
 13 | 
 14 |   computed: {
 15 | 
 16 |     activeProject () {
 17 |       return this.$store.getters.activeProject
 18 |     },
 19 | 
 20 |     permissions () {
 21 |       return _.get(this.activeProject, 'auth.permissions') || {}
 22 |     },
 23 | 
 24 |     neverPublished () {
 25 |       if (!this.activeProject) return false
 26 |       return this.activeProject.publishedVersion === null
 27 |     },
 28 | 
 29 |   },
 30 | 
 31 | }
 32 | </script>
 33 | 
 34 | <template>
 35 | <nav class="navigation">
 36 | 
 37 |   <template v-if="$route.params.projectId">
 38 | 
 39 |     <PublishButton  class="publish-button"/>
 40 | 
 41 |     <router-link
 42 |       v-if="$route.params.projectId"
 43 |       class="item"
 44 |       :class="{'-active': $route.name === 'Content'}"
 45 |       :to="{name: 'Content', params: {projectId: $route.params.projectId, path: $route.params.path}}"
 46 |     >
 47 |       <icon name="regular/edit"/>
 48 |       <div class="text">Content</div>
 49 |     </router-link>
 50 | 
 51 |     <router-link
 52 |       v-if="$route.params.projectId && permissions.updateSchema === true"
 53 |       class="item"
 54 |       :class="{'-active': $route.name === 'Schema'}"
 55 |       :to="{name: 'Schema', params: {projectId: $route.params.projectId, path: $route.params.path}}"
 56 |     >
 57 |       <icon name="schema"/>
 58 |       <div class="text">Schema</div>
 59 |     </router-link>
 60 | 
 61 |     <router-link
 62 |       v-if="$route.params.projectId && permissions.updateSettings === true"
 63 |       class="item"
 64 |       :class="{'-active': $route.name === 'Settings'}"
 65 |       :to="{name: 'Settings', params: {projectId: this.$route.params.projectId, path: this.$route.params.path}}"
 66 |     >
 67 |       <icon name="cogs"/>
 68 |       <div class="text">Settings</div>
 69 |     </router-link>
 70 | 
 71 |     <hr>
 72 | 
 73 |     <router-link
 74 |       class="item"
 75 |       :to="{ name: 'Dashboard' }"
 76 |     >
 77 |       <icon name="home"/>
 78 |       <div class="text">Dashboard</div>
 79 |     </router-link>
 80 | 
 81 |   </template>
 82 | 
 83 | </nav>
 84 | </template>
 85 | 
 86 | <style lang="sass" scoped>
 87 | @import '../../sass/variables'
 88 | @import '../../sass/core/mixins'
 89 | 
 90 | .navigation
 91 |   +invert()
 92 |   display: flex
 93 |   flex-direction: column
 94 |   background-color: $color-primary
 95 |   background-image: linear-gradient(to right, $color-primary, mix($color-primary, $color-black, 85%))
 96 |   padding-bottom: .5rem
 97 |   overflow-y: auto
 98 | 
 99 |   &:hover
100 | 
101 |     .item .text
102 |       transition: opacity 0s
103 |       opacity: 1
104 | 
105 |   hr
106 |     flex-grow: 1
107 | 
108 | .publish-button
109 |   margin-bottom: 1rem
110 | 
111 | .item
112 |   +gap(.2rem)
113 |   display: flex
114 |   flex-direction: column
115 |   align-items: center
116 |   transition: opacity .2s
117 |   font-size: .65rem
118 |   font-weight: 700
119 |   opacity: .6
120 |   padding-top: 1rem
121 |   padding-bottom: 1rem
122 | 
123 |   &:hover
124 |     opacity: 1
125 | 
126 |   &.-active
127 |     filter: drop-shadow(0 0 10px mix($color-white, transparent, 60%))
128 |     opacity: 1
129 | 
130 |   .text
131 |     transition: opacity 1s
132 |     transition-delay: 1s
133 |     opacity: 0
134 |     flex-shrink: 0
135 | 
136 |   .fa-icon
137 |     width: 1.7rem
138 |     fill: $color-white
139 |     min-height: 1rem
140 | 
141 | </style>
142 | 


--------------------------------------------------------------------------------
/src/components/panel/Item.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import anime from 'animejs'
  4 | import editorConfig from '@/editors/config'
  5 | 
  6 | let components = {}
  7 | let editors = []
  8 | 
  9 | _.each(editorConfig, configItem => {
 10 |   components[configItem.preview.name] = configItem.preview
 11 |   editors.push(configItem.schemaName)
 12 | })
 13 | 
 14 | export default {
 15 |   name: 'Item',
 16 | 
 17 |   props: {
 18 |     item: Object,
 19 |     parentItems: Object,
 20 |     // selectItem: Function,
 21 |   },
 22 | 
 23 |   components,
 24 | 
 25 |   computed: {
 26 | 
 27 |     projectId () {
 28 |       return this.$route.params.projectId
 29 |     },
 30 | 
 31 |     isActive () {
 32 |       if (this.$route.name !== 'Content') return false
 33 |       return !!(this.item._path === _.replace(this.$route.params.path, />/g, '.'))
 34 |     },
 35 | 
 36 |     isParent () {
 37 |       return this.item._type === 'object' || this.item._type === 'array'
 38 |     },
 39 | 
 40 |     isDraft () {
 41 |       return this.item._status === 'draft'
 42 |     },
 43 | 
 44 |     activePreviewComponentName () {
 45 |       let configItem = _.find(editorConfig, { 'schemaName': this.item.EDITOR })
 46 |       return configItem ? configItem.preview.name : false
 47 |     },
 48 | 
 49 |     title () {
 50 |       if (!this.item.TITLE) return '…'
 51 |       return this.item.TITLE
 52 |     },
 53 | 
 54 |   },
 55 | 
 56 |   methods: {
 57 | 
 58 |     selectItem (item) {
 59 |       let projectId = (item.FILE_ID) ? item.FILE_ID : this.projectId
 60 |       let routeName = (item._type === 'item') ? 'Content' : this.$route.name
 61 |       let path = _.replace(item._path, /\./g, '>')
 62 | 
 63 |       if (item._type === 'item') {
 64 |         this.$router.push({ name: routeName, params: { projectId: projectId, path: path } })
 65 |         return false
 66 |       }
 67 | 
 68 |       if (routeName === 'Dashboard') {
 69 |         routeName = (this.$route.params.view === 'schema') ? 'Schema' : 'Content'
 70 |       }
 71 | 
 72 |       anime.timeline()
 73 |         .add({
 74 |           targets: '.js-panel',
 75 |           translateX: '-100%',
 76 |           opacity: 0,
 77 |           easing: 'linear',
 78 |           duration: 150,
 79 |         })
 80 |         .add({
 81 |           targets: '.js-panel',
 82 |           translateX: '100%',
 83 |           duration: 0,
 84 |           complete: (anim) => {
 85 |             if (path) {
 86 |               this.$router.push({ name: routeName, params: { projectId: projectId, path: path } })
 87 |             }
 88 |             else {
 89 |               this.$router.push({ name: routeName, params: { projectId: projectId } })
 90 |             }
 91 |           },
 92 |         })
 93 |         .add({
 94 |           targets: '.js-panel',
 95 |           translateX: 0,
 96 |           opacity: 1,
 97 |           easing: 'linear',
 98 |           duration: 150,
 99 |         })
100 |     },
101 | 
102 |   },
103 | 
104 | }
105 | </script>
106 | 
107 | <template>
108 | <card-core
109 |   size="small"
110 |   link
111 |   class="item"
112 |   :class="{
113 |     '-parent': isParent,
114 |     '-active': isActive,
115 |     '-draft': isDraft,
116 |   }"
117 |   @click.native="selectItem(item)"
118 | >
119 | 
120 |   <header class="header">
121 |     <h2 class="heading" v-text="title"/>
122 |     <hr>
123 |     <span v-if="isDraft" class="draft">draft</span>
124 |     <icon v-if="isParent" name="chevron-right"/>
125 |   </header>
126 | 
127 |   <component :is="activePreviewComponentName" :item="item"/>
128 | 
129 | </card-core>
130 | </template>
131 | 
132 | <style lang="sass" scoped>
133 | @import '../../sass/variables'
134 | @import '../../sass/core/mixins'
135 | 
136 | .item
137 |   position: relative
138 |   overflow: hidden
139 |   flex-shrink: 0
140 | 
141 |   &::after
142 |     content: ''
143 |     position: absolute
144 |     left: 0
145 |     top: 0
146 |     bottom: 0
147 |     right: 0
148 |     border-left: .5rem solid $color-info
149 |     transition: opacity .2s
150 |     opacity: 0
151 | 
152 |   &.-active::after
153 |     opacity: 1
154 | 
155 |     .text
156 |       +chain(.25rem)
157 | 
158 |   &.-parent
159 | 
160 |     .header
161 |       padding-top: 1.5em
162 |       padding-bottom: 1.5em
163 | 
164 |     .heading
165 |       white-space: normal
166 | 
167 |   .draft
168 |     color: $color-warning
169 |     font-size: .75rem
170 | 
171 |   .content
172 |     flex-grow: 1
173 |     overflow: hidden
174 | 
175 |     &.-code
176 |       font-size: .7em
177 |       font-family: monospace
178 |       background-color: $color-gray
179 |       color: mix($color-gray, $color-white, 20%)
180 | 
181 |     &.-color
182 |       font-family: monospace
183 |       color: $color-black
184 | 
185 |       &.-isDark
186 |         color: $color-white
187 | 
188 |     &.-switch
189 |       font-size: 1rem
190 |       font-weight: 900
191 | 
192 |       &.-isOn
193 |         color: $color-success
194 | 
195 |       &.-isOff
196 |         color: $color-danger
197 | 
198 |     &.-image
199 |       position: relative
200 |       background-image: url('../../assets/image-background.png')
201 |       background-position: center
202 |       border-bottom-left-radius: $button-border-radius
203 |       border-bottom-right-radius: $button-border-radius
204 |       height: 5em
205 |       display: flex
206 |       justify-content: center
207 |       align-items: center
208 |       padding: 0
209 | 
210 |       .image
211 |         height: 6em
212 |         width: 100%
213 |         object-fit: cover
214 |         filter: brightness(93%)
215 | 
216 | </style>
217 | 


--------------------------------------------------------------------------------
/src/components/panel/ItemsFromObject.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import Item from '@/components/panel/Item'
  4 | import BackButton from '@/components/navigation/BackButton'
  5 | 
  6 | export default {
  7 |   name: 'ItemsFromObject',
  8 | 
  9 |   // props: {
 10 |   //   selectItem: Function,
 11 |   // },
 12 | 
 13 |   components: {
 14 |     Item,
 15 |     BackButton,
 16 |   },
 17 | 
 18 |   computed: {
 19 | 
 20 |     structure () {
 21 |       return this.$store.getters.structure
 22 |     },
 23 | 
 24 |     activeItem () {
 25 |       let path = _.replace(this.$route.params.path, />/g, '.')
 26 |       let parentPath = _.chain(path).split('.').dropRight().join('.').value()
 27 |       let activeItem = _.get(this.structure, path)
 28 | 
 29 |       if (_.get(activeItem, '_type') === 'object') {
 30 |         return activeItem
 31 |       }
 32 |       else if (!path || !parentPath) {
 33 |         return this.structure
 34 |       }
 35 |       else {
 36 |         return _.get(this.structure, parentPath)
 37 |       }
 38 |     },
 39 | 
 40 |     items () {
 41 |       let items = {}
 42 | 
 43 |       _.each(this.activeItem, (value, key) => {
 44 |         if (_.isPlainObject(value)) {
 45 |           items[key] = value
 46 |         }
 47 |       })
 48 | 
 49 |       return items
 50 |     },
 51 | 
 52 |   },
 53 | 
 54 |   watch: {
 55 | 
 56 |     activeItem (value) {
 57 |       this.selectFirstItem()
 58 |     },
 59 | 
 60 |   },
 61 | 
 62 |   methods: {
 63 | 
 64 |     selectFirstItem () {
 65 |       if (this.$store.state.utils.windowWidth <= 900) return null
 66 |       if (!this.activeItem) return false
 67 |       if (this.$route.name !== 'Content') return false
 68 | 
 69 |       let path = _.replace(this.$route.params.path, />/g, '.')
 70 |       if (path !== '' && path !== this.activeItem._path) return false
 71 | 
 72 |       let firstItem = _.find(this.activeItem, { _type: 'item' })
 73 | 
 74 |       if (firstItem && this.activeItem._type !== 'item') {
 75 |         let firstItemPath = _.replace(firstItem._path, /\./g, '>')
 76 |         this.$router.replace({ name: 'Content', params: { projectId: this.$route.params.projectId, path: firstItemPath } })
 77 |       }
 78 |     },
 79 | 
 80 |     isActive (path) {
 81 |       return !!(path === _.replace(this.$route.params.path, />/g, '.'))
 82 |     },
 83 | 
 84 |   },
 85 | 
 86 |   created () {
 87 |     this.selectFirstItem()
 88 |   },
 89 | 
 90 | }
 91 | </script>
 92 | 
 93 | <template>
 94 | <section class="items-from -object">
 95 | 
 96 |   <header class="header">
 97 |     <BackButton/>
 98 |   </header>
 99 | 
100 |   <main class="main">
101 | 
102 |     <Item
103 |       v-for="item in items"
104 |       :item="item"
105 |       :parentItems="items"
106 |       :key="item.path"
107 |     />
108 | 
109 |   </main>
110 | 
111 | </section>
112 | </template>
113 | 


--------------------------------------------------------------------------------
/src/components/panel/Panel.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | // import anime from 'animejs'
  4 | import ItemsFromObject from '@/components/panel/ItemsFromObject'
  5 | import ItemsFromArray from '@/components/panel/ItemsFromArray'
  6 | 
  7 | export default {
  8 |   name: 'SidePanel',
  9 | 
 10 |   components: {
 11 |     ItemsFromObject,
 12 |     ItemsFromArray,
 13 |   },
 14 | 
 15 |   computed: {
 16 | 
 17 |     projectId () {
 18 |       return this.$route.params.projectId
 19 |     },
 20 | 
 21 |     structure () {
 22 |       return this.$store.getters.structure
 23 |     },
 24 | 
 25 |     activeItem () {
 26 |       return this.$store.getters.activeItem
 27 |     },
 28 | 
 29 |     activeType () {
 30 |       let path = _.replace(this.$route.params.path, />/g, '.')
 31 |       let grandparent = _.get(this.structure, _.chain(path).split('.').dropRight(2).join('.').value())
 32 | 
 33 |       if (this.activeItem && this.activeItem._type === 'array') {
 34 |         return 'array'
 35 |       }
 36 |       else if (grandparent && this.activeItem && grandparent._type === 'array' && this.activeItem._type === 'item') {
 37 |         return 'array'
 38 |       }
 39 |       else {
 40 |         return 'object'
 41 |       }
 42 |     },
 43 | 
 44 |   },
 45 | 
 46 |   watch: {
 47 | 
 48 |     activeItem (value) {
 49 |       this.redirectToParentIfInvalidPath()
 50 |     },
 51 | 
 52 |   },
 53 | 
 54 |   methods: {
 55 | 
 56 |     redirectToParentIfInvalidPath () {
 57 |       let path = _.replace(this.$route.params.path, />/g, '.')
 58 |       let pathExist = _.has(this.structure, path)
 59 | 
 60 |       if (_.isEmpty(this.structure) || pathExist === true) return false
 61 | 
 62 |       let parentPath = _.chain(this.$route.params.path).split('>').slice(0, -1).join('>').value()
 63 | 
 64 |       if (parentPath) {
 65 |         this.$router.replace({ name: this.$route.name, params: { projectId: this.projectId, path: parentPath } })
 66 |       }
 67 |       else {
 68 |         this.$router.replace({ name: this.$route.name, params: { projectId: this.projectId } })
 69 |       }
 70 |     },
 71 | 
 72 |   },
 73 | 
 74 | }
 75 | </script>
 76 | 
 77 | <template>
 78 | <aside class="panel">
 79 |   <div class="js-panel">
 80 |     <ItemsFromObject v-if="activeType === 'object'"/>
 81 |     <ItemsFromArray v-if="activeType === 'array'"/>
 82 |   </div>
 83 | </aside>
 84 | </template>
 85 | 
 86 | <style lang="sass" scoped>
 87 | @import '../../sass/variables'
 88 | @import '../../sass/core/mixins'
 89 | 
 90 | .panel
 91 |   background-image: $color-gray--gradient
 92 |   height: 100%
 93 |   overflow-x: hidden
 94 | 
 95 | .js-panel
 96 |   height: 100%
 97 | 
 98 | .panel /deep/
 99 | 
100 |   .items-from
101 |     display: flex
102 |     flex-direction: column
103 |     height: 100%
104 | 
105 |     > .header
106 |       +chain(1rem)
107 |       justify-content: space-between
108 |       align-items: center
109 |       transition: opacity .2s
110 |       border-bottom: 1px solid $color-gray--light
111 |       height: 3rem
112 |       padding: 1.25rem
113 | 
114 |     > .main
115 |       +gap(2rem)
116 |       display: flex
117 |       flex-direction: column
118 |       overflow-y: auto
119 |       padding: 2rem 1.25rem
120 | 
121 | </style>
122 | 


--------------------------------------------------------------------------------
/src/components/schema/SchemaEditor.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import editorConfig from '@/editors/config'
  4 | 
  5 | // Codemirror
  6 | import { codemirror } from 'vue-codemirror'
  7 | import 'codemirror/mode/javascript/javascript'
  8 | import 'codemirror/lib/codemirror.css'
  9 | import 'codemirror/theme/dracula.css'
 10 | import '@/sass/codemirror.sass'
 11 | 
 12 | export default {
 13 |   name: 'SchemaEditor',
 14 | 
 15 |   components: {
 16 |     codemirror,
 17 |   },
 18 | 
 19 |   data () {
 20 |     return {
 21 |       schema: '',
 22 |       syntaxError: false,
 23 |     }
 24 |   },
 25 | 
 26 |   computed: {
 27 | 
 28 |     activeProject () {
 29 |       return this.$store.getters.activeProject
 30 |     },
 31 | 
 32 |     editors () {
 33 |       let editors = []
 34 |       _.each(editorConfig, configItem => {
 35 |         editors.push(configItem.schemaName)
 36 |       })
 37 |       return editors
 38 |     },
 39 | 
 40 |   },
 41 | 
 42 |   watch: {
 43 | 
 44 |     // 'activeProject.schema' (value) {
 45 |     //   this.setSchema()
 46 |     // },
 47 | 
 48 |     schema: _.debounce(function () {
 49 |       this.saveSchema()
 50 |     }, 500),
 51 | 
 52 |   },
 53 | 
 54 |   methods: {
 55 | 
 56 |     saveSchema () {
 57 |       // console.log('saveSchema')
 58 |       this.syntaxError = false
 59 | 
 60 |       // TODO: Change JSON.parse to parseJSON
 61 |       try {
 62 |         JSON.parse(this.schema)
 63 |         this.$store.commit('removeInvalidSchema', this.activeProject.id)
 64 |       }
 65 |       catch (err) {
 66 |         console.warn('Syntax Error')
 67 | 
 68 |         this.$store.commit('setInvalidSchema', {
 69 |           projectId: this.activeProject.id,
 70 |           schema: this.schema,
 71 |         })
 72 | 
 73 |         this.syntaxError = true
 74 |         return false
 75 |       }
 76 | 
 77 |       if (this.schema !== this.activeProject.schema) {
 78 |         this.$store.dispatch('updateSchema', {
 79 |           projectId: this.activeProject.id,
 80 |           schema: this.schema,
 81 |         })
 82 |       }
 83 |     },
 84 | 
 85 |     setSchema () {
 86 |       if (_.has(this.$store.state.utils.invalidSchemas, this.activeProject.id)) {
 87 |         this.schema = this.$store.state.utils.invalidSchemas[this.activeProject.id]
 88 |       }
 89 |       else {
 90 |         this.schema = this.activeProject.schema
 91 |       }
 92 |     },
 93 | 
 94 |   },
 95 | 
 96 |   created () {
 97 |     this.setSchema()
 98 |   },
 99 | 
100 | }
101 | </script>
102 | 
103 | <template>
104 | <section class="schema-editor" :class="{'-error': syntaxError}">
105 |   <section class="editor">
106 |     <transition name="fade">
107 |       <div class="error-message" v-if="syntaxError">Invalid JSON Syntax</div>
108 |     </transition>
109 | 
110 |     <codemirror
111 |       class="-dracula"
112 |       v-model="schema"
113 |       :options="{
114 |         theme: 'dracula',
115 |         tabSize: 2,
116 |         lineNumbers: true,
117 |         mode: 'application/ld+json',
118 |       }"
119 |     />
120 |   </section>
121 | 
122 |   <alert-core mode="info" size="small">
123 |     <strong>Supported editors: </strong>
124 |     <i>{{editors.join(', ')}}</i>
125 |   </alert-core>
126 | 
127 | </section>
128 | </template>
129 | 
130 | <style lang="sass" scoped>
131 | @import '../../sass/variables'
132 | @import '../../sass/core/mixins'
133 | 
134 | .schema-editor
135 |   +gap()
136 | 
137 | .editor
138 |   position: relative
139 |   border-radius: $radius--large
140 |   transition: box-shadow $time
141 | 
142 | .error-message
143 |   position: absolute
144 |   right: 0
145 |   top: -2rem
146 |   color: $color-danger
147 |   font-weight: 800
148 |   font-size: .9rem
149 | 
150 | .schema-editor /deep/
151 | 
152 |   &.-error .editor
153 |     box-shadow: 0 0 0 .4rem $color-danger
154 | 
155 | </style>
156 | 


--------------------------------------------------------------------------------
/src/components/settings/DeleteProject.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'DeleteProject',
 4 | 
 5 |   computed: {
 6 | 
 7 |     activeProject () {
 8 |       return this.$store.getters.activeProject
 9 |     },
10 | 
11 |   },
12 | 
13 |   methods: {
14 | 
15 |     deleteProject () {
16 |       let deleteConfirm = prompt(`Write "${this.activeProject.id}" if you really want to delete project permanently.`, '')
17 |       if (deleteConfirm === null) return null
18 |       if (deleteConfirm !== this.activeProject.id) {
19 |         console.error('Project Id is invalid', deleteConfirm)
20 |         return null
21 |       }
22 | 
23 |       this.$store.dispatch('deleteProject', { id: this.activeProject.id })
24 | 
25 |       this.$store.commit('setNotification', {
26 |         mode: 'info',
27 |         message: `Deleting project "${this.activeProject.id}", please wait...`,
28 |       })
29 | 
30 |       this.$router.push({ name: 'Dashboard' })
31 |     },
32 | 
33 |   },
34 | 
35 | }
36 | </script>
37 | 
38 | <template>
39 | <section class="delete-project">
40 |   <heading-core mode="secondary">
41 |     <h2>Delete project</h2>
42 |     <p>Your project will be deleted permanently and you can’t undo this.</p>
43 |   </heading-core>
44 | 
45 |   <button-core mode="danger" size="small" light @click.native="deleteProject()">
46 |     Delete Project Permamently
47 |   </button-core>
48 | </section>
49 | </template>
50 | 
51 | <style lang="sass" scoped>
52 | @import '../../sass/variables'
53 | @import '../../sass/core/mixins'
54 | 
55 | .delete-project
56 |   +gap()
57 | 
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/components/settings/FileLocation.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import copy from 'copy-to-clipboard'
  4 | 
  5 | export default {
  6 |   name: 'FileLocation',
  7 | 
  8 |   data () {
  9 |     return {
 10 |       copied: false,
 11 |     }
 12 |   },
 13 | 
 14 |   computed: {
 15 | 
 16 |     activeProject () {
 17 |       return this.$store.getters.activeProject
 18 |     },
 19 | 
 20 |     jsonTarget () {
 21 |       return `json-${this.activeProject.id}`
 22 |     },
 23 | 
 24 |     isPublished () {
 25 |       return !_.isEmpty(this.activeProject.publishedVersion)
 26 |     },
 27 | 
 28 |   },
 29 | 
 30 |   methods: {
 31 | 
 32 |     copyUrl () {
 33 |       copy(this.jsonUrl)
 34 |       this.copied = true
 35 |       this.quitCopied()
 36 |     },
 37 | 
 38 |     quitCopied: _.debounce(function () {
 39 |       this.copied = false
 40 |     }, 4000),
 41 | 
 42 |   },
 43 | 
 44 | }
 45 | </script>
 46 | 
 47 | <template>
 48 | <section class="file-location">
 49 |   <heading-core mode="secondary">
 50 |     <h2>JSON location</h2>
 51 |     <p>You can find latest published JSON file from the following URL address</p>
 52 |   </heading-core>
 53 | 
 54 |   <button-core
 55 |     :href="activeProject.jsonUrl"
 56 |     :target="jsonTarget"
 57 |     light
 58 |     class="json-link"
 59 |     mode="primary"
 60 |     v-if="isPublished"
 61 |   >
 62 |     {{activeProject.jsonUrl}}
 63 |   </button-core>
 64 | 
 65 |   <section class="tools" v-if="isPublished">
 66 | 
 67 |     <button-core light @click.native="copyUrl">
 68 |       <icon name="regular/copy"/>
 69 |       <span>Copy URL</span>
 70 |     </button-core>
 71 | 
 72 |     <transition name="fade--fast">
 73 |       <span class="copied" v-show="copied === true">
 74 |         Copied to the clipboard
 75 |       </span>
 76 |     </transition>
 77 | 
 78 |   </section>
 79 | 
 80 |   <alert-core mode="warning" v-if="!isPublished">
 81 |     You haven't published content. Click the "Publish" button at the top-left corner.
 82 |   </alert-core>
 83 | 
 84 | </section>
 85 | </template>
 86 | 
 87 | <style lang="sass" scoped>
 88 | @import '../../sass/variables'
 89 | @import '../../sass/core/mixins'
 90 | 
 91 | .file-location
 92 |   +gap()
 93 | 
 94 | .json-link
 95 |   overflow: hidden
 96 |   text-overflow: ellipsis
 97 |   text-transform: none
 98 |   padding: 0
 99 |   text-align: left
100 |   max-width: 100%
101 | 
102 | .tools
103 |   +chain(1rem)
104 | 
105 |   .copied
106 |     color: $color-success
107 |     font-size: .8rem
108 | 
109 | </style>
110 | 


--------------------------------------------------------------------------------
/src/components/settings/NewUserButton.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import NewUserModal from '@/components/settings/NewUserModal'
 3 | 
 4 | export default {
 5 |   name: 'NewUserButton',
 6 | 
 7 |   components: {
 8 |     NewUserModal,
 9 |   },
10 | 
11 |   data () {
12 |     return {
13 |       name: '',
14 |     }
15 |   },
16 | 
17 |   computed: {
18 | 
19 |     activeModal () {
20 |       return this.$store.state.utils.activeModal
21 |     },
22 | 
23 |   },
24 | 
25 |   methods: {
26 |     openModal () {
27 |       this.$store.commit('setActiveModal', 'new-user')
28 |     },
29 |   },
30 | 
31 | }
32 | </script>
33 | 
34 | <template>
35 | <section class="new-user">
36 |   <button-core
37 |     size="small"
38 |     mode="success"
39 |     @click.native="openModal()"
40 |   >
41 |     <icon name="plus"/>
42 |     <span>New user</span>
43 |   </button-core>
44 | 
45 |   <transition name="fade--fast">
46 |     <NewUserModal v-if="activeModal === 'new-user'"/>
47 |   </transition>
48 | </section>
49 | </template>
50 | 
51 | <style lang="sass" scoped>
52 | @import '../../sass/variables'
53 | @import '../../sass/core/mixins'
54 | </style>
55 | 


--------------------------------------------------------------------------------
/src/components/settings/NewUserModal.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | 
  3 | export default {
  4 |   name: 'NewUserModal',
  5 | 
  6 |   data () {
  7 |     return {
  8 |       email: '',
  9 |     }
 10 |   },
 11 | 
 12 |   computed: {
 13 | 
 14 |     activeProject () {
 15 |       return this.$store.getters.activeProject
 16 |     },
 17 | 
 18 |   },
 19 | 
 20 |   methods: {
 21 | 
 22 |     newProject () {
 23 |       if (this.name !== null && this.name !== '') {
 24 |         this.$store.dispatch('newProject', {
 25 |           name: this.name,
 26 |         })
 27 | 
 28 |         this.closeModal()
 29 |       }
 30 |     },
 31 | 
 32 |     newUser () {
 33 |       if (!/\S+@\S+\.\S+/.test(this.email)) {
 34 |         console.error('Email is invalid', this.email)
 35 | 
 36 |         this.$store.commit('setNotification', {
 37 |           mode: 'danger',
 38 |           message: `Email ${this.email} is invalid`,
 39 |         })
 40 |         return false
 41 |       }
 42 | 
 43 |       this.$store.dispatch('addUserToProject', {
 44 |         email: this.email,
 45 |         projectId: this.activeProject.id,
 46 |       })
 47 | 
 48 |       // this.$store.dispatch('newPermission', {
 49 |       //   email: this.email,
 50 |       //   projectId: this.activeProject.id,
 51 |       // })
 52 | 
 53 |       this.closeModal()
 54 |     },
 55 | 
 56 |     closeModal () {
 57 |       this.$store.commit('setActiveModal', null)
 58 |     },
 59 | 
 60 |   },
 61 | 
 62 |   mounted () {
 63 |     this.$refs.emailAddress.focus()
 64 |   },
 65 | 
 66 | }
 67 | </script>
 68 | 
 69 | <template>
 70 | <form class="modal" @click.self="closeModal()" @submit.prevent="newUser()" method="post">
 71 |   <card-core>
 72 |     <header class="header">
 73 |       <h1 class="heading -feature">New user</h1>
 74 |     </header>
 75 | 
 76 |     <main class="main">
 77 |       <label class="label">
 78 |         <div>Email address</div>
 79 |         <input type="text" v-model="email" ref="emailAddress">
 80 |       </label>
 81 | 
 82 |       <alert-core mode="info" size="small">
 83 |         You can add new user even before that user is registered. When user register with the same email address user gets permissions to this project. The invitation will not be sent automatically.
 84 |       </alert-core>
 85 |     </main>
 86 | 
 87 |     <footer class="footer">
 88 |       <hr>
 89 |       <button-core type="button" light @click.native="closeModal()">Cancel</button-core>
 90 |       <button-core type="submit" mode="success">Add new user</button-core>
 91 |     </footer>
 92 |   </card-core>
 93 | </form>
 94 | </template>
 95 | 
 96 | <style lang="sass" scoped>
 97 | @import '../../sass/variables'
 98 | @import '../../sass/core/mixins'
 99 | 
100 | .modal
101 |   position: fixed
102 |   top: 0
103 |   left: 0
104 |   right: 0
105 |   bottom: 0
106 |   background-color: mix($color-black, transparent, 80%)
107 |   z-index: 99999
108 |   +center()
109 | 
110 |   .card-core
111 |     width: $breakpoint--small
112 |     box-shadow: $shadow--small, $shadow--large
113 |     border: 1px solid $color-gray--light
114 | 
115 |   .main
116 |     +gap()
117 | 
118 |   .label
119 |     +gap(.5rem)
120 | 
121 | </style>
122 | 


--------------------------------------------------------------------------------
/src/components/settings/Users.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import NewUserButton from '@/components/settings/NewUserButton'
  3 | 
  4 | export default {
  5 |   name: 'Users',
  6 | 
  7 |   components: {
  8 |     NewUserButton,
  9 |   },
 10 | 
 11 |   computed: {
 12 | 
 13 |     activeProject () {
 14 |       return this.$store.getters.activeProject
 15 |     },
 16 | 
 17 |     auth () {
 18 |       return this.$store.getters.auth
 19 |     },
 20 | 
 21 |   },
 22 | 
 23 |   methods: {
 24 | 
 25 |     updatePermission (user) {
 26 |       // console.log('updatePermission', user)
 27 |       let permissions = {}
 28 | 
 29 |       if (user.role === 'admin') {
 30 |         permissions = {
 31 |           publish: true,
 32 |           updateDraft: true,
 33 |           updateSchema: true,
 34 |           updateSettings: true,
 35 |           updateUsers: true,
 36 |           createJob: true,
 37 |         }
 38 |       }
 39 |       else if (user.role === 'editor') {
 40 |         permissions = {
 41 |           publish: true,
 42 |           updateDraft: true,
 43 |           updateSchema: false,
 44 |           updateSettings: false,
 45 |           updateUsers: false,
 46 |           createJob: false,
 47 |         }
 48 |       }
 49 | 
 50 |       this.$store.dispatch('updatePermission', {
 51 |         userId: user.id,
 52 |         projectId: this.activeProject.id,
 53 |         permissions,
 54 |       })
 55 | 
 56 |       // this.$store.dispatch('updatePermission', payload)
 57 |     },
 58 | 
 59 |     removeUser (user) {
 60 |       let deleteConfirm = confirm(`You want to remove "${user.email}". Are you sure?`)
 61 | 
 62 |       if (deleteConfirm === true) {
 63 |         this.$store.dispatch('removeUserFromProject', {
 64 |           userId: user.id,
 65 |           projectId: this.activeProject.id,
 66 |         })
 67 |       }
 68 |     },
 69 | 
 70 |   },
 71 | 
 72 | }
 73 | </script>
 74 | 
 75 | <template>
 76 | <section class="users">
 77 |   <heading-core mode="secondary">
 78 |     <h2>Users</h2>
 79 |     <p>You can add permissions to other users.</p>
 80 |   </heading-core>
 81 | 
 82 |   <card-core>
 83 |     <main class="main">
 84 | 
 85 |       <ul class="users">
 86 |         <li
 87 |           v-for="user in activeProject.users"
 88 |           :key="user.id"
 89 |           class="user"
 90 |         >
 91 |           <div class="email" :title="user.email" v-text="user.email"></div>
 92 | 
 93 |           <hr>
 94 | 
 95 |           <div class="user">
 96 |             <select
 97 |               class="select"
 98 |               v-model="user.role"
 99 |               @change="updatePermission(user)"
100 |               :disabled="user.id === auth.id"
101 |             >
102 |               <option value="admin">Admin</option>
103 |               <option value="editor">Editor</option>
104 |             </select>
105 |           </div>
106 | 
107 |           <div class="remove">
108 |             <button-core
109 |               light
110 |               @click.native="removeUser(user)"
111 |               :disabled="user.id === auth.id"
112 |             >
113 |                 <icon name="trash"/>
114 |             </button-core>
115 |           </div>
116 |         </li>
117 |       </ul>
118 | 
119 |     </main>
120 |   </card-core>
121 | 
122 |   <NewUserButton/>
123 | </section>
124 | </template>
125 | 
126 | <style lang="sass" scoped>
127 | @import '../../sass/variables'
128 | @import '../../sass/core/mixins'
129 | 
130 | .card
131 |   padding: 1rem 1rem
132 | 
133 |   +breakpoint('small')
134 |     padding-left: 2rem
135 |     padding-right: 2rem
136 | 
137 | .users
138 |   +gap()
139 | 
140 |   .user
141 |     +chain(1rem)
142 | 
143 |     +breakpoint('small')
144 |       +chain(2rem)
145 | 
146 |     &:hover
147 |       .email
148 |         color: $color-gray--dark
149 | 
150 |     .email
151 |       min-width: 4rem
152 |       overflow-x: hidden
153 |       text-overflow: ellipsis
154 | 
155 |     .select
156 |       padding-top: .25rem
157 |       padding-bottom: .25rem
158 | 
159 |     .user
160 |       flex-shrink: 0
161 | 
162 |     .remove
163 |       flex-shrink: 0
164 | 
165 |     .fa-icon
166 |       height: 1rem
167 | 
168 | </style>
169 | 


--------------------------------------------------------------------------------
/src/components/settings/Webhook.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import firebase from '@/utils/firebase'
  4 | import Breadcrumb from '@/components/navigation/Breadcrumb'
  5 | import Navigation from '@/components/navigation/Navigation'
  6 | import webhook from '@/utils/webhook'
  7 | 
  8 | // Codemirror
  9 | import { codemirror } from 'vue-codemirror'
 10 | import 'codemirror/mode/javascript/javascript'
 11 | import 'codemirror/lib/codemirror.css'
 12 | import 'codemirror/theme/dracula.css'
 13 | 
 14 | export default {
 15 |   name: 'Webhook',
 16 | 
 17 |   components: {
 18 |     Breadcrumb,
 19 |     Navigation,
 20 |     codemirror,
 21 |   },
 22 | 
 23 |   data () {
 24 |     return {
 25 |       config: _.has(this.$store.getters.activeProject, 'settings.webhook.config') ? this.$store.getters.activeProject.settings.webhook.config : '',
 26 |       devtoolInfo: false,
 27 |     }
 28 |   },
 29 | 
 30 |   computed: {
 31 | 
 32 |     projectId () {
 33 |       return this.$store.getters.activeProject.id
 34 |     },
 35 | 
 36 |     enabled () {
 37 |       if (!_.has(this.$store.getters.activeProject, 'settings.webhook.enabled')) return false
 38 |       return this.$store.getters.activeProject.settings.webhook.enabled
 39 |     },
 40 | 
 41 |     // jsonUrl () {
 42 |     //   return this.$store.getters.activeProject.jsonUrl
 43 |     // },
 44 | 
 45 |     json () {
 46 |       return this.$store.getters.activeProject.publishedVersion.json
 47 |     },
 48 | 
 49 |     versionId () {
 50 |       return this.$store.getters.activeProject.publishedVersion.versionId
 51 |     },
 52 | 
 53 |   },
 54 | 
 55 |   watch: {
 56 | 
 57 |     config: _.debounce(function () {
 58 |       this.saveConfig()
 59 |     }, 500),
 60 | 
 61 |   },
 62 | 
 63 |   methods: {
 64 | 
 65 |     saveConfig () {
 66 |       if (!this.config) {
 67 |         this.resetConfig()
 68 |         return null
 69 |       }
 70 | 
 71 |       let updateData = {}
 72 |       updateData['settings.webhook.config'] = this.config
 73 | 
 74 |       firebase.firestore
 75 |         .collection('projects')
 76 |         .doc(this.projectId)
 77 |         .update(updateData)
 78 |         // .then(() => console.log('Webhook config saved', updateData))
 79 |         .catch((error) => console.error('Webhook config saving failed', error))
 80 |     },
 81 | 
 82 |     testWebhook () {
 83 |       webhook({
 84 |         configString: this.config,
 85 |         email: this.$store.getters.auth.email,
 86 |         json: this.json,
 87 |         versionId: this.versionId,
 88 |       })
 89 |       this.devtoolInfo = true
 90 |       this.closeDevtoolInfo()
 91 |     },
 92 | 
 93 |     closeDevtoolInfo: _.debounce(function () {
 94 |       this.devtoolInfo = false
 95 |     }, 10000),
 96 | 
 97 |     switchEnabled () {
 98 |       let updateData = {}
 99 |       updateData['settings.webhook.enabled'] = !this.enabled
100 | 
101 |       if (!this.config) {
102 |         this.resetConfig()
103 |       }
104 | 
105 |       firebase.firestore
106 |         .collection('projects')
107 |         .doc(this.projectId)
108 |         .update(updateData)
109 |         // .then(() => console.log('Webhook enabled saved', updateData))
110 |         .catch((error) => console.error('Webhook enabling failed', error))
111 |     },
112 | 
113 |     resetConfig () {
114 |       this.config = `{
115 |   "url": "https://example.com",
116 |   "method": "get",
117 |   "params": {
118 |     "content": "{{BASE64_CONTENT}}",
119 |     "versionId": "{{VERSION_ID}}"
120 |   }
121 | }`
122 |     },
123 | 
124 |   },
125 | 
126 | }
127 | </script>
128 | 
129 | <template>
130 | <section class="webhook">
131 |   <heading-core mode="secondary">
132 |     <h2>Webhook</h2>
133 |     <p>We will send a custom POST/GET request when publishing is done.</p>
134 |   </heading-core>
135 | 
136 |   <alert-core mode="info" size="small" v-if="enabled !== false">
137 |     <div>Variable <code><strong><span>{{</span>BASE64_CONTENT<span>}}</span></strong></code> is published content encoded with <a href="https://github.com/dankogai/js-base64" target="Base64">Base64</a>.</div>
138 |     <div>Variable <code><strong><span>{{</span>VERSION_ID<span>}}</span></strong></code> is version of published JSON.</div>
139 |     <div>Variable <code><strong><span>{{</span>PUBLISHER_EMAIL<span>}}</span></strong></code> is email of publisher.</div>
140 |   </alert-core>
141 | 
142 |   <codemirror
143 |     v-if="enabled !== false"
144 |     v-model="config"
145 |     class="-dracula"
146 |     :options="{
147 |       theme: 'dracula',
148 |       tabSize: 2,
149 |       lineNumbers: false,
150 |       mode: 'application/ld+json',
151 |     }"
152 |   />
153 | 
154 |   <div class="tools" v-if="enabled !== false">
155 |     <button-core size="small" @click.native="switchEnabled()">Disable webhook</button-core>
156 |     <button-core size="small" @click.native="testWebhook()">Test webhook</button-core>
157 |     <transition name="fade">
158 |       <span class="debug" v-show="devtoolInfo">Open web console to debug</span>
159 |     </transition>
160 |     <hr>
161 |     <button-core mode="info" light href="https://github.com/axios/axios#axios-api" target="AxiosDocs">Axios API</button-core>
162 |   </div>
163 | 
164 |   <div class="" v-if="enabled === false">
165 |     <button-core @click.native="switchEnabled()">Enable webhook</button-core>
166 |   </div>
167 | 
168 | </section>
169 | </template>
170 | 
171 | <style lang="sass" scoped>
172 | @import '../../sass/variables'
173 | @import '../../sass/core/mixins'
174 | 
175 | .webhook
176 |   +gap()
177 | 
178 | .tools
179 |   +chain(1rem)
180 |   width: 100%
181 | 
182 |   .debug
183 |     display: none
184 |     font-size: .8rem
185 | 
186 |     +breakpoint('small')
187 |       display: block
188 | 
189 | .link.-danger
190 |   color: $color-danger
191 | 
192 | .webhook /deep/
193 | 
194 |   .CodeMirror
195 |     height: auto
196 | 
197 | </style>
198 | 


--------------------------------------------------------------------------------
/src/components/utils/FooterContent.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'FooterContent',
 4 | }
 5 | </script>
 6 | 
 7 | <template>
 8 | <section class="footer-content">
 9 |   <div class="text">
10 |     <div class="copyright">
11 |       Copyright &copy; 2018 <button-core light href="https://reduce.fi">Rane Ahonen, Reduce</button-core>
12 |     </div>
13 | 
14 |     <div class="licensed">
15 |       Licensed Editlayer Alpha. Upgrade to <button-core light href="https://reduce.fi/about">PRO</button-core> ?
16 |     </div>
17 |   </div>
18 | </section>
19 | </template>
20 | 
21 | <style lang="sass" scoped>
22 | @import '../../sass/variables'
23 | @import '../../sass/core/mixins'
24 | 
25 | .footer-content
26 |   font-size: .8rem
27 |   text-align: center
28 |   +center()
29 | 
30 | .button-core
31 |   padding-top: .25em
32 |   padding-bottom: .25em
33 | 
34 | // .footer-content
35 | //   font-size: .8rem
36 | //   text-align: center
37 | //   opacity: .4
38 | //   transition: opacity $time
39 | //   +center()
40 | //   flex-direction: column
41 | //   +gap()
42 | //
43 | //   +breakpoint('large')
44 | //     +gap(0)
45 | //     +chain(1rem)
46 | //     flex-direction: row
47 | //     text-align: left
48 | //
49 | //   &:hover
50 | //     opacity: 1
51 | //
52 | //   .button-core
53 | //     padding-top: .25em
54 | //     padding-bottom: .25em
55 | //
56 | //   .badge .image
57 | //     height: 3.5rem
58 | //     filter: grayscale(1)
59 | //     transition: filter $time, opacity $time
60 | //     box-shadow: $shadow
61 | //     opacity: .6
62 | //
63 | //     &:hover
64 | //       filter: none
65 | //       opacity: 1
66 | 
67 | </style>
68 | 


--------------------------------------------------------------------------------
/src/components/utils/LoaderOverlay.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'LoaderOverlay',
 4 | }
 5 | </script>
 6 | 
 7 | <template>
 8 | <div class="loader-overlay">
 9 | 
10 |   <icon name="spinner" spin/>
11 |   <div class="text">Loading</div>
12 | 
13 | </div>
14 | </template>
15 | 
16 | <style lang="sass" scoped>
17 | @import '../../sass/variables'
18 | @import '../../sass/core/mixins'
19 | 
20 | .loader-overlay
21 |   position: absolute
22 |   top: 0
23 |   left: 0
24 |   right: 0
25 |   bottom: 0
26 |   z-index: 99999999
27 |   display: flex
28 |   flex-direction: column
29 |   justify-content: center
30 |   align-items: center
31 |   background-image: linear-gradient(to right, $color-gray--lightest, $color-gray--lighter)
32 |   color: $color-primary
33 |   +gap(.5rem)
34 | 
35 |   .fa-icon
36 |     display: flex
37 |     background-color: $color-primary
38 |     border-radius: 50%
39 |     height: 4rem
40 |     width: 4rem
41 |     justify-content: center
42 |     align-items: center
43 |     fill: $color-white
44 |     padding: 1rem
45 | 
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/components/utils/Notifications.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'Notifications',
 4 | 
 5 |   computed: {
 6 | 
 7 |     notifications () {
 8 |       return this.$store.state.notifications
 9 |     },
10 | 
11 |   },
12 | 
13 | }
14 | </script>
15 | 
16 | <template>
17 | <section class="notifications">
18 |   <div v-for="(item, itemId) in notifications.items" :key="itemId">
19 |     <transition name="fade">
20 | 
21 |       <notification-core
22 |         :mode="item.mode"
23 |         :message="item.message"
24 |         :link="item.link"
25 |         :progress="item.progress"
26 |         :id="itemId"
27 |       ></notification-core>
28 | 
29 |     </transition>
30 |   </div>
31 | </section>
32 | </template>
33 | 
34 | <style lang="sass" scoped>
35 | @import '../../sass/variables'
36 | @import '../../sass/core/mixins'
37 | 
38 | .notifications
39 |   position: fixed
40 |   right: 2rem
41 |   top: 2rem
42 |   width: 20rem
43 |   max-width: calc(100% - 4rem)
44 |   +gap(.5rem)
45 | 
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/editors/Checkbox.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | /**
 3 |  * Checkbox Editor
 4 |  * @param {string|array} content - Content saves automatically when changing
 5 |  * @param {string} config.EDITOR - Name of editor
 6 |  * @param {string} config.TITLE
 7 |  * @param {string} config.OPTIONS[].label
 8 |  * @param {string} config.OPTIONS[].value
 9 |  */
10 | 
11 | import EditorBase from '@/editors/common/BaseEditor'
12 | import _ from 'lodash'
13 | 
14 | export default {
15 |   extends: EditorBase,
16 | 
17 |   name: 'CheckboxEditor',
18 | 
19 |   computed: {
20 | 
21 |     options () {
22 |       if (!_.isObject(this.config.OPTIONS)) return false
23 |       return this.config.OPTIONS
24 |     },
25 | 
26 |   },
27 | 
28 |   methods: {
29 | 
30 |     label (option) {
31 |       return option.label || option.value
32 |     },
33 | 
34 |     removeNonExitingValues () {
35 |       let content = []
36 | 
37 |       _.each(this.content, item => {
38 |         if (_.find(this.options, { value: item })) {
39 |           content.push(item)
40 |         }
41 |       })
42 | 
43 |       this.content = content
44 |     },
45 | 
46 |   },
47 | 
48 |   mounted () {
49 |     if (!_.isArray(this.content)) {
50 |       this.content = []
51 |     }
52 | 
53 |     this.removeNonExitingValues()
54 |   },
55 | 
56 | }
57 | </script>
58 | 
59 | <template>
60 | <section class="editor -checkbox">
61 | 
62 |   <alert-core mode="warning" v-if="!options">
63 |     OPTIONS is required with "checkbox" editor. Fix your schema.
64 |   </alert-core>
65 | 
66 |   <label class="checkbox" v-for="(option, index) in options" :key="index">
67 |     <input
68 |       class="input"
69 |       type="checkbox"
70 |       v-model="content"
71 |       :value="option.value"
72 |     >
73 |     <span v-text="label(option)"></span>
74 |   </label>
75 | 
76 | </section>
77 | </template>
78 | 
79 | <style lang="sass" scoped>
80 | @import '../sass/variables'
81 | @import '../sass/core/mixins'
82 | 
83 | .editor.-checkbox
84 |   +gap(.5rem)
85 | 
86 | .checkbox
87 |   +chain(.5rem)
88 | 
89 |   .input
90 |     transform: scale(1.5)
91 | 
92 | </style>
93 | 


--------------------------------------------------------------------------------
/src/editors/Code.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | /**
 3 |  * Code Editor
 4 |  * @param {string} content - Content saves automatically when changing
 5 |  * @param {string} config.EDITOR - Name of editor
 6 |  * @param {string} config.TITLE
 7 |  * @param {string} config.MODE
 8 |  */
 9 | 
10 | import EditorBase from '@/editors/common/BaseEditor'
11 | import { codemirror } from 'vue-codemirror'
12 | import 'codemirror/lib/codemirror.css'
13 | import 'codemirror/theme/dracula.css'
14 | import 'codemirror/mode/javascript/javascript'
15 | import 'codemirror/mode/xml/xml'
16 | import 'codemirror/mode/css/css'
17 | import 'codemirror/mode/sass/sass'
18 | import 'codemirror/mode/markdown/markdown'
19 | 
20 | export default {
21 |   extends: EditorBase,
22 | 
23 |   name: 'CodeEditor',
24 | 
25 |   components: {
26 |     codemirror,
27 |   },
28 | 
29 |   data () {
30 |     return {
31 |       options: {
32 |         theme: 'dracula',
33 |         tabSize: 2,
34 |         lineNumbers: true,
35 |         mode: null,
36 |       },
37 |     }
38 |   },
39 | 
40 |   created () {
41 |     switch (this.config.MODE) {
42 |       case 'css':
43 |         this.options.mode = 'text/css'
44 |         break
45 |       case 'scss':
46 |         this.options.mode = 'text/x-scss'
47 |         break
48 |       case 'sass':
49 |         this.options.mode = 'text/x-sass'
50 |         break
51 |       case 'less':
52 |         this.options.mode = 'text/x-less'
53 |         break
54 |       case 'json':
55 |         this.options.mode = 'application/ld+json'
56 |         break
57 |       case 'javascript':
58 |         this.options.mode = 'application/javascript'
59 |         break
60 |       case 'typescript':
61 |         this.options.mode = 'application/typescript'
62 |         break
63 |       case 'markdown':
64 |         this.options.mode = 'text/x-markdown'
65 |         break
66 |       default:
67 |         this.options.mode = 'xml'
68 |         this.options.htmlMode = true
69 |     }
70 |   },
71 | 
72 | }
73 | </script>
74 | 
75 | <template>
76 | <section class="editor -textarea">
77 | 
78 |   <codemirror
79 |     class="-dracula"
80 |     v-model="content"
81 |     :options="options"
82 |   />
83 | 
84 | </section>
85 | </template>
86 | 
87 | <style lang="sass" scoped>
88 | @import '../sass/variables'
89 | @import '../sass/core/mixins'
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/editors/Color.vue:
--------------------------------------------------------------------------------
  1 | <!--
  2 | Copyright 2018 Reduce Finland
  3 | 
  4 | Permission is hereby granted, free of charge, to any person obtaining a copy of
  5 | this software and associated documentation files (the "Software"), to deal in
  6 | the Software without restriction, including without limitation the rights to
  7 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
  8 | of the Software, and to permit persons to whom the Software is furnished to do
  9 | so, subject to the following conditions:
 10 | 
 11 | The above copyright notice and this permission notice shall be included in all
 12 | copies or substantial portions of the Software.
 13 | 
 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 15 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 16 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 17 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 18 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 19 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 20 | SOFTWARE.
 21 | -->
 22 | 
 23 | <script>
 24 | /**
 25 |  * Color Editor
 26 |  * @param {string} content - Content saves automatically when changing
 27 |  * @param {string} config.EDITOR - Name of editor
 28 |  * @param {string} config.TITLE
 29 |  */
 30 | 
 31 | import EditorBase from '@/editors/common/BaseEditor'
 32 | import iro from '@jaames/iro'
 33 | import _ from 'lodash'
 34 | 
 35 | export default {
 36 |   extends: EditorBase,
 37 | 
 38 |   name: 'ColorEditor',
 39 | 
 40 |   data () {
 41 |     return {
 42 |       color: null,
 43 |       colorPicker: null,
 44 |       license: 'partner',
 45 |     }
 46 |   },
 47 | 
 48 |   watch: {
 49 | 
 50 |     color () {
 51 |       this.saveColor()
 52 |       this.colorPicker.color.hexString = this.color
 53 |     },
 54 | 
 55 |   },
 56 | 
 57 |   methods: {
 58 | 
 59 |     initPicker () {
 60 |       let size = 200
 61 | 
 62 |       this.colorPicker = new iro.ColorPicker(this.$refs.colorPicker, {
 63 |         width: size,
 64 |         height: size * 1.15,
 65 |         color: this.color,
 66 |         sliderMargin: size * 0.05,
 67 |         sliderHeight: size * 0.1,
 68 |         padding: 0,
 69 |         anticlockwise: true,
 70 |       })
 71 | 
 72 |       this.colorPicker.on('color:change', (color) => {
 73 |         this.color = color.hexString
 74 |       })
 75 |     },
 76 | 
 77 |     saveColor: _.debounce(function () {
 78 |       this.content = this.color
 79 |     }, 500),
 80 | 
 81 |   },
 82 | 
 83 |   mounted () {
 84 |     this.initPicker()
 85 | 
 86 |     if (this.content !== null) {
 87 |       this.color = this.content
 88 |     }
 89 |     else {
 90 |       this.color = '#dddddd'
 91 |     }
 92 |   },
 93 | }
 94 | </script>
 95 | 
 96 | <template>
 97 | <section class="editor -color">
 98 | 
 99 |   <div class="tools">
100 |     <div class="picker" ref="colorPicker"></div>
101 |   </div>
102 | 
103 |   <div class="info">
104 |     <div class="preview" :style="{backgroundColor: color}" @click="$refs.colorInput.click()"></div>
105 |     <input type="text" v-model="color">
106 |     <input type="color" ref="colorInput" v-model="color" v-show="false">
107 |   </div>
108 | 
109 | </section>
110 | </template>
111 | 
112 | <style lang="sass" scoped>
113 | @import '../sass/variables'
114 | @import '../sass/core/mixins'
115 | 
116 | .editor.-color
117 |   display: flex
118 |   flex-direction: column
119 |   align-items: flex-start
120 |   +gap()
121 | 
122 |   +breakpoint('large')
123 |     +chain(3rem)
124 |     +gap(0)
125 |     flex-direction: row
126 |     align-items: flex-start
127 | 
128 | .info
129 |   +gap(.5rem)
130 |   width: 100%
131 | 
132 |   .preview
133 |     height: 10rem
134 |     border-radius: $input-border-radius
135 |     cursor: pointer
136 | 
137 |   +breakpoint('large')
138 |     width: 18rem
139 | 
140 | .tools
141 |   +gap(1rem)
142 |   +center()
143 |   background-color: $color-gray--lightest
144 |   padding: 2rem
145 |   border-radius: $input-border-radius
146 |   width: 100%
147 |   box-shadow: 0 .1rem .2rem 0 mix($color-black, transparent, 15%), 0 .75rem 3rem 0 mix($color-black, transparent, 11%)
148 | 
149 |   +breakpoint('large')
150 |     width: auto
151 | 
152 | .picker /deep/
153 |   svg
154 |     max-width: none
155 | 
156 | </style>
157 | 


--------------------------------------------------------------------------------
/src/editors/Image.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | /**
  3 |  * Image Editor
  4 |  * @param {string} content - Content saves automatically when changing
  5 |  * @param {string} config.EDITOR - Name of editor
  6 |  * @param {string} config.TITLE
  7 |  * @param {string} config.PLACEHOLDER
  8 |  * @param {string|object} config.DOWNSCALE
  9 |  */
 10 | 
 11 | import EditorBase from '@/editors/common/BaseEditor'
 12 | import _ from 'lodash'
 13 | 
 14 | export default {
 15 |   extends: EditorBase,
 16 | 
 17 |   name: 'ImageEditor',
 18 | 
 19 |   data () {
 20 |     return {
 21 |       uploading: false,
 22 |     }
 23 |   },
 24 | 
 25 |   watch: {
 26 | 
 27 |     '$store.getters.activeItem._content' (value) {
 28 |       this.content = value
 29 |     },
 30 | 
 31 |   },
 32 | 
 33 |   computed: {
 34 | 
 35 |     projectId () {
 36 |       return this.$route.params.projectId
 37 |     },
 38 | 
 39 |     filename () {
 40 |       return _.chain(this.content).split('/').pop().value()
 41 |     },
 42 | 
 43 |     previewImage () {
 44 |       return _.get(this.content, 'url')
 45 |     },
 46 | 
 47 |   },
 48 | 
 49 |   methods: {
 50 | 
 51 |     uploadImage (event) {
 52 |       let image = event.target.files[0]
 53 |       this.$refs['file-input'].value = ''
 54 |       if (!image) return false
 55 | 
 56 |       this.uploading = true
 57 | 
 58 |       this.$store.dispatch('uploadImage', {
 59 |         projectId: this.projectId,
 60 |         path: _.replace(this.$route.params.path, />/g, '.'),
 61 |         image: image,
 62 |         downscale: this.config.DOWNSCALE,
 63 |         placeholder: this.config.PLACEHOLDER,
 64 |       })
 65 |         .then((image) => {
 66 |           this.uploading = false
 67 |         })
 68 |     },
 69 | 
 70 |   },
 71 | 
 72 | }
 73 | </script>
 74 | 
 75 | <template>
 76 | <section class="editor -image">
 77 | 
 78 |   <div class="preview">
 79 |     <img class="image" :src="previewImage" alt="" v-if="previewImage !== false">
 80 |   </div>
 81 | 
 82 |   <div class="tools">
 83 | 
 84 |     <button-core
 85 |       size="large"
 86 |       mode="primary"
 87 |       @click.native="$refs['file-input'].click()"
 88 |       :disabled="uploading"
 89 |     >
 90 |       Upload Image
 91 |     </button-core>
 92 | 
 93 |   </div>
 94 | 
 95 |   <input
 96 |     class="file-input"
 97 |     type="file"
 98 |     ref="file-input"
 99 |     @change="uploadImage($event)"
100 |     accept="image/png, image/jpeg, image/gif, image/svg+xml"
101 |     v-show="false"
102 |   >
103 | 
104 | </section>
105 | </template>
106 | 
107 | <style lang="sass" scoped>
108 | @import '../sass/variables'
109 | @import '../sass/core/mixins'
110 | 
111 | .editor
112 |   +gap(.75rem)
113 |   // text-align: center
114 | 
115 | .tools
116 |   +chain()
117 |   justify-content: center
118 |   align-items: flex-start
119 | 
120 | .preview
121 |   background-image: url('../assets/image-background.png')
122 |   background-position: center
123 |   box-shadow: 0 5px 12px 0 mix(transparent, $color-black, 90%), 0 2px 5px 0 mix(transparent, black, 93%)
124 |   min-height: 10rem
125 |   display: flex
126 |   justify-content: center
127 |   align-items: center
128 | 
129 |   .image
130 |     max-height: 50vh
131 | 
132 | </style>
133 | 


--------------------------------------------------------------------------------
/src/editors/Markdown.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | /**
  3 |  * Markdown Editor
  4 |  * @param {string} content - Content saves automatically when changing
  5 |  * @param {string} config.EDITOR - Name of editor
  6 |  * @param {string} config.TITLE
  7 |  * @param {string} config.DOWNSCALE
  8 |  */
  9 | 
 10 | import EditorBase from '@/editors/common/BaseEditor'
 11 | import { codemirror } from 'vue-codemirror'
 12 | import _ from 'lodash'
 13 | import titleCase from 'title-case'
 14 | 
 15 | export default {
 16 |   extends: EditorBase,
 17 | 
 18 |   name: 'MarkdownEditor',
 19 | 
 20 |   components: {
 21 |     codemirror,
 22 |   },
 23 | 
 24 |   data () {
 25 |     return {
 26 |       addButton: {
 27 |         top: null,
 28 |         line: null,
 29 |       },
 30 |       options: {
 31 |         tabSize: 2,
 32 |         lineNumbers: false,
 33 |         lineWrapping: true,
 34 |         autofocus: true,
 35 |         mode: 'text/x-markdown',
 36 |       },
 37 |       focus: false,
 38 |     }
 39 |   },
 40 | 
 41 |   computed: {
 42 | 
 43 |     projectId () {
 44 |       return this.$route.params.projectId
 45 |     },
 46 | 
 47 |     codemirror () {
 48 |       return this.$refs.codemirror.codemirror
 49 |     },
 50 | 
 51 |     uploadProcess () {
 52 |       if (_.has(this.$store.state.uploadProcesses, `${this.projectId}>${this.$route.params.path}`)) {
 53 |         return _.get(this.$store.state.uploadProcesses, `${this.projectId}>${this.$route.params.path}`)
 54 |       }
 55 |       else {
 56 |         return null
 57 |       }
 58 |     },
 59 | 
 60 |   },
 61 | 
 62 |   methods: {
 63 | 
 64 |     uploadImage (event) {
 65 |       let image = event.target.files[0]
 66 |       this.$refs.fileInput.value = ''
 67 |       if (!image) return false
 68 | 
 69 |       this.$store.dispatch('uploadImage', {
 70 |         projectId: this.projectId,
 71 |         path: this.$route.params.path,
 72 |         image: image,
 73 |         downscale: this.config.DOWNSCALE,
 74 |       })
 75 |         .then((image) => {
 76 |           let doc = this.codemirror.doc
 77 |           let altText = titleCase(image.filename)
 78 |           let imageTag = `![${altText}](${image.downloadURL})`
 79 |           doc.replaceRange(imageTag, doc.getCursor())
 80 |         })
 81 |         .catch((error) => console.error('Image uploading faild!', error))
 82 |     },
 83 | 
 84 |     moveAddButton () {
 85 |       this.$nextTick(() => {
 86 |         let doc = this.codemirror.doc
 87 |         let selection = doc.getCursor()
 88 |         let line = doc.lineInfo(selection.line)
 89 | 
 90 |         if (line.text !== '') {
 91 |           this.addButton.top = null
 92 |           this.addButton.line = null
 93 |           return null
 94 |         }
 95 | 
 96 |         let cursorPosition = this.codemirror.cursorCoords()
 97 |         let editorPosistion = this.$refs.codemirror.$el.getBoundingClientRect()
 98 | 
 99 |         this.addButton.line = selection.line
100 |         this.addButton.top = cursorPosition.top - editorPosistion.top + 'px'
101 |       })
102 |     },
103 | 
104 |   },
105 | 
106 |   mounted () {
107 |     this.moveAddButton()
108 |   },
109 | 
110 | }
111 | </script>
112 | 
113 | <template>
114 | <section class="editor -markdown">
115 | 
116 |   <codemirror
117 |     v-model="content"
118 |     ref="codemirror"
119 |     :options="options"
120 |     @focus="focus = true"
121 |     @blur="focus = false"
122 |     @cursorActivity="moveAddButton()"
123 |     :class="{'-focus': focus}"
124 |   />
125 | 
126 |   <button-core
127 |     circle
128 |     size="small"
129 |     class="add-button"
130 |     :style="{top: addButton.top}"
131 |     ref="addButton"
132 |     @click.native="$refs.fileInput.click()"
133 |     v-if="addButton.top !== null && config.IMAGE !== false"
134 |   >
135 |     <icon name="plus"/>
136 |   </button-core>
137 | 
138 |   <div class="tools">
139 |     <button-core mode="info" light href="https://www.markdownguide.org/cheat-sheet" target="markdown-cheat-sheet">Markdown Cheat Sheet</button-core>
140 |   </div>
141 | 
142 |   <input
143 |     class="file-input"
144 |     type="file"
145 |     ref="fileInput"
146 |     @change="uploadImage($event)"
147 |     accept="image/png, image/jpeg, image/gif, image/svg+xml"
148 |     v-show="false"
149 |   >
150 | 
151 | </section>
152 | </template>
153 | 
154 | <style lang="sass" scoped>
155 | @import '../sass/variables'
156 | @import '../sass/core/mixins'
157 | 
158 | .editor.-markdown
159 |   +gap()
160 | 
161 |   .add-button
162 |     position: absolute
163 |     top: 0
164 |     right: 0
165 |     transform: translate(50%, -65%)
166 | 
167 |   .tools
168 |     +chain()
169 |     width: 100%
170 |     justify-content: flex-end
171 | 
172 | .editor.-markdown /deep/
173 | 
174 |   .vue-codemirror
175 |     // padding: .5rem
176 |     border: $input-border
177 |     background-color: $input-background
178 |     padding: $input-padding
179 |     padding-left: 1.5rem
180 |     padding-right: 1.5rem
181 |     min-height: 15rem
182 | 
183 |     &:hover
184 |       border: $input-border--hover
185 |       background-color: $input-background--hover
186 | 
187 |     &.-focus
188 |       border: $input-border--focus
189 |       background-color: $input-background--focus
190 | 
191 |     .CodeMirror
192 |       font-size: 1rem
193 |       background-color: transparent
194 | 
195 |     .CodeMirror-focused
196 |       // border: $input-border--focus
197 | 
198 |     .cm-header-1,
199 |     .cm-header-2,
200 |     .cm-header-3,
201 |     .cm-header-4,
202 |     .cm-header-5,
203 |     .cm-header-6
204 |       color: $heading-color
205 |       font-family: $heading-font-family
206 |       font-size: $heading-font-size
207 |       font-weight: 600
208 | 
209 |     .cm-header-1
210 |       font-size: 1.6em
211 | 
212 |     .cm-header-2
213 |       font-size: 1.4em
214 | 
215 |     .cm-header-3
216 |       font-size: 1.2em
217 | 
218 |     .cm-url
219 |       color: $color-gray
220 | 
221 |     .cm-link
222 |       background-color: mix($link-color, transparent, 7%)
223 |       color: $link-color
224 | 
225 |       &:hover
226 |         color: $link-color--hover
227 | 
228 |       + .cm-url
229 |         background-color: mix($link-color, transparent, 7%)
230 | 
231 |     .cm-image-marker,
232 |     .cm-image-alt-text,
233 |     .cm-image-marker:hover,
234 |     .cm-image-alt-text:hover
235 |       color: $content-color
236 |       text-decoration: none
237 | 
238 |     .cm-image-marker,
239 |     .cm-image-alt-text
240 |       background-color: mix($color-info, transparent, 7%)
241 | 
242 |       + .cm-url
243 |         background-color: mix($color-info, transparent, 7%)
244 | 
245 |     .cm-comment
246 |       color: $content-color
247 |       background-color: mix($content-color, transparent, 7%)
248 | 
249 |     .cm-quote
250 |       color: $color-gray
251 | 
252 |     .cm-variable-2,
253 |     .cm-variable-3
254 |       color: mix($color-info, $color-black, 50%)
255 | 
256 | </style>
257 | 


--------------------------------------------------------------------------------
/src/editors/Number.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | /**
 3 |  * Input Editor
 4 |  * @param {string} content - Content saves automatically when changing
 5 |  * @param {string} config.EDITOR - Name of editor
 6 |  * @param {string} config.TITLE
 7 |  * @param {string} config.PLACEHOLDER
 8 |  * @param {string} config.MIN
 9 |  * @param {string} config.MAX
10 |  * @param {string} config.STEP
11 |  */
12 | 
13 | import EditorBase from '@/editors/common/BaseEditor'
14 | import _ from 'lodash'
15 | 
16 | export default {
17 |   extends: EditorBase,
18 | 
19 |   name: 'NumberEditor',
20 | 
21 |   computed: {
22 | 
23 |     preventSave () {
24 |       return !!(this.content && _.get(this.$refs, 'input.validity.valid') === false)
25 |     },
26 | 
27 |     inputType () {
28 |       return ['tel'].includes(this.config.MODE) ? this.config.MODE : 'number'
29 |     },
30 | 
31 |   },
32 | 
33 |   mounted () {
34 |     this.$refs['input'].focus()
35 |   },
36 | 
37 | }
38 | </script>
39 | 
40 | <template>
41 | <section class="editor -number">
42 |   <input
43 |     ref="input"
44 |     v-model="content"
45 |     :type="inputType"
46 |     :placeholder="config.PLACEHOLDER"
47 |     :min="config.MIN"
48 |     :max="config.MAX"
49 |     :step="config.STEP"
50 |   >
51 | </section>
52 | </template>
53 | 
54 | <style lang="sass" scoped>
55 | @import '../sass/variables'
56 | @import '../sass/core/mixins'
57 | </style>
58 | 


--------------------------------------------------------------------------------
/src/editors/Radio.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | /**
 3 |  * Radio button Editor
 4 |  * @param {string} content - Content saves automatically when changing
 5 |  * @param {string} config.EDITOR - Name of editor
 6 |  * @param {string} config.TITLE
 7 |  * @param {string} config.OPTIONS[].value
 8 |  * @param {string} config.OPTIONS[].label
 9 |  */
10 | 
11 | import EditorBase from '@/editors/common/BaseEditor'
12 | import _ from 'lodash'
13 | 
14 | export default {
15 |   extends: EditorBase,
16 | 
17 |   name: 'RadioEditor',
18 | 
19 |   computed: {
20 | 
21 |     options () {
22 |       if (!_.isObject(this.config.OPTIONS)) return false
23 |       return this.config.OPTIONS
24 |     },
25 | 
26 |   },
27 | 
28 |   methods: {
29 | 
30 |     label (option) {
31 |       return option.label ? option.label : option.value
32 |     },
33 | 
34 |   },
35 | 
36 | }
37 | </script>
38 | 
39 | <template>
40 | <section class="editor -radio">
41 | 
42 |   <alert-core mode="warning" v-if="!options">
43 |     OPTIONS is required with "radio" editor. Fix your schema.
44 |   </alert-core>
45 | 
46 |   <label class="radio" v-for="(option, index) in options" :key="index">
47 |     <input
48 |       class="input"
49 |       type="radio"
50 |       v-model="content"
51 |       :value="option.value"
52 |     >
53 |     <span v-text="label(option)"></span>
54 |   </label>
55 | 
56 | </section>
57 | </template>
58 | 
59 | <style lang="sass" scoped>
60 | @import '../sass/variables'
61 | @import '../sass/core/mixins'
62 | 
63 | .editor.-radio
64 |   +gap(.5rem)
65 | 
66 | .radio
67 |   +chain(.5rem)
68 | 
69 |   .input
70 |     transform: scale(1.25)
71 | 
72 | </style>
73 | 


--------------------------------------------------------------------------------
/src/editors/RichText.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | /**
  3 |  * Rich Text Editor
  4 |  * @param {string} content - Content saves automatically when changing
  5 |  * @param {string} config.EDITOR - Name of editor
  6 |  * @param {string} config.TITLE
  7 |  * @param {string} config.PLACEHOLDER
  8 |  * @param {string} config.DOWNSCALE
  9 |  */
 10 | 
 11 | import EditorBase from '@/editors/common/BaseEditor'
 12 | import { quillEditor } from 'vue-quill-editor'
 13 | import { offset } from 'caret-pos'
 14 | import _ from 'lodash'
 15 | 
 16 | import 'quill/dist/quill.core.css'
 17 | import 'quill/dist/quill.snow.css'
 18 | import 'quill/dist/quill.bubble.css'
 19 | 
 20 | export default {
 21 |   extends: EditorBase,
 22 | 
 23 |   name: 'RichTextEditor',
 24 | 
 25 |   components: {
 26 |     quillEditor,
 27 |   },
 28 | 
 29 |   data () {
 30 |     return {
 31 |       addButton: {
 32 |         top: null,
 33 |         index: null,
 34 |       },
 35 |     }
 36 |   },
 37 | 
 38 |   computed: {
 39 | 
 40 |     quill () {
 41 |       return this.$refs.quillEditor.quill
 42 |     },
 43 | 
 44 |     options () {
 45 |       return {
 46 |         theme: 'bubble',
 47 |         bounds: '.main-panel',
 48 |         placeholder: _.has(this.config, 'PLACEHOLDER') ? this.config.PLACEHOLDER : '',
 49 |         modules: {
 50 |           toolbar: {
 51 |             container: [
 52 |               [
 53 |                 { header: 1 },
 54 |                 { header: 2 },
 55 |                 'bold',
 56 |                 'italic',
 57 |               ],
 58 |               [
 59 |                 'link',
 60 |                 'blockquote',
 61 |               ],
 62 |               [
 63 |                 { list: 'ordered' },
 64 |                 { list: 'bullet' },
 65 |               ],
 66 |               [
 67 |                 'clean',
 68 |               ],
 69 |             ],
 70 |             handlers: {
 71 |               image: () => {
 72 |                 this.$refs['file-input'].click()
 73 |               },
 74 |             },
 75 |           },
 76 |         },
 77 |       }
 78 |     },
 79 |   },
 80 | 
 81 |   methods: {
 82 | 
 83 |     uploadImage (event) {
 84 |       let image = event.target.files[0]
 85 |       this.$refs['fileInput'].value = ''
 86 |       if (!image) return null
 87 | 
 88 |       this.$store.dispatch('uploadImage', {
 89 |         projectId: this.projectId,
 90 |         path: this.$route.params.path,
 91 |         image: image,
 92 |         downscale: this.config.DOWNSCALE,
 93 |       })
 94 |         .then((image) => {
 95 |           this.quill.insertEmbed(this.addButton.index, 'image', image.downloadURL)
 96 |         })
 97 |         .catch((error) => console.error('Image uploading faild!', error))
 98 |     },
 99 | 
100 |     moveAddButton () {
101 |       this.$nextTick(() => {
102 |         let baseNode = window.getSelection().baseNode
103 |         let selection = this.quill.getSelection()
104 |         let editor = document.querySelector('.ql-editor')
105 |         let isNothingSelected = _.get(selection, 'length') === 0
106 |         let isLineEmpty = baseNode.data === undefined
107 |         let isOnlyOneChild = _.get(baseNode, 'childNodes.length') === 1
108 |         let isChildBR = _.get(baseNode, 'childNodes[0].tagName') === 'BR'
109 | 
110 |         if (!isNothingSelected || !isLineEmpty || !isOnlyOneChild || !isChildBR) {
111 |           this.addButton.top = null
112 |           this.addButton.index = null
113 |           return null
114 |         }
115 | 
116 |         let carePosistion = offset(editor)
117 |         let editorPosistion = editor.getBoundingClientRect()
118 |         this.addButton.index = selection.index
119 |         this.addButton.top = carePosistion.top - editorPosistion.top + 'px'
120 |       })
121 |     },
122 | 
123 |   },
124 | 
125 |   mounted () {
126 |     this.quill.focus()
127 |     this.moveAddButton()
128 |     this.quill.on('editor-change', () => this.moveAddButton())
129 |     window.addEventListener('resize', () => this.moveAddButton())
130 |   },
131 | 
132 | }
133 | </script>
134 | 
135 | <template>
136 | <section class="editor -rich-text">
137 | 
138 |   <quill-editor
139 |     v-model="content"
140 |     ref="quillEditor"
141 |     :options='options'
142 |   />
143 | 
144 |   <button-core
145 |     circle
146 |     size="small"
147 |     class="add-button"
148 |     :style="{top: addButton.top}"
149 |     ref="addButton"
150 |     @click.native="$refs['fileInput'].click()"
151 |     v-if="addButton.top !== null && config.IMAGE !== false"
152 |   >
153 |     <icon name="plus"/>
154 |   </button-core>
155 | 
156 |   <input
157 |     class="file-input"
158 |     type="file"
159 |     ref="fileInput"
160 |     @change="uploadImage($event)"
161 |     accept="image/png, image/jpeg, image/gif, image/svg+xml"
162 |     v-show="false"
163 |   >
164 | 
165 | </section>
166 | </template>
167 | 
168 | <style lang="sass" scoped>
169 | @import '../sass/variables'
170 | @import '../sass/core/mixins'
171 | 
172 | .editor.-rich-text
173 | 
174 |   .add-button
175 |     position: absolute
176 |     padding: 0
177 |     top: 0
178 |     right: 0
179 |     transform: translate(50%, -17%)
180 | 
181 | .editor.-rich-text /deep/
182 | 
183 |   .ql-editor
184 |     background: $input-background
185 |     border: $input-border
186 |     border-radius: $input-border-radius
187 |     color: $input-text-color
188 |     font-family: $input-font-family
189 |     font-size: $input-font-size
190 |     font-weight: $input-font-weight
191 |     padding: $input-padding
192 |     padding-left: 1.5rem
193 |     padding-right: 1.5rem
194 |     +gap(1.5rem)
195 |     min-height: 15rem
196 | 
197 |     &::before
198 |       left: 1.5rem
199 |       color: $input-placeholder-color
200 |       font-style: normal
201 | 
202 |     +hx
203 |       font-weight: 600
204 | 
205 |     h2
206 |       font-size: 1.6em
207 | 
208 |     h3
209 |       font-size: 1.4em
210 | 
211 |     h4
212 |       font-size: 1.2em
213 | 
214 |     ul,
215 |     ol
216 |       padding-left: 1.5rem
217 | 
218 |       ul,
219 |       ol
220 |         margin-bottom: 0
221 | 
222 |     ul
223 |       list-style-type: disc
224 | 
225 |     img,
226 |     iframe
227 |       display: block
228 |       margin: 2.5rem auto
229 |       padding-left: 2rem
230 |       padding-right: 2rem
231 | 
232 |       +breakpoint('medium')
233 |         padding-left: 5rem
234 |         padding-right: 5rem
235 | 
236 |       +breakpoint('large')
237 |         padding-left: 10rem
238 |         padding-right: 10rem
239 | 
240 |     iframe
241 |       width: 100%
242 |       height: 12rem
243 | 
244 |       +breakpoint('large')
245 |         height: 20rem
246 | 
247 | </style>
248 | 


--------------------------------------------------------------------------------
/src/editors/Select.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | /**
 3 |  * Select Editor
 4 |  * @param {string|array} content - Content saves automatically when changing
 5 |  * @param {string} config.EDITOR - Name of editor
 6 |  * @param {string} config.TITLE
 7 |  * @param {string} config.OPTIONS[].value
 8 |  * @param {string} config.OPTIONS[].label
 9 |  */
10 | 
11 | import EditorBase from '@/editors/common/BaseEditor'
12 | import _ from 'lodash'
13 | 
14 | export default {
15 |   extends: EditorBase,
16 | 
17 |   name: 'SelectEditor',
18 | 
19 |   computed: {
20 | 
21 |     options () {
22 |       if (!_.isObject(this.config.OPTIONS)) return false
23 |       return this.config.OPTIONS
24 |     },
25 | 
26 |   },
27 | 
28 |   methods: {
29 | 
30 |     label (option) {
31 |       return option.label ? option.label : option.value
32 |     },
33 | 
34 |   },
35 | 
36 | }
37 | </script>
38 | 
39 | <template>
40 | <section class="editor -select">
41 | 
42 |   <alert-core mode="warning" v-if="!options">
43 |     OPTIONS is required with "select" editor. Fix your schema.
44 |   </alert-core>
45 | 
46 |   <select class="select" v-model="content" v-if="options">
47 |     <option
48 |       :value="option.value"
49 |       v-text="label(option)"
50 |       v-for="(option, index) in options" :key="index"
51 |     />
52 |   </select>
53 | 
54 | </section>
55 | </template>
56 | 
57 | <style lang="sass" scoped>
58 | @import '../sass/variables'
59 | @import '../sass/core/mixins'
60 | </style>
61 | 


--------------------------------------------------------------------------------
/src/editors/SelectImage.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | /**
  3 |  * Select image editor
  4 |  * @param {string} content - Content saves automatically when changing
  5 |  * @param {string} config.EDITOR - Name of editor
  6 |  * @param {string} config.TITLE
  7 |  * @param {string} config.OPTIONS[].value
  8 |  * @param {string} config.OPTIONS[].url
  9 |  */
 10 | 
 11 | import EditorBase from '@/editors/common/BaseEditor'
 12 | import _ from 'lodash'
 13 | 
 14 | export default {
 15 |   extends: EditorBase,
 16 | 
 17 |   name: 'SelectImageEditor',
 18 | 
 19 |   computed: {
 20 | 
 21 |     options () {
 22 |       if (!_.isObject(this.config.OPTIONS)) return false
 23 |       return this.config.OPTIONS
 24 |     },
 25 | 
 26 |   },
 27 | 
 28 |   methods: {
 29 | 
 30 |     selectImage (value) {
 31 |       this.content = value
 32 |     },
 33 | 
 34 |   },
 35 | 
 36 | }
 37 | </script>
 38 | 
 39 | <template>
 40 | <section class="editor -select-image">
 41 | 
 42 |   <alert-core mode="warning" v-if="!options">
 43 |     OPTIONS is required with "select-image" editor. Fix your schema.
 44 |   </alert-core>
 45 | 
 46 |   <section class="images" v-if="options">
 47 | 
 48 |     <div
 49 |       class="option"
 50 |       v-for="(option, index) in options"
 51 |       :key="index"
 52 |     >
 53 | 
 54 |       <img
 55 |         class="image"
 56 |         :class="{'-active': option.value === content}"
 57 |         :src="option.url"
 58 |         :alt="option.value"
 59 |         @click="selectImage(option.value)"
 60 |       >
 61 | 
 62 |     </div>
 63 | 
 64 |   </section>
 65 | 
 66 | </section>
 67 | </template>
 68 | 
 69 | <style lang="sass" scoped>
 70 | @import '../sass/variables'
 71 | @import '../sass/core/mixins'
 72 | 
 73 | .images
 74 |   +grid(1, 3rem)
 75 | 
 76 |   +breakpoint('large')
 77 |     +grid(2)
 78 | 
 79 |   +breakpoint('huge')
 80 |     +grid(3)
 81 | 
 82 |   .option
 83 |     display: flex
 84 |     justify-content: center
 85 |     align-items: flex-start
 86 | 
 87 |   .image
 88 |     border-radius: $radius
 89 |     cursor: pointer
 90 |     transition: box-shadow $time--small
 91 |     box-shadow: $shadow
 92 |     opacity: .8
 93 | 
 94 |     &:hover
 95 |       opacity: .9
 96 | 
 97 |     &.-active
 98 |       opacity: 1
 99 |       box-shadow: $shadow--large, 0 0 0 .3rem $color-info
100 | 
101 | </style>
102 | 


--------------------------------------------------------------------------------
/src/editors/Text.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | /**
 3 |  * Input Editor
 4 |  * @param {string} content - Content saves automatically when changing
 5 |  * @param {string} config.EDITOR - Name of editor
 6 |  * @param {string} config.TITLE
 7 |  * @param {string} config.PLACEHOLDER
 8 |  */
 9 | 
10 | import EditorBase from '@/editors/common/BaseEditor'
11 | import _ from 'lodash'
12 | 
13 | export default {
14 |   extends: EditorBase,
15 | 
16 |   name: 'TextEditor',
17 | 
18 |   computed: {
19 | 
20 |     preventSave () {
21 |       return !!(this.content && _.get(this.$refs, 'input.validity.valid') === false)
22 |     },
23 | 
24 |     inputType () {
25 |       return ['email', 'password', 'url'].includes(this.config.MODE) ? this.config.MODE : 'text'
26 |     },
27 | 
28 |   },
29 | 
30 |   mounted () {
31 |     this.$refs['input'].focus()
32 |   },
33 | 
34 | }
35 | </script>
36 | 
37 | <template>
38 | <section class="editor -text">
39 |   <input
40 |     ref="input"
41 |     v-model="content"
42 |     :type="inputType"
43 |     :placeholder="config.PLACEHOLDER"
44 |   >
45 | 
46 | </section>
47 | </template>
48 | 
49 | <style lang="sass" scoped>
50 | @import '../sass/variables'
51 | @import '../sass/core/mixins'
52 | </style>
53 | 


--------------------------------------------------------------------------------
/src/editors/Textarea.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | /**
 3 |  * Textarea editor
 4 |  * @param {string} content - Content saves automatically when changing
 5 |  * @param {string} config.EDITOR - Name of editor
 6 |  * @param {string} config.TITLE
 7 |  * @param {string} config.PLACEHOLDER
 8 |  */
 9 | 
10 | import EditorBase from '@/editors/common/BaseEditor'
11 | import autosize from 'autosize'
12 | 
13 | export default {
14 |   extends: EditorBase,
15 | 
16 |   name: 'TextareaEditor',
17 | 
18 |   mounted () {
19 |     this.$refs['textarea'].focus()
20 |     autosize(this.$refs['textarea'])
21 |   },
22 | 
23 | }
24 | </script>
25 | 
26 | <template>
27 | <section class="editor -textarea">
28 |   <textarea
29 |     class="textarea"
30 |     ref="textarea"
31 |     v-model="content"
32 |     :placeholder="config.PLACEHOLDER"
33 |   />
34 | </section>
35 | </template>
36 | 
37 | <style lang="sass" scoped>
38 | @import '../sass/variables'
39 | @import '../sass/core/mixins'
40 | 
41 | .textarea
42 |   resize: none
43 |   overflow: hidden
44 |   min-height: 15rem
45 | 
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/editors/Video.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | /**
  3 |  * Video editor
  4 |  * @param {object} content - Content saves automatically when changing
  5 |  * @param {string} config.EDITOR - Name of editor
  6 |  * @param {string} config.TITLE
  7 |  * @param {string} config.PLACEHOLDER
  8 |  * @param {string} input - Video URL of Youtube or Vimeo
  9 |  */
 10 | 
 11 | import EditorBase from '@/editors/common/BaseEditor'
 12 | import urlParser from 'js-video-url-parser'
 13 | import _ from 'lodash'
 14 | import axios from 'axios'
 15 | 
 16 | export default {
 17 |   extends: EditorBase,
 18 | 
 19 |   name: 'VideoEditor',
 20 | 
 21 |   data () {
 22 |     return {
 23 |       input: '',
 24 |     }
 25 |   },
 26 | 
 27 |   watch: {
 28 | 
 29 |     input: _.debounce(function () {
 30 |       this.saveVideo()
 31 |     }, 500),
 32 | 
 33 |   },
 34 | 
 35 |   computed: {
 36 | 
 37 |     videoSrc () {
 38 |       if (_.get(this.content, 'type') === 'video/youtube') {
 39 |         return `https://www.youtube-nocookie.com/embed/${this.content.videoId}?rel=0`
 40 |       }
 41 |       else if (_.get(this.content, 'type') === 'video/vimeo') {
 42 |         return `https://player.vimeo.com/video/${this.content.videoId}?portrait=0`
 43 |       }
 44 |       else {
 45 |         return false
 46 |       }
 47 |     },
 48 | 
 49 |     placeholder () {
 50 |       return this.config.PLACEHOLDER ? this.config.PLACEHOLDER : 'e.g. https://www.youtube.com/watch?v=mN0zPOpADL4'
 51 |     },
 52 | 
 53 |   },
 54 | 
 55 |   methods: {
 56 | 
 57 |     initInput () {
 58 |       if (!_.has(this.content, 'type') || !_.has(this.content, 'videoId')) {
 59 |         this.input = ''
 60 |         this.content = {}
 61 |         return null
 62 |       }
 63 | 
 64 |       let provider = this.content.type.split('/')[1].trim()
 65 | 
 66 |       let videoInfo = {
 67 |         provider: provider,
 68 |         id: this.content.videoId,
 69 |         mediaType: 'video',
 70 |       }
 71 | 
 72 |       this.input = urlParser.create({ videoInfo: videoInfo })
 73 |     },
 74 | 
 75 |     saveVideo: async function () {
 76 |       let videoInfo = urlParser.parse(this.input)
 77 | 
 78 |       if (!videoInfo) {
 79 |         this.content = {}
 80 |         return null
 81 |       }
 82 | 
 83 |       let url = urlParser.create({
 84 |         videoInfo: videoInfo,
 85 |       })
 86 | 
 87 |       let video = {
 88 |         videoId: videoInfo.id,
 89 |         type: `video/${videoInfo.provider}`,
 90 |         url: url,
 91 |       }
 92 | 
 93 |       video.thumbnail = await this.getThumbnail(video)
 94 |       this.content = video
 95 |     },
 96 | 
 97 |     getThumbnail: async function (video) {
 98 |       let thumbnail = null
 99 | 
100 |       if (video.type === 'video/youtube') {
101 |         thumbnail = `http://img.youtube.com/vi/${video.videoId}/hqdefault.jpg`
102 |       }
103 |       else if (video.type === 'video/vimeo') {
104 |         try {
105 |           let vimeoData = await axios.get(`https://vimeo.com/api/v2/video/${video.videoId}.json`)
106 |           thumbnail = vimeoData.data[0].thumbnail_large
107 |         }
108 |         catch (error) {
109 |           console.warn('Can\'t fetch Vimeo thumbnail')
110 |         }
111 |       }
112 | 
113 |       return thumbnail
114 |     },
115 | 
116 |   },
117 | 
118 |   mounted () {
119 |     this.initInput()
120 |   },
121 | 
122 |   // getVideoId('https://www.youtube.com/watch?v=8rSH8-pbHZ0')
123 | 
124 | }
125 | </script>
126 | 
127 | <template>
128 | <section class="editor -video">
129 |   <input
130 |     class="input"
131 |     v-model="input"
132 |     :placeholder="placeholder"
133 |   >
134 | 
135 |   <figure class="preview" v-if="videoSrc">
136 |     <iframe class="video" :src="videoSrc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
137 |   </figure>
138 | 
139 | </section>
140 | </template>
141 | 
142 | <style lang="sass" scoped>
143 | @import '../sass/variables'
144 | @import '../sass/core/mixins'
145 | 
146 | .editor.-video
147 |   +gap()
148 | 
149 | .preview
150 |   padding-bottom: 56.25%
151 |   position: relative
152 |   border-radius: $input-border-radius
153 |   overflow: hidden
154 |   box-shadow: 0 .5em 2em 0 mix($color-black, transparent, 15%), 0 0 .4em 0 mix(black, transparent, 10%)
155 |   background-color: black
156 | 
157 |   .video
158 |     position: absolute
159 |     left: 0
160 |     top: 0
161 |     width: 100%
162 |     height: 100%
163 | 
164 | </style>
165 | 


--------------------------------------------------------------------------------
/src/editors/common/BaseEditor.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import _ from 'lodash'
 3 | 
 4 | export default {
 5 | 
 6 |   data () {
 7 |     return {
 8 |       content: this.$store.getters.activeItem._content,
 9 |     }
10 |   },
11 | 
12 |   computed: {
13 | 
14 |     config () {
15 |       if (!_.has(this.$store, 'getters.activeItem')) return {}
16 |       let config = {}
17 | 
18 |       _.each(this.$store.getters.activeItem, (value, key) => {
19 |         if (!_.startsWith(key, '_')) config[key] = value
20 |       })
21 | 
22 |       return config
23 |     },
24 | 
25 |     isPatternValid () {
26 |       if (!this.config.PATTERN) return true
27 |       let regex = new RegExp(this.config.PATTERN, this.config.FLAGS)
28 |       return regex.test(this.content)
29 |     },
30 | 
31 |     isRequiredValid () {
32 |       return this.config.REQUIRED !== true || this.content === true || !_.isEmpty(this.content)
33 |     },
34 | 
35 |     isValid () {
36 |       return this.isPatternValid && this.isRequiredValid && this.preventSave !== true
37 |     },
38 | 
39 |   },
40 | 
41 |   watch: {
42 | 
43 |     content (newContent, oldContent) {
44 |       if (this.isValid === false) {
45 |         this.$store.commit('setEditorContentValid', false)
46 |         return null
47 |       }
48 | 
49 |       this.$store.commit('setEditorContentValid', true)
50 |       this.updateContent(newContent)
51 |     },
52 | 
53 |   },
54 | 
55 |   methods: {
56 | 
57 |     updateContent: _.throttle(function (content) {
58 |       // TODO: Change this.$route to this.$store.route
59 |       // console.log('updateContent', content)
60 |       this.$store.dispatch('updateContent', {
61 |         projectId: this.$route.params.projectId,
62 |         path: this.$store.getters.activeItem._path,
63 |         content: content,
64 |       })
65 |     }, 500),
66 | 
67 |   },
68 | 
69 |   mounted () {
70 |     this.$store.commit('setEditorContentValid', true)
71 |   },
72 | 
73 | }
74 | </script>
75 | 


--------------------------------------------------------------------------------
/src/editors/common/BasePreview.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import _ from 'lodash'
 3 | 
 4 | export default {
 5 | 
 6 |   props: {
 7 |     item: Object,
 8 |   },
 9 | 
10 |   computed: {
11 | 
12 |     content () {
13 |       return this.item._content
14 |     },
15 | 
16 |     config () {
17 |       let config = {}
18 | 
19 |       _.each(this.item, (value, key) => {
20 |         if (!_.startsWith(key, '_')) config[key] = value
21 |       })
22 | 
23 |       return config
24 |     },
25 | 
26 |   },
27 | 
28 | }
29 | </script>
30 | 


--------------------------------------------------------------------------------
/src/editors/config.js:
--------------------------------------------------------------------------------
  1 | // Editors
  2 | import Calendar from '@/editors/Calendar'
  3 | import Checkbox from '@/editors/Checkbox'
  4 | import Code from '@/editors/Code'
  5 | import Color from '@/editors/Color'
  6 | import Image from '@/editors/Image'
  7 | // import Input from '@/editors/Input'
  8 | import Markdown from '@/editors/Markdown'
  9 | import Number from '@/editors/Number'
 10 | import Radio from '@/editors/Radio'
 11 | import RichText from '@/editors/RichText'
 12 | import Select from '@/editors/Select'
 13 | import SelectImage from '@/editors/SelectImage'
 14 | import Text from '@/editors/Text'
 15 | import Textarea from '@/editors/Textarea'
 16 | import Video from '@/editors/Video'
 17 | 
 18 | // Previews
 19 | import ArrayPreview from '@/editors/previews/Array'
 20 | import CalendarPreview from '@/editors/previews/Calendar'
 21 | import CodePreview from '@/editors/previews/Code'
 22 | import ColorPreview from '@/editors/previews/Color'
 23 | import ImagePreview from '@/editors/previews/Image'
 24 | import OptionPreview from '@/editors/previews/Option'
 25 | import TextPreview from '@/editors/previews/Text'
 26 | import VideoPreview from '@/editors/previews/Video'
 27 | 
 28 | export default [
 29 |   {
 30 |     'schemaName': 'calendar',
 31 |     'editor': Calendar,
 32 |     'preview': CalendarPreview,
 33 |   },
 34 |   {
 35 |     'schemaName': 'checkbox',
 36 |     'editor': Checkbox,
 37 |     'preview': ArrayPreview,
 38 |   },
 39 |   {
 40 |     'schemaName': 'code',
 41 |     'editor': Code,
 42 |     'preview': CodePreview,
 43 |   },
 44 |   {
 45 |     'schemaName': 'color',
 46 |     'editor': Color,
 47 |     'preview': ColorPreview,
 48 |   },
 49 |   {
 50 |     'schemaName': 'image',
 51 |     'editor': Image,
 52 |     'preview': ImagePreview,
 53 |   },
 54 |   // {
 55 |   //   'schemaName': 'input',
 56 |   //   'editor': Input,
 57 |   //   'preview': TextPreview,
 58 |   // },
 59 |   {
 60 |     'schemaName': 'markdown',
 61 |     'editor': Markdown,
 62 |     'preview': TextPreview,
 63 |   },
 64 |   {
 65 |     'schemaName': 'number',
 66 |     'editor': Number,
 67 |     'preview': TextPreview,
 68 |   },
 69 |   {
 70 |     'schemaName': 'radio',
 71 |     'editor': Radio,
 72 |     'preview': OptionPreview,
 73 |   },
 74 |   {
 75 |     'schemaName': 'rich-text',
 76 |     'editor': RichText,
 77 |     'preview': TextPreview,
 78 |   },
 79 |   {
 80 |     'schemaName': 'select',
 81 |     'editor': Select,
 82 |     'preview': OptionPreview,
 83 |   },
 84 |   {
 85 |     'schemaName': 'select-image',
 86 |     'editor': SelectImage,
 87 |     'preview': ImagePreview,
 88 |   },
 89 |   {
 90 |     'schemaName': 'text',
 91 |     'editor': Text,
 92 |     'preview': TextPreview,
 93 |   },
 94 |   {
 95 |     'schemaName': 'textarea',
 96 |     'editor': Textarea,
 97 |     'preview': TextPreview,
 98 |   },
 99 |   {
100 |     'schemaName': 'video',
101 |     'editor': Video,
102 |     'preview': VideoPreview,
103 |   },
104 | ]
105 | 


--------------------------------------------------------------------------------
/src/editors/previews/Array.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import EditorBase from '@/editors/common/BasePreview'
 3 | import _ from 'lodash'
 4 | 
 5 | export default {
 6 |   extends: EditorBase,
 7 | 
 8 |   name: 'ArrayPreview',
 9 | 
10 |   computed: {
11 | 
12 |     items () {
13 |       return _.isArray(this.content) ? this.content : [this.content]
14 |     },
15 | 
16 |   },
17 | 
18 | }
19 | </script>
20 | 
21 | <template>
22 | <div class="preview -array">
23 |   <div class="tag" v-text="item" v-for="item in items" :key="item"></div>
24 | </div>
25 | </template>
26 | 
27 | <style lang="sass" scoped>
28 | @import '../../sass/variables'
29 | @import '../../sass/core/mixins'
30 | 
31 | .preview.-array
32 |   padding: .3rem .5rem .3rem .75rem
33 |   font-size: .8rem
34 | 
35 | .tag
36 |   display: inline-block
37 |   margin-right: .25rem
38 |   white-space: nowrap
39 |   overflow: hidden
40 |   text-overflow: ellipsis
41 |   max-width: 7em
42 |   background-color: $color-gray--lighter
43 |   padding: .2em .75em
44 |   border-radius: .25rem
45 | 
46 | </style>
47 | 


--------------------------------------------------------------------------------
/src/editors/previews/Calendar.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import EditorBase from '@/editors/common/BasePreview'
 3 | import dayjs from 'dayjs'
 4 | import _ from 'lodash'
 5 | 
 6 | export default {
 7 |   extends: EditorBase,
 8 |   // this.content - Content (read-only)
 9 |   // this.config - Config data from the schema (read-only)
10 |   name: 'CalenderPreview',
11 | 
12 |   computed: {
13 | 
14 |     previewText () {
15 |       if ((!this.config.MODE || this.config.MODE === 'date-time') && _.has(this.config, 'SECOND') && this.config.SECOND !== false) {
16 |         return dayjs(this.content).format('YYYY-MM-DD HH:mm:ss')
17 |       }
18 |       else if ((!this.config.MODE || this.config.MODE === 'date-time')) {
19 |         return dayjs(this.content).format('YYYY-MM-DD HH:mm')
20 |       }
21 |       else if (this.config.MODE === 'date') {
22 |         return dayjs(this.content).format('YYYY-MM-DD')
23 |       }
24 |       else if (this.config.MODE === 'time' && _.has(this.config, 'SECOND') && this.config.SECOND !== false) {
25 |         return dayjs(this.content).format('HH:mm:ss')
26 |       }
27 |       else if (this.config.MODE === 'time') {
28 |         return dayjs(this.content).format('HH:mm')
29 |       }
30 |       else if (this.config.MODE === 'date-range') {
31 |         return `${dayjs(this.content.start).format('YYYY-MM-DD')} – ${dayjs(this.content.end).format('YYYY-MM-DD')}`
32 |       }
33 |       else if (this.config.MODE === 'date-multiple') {
34 |         if (!_.isArray(this.content)) return ''
35 | 
36 |         return this.content.map(date => {
37 |           return dayjs(date).format('YYYY-MM-DD')
38 |         })
39 |       }
40 |     },
41 | 
42 |   },
43 | 
44 | }
45 | </script>
46 | 
47 | <template>
48 | <div class="preview -calendar">
49 |   <div
50 |     class="date"
51 |     v-text="previewText"
52 |     v-if="config.MODE !== 'date-multiple'"
53 |   ></div>
54 |   <div
55 |     class="tag"
56 |     v-text="item"
57 |     v-for="(item, index) in previewText"
58 |     :key="index"
59 |     v-if="config.MODE === 'date-multiple'"
60 |   ></div>
61 | </div>
62 | </template>
63 | 
64 | <style lang="sass" scoped>
65 | @import '../../sass/variables'
66 | @import '../../sass/core/mixins'
67 | 
68 | .preview.-calendar
69 |   padding: .3rem 1rem
70 |   font-size: .8rem
71 | 
72 | .date
73 |   overflow: hidden
74 |   text-overflow: ellipsis
75 | 
76 | .tag
77 |   display: inline-block
78 |   margin-right: .25rem
79 |   white-space: nowrap
80 |   overflow: hidden
81 |   text-overflow: ellipsis
82 |   max-width: 7em
83 |   background-color: $color-gray--lighter
84 |   padding: .2em .75em
85 |   border-radius: .25rem
86 | 
87 | </style>
88 | 


--------------------------------------------------------------------------------
/src/editors/previews/Code.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import EditorBase from '@/editors/common/BasePreview'
 3 | import _ from 'lodash'
 4 | 
 5 | export default {
 6 |   extends: EditorBase,
 7 |   // this.content - Content (read-only)
 8 |   // this.config - Config data from the schema (read-only)
 9 |   name: 'CodePreview',
10 | 
11 |   computed: {
12 | 
13 |     previewText () {
14 |       let content = _.toString(this.content)
15 |       return (content && content.length <= 70) ? content : content.substring(0, 67) + '…'
16 |     },
17 | 
18 |   },
19 | 
20 | }
21 | </script>
22 | 
23 | <template>
24 | <div class="preview -text" v-text="previewText"></div>
25 | </template>
26 | 
27 | <style lang="sass" scoped>
28 | @import '../../sass/variables'
29 | @import '../../sass/core/mixins'
30 | 
31 | .preview.-text
32 |   +invert()
33 |   background-color: $color-gray--darker
34 |   padding: .3rem 1rem
35 |   font-size: .8rem
36 |   overflow: hidden
37 |   text-overflow: ellipsis
38 |   font-family: monospace
39 | 
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/editors/previews/Color.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import EditorBase from '@/editors/common/BasePreview'
 3 | 
 4 | export default {
 5 |   extends: EditorBase,
 6 |   // this.content - Content (read-only)
 7 |   // this.config - Config data from the schema (read-only)
 8 |   name: 'ColorPreview',
 9 | }
10 | </script>
11 | 
12 | <template>
13 | <div class="preview -color" :style="{backgroundColor: content}"></div>
14 | </template>
15 | 
16 | <style lang="sass" scoped>
17 | @import '../../sass/variables'
18 | @import '../../sass/core/mixins'
19 | 
20 | .preview.-color
21 |   height: 2rem
22 | 
23 | </style>
24 | 


--------------------------------------------------------------------------------
/src/editors/previews/Image.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import EditorBase from '@/editors/common/BasePreview'
 3 | import _ from 'lodash'
 4 | 
 5 | export default {
 6 |   extends: EditorBase,
 7 |   // this.content - Content (read-only)
 8 |   // this.config - Config data from the schema (read-only)
 9 |   name: 'ImagePreview',
10 | 
11 |   computed: {
12 | 
13 |     previewImage () {
14 |       let selectedOption = _.find(this.config.OPTIONS, { value: this.content })
15 | 
16 |       if (_.has(selectedOption, 'image')) {
17 |         return selectedOption.image
18 |       }
19 |       else if (_.isString(this.content)) {
20 |         return this.content
21 |       }
22 |       else if (_.has(this.content, 'url')) {
23 |         return this.content.url
24 |       }
25 |     },
26 | 
27 |   },
28 | 
29 | }
30 | </script>
31 | 
32 | <template>
33 | <div class="preview -image">
34 |   <img class="image" :src="previewImage" alt="" v-if="content">
35 | </div>
36 | </template>
37 | 
38 | <style lang="sass" scoped>
39 | @import '../../sass/variables'
40 | @import '../../sass/core/mixins'
41 | 
42 | .preview.-image
43 |   position: relative
44 |   background-image: url('../../assets/image-background.png')
45 |   background-position: center
46 |   height: 5em
47 |   +center()
48 |   overflow: hidden
49 | 
50 |   .image
51 |     max-width: 100%
52 | 
53 | </style>
54 | 


--------------------------------------------------------------------------------
/src/editors/previews/Option.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import EditorBase from '@/editors/common/BasePreview'
 3 | import _ from 'lodash'
 4 | 
 5 | export default {
 6 |   extends: EditorBase,
 7 |   // this.content - Content (read-only)
 8 |   // this.config - Config data from the schema (read-only)
 9 |   name: 'OptionPreview',
10 | 
11 |   computed: {
12 | 
13 |     previewText () {
14 |       let selectedOption = _.find(this.config.OPTIONS, { value: this.content })
15 |       if (!selectedOption) return '…'
16 |       let previewText = selectedOption.label ? selectedOption.label : selectedOption.value
17 |       if (!previewText) return '…'
18 |       return (previewText.length <= 70) ? previewText : previewText.substring(0, 67) + '…'
19 |     },
20 | 
21 |   },
22 | 
23 | }
24 | </script>
25 | 
26 | <template>
27 | <div class="preview -option" v-text="previewText"></div>
28 | </template>
29 | 
30 | <style lang="sass" scoped>
31 | @import '../../sass/variables'
32 | @import '../../sass/core/mixins'
33 | 
34 | .preview.-option
35 |   padding: .3rem 1rem
36 |   font-size: .8rem
37 |   overflow: hidden
38 |   text-overflow: ellipsis
39 | 
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/editors/previews/Text.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import EditorBase from '@/editors/common/BasePreview'
 3 | import _ from 'lodash'
 4 | 
 5 | export default {
 6 |   extends: EditorBase,
 7 |   // this.content - Content (read-only)
 8 |   // this.config - Config data from the schema (read-only)
 9 |   name: 'TextPreview',
10 | 
11 |   computed: {
12 | 
13 |     previewText () {
14 |       let previewText = _.toString(this.content)
15 |       let div = document.createElement('div')
16 |       div.innerHTML = previewText
17 |       previewText = div.innerText || ''
18 |       if (!previewText) return '…'
19 |       return (previewText.length <= 70) ? previewText : previewText.substring(0, 67) + '…'
20 |     },
21 | 
22 |   },
23 | 
24 | }
25 | </script>
26 | 
27 | <template>
28 | <div class="preview -text" v-text="previewText"></div>
29 | </template>
30 | 
31 | <style lang="sass" scoped>
32 | @import '../../sass/variables'
33 | @import '../../sass/core/mixins'
34 | 
35 | .preview.-text
36 |   padding: .3rem 1rem
37 |   font-size: .8rem
38 |   overflow: hidden
39 |   text-overflow: ellipsis
40 | 
41 | </style>
42 | 


--------------------------------------------------------------------------------
/src/editors/previews/Video.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import EditorBase from '@/editors/common/BasePreview'
 3 | 
 4 | export default {
 5 |   extends: EditorBase,
 6 |   // this.content - Content (read-only)
 7 |   // this.config - Config data from the schema (read-only)
 8 |   name: 'VideoPreview',
 9 | 
10 |   computed: {
11 | 
12 |     previewImage () {
13 |       return this.content.thumbnail
14 |     },
15 | 
16 |   },
17 | 
18 | }
19 | </script>
20 | 
21 | <template>
22 | <div class="preview -image">
23 |   <img class="image" :src="previewImage" alt="" v-if="content">
24 |   <icon name="play-circle"></icon>
25 | </div>
26 | </template>
27 | 
28 | <style lang="sass" scoped>
29 | @import '../../sass/variables'
30 | @import '../../sass/core/mixins'
31 | 
32 | .preview.-image
33 |   position: relative
34 |   background-image: url('../../assets/image-background.png')
35 |   background-position: center
36 |   height: 5em
37 |   +center()
38 |   overflow: hidden
39 | 
40 |   .image
41 |     max-width: 100%
42 | 
43 |   .fa-icon
44 |     position: absolute
45 |     top: 50%
46 |     left: 50%
47 |     transform: translate(-50%, -50%)
48 |     height: 160%
49 |     width: auto
50 |     max-width: none
51 |     max-height: none
52 |     color: mix($color-white, transparent, 90%)
53 |     filter: drop-shadow(0 0 .5rem mix($color-black, transparent, 70%))
54 | 
55 | </style>
56 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import { sync } from 'vuex-router-sync'
 3 | import App from '@/App.vue'
 4 | import router from '@/router'
 5 | import store from '@/store'
 6 | 
 7 | // Open Sans font
 8 | import 'typeface-open-sans'
 9 | 
10 | // Font awesome icons
11 | import '@/utils/icons'
12 | 
13 | // Core components and style
14 | import '@/components/core/registerAll'
15 | import '@/sass/core/initialize.sass'
16 | 
17 | // Vue Transitions
18 | import '@/sass/transitions.sass'
19 | 
20 | // Sync router and store
21 | sync(store, router)
22 | 
23 | new Vue({
24 |   router,
25 |   store,
26 |   render: h => h(App),
27 | }).$mount('#app')
28 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | import Content from '@/views/Content.vue'
 4 | import Schema from '@/views/Schema.vue'
 5 | import Settings from '@/views/Settings.vue'
 6 | 
 7 | Vue.use(Router)
 8 | 
 9 | export default new Router({
10 |   mode: 'history',
11 |   base: __dirname,
12 |   routes: [
13 |     {
14 |       name: 'Dashboard',
15 |       path: '/',
16 |     },
17 |     {
18 |       name: 'Register',
19 |       path: '/register',
20 |     },
21 |     {
22 |       name: 'Schema',
23 |       path: '/:projectId/schema/:path?',
24 |       component: Schema,
25 |     },
26 |     {
27 |       name: 'Settings',
28 |       path: '/:projectId/settings/:path?',
29 |       component: Settings,
30 |     },
31 |     {
32 |       name: 'Content',
33 |       path: '/:projectId/:path?',
34 |       component: Content,
35 |     },
36 |   ],
37 | })
38 | 


--------------------------------------------------------------------------------
/src/sass/codemirror.sass:
--------------------------------------------------------------------------------
 1 | @import "variables"
 2 | 
 3 | .vue-codemirror
 4 |   padding: $radius--large
 5 |   border-radius: $radius--large
 6 | 
 7 |   &.-dracula
 8 |     font-size: .9rem
 9 |     background-color: #282A35
10 |     transition: box-shadow .2s
11 |     box-shadow: $shadow--large
12 | 
13 |   .CodeMirror
14 |     height: auto
15 | 


--------------------------------------------------------------------------------
/src/sass/core/_breakpoint.sass:
--------------------------------------------------------------------------------
 1 | //
 2 | // Breakpoints
 3 | // https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
 4 | // --------------------------------------------------
 5 | // .my-element
 6 | //   padding: 10px
 7 | //   +breakpoint('large')
 8 | //     padding: 20px
 9 | //   +breakpoint(1300px)
10 | //     padding: 25px
11 | 
12 | @mixin breakpoint($min-width: 0)
13 | 
14 |   @if $min-width == 'small'
15 |     $min-width: $breakpoint--small
16 | 
17 |   @if $min-width == 'medium'
18 |     $min-width: $breakpoint--medium
19 | 
20 |   @if $min-width == 'large'
21 |     $min-width: $breakpoint--large
22 | 
23 |   @if $min-width == 'huge'
24 |     $min-width: $breakpoint--huge
25 | 
26 |   @media (min-width: $min-width)
27 |     @content
28 | 


--------------------------------------------------------------------------------
/src/sass/core/_center.sass:
--------------------------------------------------------------------------------
 1 | //
 2 | // Center
 3 | // --------------------------------------------------
 4 | // .my-element
 5 | //   +center()
 6 | 
 7 | @mixin center()
 8 |   display: flex
 9 |   justify-content: center
10 |   align-items: center
11 | 


--------------------------------------------------------------------------------
/src/sass/core/_chain.sass:
--------------------------------------------------------------------------------
 1 | //
 2 | // Chain
 3 | // --------------------------------------------------
 4 | // .my-element
 5 | //   +chain(1rem)
 6 | 
 7 | @mixin chain($gap: null)
 8 |   display: flex
 9 |   flex-direction: row
10 |   align-items: center
11 |   justify-content: flex-start
12 | 
13 |   > *
14 |     flex-shrink: 0
15 |     flex-grow: 0
16 | 
17 |   hr
18 |     flex-shrink: 1
19 |     flex-grow: 1
20 | 
21 |   @if $gap != null
22 |     > * + *
23 |       margin-left: $gap
24 | 


--------------------------------------------------------------------------------
/src/sass/core/_container.sass:
--------------------------------------------------------------------------------
 1 | //
 2 | // Container
 3 | // --------------------------------------------------
 4 | // .my-element
 5 | //   +container(['default', 'fluid', '300px'], 'left')
 6 | 
 7 | @mixin container($width: 'default', $position: $container-position)
 8 |   $padding: $rem
 9 |   padding-top: $container-vertical-padding
10 |   padding-bottom: $container-vertical-padding
11 | 
12 |   // Set width by name
13 |   @if $width == 'default'
14 |     $width: $container-max-width
15 | 
16 |   @if $width == 'small'
17 |     $width: $breakpoint--small
18 | 
19 |   @if $width == 'medium'
20 |     $width: $breakpoint--medium
21 | 
22 |   @if $width == 'large'
23 |     $width: $breakpoint--large
24 | 
25 |   @if $width == 'huge'
26 |     $width: $breakpoint--huge
27 | 
28 |   // Horizontal padding
29 |   @if $width == 'fluid' or type-of($width) == number
30 |     padding-left: $padding
31 |     padding-right: $padding
32 | 
33 |     +breakpoint('small')
34 |       $padding: $breakpoint--small * .05
35 |       padding-left: $padding
36 |       padding-right: $padding
37 | 
38 |     +breakpoint('medium')
39 |       $padding: $breakpoint--medium * .05
40 |       padding-left: $padding
41 |       padding-right: $padding
42 | 
43 |     +breakpoint('large')
44 |       $padding: $breakpoint--large * .05
45 |       padding-left: $padding
46 |       padding-right: $padding
47 | 
48 |     +breakpoint('huge')
49 |       $padding: $breakpoint--huge * .05
50 |       padding-left: $padding
51 |       padding-right: $padding
52 | 
53 |   // Horizontal padding when browser is wider then container
54 |   @if type-of($width) == number
55 | 
56 |     $horizontal-padding-when-wider-than-container: $rem
57 | 
58 |     @if $width >= $breakpoint--small
59 |       $horizontal-padding-when-wider-than-container: $breakpoint--small * .05
60 | 
61 |     @if $width >= $breakpoint--medium
62 |       $horizontal-padding-when-wider-than-container: $breakpoint--medium * .05
63 | 
64 |     @if $width >= $breakpoint--large
65 |       $horizontal-padding-when-wider-than-container: $breakpoint--large * .05
66 | 
67 |     @if $width >= $breakpoint--huge
68 |       $horizontal-padding-when-wider-than-container: $breakpoint--huge * .05
69 | 
70 |     @media (min-width: #{$width + $horizontal-padding-when-wider-than-container * 2})
71 | 
72 |       @if $position == 'center'
73 |         padding-left: calc((100% - #{$width}) / 2)
74 |         padding-right: calc((100% - #{$width}) / 2)
75 | 
76 |       @if $position == 'left'
77 |         padding-right: calc(100% - #{$width} - #{$padding})
78 | 
79 |       @if $position == 'right'
80 |         padding-left: calc(100% - #{$width} - #{$padding})
81 | 


--------------------------------------------------------------------------------
/src/sass/core/_gap.sass:
--------------------------------------------------------------------------------
 1 | //
 2 | // Gap between child-elements
 3 | // --------------------------------------------------
 4 | // .my-element
 5 | //   +gap(1rem)
 6 | 
 7 | @mixin gap($margin: 1rem)
 8 |   > * + *
 9 |     margin-top: $margin
10 | 


--------------------------------------------------------------------------------
/src/sass/core/_grid.sass:
--------------------------------------------------------------------------------
 1 | //
 2 | // Grid
 3 | // --------------------------------------------------
 4 | // .my-element
 5 | //   +grid(3, 2rem, 1rem)
 6 | //
 7 | // Param $columns [amount of columns (1-99)]
 8 | 
 9 | @mixin grid($columns: 3, $horizontal-gap: null, $vertical-gap: null)
10 | 
11 |   @if $vertical-gap == null
12 |     $vertical-gap: $horizontal-gap
13 | 
14 |   @if type-of($columns) == number and unitless($columns)
15 |     display: flex
16 |     flex-wrap: wrap
17 | 
18 |     > *
19 |       width: 100% / $columns
20 | 
21 |     @if $horizontal-gap != null
22 |       margin-left: $horizontal-gap * -1
23 | 
24 |       > *
25 |         padding-left: $horizontal-gap
26 | 
27 |     @if $vertical-gap != null
28 |       margin-bottom: $vertical-gap * -1
29 | 
30 |       > *
31 |         padding-bottom: $vertical-gap
32 | 


--------------------------------------------------------------------------------
/src/sass/core/_hx.sass:
--------------------------------------------------------------------------------
 1 | //
 2 | // H1-H6 shorthand
 3 | // --------------------------------------------------
 4 | // +hx
 5 | //   color: red
 6 | 
 7 | @mixin hx()
 8 |   h1,
 9 |   h2,
10 |   h3,
11 |   h4,
12 |   h5,
13 |   h6
14 |     @content
15 | 


--------------------------------------------------------------------------------
/src/sass/core/_invert.sass:
--------------------------------------------------------------------------------
 1 | //
 2 | // Invert colors
 3 | // --------------------------------------------------
 4 | // .my-element
 5 | //   +invert
 6 | 
 7 | @mixin invert()
 8 |   background-color: $invert-background-color
 9 |   color: $invert-content-color
10 |   font-weight: $invert-content-font-weight
11 | 
12 |   a
13 |     color: $invert-link-color
14 | 
15 |     &:hover
16 |       color: $invert-link-color--hover
17 | 
18 |     &:active
19 |       color: $invert-link-color--active
20 | 
21 |   +hx
22 |     color: $invert-heading-color
23 |     font-weight: $invert-heading-font-weight
24 | 
25 |   hr
26 |     border-color: $invert-hr-color
27 | 


--------------------------------------------------------------------------------
/src/sass/core/_mask.sass:
--------------------------------------------------------------------------------
 1 | //
 2 | // Text Masking
 3 | // http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
 4 | // --------------------------------------------------
 5 | // .my-element
 6 | //   +mask('images/foobar.jpg')
 7 | 
 8 | @mixin mask($image-url: null)
 9 |   background-size: cover
10 |   background-position: center
11 |   -webkit-background-clip: text
12 |   -webkit-text-fill-color: transparent
13 | 
14 |   @if $image-url != null
15 |     background: -webkit-linear-gradient(transparent, transparent), url($image-url)
16 | 


--------------------------------------------------------------------------------
/src/sass/core/mixins.sass:
--------------------------------------------------------------------------------
 1 | @import "breakpoint"
 2 | @import "center"
 3 | @import "chain"
 4 | @import "container"
 5 | @import "grid"
 6 | @import "hx"
 7 | @import "invert"
 8 | @import "mask"
 9 | @import "gap"
10 | 


--------------------------------------------------------------------------------
/src/sass/transitions.sass:
--------------------------------------------------------------------------------
 1 | @import "variables"
 2 | 
 3 | .fade-enter-active,
 4 | .fade-leave-active,
 5 |   transition: opacity $time
 6 | 
 7 | .fade--fast-enter-active,
 8 | .fade--fast-leave-active
 9 |   transition: opacity $time--small
10 | 
11 | .fade--slow-enter-active,
12 | .fade--slow-leave-active
13 |   transition: opacity $time--large
14 | 
15 | .fade-enter,
16 | .fade-leave-to,
17 | .fade--fast-enter,
18 | .fade--fast-leave-to,
19 | .fade--slow-enter,
20 | .fade--slow-leave-to
21 |   opacity: 0
22 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import _ from 'lodash'
 4 | import parseJson from 'parse-json'
 5 | import buildStructure from '@/utils/buildStructure'
 6 | import firestore from '@/store/modules/firestore'
 7 | import notifications from '@/store/modules/notifications'
 8 | import projects from '@/store/modules/projects'
 9 | import uploader from '@/store/modules/uploader'
10 | import utils from '@/store/modules/utils'
11 | 
12 | Vue.use(Vuex)
13 | 
14 | let store = {
15 |   strict: true,
16 |   modules: {
17 |     firestore,
18 |     notifications,
19 |     projects,
20 |     uploader,
21 |     utils,
22 |   },
23 | 
24 |   getters: {
25 | 
26 |     isLoggedIn (state) {
27 |       if (state.firestore.user === null) {
28 |         return null
29 |       }
30 |       else if (state.firestore.user === false || !state.firestore.user.email) {
31 |         return false
32 |       }
33 |       else {
34 |         return true
35 |       }
36 |     },
37 | 
38 |     auth (state) {
39 |       return state.firestore.user
40 |     },
41 | 
42 |     structure (state, getters) {
43 |       if (!getters.activeProject) return {}
44 | 
45 |       const schema = parseJson(getters.activeProject.schema)
46 |       const draft = getters.activeProject.draft
47 |       const published = _.has(getters.activeProject, 'publishedVersion.draft') ? getters.activeProject.publishedVersion.draft : {}
48 | 
49 |       return buildStructure(schema, draft, published)
50 |     },
51 | 
52 |     activeItem (state, getters, rootState) {
53 |       if (!getters.activeProject) return {}
54 | 
55 |       let path = _.replace(rootState.route.params.path, />/g, '.')
56 | 
57 |       if (_.has(getters.structure, path)) {
58 |         return _.get(getters.structure, path)
59 |       }
60 |       else {
61 |         return {}
62 |       }
63 |     },
64 |   },
65 | 
66 |   actions: {
67 |     updateContent ({ getters, dispatch }, payload) {
68 |       let currentContent = _.get(getters.structure, `${payload.path}._content`)
69 | 
70 |       if (!_.isEqual(currentContent, payload.content)) {
71 |         dispatch('updateDraftToFirestore', payload)
72 |       }
73 |     },
74 | 
75 |     updateSchema ({ dispatch }, payload) {
76 |       dispatch('updateSchemaToFirestore', payload)
77 |     },
78 |   },
79 | 
80 | }
81 | 
82 | export default new Vuex.Store(store)
83 | 


--------------------------------------------------------------------------------
/src/store/modules/auth.js:
--------------------------------------------------------------------------------
 1 | // import Vue from 'vue'
 2 | // import _ from 'lodash'
 3 | // import router from '@/router'
 4 | // import firebase from '@/utils/firebase'
 5 | //
 6 | // export default {
 7 | //   state: {
 8 | //     id: null,
 9 | //     email: null,
10 | //   },
11 | //
12 | //   getters: {
13 | //
14 | //     userSettings (rootState) {
15 | //       return _.get(rootState, 'firestoreuserSettings')
16 | //     },
17 | //
18 | //   },
19 | //
20 | //   mutations: {
21 | //     setUser (state, user) {
22 | //       Vue.set(state, 'id', user.id)
23 | //       Vue.set(state, 'email', user.email)
24 | //     },
25 | //   },
26 | //
27 | //   actions: {
28 | //     authState ({state, commit, dispatch, rootState}) {
29 | //       firebase.auth.onAuthStateChanged(firebaseUser => {
30 | //         if (firebaseUser) {
31 | //           commit('setUser', {
32 | //             id: firebaseUser.uid,
33 | //             email: firebaseUser.email,
34 | //           })
35 | //
36 | //           dispatch('getUserFromFirestore', firebaseUser.uid)
37 | //
38 | //           dispatch('getProjectsFromFirestore', {
39 | //             id: firebaseUser.uid,
40 | //             email: firebaseUser.email,
41 | //           })
42 | //
43 | //           if (rootState.route.name === 'Register') {
44 | //             router.push({name: 'Dashboard'})
45 | //           }
46 | //         }
47 | //         else {
48 | //           commit('setUser', {
49 | //             id: false,
50 | //             email: false,
51 | //           })
52 | //         }
53 | //       })
54 | //     },
55 | //   },
56 | // }
57 | 


--------------------------------------------------------------------------------
/src/store/modules/content.js:
--------------------------------------------------------------------------------
 1 | // import _ from 'lodash'
 2 | //
 3 | // export default {
 4 | //
 5 | //   actions: {
 6 | //     updateContent ({getters, dispatch}, payload) {
 7 | //       let currentContent = _.get(getters.structure, `${payload.path}._content`)
 8 | //
 9 | //       if (!_.isEqual(currentContent, payload.content)) {
10 | //         dispatch('updateDraftToFirestore', payload)
11 | //       }
12 | //     },
13 | //   },
14 | // }
15 | 


--------------------------------------------------------------------------------
/src/store/modules/firestore.js:
--------------------------------------------------------------------------------
  1 | // import Vue from 'vue'
  2 | // import dayjs from 'dayjs'
  3 | import generate from 'nanoid/generate'
  4 | import router from '@/router'
  5 | import firebase from '@/utils/firebase'
  6 | 
  7 | export default {
  8 | 
  9 |   state: {
 10 |     projects: null,
 11 |     user: null,
 12 |   },
 13 | 
 14 |   mutations: {
 15 | 
 16 |     setUser (state, user) {
 17 |       state.user = user
 18 |     },
 19 | 
 20 |     setProjects (state, projects) {
 21 |       state.projects = projects
 22 |     },
 23 | 
 24 |   },
 25 | 
 26 |   actions: {
 27 |     authState ({ state, commit, dispatch, rootState }) {
 28 |       firebase.auth.onAuthStateChanged(firebaseUser => {
 29 |         if (!firebaseUser) {
 30 |           commit('setUser', false)
 31 |           commit('setProjects', false)
 32 |           return null
 33 |         }
 34 | 
 35 |         dispatch('getUserFromFirestore', firebaseUser.uid)
 36 |         dispatch('getProjectsFromFirestore', {
 37 |           id: firebaseUser.uid,
 38 |           email: firebaseUser.email,
 39 |         })
 40 | 
 41 |         if (rootState.route.name === 'Register') {
 42 |           router.push({ name: 'Dashboard' })
 43 |         }
 44 |       })
 45 |     },
 46 | 
 47 |     getUserFromFirestore ({ state, commit }, userId) {
 48 |       firebase.firestore
 49 |         .collection('users')
 50 |         .doc(userId)
 51 |         .onSnapshot(docSnapshot => {
 52 |           commit('setUser', {
 53 |             id: userId,
 54 |             ...docSnapshot.data(),
 55 |           })
 56 |         })
 57 |     },
 58 | 
 59 |     getProjectsFromFirestore ({ state, commit }, payload) {
 60 |       firebase.firestore
 61 |         .collection('projects')
 62 |         .where(`users.${payload.id}.email`, '==', payload.email)
 63 |         .onSnapshot(querySnapshot => {
 64 |           let projects = {}
 65 |           querySnapshot.forEach(doc => {
 66 |             projects[doc.id] = doc.data()
 67 |           })
 68 | 
 69 |           commit('setProjects', projects)
 70 |         })
 71 |     },
 72 | 
 73 |     newProjectToFirestore ({ state, dispatch }, payload) {
 74 |       // console.log('newProjectToFirestore', payload)
 75 |       let newProject = payload.newProject
 76 |       payload = payload.payload
 77 | 
 78 |       firebase.firestore
 79 |         .collection('projects')
 80 |         .doc(payload.id)
 81 |         .set(newProject)
 82 |         .catch(error => {
 83 |           payload.tries = !payload.tries ? 1 : payload.tries + 1
 84 | 
 85 |           if (payload.tries < 5) {
 86 |             const orginalId = payload.tries > 1 ? payload.id.slice(0, -5) : payload.id
 87 |             const randomId = generate('abcdefghijklmnopqrstuvwxyz', 4)
 88 |             payload.id = `${orginalId}-${randomId}`
 89 |             dispatch('newProject', payload)
 90 |           }
 91 |           else {
 92 |             console.error('Creating new project failed', error)
 93 |           }
 94 |         })
 95 |     },
 96 | 
 97 |     deleteProjectFromFirestore ({ state }, payload) {
 98 |       firebase.firestore
 99 |         .collection('projects')
100 |         .doc(payload.id)
101 |         .collection('jobs')
102 |         .add({
103 |           job: 'deleteProject',
104 |           deleteProjectId: payload.id,
105 |         })
106 |         .catch((error) => console.error('Project deleting failed', error))
107 |     },
108 | 
109 |     newProjectVersionToFirestore ({ state }, payload) {
110 |       return firebase.firestore
111 |         .collection('projects')
112 |         .doc(payload.projectId)
113 |         .collection('versions')
114 |         .add({
115 |           publishedBy: payload.publishedBy,
116 |           // publishedAt: null,
117 |           publishedAt: firebase.firestoreTimestamp,
118 |           json: payload.json,
119 |           // filename: payload.filename,
120 |           token: payload.token,
121 |           schema: payload.schema,
122 |           draft: payload.draft,
123 |         })
124 |         .catch((error) => console.error('Error adding version:', error))
125 |     },
126 | 
127 |     setProjectPublished ({ state }, payload) {
128 |       let updateData = {}
129 |       updateData['published'] = {
130 |         draft: payload.draft,
131 |         schema: payload.schema,
132 |         publishedAt: firebase.firestoreTimestamp,
133 |         versionId: payload.versionId,
134 |       }
135 | 
136 |       firebase.firestore
137 |         .collection('projects')
138 |         .doc(payload.projectId)
139 |         .update(updateData)
140 |     },
141 | 
142 |     updateDraftToFirestore ({ state, getters }, payload) {
143 |       let updateContent = {}
144 |       updateContent[`draft.${payload.path}`] = payload.content
145 | 
146 |       firebase.firestore
147 |         .collection('projects')
148 |         .doc(payload.projectId)
149 |         .update(updateContent)
150 |         .catch((error) => console.error('Error updating content:', error))
151 |     },
152 | 
153 |     updateSchemaToFirestore ({ state }, payload) {
154 |       firebase.firestore
155 |         .collection('projects')
156 |         .doc(payload.projectId)
157 |         .update({
158 |           schema: payload.schema,
159 |         })
160 |         .catch((error) => console.error('Error writing schema:', error))
161 |     },
162 | 
163 |     newPermissionToFirestore ({ commit, getters }, payload) {
164 |       firebase.firestore
165 |         .collection('projects')
166 |         .doc(payload.projectId)
167 |         .collection('jobs')
168 |         .add({
169 |           job: 'addUserToProject',
170 |           email: payload.email,
171 |           permissions: {
172 |             publish: true,
173 |             updateDraft: true,
174 |           },
175 |         })
176 |         .catch(error => console.error('Add user job adding failed', error))
177 |     },
178 | 
179 |     async addUserToProjectToFirestore ({ commit, getters }, payload) {
180 |       let userData = {}
181 |       userData[`users.${payload.awaitId}`] = payload.user
182 | 
183 |       // console.log('addUserToProjectToFirestore', payload)
184 | 
185 |       await firebase.firestore
186 |         .collection('projects')
187 |         .doc(payload.projectId)
188 |         .update(userData)
189 |         .catch(error => console.error('Add user job adding failed', error))
190 | 
191 |       firebase.firestore
192 |         .collection('projects')
193 |         .doc(payload.projectId)
194 |         .collection('jobs')
195 |         .add({
196 |           job: 'attachUserToProject',
197 |           email: payload.email,
198 |           awaitId: payload.awaitId,
199 |           projectId: payload.projectId,
200 |         })
201 |         .catch(error => console.error('Add user job adding failed', error))
202 |     },
203 | 
204 |     updatePermissionToFirestore ({ state }, payload) {
205 |       // console.log('updatePermissionToFirestore', payload)
206 |       let newRole = {}
207 |       newRole[`users.${payload.userId}.permissions`] = payload.permissions
208 | 
209 |       firebase.firestore
210 |         .collection('projects')
211 |         .doc(payload.projectId)
212 |         .update(newRole)
213 |         .catch((error) => console.error('Permission updating failed', error))
214 |     },
215 | 
216 |     removeUserFromProjectToFirestore ({ state }, payload) {
217 |       // console.log('removeUserFromProjectToFirestore', payload)
218 |       let removeUser = {}
219 |       removeUser[`users.${payload.userId}`] = firebase.firestoreDelete
220 | 
221 |       // console.log('removeUser', removeUser)
222 | 
223 |       firebase.firestore
224 |         .collection('projects')
225 |         .doc(payload.projectId)
226 |         .update(removeUser)
227 |         .catch(error => console.error('Permission deleting failed', error))
228 |     },
229 | 
230 |   },
231 | 
232 | }
233 | 


--------------------------------------------------------------------------------
/src/store/modules/notifications.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import _ from 'lodash'
 3 | import nanoid from 'nanoid'
 4 | 
 5 | export default {
 6 | 
 7 |   state: {
 8 |     items: {},
 9 |   },
10 | 
11 |   mutations: {
12 | 
13 |     setNotification (state, payload) {
14 |       let notification = {}
15 |       payload.id = payload.id || nanoid()
16 | 
17 |       if (_.has(state.items, payload.id)) {
18 |         notification = _.get(state.items, payload.id)
19 |       }
20 | 
21 |       notification.mode = payload.mode || notification.mode
22 |       notification.message = payload.message || notification.message
23 |       notification.link = payload.link || notification.link
24 |       notification.progress = payload.progress || notification.progress
25 | 
26 |       Vue.set(state.items, payload.id, notification)
27 |     },
28 | 
29 |     deleteNotification (state, payload) {
30 |       Vue.delete(state.items, payload.id)
31 |     },
32 | 
33 |   },
34 | 
35 | }
36 | 


--------------------------------------------------------------------------------
/src/store/modules/schema.js:
--------------------------------------------------------------------------------
 1 | // export default {
 2 | //
 3 | //   actions: {
 4 | //
 5 | //     updateSchema ({dispatch}, payload) {
 6 | //       dispatch('updateSchemaToFirestore', payload)
 7 | //     },
 8 | //
 9 | //   },
10 | // }
11 | 


--------------------------------------------------------------------------------
/src/store/modules/structure.js:
--------------------------------------------------------------------------------
 1 | // import parseJson from 'parse-json'
 2 | // import _ from 'lodash'
 3 | // import buildStructure from '@/utils/buildStructure'
 4 | //
 5 | // export default {
 6 | //
 7 | //   getters: {
 8 | //
 9 | //     structure (state, getters) {
10 | //       if (!getters.activeProject) return {}
11 | //
12 | //       const schema = parseJson(getters.activeProject.schema)
13 | //       const draft = getters.activeProject.draft
14 | //       const published = _.has(getters.activeProject, 'publishedVersion.draft') ? getters.activeProject.publishedVersion.draft : {}
15 | //
16 | //       return buildStructure(schema, draft, published)
17 | //     },
18 | //
19 | //     activeItem (state, getters, rootState) {
20 | //       if (!getters.activeProject) return {}
21 | //
22 | //       let path = _.replace(rootState.route.params.path, />/g, '.')
23 | //
24 | //       if (_.has(getters.structure, path)) {
25 | //         return _.get(getters.structure, path)
26 | //       }
27 | //       else {
28 | //         return {}
29 | //       }
30 | //     },
31 | //   },
32 | // }
33 | 


--------------------------------------------------------------------------------
/src/store/modules/uploader.js:
--------------------------------------------------------------------------------
  1 | import _ from 'lodash'
  2 | import slugg from 'slugg'
  3 | import generate from 'nanoid/generate'
  4 | import firebase from '@/utils/firebase'
  5 | import { blobToDataURL } from 'blob-util'
  6 | import ImageCompressor from 'image-compressor.js'
  7 | 
  8 | const imageCompressor = new ImageCompressor()
  9 | 
 10 | export default {
 11 | 
 12 |   actions: {
 13 | 
 14 |     // TODO: Move this function to utils folder
 15 |     async uploadImage ({ commit, dispatch }, payload) {
 16 |       if (!_.startsWith(payload.image.type, 'image/')) return false
 17 |       let filenameWithoutExt = slugg(payload.image.name.replace(/\.[^/.]+$/, ''))
 18 |       let randomId = generate('abcdefghijklmnopqrstuvwxyz', 4)
 19 | 
 20 |       let maxWidth = 960
 21 |       let maxHeight = 960
 22 | 
 23 |       if (_.isNumber(payload.downscale)) {
 24 |         maxWidth = payload.downscale
 25 |         maxHeight = payload.downscale
 26 |       }
 27 | 
 28 |       if (_.isPlainObject(payload.downscale) && _.isNumber(payload.downscale.width)) {
 29 |         maxWidth = payload.downscale.width
 30 |       }
 31 | 
 32 |       if (_.isPlainObject(payload.downscale) && _.isNumber(payload.downscale.height)) {
 33 |         maxHeight = payload.downscale.height
 34 |       }
 35 | 
 36 |       commit('setNotification', {
 37 |         id: `${payload.projectId}>${payload.path}>upload`,
 38 |         mode: 'info',
 39 |         message: filenameWithoutExt,
 40 |       })
 41 | 
 42 |       let uploadImage = payload.image
 43 | 
 44 |       if (_.includes(['image/jpeg', 'image/png'], payload.image.type)) {
 45 |         let optimizedImage = await imageCompressor.compress(payload.image, {
 46 |           quality: 0.8,
 47 |           convertSize: 1000000,
 48 |           maxWidth: maxWidth,
 49 |           maxHeight: maxHeight,
 50 |         })
 51 |           .then((result) => {
 52 |             return result
 53 |           })
 54 |           .catch((error) => console.error('Image optimize failed', error.message))
 55 | 
 56 |         uploadImage = optimizedImage
 57 |       }
 58 | 
 59 |       if (uploadImage.size > 5 * 1024 * 1024) {
 60 |         commit('setNotification', {
 61 |           id: `${payload.projectId}>${payload.path}>upload`,
 62 |           mode: 'danger',
 63 |           message: 'Max image size 5 MB, try another image.',
 64 |         })
 65 | 
 66 |         console.error('Max image size 5 MB, try another image.')
 67 |         return false
 68 |       }
 69 | 
 70 |       let filename = `${filenameWithoutExt}-${randomId}`
 71 | 
 72 |       if (uploadImage.type === 'image/jpeg') {
 73 |         filename = `${filename}.jpg`
 74 |       }
 75 |       else if (uploadImage.type === 'image/png') {
 76 |         filename = `${filename}.png`
 77 |       }
 78 |       else if (uploadImage.type === 'image/gif') {
 79 |         filename = `${filename}.gif`
 80 |       }
 81 |       else if (uploadImage.type === 'image/svg+xml') {
 82 |         filename = `${filename}.svg`
 83 |       }
 84 |       else {
 85 |         commit('setNotification', {
 86 |           id: `${payload.projectId}>${payload.path}>upload`,
 87 |           mode: 'danger',
 88 |           message: `Unsupported file type. Send jpg, png, gif or svg.`,
 89 |         })
 90 |         console.error('Unsupported file type', uploadImage.type)
 91 |         return false
 92 |       }
 93 | 
 94 |       // TODO: Move this to storage.js
 95 |       let uploadTask = firebase.storage
 96 |         .ref()
 97 |         .child(`${payload.projectId}/${filename}`)
 98 |         .put(uploadImage)
 99 | 
100 |       uploadTask.on('state_changed', (snapshot) => {
101 |         commit('setNotification', {
102 |           id: `${payload.projectId}>${payload.path}>upload`,
103 |           progress: snapshot.bytesTransferred / snapshot.totalBytes * 100,
104 |         })
105 |       })
106 | 
107 |       let downloadURL = await uploadTask
108 |         .then((data) => {
109 |           return uploadTask
110 |             .snapshot
111 |             .ref
112 |             .getDownloadURL()
113 |             .then(downloadURL => downloadURL)
114 |         })
115 |         .catch((error) => console.error('Upload task faild', error))
116 | 
117 |       let thumbnail = null
118 | 
119 |       if (payload.projectId && payload.path && downloadURL) {
120 |         if (_.includes(['image/jpeg', 'image/png', 'image/gif'], payload.image.type)) {
121 |           const thumbnailBlob = await imageCompressor.compress(payload.image, {
122 |             quality: 0.2,
123 |             convertSize: 0,
124 |             maxWidth: 64,
125 |             maxHeight: 64,
126 |           })
127 |             .catch((error) => console.error('Image optimize failed', error.message))
128 | 
129 |           thumbnail = await blobToDataURL(thumbnailBlob)
130 |             .catch((error) => console.error('Blob to base64 failed', error))
131 |         }
132 | 
133 |         let img = new Image()
134 |         img.src = URL.createObjectURL(uploadImage)
135 |         img.onload = () => {
136 |           dispatch('updateContent', {
137 |             projectId: payload.projectId,
138 |             path: payload.path,
139 |             content: {
140 |               url: downloadURL,
141 |               height: img.height,
142 |               width: img.width,
143 |               size: uploadImage.size,
144 |               type: uploadImage.type,
145 |               thumbnail: thumbnail,
146 |             },
147 |           })
148 |         }
149 |       }
150 | 
151 |       return {
152 |         downloadURL: downloadURL,
153 |         filename: filenameWithoutExt,
154 |         projectId: payload.projectId,
155 |         path: payload.path,
156 |         size: uploadImage.size,
157 |         type: uploadImage.type,
158 |         thumbnail: thumbnail,
159 |       }
160 |     },
161 |   },
162 | }
163 | 


--------------------------------------------------------------------------------
/src/store/modules/utils.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import _ from 'lodash'
 3 | 
 4 | export default {
 5 | 
 6 |   state: {
 7 |     activeModal: null,
 8 |     editorContentIsValid: true,
 9 |     windowHeight: window.innerHeight,
10 |     windowWidth: window.innerWidth,
11 |     invalidSchemas: {},
12 |     editlayerUrl: 'https://alpha5.editlayer.org',
13 |   },
14 | 
15 |   mutations: {
16 | 
17 |     setEditorContentValid (state, boolean) {
18 |       Vue.set(state, 'editorContentIsValid', boolean)
19 |     },
20 | 
21 |     setwWindowSize (state) {
22 |       Vue.set(state, 'windowWidth', window.innerWidth)
23 |       Vue.set(state, 'windowHeight', window.innerHeight)
24 |     },
25 | 
26 |     setActiveModal (state, modal) {
27 |       Vue.set(state, 'activeModal', modal)
28 |     },
29 | 
30 |     setInvalidSchema (state, payload) {
31 |       state.invalidSchemas[payload.projectId] = payload.schema
32 |       // Vue.set(state, 'invalidSchemas', payload.schema)
33 |     },
34 | 
35 |     removeInvalidSchema (state, projectId) {
36 |       let invalidSchemas = state.invalidSchemas
37 |       delete invalidSchemas[projectId]
38 |       state.invalidSchemas = invalidSchemas
39 |     },
40 | 
41 |   },
42 | 
43 |   actions: {
44 | 
45 |     resizeListener ({ commit }) {
46 |       window.addEventListener('resize', _.debounce(function () {
47 |         commit('setwWindowSize')
48 |       }, 250))
49 |     },
50 | 
51 |   },
52 | 
53 | }
54 | 


--------------------------------------------------------------------------------
/src/utils/buildJson.js:
--------------------------------------------------------------------------------
 1 | import _ from 'lodash'
 2 | 
 3 | const basicToJson = (schema, result = {}) => {
 4 |   _.each(schema, (value, key) => {
 5 |     if (_.has(value, '_content') && _.has(value, '_path')) {
 6 |       _.set(result, value._path, value._content)
 7 |     }
 8 | 
 9 |     if (_.has(value, '_order') && _.has(value, '_path')) {
10 |       _.set(result, `${value._path}._order`, value._order)
11 |       _.set(result, `${value._path}._key`, key)
12 |     }
13 | 
14 |     if (_.isPlainObject(value)) {
15 |       basicToJson(value, result)
16 |     }
17 |   })
18 | 
19 |   return result
20 | }
21 | 
22 | const arrayToJson = (schema, result = {}, path = false) => {
23 |   if (_.isPlainObject(schema) && _.startsWith(_.findKey(schema), '-')) {
24 |     let array = []
25 |     schema = _.sortBy(schema, '_order')
26 | 
27 |     _.each(schema, (value, key) => {
28 |       value = _.omit(value, ['_order'])
29 |       array.push(value)
30 |     })
31 | 
32 |     _.set(result, path, array)
33 |   }
34 | 
35 |   _.each(schema, (value, key) => {
36 |     if (_.isPlainObject(value)) {
37 |       let newPath = (!path) ? key : `${path}.${key}`
38 |       arrayToJson(value, result, newPath)
39 |     }
40 |   })
41 | 
42 |   return result
43 | }
44 | 
45 | export default (content) => {
46 |   content = basicToJson(content)
47 |   content = _.merge(content, arrayToJson(content))
48 | 
49 |   return content
50 | }
51 | 


--------------------------------------------------------------------------------
/src/utils/codemirror.js:
--------------------------------------------------------------------------------
 1 | // Modes
 2 | // import 'codemirror/mode/javascript/javascript'
 3 | // import 'codemirror/mode/xml/xml'
 4 | // import 'codemirror/mode/css/css'
 5 | // import 'codemirror/mode/sass/sass'
 6 | // import 'codemirror/mode/markdown/markdown'
 7 | 
 8 | // Style
 9 | // import 'codemirror/lib/codemirror.css'
10 | // import 'codemirror/theme/dracula.css'
11 | 


--------------------------------------------------------------------------------
/src/utils/firebase.js:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | import 'firebase/auth'
 3 | import 'firebase/firestore'
 4 | import 'firebase/storage'
 5 | 
 6 | firebase.initializeApp({
 7 |   apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
 8 |   authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
 9 |   databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
10 |   projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
11 |   storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
12 | })
13 | 
14 | const firestore = firebase.firestore()
15 | firestore.settings({ timestampsInSnapshots: true })
16 | 
17 | export default {
18 |   firestore: firestore,
19 |   firestoreDelete: firebase.firestore.FieldValue.delete(),
20 |   firestoreTimestamp: firebase.firestore.FieldValue.serverTimestamp(),
21 |   auth: firebase.auth(),
22 |   storage: firebase.storage(),
23 | }
24 | 


--------------------------------------------------------------------------------
/src/utils/icons.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Icon from 'vue-awesome/components/Icon'
 3 | 
 4 | import 'vue-awesome/icons/regular/file'
 5 | import 'vue-awesome/icons/regular/user'
 6 | import 'vue-awesome/icons/check'
 7 | import 'vue-awesome/icons/cloud-upload-alt'
 8 | import 'vue-awesome/icons/spinner'
 9 | import 'vue-awesome/icons/chevron-left'
10 | import 'vue-awesome/icons/chevron-right'
11 | import 'vue-awesome/icons/regular/edit'
12 | import 'vue-awesome/icons/cogs'
13 | import 'vue-awesome/icons/home'
14 | import 'vue-awesome/icons/trash'
15 | import 'vue-awesome/icons/regular/clock'
16 | import 'vue-awesome/icons/plus'
17 | import 'vue-awesome/icons/edit'
18 | import 'vue-awesome/icons/sign-out-alt'
19 | import 'vue-awesome/icons/regular/copy'
20 | import 'vue-awesome/icons/regular/thumbs-up'
21 | import 'vue-awesome/icons/times'
22 | import 'vue-awesome/icons/kiwi-bird'
23 | import 'vue-awesome/icons/play-circle'
24 | 
25 | Icon.register({
26 |   editlayer: {
27 |     width: 28,
28 |     height: 20,
29 |     paths: [
30 |       { d: 'm13.8461538 15.8859592 10.8869191-5.238444 2.9592348 1.2250892v1.1380841l-13.8461539 6.433133-13.8461538-6.433133v-1.1380841l2.86214193-1.2250892z' },
31 |       { d: 'm13.8461538 0 13.8461539 6.72571046v1.13808415l-13.8461539 6.43313299-13.8461538-6.43313299v-1.13808415z' },
32 |     ],
33 |   },
34 | })
35 | 
36 | Icon.register({
37 |   schema: {
38 |     width: 25,
39 |     height: 23,
40 |     d: 'M3.337 15.132c0-1.597-1.113-2.396-3.337-2.396v-2.46c1.129 0 1.967-.195 2.515-.585.548-.391.822-.986.822-1.784V3.902c0-1.34.453-2.324 1.36-2.955C5.606.316 6.967 0 8.782 0v2.344c-.954.043-1.646.242-2.076.599-.431.356-.646.886-.646 1.59v3.825c0 1.708-.958 2.73-2.873 3.065v.154c1.915.31 2.873 1.327 2.873 3.052v3.85c0 .705.213 1.237.64 1.598.426.36 1.12.55 2.082.566V23c-1.932-.017-3.322-.354-4.171-1.01-.849-.658-1.273-1.72-1.273-3.188v-3.67zm18.502 3.953c0 1.34-.416 2.322-1.248 2.95-.832.626-2.164.948-3.995.965v-2.357c.794-.008 1.413-.174 1.856-.495.443-.322.665-.878.665-1.668v-3.374c0-1.039.222-1.842.665-2.408.443-.567 1.179-.94 2.207-1.12v-.155c-1.915-.335-2.872-1.357-2.872-3.065V4.533c0-.704-.19-1.234-.57-1.59-.381-.357-1.032-.556-1.951-.6V0c1.864 0 3.205.328 4.02.985.815.657 1.223 1.732 1.223 3.226v3.696c0 .859.265 1.468.796 1.829.532.36 1.32.54 2.365.54v2.46c-1.029 0-1.813.183-2.352.548-.54.364-.81.98-.81 1.848v3.953z',
41 |   },
42 | })
43 | 
44 | Vue.component('icon', Icon)
45 | 


--------------------------------------------------------------------------------
/src/utils/webhook.js:
--------------------------------------------------------------------------------
 1 | import _ from 'lodash'
 2 | import axios from 'axios'
 3 | import { Base64 } from 'js-base64'
 4 | 
 5 | const errorHandler = (message) => {
 6 |   console.error(message)
 7 |   console.groupEnd()
 8 |   return false
 9 | }
10 | 
11 | export default (payload) => {
12 |   console.group('Webhook started')
13 | 
14 |   console.log('jsonUrl', payload.jsonUrl)
15 | 
16 |   let config = {}
17 | 
18 |   if (_.includes(payload.configString, '{{VERSION_ID}}')) {
19 |     payload.configString = _.replace(payload.configString, '{{VERSION_ID}}', payload.versionId)
20 |   }
21 | 
22 |   if (_.includes(payload.configString, '{{BASE64_CONTENT}}')) {
23 |     let base64Content = Base64.encode(JSON.stringify(payload.json))
24 |     payload.configString = _.replace(payload.configString, '{{BASE64_CONTENT}}', base64Content)
25 |   }
26 | 
27 |   if (_.includes(payload.configString, '{{PUBLISHER_EMAIL}}')) {
28 |     payload.configString = _.replace(payload.configString, '{{PUBLISHER_EMAIL}}', payload.email)
29 |   }
30 | 
31 |   try {
32 |     config = JSON.parse(payload.configString)
33 |   }
34 |   catch (e) {
35 |     return errorHandler('Syntax error: Webhook config is not valid JSON', payload.configString)
36 |   }
37 | 
38 |   if (!_.isString(config.url)) {
39 |     return errorHandler('"url" is required')
40 |   }
41 | 
42 |   if (config.method !== 'post' && config.method !== 'get') {
43 |     return errorHandler('"method" is required and it should be "post" or "get"')
44 |   }
45 | 
46 |   if (config.method === 'post' && _.has(config, 'params')) {
47 |     return errorHandler('With a method "post" you should use "data" insted of "params"')
48 |   }
49 | 
50 |   if (config.method === 'get' && _.has(config, 'data')) {
51 |     return errorHandler('With a method "get" you should use "params" insted of "data"')
52 |   }
53 | 
54 |   // if (config.method === 'get' && config.data && !config.params) {
55 |   //   config.params = config.data
56 |   //   delete config.data
57 |   // }
58 | 
59 |   console.log('Config:')
60 |   console.log(config)
61 | 
62 |   return axios(config)
63 |     .then((response) => {
64 |       console.log('Response:')
65 |       console.log(response)
66 |       console.groupEnd()
67 |       return true
68 |     })
69 |     .catch((error) => {
70 |       return errorHandler(error)
71 |     })
72 | }
73 | 


--------------------------------------------------------------------------------
/src/views/Auth.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import firebase from '@/utils/firebase'
  4 | 
  5 | export default {
  6 |   name: 'Auth',
  7 | 
  8 |   data () {
  9 |     return {
 10 |       state: this.$route.name === 'Register' ? 'register' : 'login',
 11 |       email: '',
 12 |       password: '',
 13 |       error: null,
 14 |       progress: false,
 15 |     }
 16 |   },
 17 | 
 18 |   watch: {
 19 | 
 20 |     email () {
 21 |       this.error = null
 22 |     },
 23 | 
 24 |     password () {
 25 |       this.error = null
 26 |     },
 27 | 
 28 |   },
 29 | 
 30 |   methods: {
 31 | 
 32 |     submit () {
 33 |       this.error = null
 34 |       this.progress = true
 35 | 
 36 |       if (this.state === 'login') {
 37 |         this.login()
 38 |       }
 39 |       else if (this.state === 'register') {
 40 |         this.register()
 41 |       }
 42 |       else if (this.state === 'forget') {
 43 |         this.resetPassword()
 44 |       }
 45 |     },
 46 | 
 47 |     login () {
 48 |       firebase.auth.signInWithEmailAndPassword(this.email, this.password)
 49 |         .catch((error) => {
 50 |           console.error('Logged in faild', error)
 51 |           this.progress = false
 52 | 
 53 |           this.$store.commit('setNotification', {
 54 |             mode: 'danger',
 55 |             message: error.message,
 56 |           })
 57 | 
 58 |           if (_.includes(['auth/invalid-email', 'auth/user-not-found'], error.code)) {
 59 |             this.error = 'email'
 60 |           }
 61 |           else if (_.includes(['auth/wrong-password'], error.code)) {
 62 |             this.error = 'password'
 63 |           }
 64 |         })
 65 |     },
 66 | 
 67 |     register () {
 68 |       firebase.auth.createUserWithEmailAndPassword(this.email, this.password)
 69 |         .catch(error => {
 70 |           console.error('register error', error)
 71 |           this.progress = false
 72 | 
 73 |           if (_.includes(['auth/invalid-email', 'auth/email-already-in-use'], error.code)) {
 74 |             this.error = 'email'
 75 |           }
 76 |           else if (_.includes(['auth/weak-password'], error.code)) {
 77 |             this.error = 'password'
 78 |           }
 79 |           else if (_.includes(['auth/operation-not-allowed'], error.code)) {
 80 |             alert(error.message)
 81 |           }
 82 |           else {
 83 |             alert('Unknown error! Try again later or contact admin.')
 84 |           }
 85 |         })
 86 |     },
 87 | 
 88 |     resetPassword () {
 89 |       firebase.auth.sendPasswordResetEmail(this.email).then(() => {
 90 |         this.changeState('login')
 91 |         this.progress = false
 92 |       })
 93 |         .catch((error) => {
 94 |           this.error = 'email'
 95 |           console.error('Reseting faild', error)
 96 |           this.progress = false
 97 |         })
 98 |     },
 99 | 
100 |     changeState (state) {
101 |       this.state = state
102 |     },
103 | 
104 |   },
105 | 
106 | }
107 | </script>
108 | 
109 | <template>
110 | <section class="auth" :class="{ 'progress': progress}">
111 | 
112 |   <div class="content">
113 | 
114 |     <form class="form" @submit.prevent="submit()">
115 | 
116 |       <heading-core class="heading">
117 |         <h1>
118 |           <span v-if="state === 'login'">
119 |             Login to your account
120 |           </span>
121 | 
122 |           <span v-if="state === 'register'">
123 |             Register new account
124 |           </span>
125 | 
126 |           <span v-if="state === 'forget'">
127 |             Reset your password
128 |           </span>
129 |         </h1>
130 |       </heading-core>
131 | 
132 |       <label class="field" :class="{'error': error === 'email'}">
133 |         <div>Email</div>
134 |         <input class="input" type="email" v-model="email">
135 |       </label>
136 | 
137 |       <label class="field" :class="{'error': error === 'password'}" v-if="state !== 'forget'">
138 |         <div>Password</div>
139 |         <input class="input" type="password" v-model="password">
140 |         <div v-if="state === 'login'" class="forget">
141 |           Forget password? <a @click="changeState('forget')">Reset Password</a>
142 |         </div>
143 |       </label>
144 | 
145 |       <button-core mode="primary" :disabled="progress" type="submit">
146 |         <span v-if="state === 'login'">Login</span>
147 |         <span v-if="state === 'register'">Register</span>
148 |         <span v-if="state === 'forget'">Send reset link</span>
149 |       </button-core>
150 | 
151 |       <div v-if="state === 'forget'" class="forget">
152 |         <a @click="changeState('login')">Back</a>
153 |       </div>
154 | 
155 |       <section class="register-spinner" v-if="progress && state === 'register'">
156 |         <icon name="spinner" spin/>
157 |         <div>Creating user account may take a while</div>
158 |       </section>
159 | 
160 |     </form>
161 | 
162 |     <footer class="footer">
163 | 
164 |       <div v-if="state === 'login'">
165 |         Don’t have an account? <a @click="changeState('register')">Register</a>
166 |       </div>
167 | 
168 |       <div v-if="state === 'register'">
169 |         You have already account? <a @click="changeState('login')">Login</a>
170 |       </div>
171 | 
172 |     </footer>
173 | 
174 |   </div>
175 | 
176 | </section>
177 | </template>
178 | 
179 | <style lang="sass" scoped>
180 | @import '../sass/variables'
181 | @import '../sass/core/mixins'
182 | 
183 | .auth
184 |   position: absolute
185 |   left: 0
186 |   right: 0
187 |   top: 0
188 |   bottom: 0
189 |   height: 100vh
190 |   background-color: mix($color-white, $color-black, 90%)
191 |   display: flex
192 |   justify-content: center
193 |   align-items: center
194 |   width: 100%
195 | 
196 |   &.progress
197 |     cursor: progress
198 | 
199 |     .heading,
200 |     .field,
201 |     .button-core,
202 |     .footer,
203 |       opacity: .2
204 |       pointer-events: none
205 | 
206 |   .content
207 |     +gap()
208 |     text-align: center
209 |     width: 30rem
210 | 
211 |   .form
212 |     box-shadow: 0 5px 12px 0 mix(transparent, $color-black, 90%), 0 2px 5px 0 mix(transparent, black, 93%)
213 |     background-color: $color-white
214 |     padding: 3rem 4rem
215 |     position: relative
216 |     +gap()
217 | 
218 |   .heading
219 |     margin-bottom: 2rem
220 | 
221 |   .field
222 |     text-align: left
223 |     font-weight: 600
224 |     +gap(.25rem)
225 | 
226 |     &.error
227 |       color: $color-danger
228 | 
229 |       .input
230 |         border-color: $color-danger
231 | 
232 |   .button
233 |     min-width: 50%
234 |     margin-top: 2rem
235 | 
236 |     &[disabled]
237 |       cursor: progress
238 | 
239 |   .forget
240 |     font-size: .8rem
241 |     color: $color-gray
242 |     font-weight: 400
243 | 
244 |   .footer
245 |     font-weight: 600
246 | 
247 |   .register-spinner
248 |     position: absolute
249 |     top: 50%
250 |     left: 30%
251 |     right: 30%
252 |     transform: translateY(-50%)
253 | 
254 |     .fa-icon
255 |       width: 6rem
256 | 
257 | </style>
258 | 


--------------------------------------------------------------------------------
/src/views/Content.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Editor from '@/components/content/Editor'
 3 | 
 4 | export default {
 5 |   name: 'Content',
 6 | 
 7 |   components: {
 8 |     Editor,
 9 |   },
10 | 
11 |   computed: {
12 |     activeItem () {
13 |       return this.$store.getters.activeItem
14 |     },
15 |   },
16 | }
17 | </script>
18 | 
19 | <template>
20 | <main class="content">
21 |   <div class="no-content" v-if="activeItem._type !== 'item'">
22 |     <icon class="icon" name="kiwi-bird"/>
23 |   </div>
24 | 
25 |   <Editor v-if="activeItem._type === 'item'"/>
26 | </main>
27 | </template>
28 | 
29 | <style lang="sass" scoped>
30 | @import '../sass/variables'
31 | @import '../sass/core/mixins'
32 | 
33 | .content
34 |   +gap()
35 |   display: flex
36 |   flex-shrink: 0
37 |   padding: 2rem 1.5rem
38 | 
39 |   +breakpoint('medium')
40 |     padding: 2rem 3rem
41 | 
42 | .no-content
43 |   align-self: stretch
44 |   width: 100%
45 |   +center()
46 | 
47 |   .icon
48 |     width: 40%
49 |     max-height: 40%
50 |     min-height: 5rem
51 |     color: $color-gray--lighter
52 | 
53 | </style>
54 | 


--------------------------------------------------------------------------------
/src/views/Dashboard.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import _ from 'lodash'
  3 | import Projects from '@/components/dashboard/Projects'
  4 | import NewProjectButton from '@/components/dashboard/NewProjectButton'
  5 | import Navigation from '@/components/dashboard/Navigation'
  6 | import FooterContent from '@/components/utils/FooterContent'
  7 | 
  8 | export default {
  9 |   name: 'Dashboard',
 10 | 
 11 |   components: {
 12 |     Navigation,
 13 |     Projects,
 14 |     NewProjectButton,
 15 |     FooterContent,
 16 |   },
 17 | 
 18 |   computed: {
 19 |     allowCreateProject () {
 20 |       return _.get(this.$store.getters, 'auth.permissions.createProject') === true
 21 |     },
 22 | 
 23 |     isProjects () {
 24 |       return !_.isEmpty(this.$store.getters.projects)
 25 |     },
 26 |   },
 27 | 
 28 |   mounted () {
 29 |     if (this.$route.params.view && this.$route.params.view !== 'schema') {
 30 |       this.$router.push({ name: 'Content', params: { projectId: this.$route.params.view } })
 31 |     }
 32 |   },
 33 | 
 34 | }
 35 | </script>
 36 | 
 37 | <template>
 38 | <section class="dashboard">
 39 |   <Navigation/>
 40 | 
 41 |   <main class="content">
 42 |     <section class="tools">
 43 |       <heading-core mode="primary">
 44 |         <h1 v-if="isProjects">My projects</h1>
 45 |       </heading-core>
 46 | 
 47 |       <hr>
 48 | 
 49 |       <NewProjectButton v-if="allowCreateProject"/>
 50 |     </section>
 51 | 
 52 |     <section class="no-projects" v-if="!isProjects">
 53 |       <div class="content">
 54 |         <icon class="icon" name="kiwi-bird"/>
 55 |         <div v-if="allowCreateProject">You don't have any projects. Create the first project by clicking the "New Project" button.</div>
 56 |         <div v-if="!allowCreateProject">You don't have a permission to any projects. Come back later or ask more from the administrator.</div>
 57 |       </div>
 58 |     </section>
 59 | 
 60 |     <Projects/>
 61 |   </main>
 62 | 
 63 |   <footer class="footer">
 64 |     <FooterContent/>
 65 |   </footer>
 66 | </section>
 67 | </template>
 68 | 
 69 | <style lang="sass" scoped>
 70 | @import '../sass/variables'
 71 | @import '../sass/core/mixins'
 72 | 
 73 | .dashboard
 74 |   display: flex
 75 |   flex-direction: column
 76 |   height: 100%
 77 |   width: 100%
 78 |   overflow-y: auto
 79 |   background-image: $color-gray--gradient
 80 | 
 81 |   > .content
 82 |     display: flex
 83 |     flex-direction: column
 84 |     flex-grow: 1
 85 |     flex-shrink: 0
 86 |     +gap(4rem)
 87 |     +container($breakpoint--huge)
 88 |     padding-top: 2rem
 89 |     padding-bottom: 2rem
 90 |     // align-items: stretch
 91 | 
 92 |     +breakpoint('small')
 93 |       padding-top: 4rem
 94 |       +gap(3rem)
 95 | 
 96 |     .tools
 97 |       +gap()
 98 |       text-align: center
 99 | 
100 |       +breakpoint('small')
101 |         +gap(0)
102 |         text-align: left
103 |         +chain()
104 | 
105 | .no-projects
106 |   +center()
107 |   flex-grow: 1
108 | 
109 |   .content
110 |     +container(300px)
111 |     text-align: center
112 | 
113 |   .fa-icon
114 |     width: 12rem
115 |     color: $color-gray--light
116 | 
117 | .footer
118 |   padding-top: 3rem
119 |   padding-bottom: 1rem
120 | 
121 | </style>
122 | 


--------------------------------------------------------------------------------
/src/views/Schema.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import SchemaEditor from '@/components/schema/SchemaEditor'
 3 | 
 4 | export default {
 5 |   name: 'Schema',
 6 | 
 7 |   components: {
 8 |     SchemaEditor,
 9 |   },
10 | 
11 |   computed: {
12 | 
13 |     activeProject () {
14 |       return this.$store.getters.activeProject
15 |     },
16 | 
17 |   },
18 | 
19 |   created () {
20 |     if (this.activeProject.auth.permissions.updateSchema !== true) {
21 |       this.$router.replace({ name: 'Content', params: { projectId: this.activeProject.id } })
22 |     }
23 |   },
24 | }
25 | </script>
26 | 
27 | <template>
28 | <section class="schema">
29 |   <heading-core mode="primary">
30 |     <h1>Schema</h1>
31 |   </heading-core>
32 | 
33 |   <SchemaEditor/>
34 | </section>
35 | </template>
36 | 
37 | <style lang="sass" scoped>
38 | @import '../sass/variables'
39 | @import '../sass/core/mixins'
40 | 
41 | .schema
42 |   +gap()
43 |   background-color: $background-color
44 |   padding: 2rem 1.5rem
45 | 
46 |   +breakpoint('medium')
47 |     padding: 2rem 3rem
48 | 
49 | </style>
50 | 


--------------------------------------------------------------------------------
/src/views/Settings.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import FileLocation from '@/components/settings/FileLocation'
 3 | import Webhook from '@/components/settings/Webhook'
 4 | import Users from '@/components/settings/Users'
 5 | import DeleteProject from '@/components/settings/DeleteProject'
 6 | 
 7 | export default {
 8 |   name: 'Settings',
 9 | 
10 |   components: {
11 |     FileLocation,
12 |     Webhook,
13 |     Users,
14 |     DeleteProject,
15 |   },
16 | 
17 |   computed: {
18 | 
19 |     activeProject () {
20 |       return this.$store.getters.activeProject
21 |     },
22 | 
23 |   },
24 | 
25 |   created () {
26 |     if (this.activeProject.auth.permissions.updateSettings !== true) {
27 |       this.$router.replace({ name: 'Content', params: { projectId: this.activeProject.id } })
28 |     }
29 |   },
30 | 
31 | }
32 | </script>
33 | 
34 | <template>
35 | <section class="settings">
36 |   <heading-core mode="primary">
37 |     <h1>Project settings</h1>
38 |   </heading-core>
39 | 
40 |   <!-- <section class="section">
41 |     <label>
42 |       Project Name
43 |       <input type="text" name="" value="">
44 |     </label>
45 | 
46 |     <label>
47 |       Published content JSON
48 |       <input type="text" name="" value="https://firebasestorage.googleapis.com/v0/b/editlayer-development.appspot.com/o/xdev%2Fcontent.json?alt=media&token=hgai3jgal2lp2z">
49 |       <button-core>Copy</button-core>
50 |       <button-core>Open</button-core>
51 |     </label>
52 |   </section> -->
53 | 
54 |   <FileLocation class="section"/>
55 | 
56 |   <Users class="section"/>
57 | 
58 |   <Webhook class="section"/>
59 | 
60 |   <DeleteProject class="section"/>
61 | </section>
62 | </template>
63 | 
64 | <style lang="sass" scoped>
65 | @import '../sass/variables'
66 | @import '../sass/core/mixins'
67 | 
68 | .settings
69 |   background-image: $color-gray--gradient
70 |   padding: 2rem 1.5rem
71 | 
72 |   +breakpoint('medium')
73 |     padding: 2rem 3rem
74 | 
75 | .section
76 |   padding-top: 5rem
77 |   padding-bottom: 5rem
78 |   padding-right: calc(100% - #{$breakpoint--medium})
79 |   border-bottom: 1px solid $color-gray--light
80 | 
81 | </style>
82 | 


--------------------------------------------------------------------------------