├── .gitignore
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── icon-128.png
    ├── icon-16.png
    ├── icon-48.png
    ├── index.html
    └── manifest.json
├── screenshot.png
├── src
    ├── App.vue
    ├── components
    │   ├── calendar
    │   │   ├── day.vue
    │   │   ├── event.vue
    │   │   └── index.vue
    │   ├── global
    │   │   ├── autosize.vue
    │   │   └── header.vue
    │   ├── note
    │   │   ├── index.vue
    │   │   └── note.vue
    │   └── task
    │   │   ├── index.vue
    │   │   └── task.vue
    ├── icons
    │   ├── check.vue
    │   ├── drag.vue
    │   ├── plus.vue
    │   ├── refresh.vue
    │   └── remove.vue
    ├── main.js
    ├── model
    │   └── index.js
    ├── store
    │   ├── dummy-data.js
    │   └── index.js
    └── utils
    │   ├── get-token.js
    │   └── http-calendar.js
├── vue.config.js
└── yarn.lock


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Frame
 2 | 
 3 | New-tab extension for Chrome and Firefox
 4 | 
 5 | <img src="screenshot.png" alt="screenshot" width="600px"/>
 6 | 
 7 | ## Install
 8 | 
 9 | - [**Chrome** extension](https://chrome.google.com/webstore/detail/frame/pimalalkfhkmnlhoapdlhilkghboiimc)
10 | - [**Firefox** extension](https://addons.mozilla.org/tr/firefox/addon/new-tab-frame/)
11 | 
12 | ## Contribute
13 | 
14 | Suggestions and pull requests are highly encouraged!
15 | 
16 | In order to make modifications to the extension you'd need to run it locally.
17 | 
18 | Please follow the below steps:
19 | 
20 | ```sh
21 | git clone https://github.com/ademilter/frame
22 | cd frame
23 | yarn    # Install dev dependencies
24 | yarn serve  # Listen for file changes and automatically rebuild
25 | yarn build:chrome  # Build the extension code so it's ready for Chrome
26 | yarn build:firefox  # Build the extension code so it's ready for Firefox
27 | ```
28 | 
29 | ## Maintainers
30 | 
31 | - [Adem ilter](https://github.com/ademilter)
32 | - [Nazım Can Altınova](https://github.com/canaltinova)
33 | 
34 | ## License
35 | 
36 | MIT
37 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@vue/app']
3 | }
4 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Frame",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "yarn run build:chrome && yarn run build:firefox && yarn run clear",
 8 |     "build:chrome": "vue-cli-service build --dest dist/chrome && yarn run zip:chrome",
 9 |     "build:firefox": "VUE_APP_PLATFORM=firefox vue-cli-service build --dest dist/firefox && yarn run zip:firefox",
10 |     "zip:chrome": "cd dist/chrome/ && bestzip ../chrome.zip **",
11 |     "zip:firefox": "cd dist/firefox/ && bestzip ../firefox.zip **",
12 |     "clear": "rimraf dist/chrome/ && rimraf dist/firefox/"
13 |   },
14 |   "dependencies": {
15 |     "autosize": "^4.0.2",
16 |     "axios": "^0.18.1",
17 |     "moment": "^2.22.2",
18 |     "vue": "^2.5.16",
19 |     "vue-quill-editor": "^3.0.6",
20 |     "vuedraggable": "^2.16.0",
21 |     "vuex": "^3.0.1",
22 |     "vuex-persistedstate": "^2.5.4"
23 |   },
24 |   "devDependencies": {
25 |     "@vue/cli-plugin-babel": "^3.0.0-beta.15",
26 |     "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
27 |     "@vue/cli-service": "^3.0.0-beta.15",
28 |     "@vue/eslint-config-standard": "^3.0.0-rc.3",
29 |     "bestzip": "^2.1.1",
30 |     "moment-locales-webpack-plugin": "^1.0.7",
31 |     "postcss-nested": "^3.0.0",
32 |     "postcss-sorting": "^3.1.0",
33 |     "pug": "^2.0.3",
34 |     "pug-plain-loader": "^1.0.0",
35 |     "vue-template-compiler": "^2.5.16"
36 |   },
37 |   "eslintConfig": {
38 |     "root": true,
39 |     "env": {
40 |       "node": true
41 |     },
42 |     "extends": [
43 |       "plugin:vue/essential",
44 |       "@vue/standard"
45 |     ],
46 |     "rules": {
47 |       "vue/script-indent": [
48 |         "error",
49 |         2,
50 |         {
51 |           "baseIndent": 1
52 |         }
53 |       ],
54 |       "indent": "off"
55 |     },
56 |     "parserOptions": {
57 |       "parser": "babel-eslint"
58 |     }
59 |   },
60 |   "postcss": {
61 |     "plugins": {
62 |       "autoprefixer": {},
63 |       "postcss-nested": {},
64 |       "postcss-sorting": {
65 |         "order": [
66 |           "custom-properties",
67 |           "declarations",
68 |           "rules",
69 |           "at-rules"
70 |         ],
71 |         "properties-order": "alphabetical"
72 |       }
73 |     }
74 |   },
75 |   "browserslist": [
76 |     "> 1%",
77 |     "last 2 versions",
78 |     "not ie <= 8"
79 |   ]
80 | }
81 | 


--------------------------------------------------------------------------------
/public/icon-128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ademilter/Frame/61aaecf96683a5cce8d8443682fc867483a06289/public/icon-128.png


--------------------------------------------------------------------------------
/public/icon-16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ademilter/Frame/61aaecf96683a5cce8d8443682fc867483a06289/public/icon-16.png


--------------------------------------------------------------------------------
/public/icon-48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ademilter/Frame/61aaecf96683a5cce8d8443682fc867483a06289/public/icon-48.png


--------------------------------------------------------------------------------
/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" sizes="16x16" type="image/png" href="icon-16.png">
 8 |     <title>Frame</title>
 9 |   </head>
10 |   <body>
11 |     <div id="app"></div>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Frame",
 3 |   "version": "1.6.2",
 4 |   "description": "",
 5 |   "manifest_version": 2,
 6 |   "applications": {
 7 |     "gecko": {
 8 |       "id": "{2e7abee6-b580-4813-8b57-cd2d2b7255cb}",
 9 |       "strict_min_version": "55.0"
10 |     }
11 |   },
12 |   "chrome_url_overrides": {
13 |     "newtab": "index.html"
14 |   },
15 |   "icons": {
16 |     "16": "icon-16.png",
17 |     "48": "icon-48.png",
18 |     "128": "icon-128.png"
19 |   },
20 |   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAuOtWSnGxinGiZ3UZOur0f+6E1Ac29X9svVYwjzRi9AjOAcg5A6GgIkM8swJst1g6p9AojfphICj4mOMhZehb70b1oc9r9hwJxQ8al046sFg5IjFPVS5s7z9GjGlGtTdXaNaE7KZ/k8G9b945H/19tMW/HL6gWDeWQ+iXCOrMzvkMM/Iks6UbDae4awr/HiqZ2d5oAjeZlVE85SfUSnLEkEEapwY73JJD14gXXYZMhxtgfBHrVtablLo64/ujeMm53DtElrVTL2AaMirld2RjyvrpYU1AxkI81ljylQz0Tm/Lict+n3WuqYQnuSuvddFayciUo8KHeJ1J4skZa3AvXwIDAQAB",
21 |   "oauth2": {
22 |     "client_id_firefox": "825939795126-t9v6behgpkvj2vfffgg960gvneqi5umn.apps.googleusercontent.com",
23 |     "client_id": "825939795126-mcce3h3b83llk6lid0fjds0b6age97k6.apps.googleusercontent.com",
24 |     "scopes": [
25 |       "https://www.googleapis.com/auth/calendar"
26 |     ]
27 |   },
28 |   "content_security_policy": "script-src 'self' https://calendar.google.com; object-src 'self'",
29 |   "permissions": [
30 |     "identity",
31 |     "http://*/*",
32 |     "https://*/*",
33 |     "http://calendar.google.com/calendar/*",
34 |     "https://calendar.google.com/calendar/*",
35 |     "*://www.googleapis.com/*",
36 |     "*://accounts.google.com/*"
37 |   ]
38 | }
39 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ademilter/Frame/61aaecf96683a5cce8d8443682fc867483a06289/screenshot.png


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 |   .App
  3 | 
  4 |     HeaderView
  5 | 
  6 |     .Columns
  7 |       Notes
  8 |       Tasks
  9 |       Calendar
 10 | 
 11 | </template>
 12 | 
 13 | <script>
 14 |   import 'quill/dist/quill.bubble.css'
 15 |   import Header from './components/global/header'
 16 |   import Notes from './components/note'
 17 |   import Tasks from './components/task'
 18 |   import Calendar from './components/calendar'
 19 | 
 20 |   export default {
 21 |     name: 'App',
 22 | 
 23 |     components: {
 24 |       HeaderView: Header,
 25 |       Notes,
 26 |       Tasks,
 27 |       Calendar
 28 |     }
 29 |   }
 30 | </script>
 31 | 
 32 | <style>
 33 |   :root {
 34 |     --border-radius: 5px;
 35 |     --transition: 130ms;
 36 |     --border-line-height: 1px;
 37 |     --border-line-color: rgba(0, 0, 0, .1);
 38 |     --color-note: #FFFBF2;
 39 |     --color-task: #21B663;
 40 |     --color-calander: #D9453D;
 41 |     --color-shadow: rgba(0, 0, 0, .1);
 42 |     --color-lighter: rgba(0, 0, 0, .2);
 43 |     --color-light: rgba(0, 0, 0, .5);
 44 |     --color-note-primary: #D3B41E;
 45 |     --font-size-normal: 16px;
 46 |     --font-size-small: 14px;
 47 |   }
 48 | 
 49 |   * {
 50 |     margin: 0;
 51 |     padding: 0;
 52 |     border: 0;
 53 |     outline: 0;
 54 | 
 55 |     &,
 56 |     &:before,
 57 |     &:after {
 58 |       box-sizing: inherit;
 59 |     }
 60 |   }
 61 | 
 62 |   html {
 63 |     box-sizing: border-box;
 64 |   }
 65 | 
 66 |   input,
 67 |   textarea,
 68 |   select,
 69 |   button {
 70 |     font: inherit;
 71 |   }
 72 | 
 73 |   table {
 74 |     border-spacing: 0;
 75 |     width: 100%;
 76 |   }
 77 | 
 78 |   svg {
 79 |     display: inline-block;
 80 |     vertical-align: middle;
 81 |   }
 82 | 
 83 |   button {
 84 |     cursor: pointer;
 85 |     background-color: transparent;
 86 |   }
 87 | 
 88 |   body {
 89 |     font-size: var(--font-size-normal);
 90 |     line-height: 1.4;
 91 |     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 92 |     color: #232323;
 93 |     background-color: #E1E1E1;
 94 |     height: 100vh;
 95 |     overflow: hidden;
 96 |     -webkit-font-smoothing: antialiased;
 97 |     -moz-osx-font-smoothing: grayscale
 98 |   }
 99 | 
100 |   .btn {
101 |     display: flex;
102 |     align-items: center;
103 |     padding-left: 12px;
104 |     padding-right: 12px;
105 |     padding-bottom: 1px; /* turkish charecter fix */
106 |     height: 38px;
107 |     line-height: 1;
108 | 
109 |     .icon {
110 |       margin-right: 3px;
111 |     }
112 | 
113 |     &.small {
114 |       height: 30px;
115 | 
116 |       .icon {
117 |         margin-right: 0;
118 |       }
119 |     }
120 |   }
121 | 
122 |   .App {
123 |     overflow: hidden;
124 |     position: fixed;
125 |     left: 0;
126 |     top: 0;
127 |     width: 100%;
128 |     height: 100vh;
129 |     padding: 20px;
130 |     display: flex;
131 |     flex-direction: column;
132 |   }
133 | 
134 |   .Columns {
135 |     flex-grow: 1;
136 |     display: flex;
137 |     overflow: auto;
138 |     margin-left: -20px;
139 |   }
140 | 
141 |   .Column {
142 |     flex: 1 0 calc(33.33% - 20px);
143 |     margin-left: 20px;
144 |     display: flex;
145 |     flex-direction: column;
146 |     overflow: auto;
147 |     background-color: #FFF;
148 |     box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);
149 |     border-radius: 10px;
150 | 
151 |     &-header {
152 |       flex-shrink: 0;
153 |       display: flex;
154 |       align-items: center;
155 |       justify-content: space-between;
156 |       padding: 30px;
157 | 
158 |       .title {
159 |         font-size: 25px;
160 |         line-height: 1;
161 |       }
162 | 
163 |       .new {
164 |         transition: var(--transition);
165 |         opacity: 0;
166 |         border-radius: 20px;
167 |         color: white;
168 |         font-size: var(--font-size-small);
169 |         text-decoration: none;
170 | 
171 |         .icon {
172 |           margin-left: -4px;
173 |           margin-right: 3px;
174 |           width: 18px;
175 |           height: 18px;
176 |         }
177 |       }
178 |     }
179 | 
180 |     &-body {
181 |       overflow: auto;
182 |       flex-grow: 1;
183 |       padding-bottom: 50px;
184 |     }
185 | 
186 |     &:hover &-header .new {
187 |       opacity: 1;
188 |     }
189 | 
190 |     &-shadow {
191 |       height: 100%;
192 |       border: 4px dashed var(--color-shadow);
193 |       border-radius: 10px;
194 |       display: flex;
195 |       align-items: center;
196 |       justify-content: center;
197 |       padding: 50px;
198 | 
199 |       .note {
200 |         text-align: center;
201 |         font-size: 18px;
202 |         color: var(--color-lighter);
203 |       }
204 |     }
205 |   }
206 | 
207 |   .empty-state {
208 |     margin-left: 30px;
209 |     margin-right: 30px;
210 |     margin-bottom: 30px;
211 |     padding: 20px;
212 |     color: var(--color-light);
213 |     border: 2px dashed var(--color-shadow);
214 |     border-radius: var(--border-radius);
215 |   }
216 | </style>
217 | 


--------------------------------------------------------------------------------
/src/components/calendar/day.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   .event-day(:class="{ 'today' : isToday }")
 3 | 
 4 |     .event-date
 5 |       h4
 6 |         | {{ $moment(date).format('dddd') }}
 7 |       p
 8 |         small {{ $moment(date).format('D MMMM YYYY') }}
 9 |       p.today(v-if="isToday")
10 |         small Bugün
11 | 
12 |     .event-list
13 |       Event(
14 |       v-for="event in events"
15 |       :key="event.id"
16 |       :event="event")
17 | 
18 | </template>
19 | 
20 | <script>
21 |   import Event from './event'
22 | 
23 |   export default {
24 |     name: 'event-day',
25 |     props: [
26 |       'date',
27 |       'events'
28 |     ],
29 |     components: {
30 |       Event
31 |     },
32 |     computed: {
33 |       isToday () {
34 |         return this.$moment().isSame(this.$moment(this.date), 'day')
35 |       }
36 |     }
37 |   }
38 | </script>
39 | 
40 | <style scoped>
41 |   .event-day {
42 |     position: relative;
43 |     padding: 20px 30px;
44 |     display: flex;
45 | 
46 |     &:not(.today) + & {
47 |       &:before {
48 |         content: "";
49 |         position: absolute;
50 |         left: 30px;
51 |         right: 30px;
52 |         top: 0;
53 |         height: 1px;
54 |         background-color: var(--border-line-color);
55 |       }
56 |     }
57 | 
58 |     &.today {
59 |       background-color: rgba(255, 0, 0, .04);
60 |     }
61 | 
62 |   }
63 | 
64 |   p.today {
65 |     color: var(--color-calander)
66 |   }
67 | 
68 |   .event-date {
69 |     flex-shrink: 0;
70 |     width: 120px;
71 |     white-space: nowrap;
72 |   }
73 | 
74 |   .event-list {
75 |   }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/components/calendar/event.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   .event-item
 3 |     h4
 4 |       | {{ event.summary }}
 5 |     p
 6 |       small {{ event.location }}
 7 |     p
 8 |       small {{ time }}
 9 | 
10 | </template>
11 | 
12 | <script>
13 |   export default {
14 |     name: 'event',
15 |     props: [
16 |       'event'
17 |     ],
18 |     computed: {
19 |       time () {
20 |         const startDate = this.$moment(this.event.start.date || this.event.start.dateTime)
21 |         const endDate = this.$moment(this.event.end.date || this.event.end.dateTime)
22 |         const isEqual = startDate.isSame(endDate, 'day')
23 |         return isEqual
24 |           ? startDate.format('HH:mm') + ' - ' + endDate.format('HH:mm')
25 |           : 'Tüm Gün'
26 |       }
27 |     }
28 |   }
29 | </script>
30 | 
31 | <style scoped>
32 |   .event-item {
33 |     & + & {
34 |       margin-top: 20px;
35 |     }
36 |   }
37 | </style>
38 | 


--------------------------------------------------------------------------------
/src/components/calendar/index.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 |   .Column
  3 | 
  4 |     .Column-header
  5 |       h3.title CALENDAR
  6 |       button(
  7 |       class="btn small new"
  8 |       type="button"
  9 |       @click="refresh")
 10 |         iconRefresh
 11 |         span Refresh
 12 | 
 13 |     .Column-body
 14 | 
 15 |       .event-group(
 16 |       v-if="hasCalenderItem || hasToken")
 17 |         EventDay(
 18 |         v-for="(events, key) in eventsSortAndGroupBy"
 19 |         :key="key"
 20 |         :date="key"
 21 |         :events="events")
 22 | 
 23 |       button.loginWithGoogle.btn(
 24 |       type="button"
 25 |       @click="login"
 26 |       v-else
 27 |       ) Google ile giriş yap
 28 | 
 29 | </template>
 30 | 
 31 | <script>
 32 |   import getAuthToken from '@/utils/get-token'
 33 |   import EventDay from './day'
 34 |   import iconRefresh from '@/icons/refresh'
 35 | 
 36 |   export default {
 37 |     name: 'Calendar',
 38 | 
 39 |     components: {
 40 |       EventDay,
 41 |       iconRefresh
 42 |     },
 43 | 
 44 |     data () {
 45 |       return {
 46 |         isShow: false
 47 |       }
 48 |     },
 49 | 
 50 |     mounted () {
 51 |       // if (this.$store.getters.allowNotification) {
 52 |       //   this.checkEvents()
 53 |       //   setInterval(() => {
 54 |       //     this.checkEvents()
 55 |       //   }, 1800000) // 30 minute
 56 |       // }
 57 |     },
 58 | 
 59 |     computed: {
 60 |       hasCalenderItem () {
 61 |         return this.$store.getters.hasCalenderItem
 62 |       },
 63 |       calendarItems () {
 64 |         return this.$store.state.calendarItems
 65 |       },
 66 |       eventsSortAndGroupBy () {
 67 |         return this.$store.getters.eventsSortAndGroupBy
 68 |       },
 69 |       hasToken () {
 70 |         return this.$store.getters.hasToken
 71 |       }
 72 |     },
 73 | 
 74 |     methods: {
 75 | 
 76 |       checkEvents () {
 77 |         // TODO: maybe need to refactor
 78 |         this.calendarItems.forEach(event => {
 79 |           const time = this.$moment(event.start.date || event.start.dateTime)
 80 |           if (time.isSame(this.$moment(), 'day')) {
 81 |             const now = this.$moment()
 82 |             const diff = time.format('H') - now.format('H')
 83 |             // last one hour
 84 |             if (diff > 0 && diff <= 1) {
 85 |               /* eslint-disable no-new */
 86 |               new Notification(event.summary, {
 87 |                 body: time.fromNow(),
 88 |                 icon: './icon-128.png'
 89 |               })
 90 |             }
 91 |           }
 92 |         })
 93 |       },
 94 | 
 95 |       login () {
 96 |         getAuthToken()
 97 |       },
 98 | 
 99 |       refresh () {
100 |         if (!this.$store.getters.hasToken) {
101 |           return this.login()
102 |         }
103 |         this.$store.dispatch('getEventList')
104 |       }
105 | 
106 |     }
107 | 
108 |   }
109 | </script>
110 | 
111 | <style scoped>
112 |   .Column {
113 | 
114 |     &-header {
115 |       .new {
116 |         background-color: var(--color-calander);
117 |       }
118 |     }
119 | 
120 |     .loginWithGoogle {
121 |       margin-left: 30px;
122 |       border-radius: var(--border-radius);
123 |       color: white;
124 |       background-color: var(--color-calander);
125 |     }
126 | 
127 |   }
128 | </style>
129 | 


--------------------------------------------------------------------------------
/src/components/global/autosize.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   textarea(
 3 |   @blur="$emit('blur', $event)"
 4 |   @keydown.esc="$emit('esc', $event)"
 5 |   @keydown.enter="$emit('enter', $event)"
 6 |   @input="$emit('input', $event.target.value)")
 7 |     | {{ value }}
 8 | </template>
 9 | 
10 | <script>
11 |   import autosize from 'autosize'
12 | 
13 |   export default {
14 |     name: 'autosize',
15 |     props: ['value'],
16 |     mounted () {
17 |       autosize(this.$el)
18 |     }
19 |   }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/components/global/header.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   header.Header
 3 |     .what-time-is
 4 |       .time {{ time }}
 5 |       .date {{ date }}
 6 | </template>
 7 | 
 8 | <script>
 9 |   export default {
10 |     name: 'Header',
11 | 
12 |     data () {
13 |       return {
14 |         time: null,
15 |         date: null
16 |       }
17 |     },
18 | 
19 |     created () {
20 |       this.setTime()
21 |       setInterval(this.setTime, 1000)
22 |     },
23 | 
24 |     methods: {
25 |       setTime () {
26 |         this.time = this.$moment().format('HH:mm')
27 |         this.date = this.$moment().format('D MMMM YYYY, dddd')
28 |       }
29 |     }
30 | 
31 |   }
32 | </script>
33 | 
34 | <style>
35 |   .Header {
36 |     display: flex;
37 |     align-items: center;
38 |     margin-bottom: 25px;
39 |     flex-shrink: 0;
40 | 
41 |     .what-time-is {
42 |       margin-right: 30px;
43 |       margin-left: auto;
44 |       text-align: right;
45 |       line-height: 1;
46 | 
47 |       .time {
48 |         font-weight: bold;
49 |         font-size: 45px;
50 |       }
51 | 
52 |       .date {
53 |         margin-top: 5px;
54 |         font-size: 20px;
55 |       }
56 |     }
57 |   }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/components/note/index.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 |   .Column
  3 | 
  4 |     .Column-header
  5 |       h3.title NOTE
  6 |       button(
  7 |       class="btn small new"
  8 |       type="button"
  9 |       @click="addNote")
 10 |         iconPlus
 11 |         span New
 12 | 
 13 |     .Column-body
 14 | 
 15 |       .empty-state(
 16 |       v-if="!hasNote")
 17 |         | Geçici notlarını buraya yaz ve unutma!
 18 | 
 19 |       Draggable(
 20 |       v-model="notes"
 21 |       @start="onDragStart"
 22 |       @end="onDragEnd"
 23 |       ref="notes"
 24 |       :options="{ animation: 120, handle: '.handle' }")
 25 | 
 26 |         note(
 27 |         v-for="note in notes"
 28 |         :key="note.id"
 29 |         :note="note")
 30 | 
 31 | </template>
 32 | 
 33 | <script>
 34 |   import note from './note'
 35 |   import iconPlus from '@/icons/plus'
 36 | 
 37 |   export default {
 38 |     name: 'Notes',
 39 | 
 40 |     components: {
 41 |       note,
 42 |       iconPlus
 43 |     },
 44 | 
 45 |     data () {
 46 |       return {
 47 |         isShow: false
 48 |       }
 49 |     },
 50 | 
 51 |     computed: {
 52 |       notes: {
 53 |         get () {
 54 |           return this.$store.state.notes
 55 |         },
 56 |         set (value) {
 57 |           this.$store.commit('updateNotes', value)
 58 |         }
 59 |       },
 60 |       hasNote () {
 61 |         return this.$store.getters.hasNote
 62 |       }
 63 |     },
 64 | 
 65 |     methods: {
 66 | 
 67 |       addNote () {
 68 |         this.$store.commit('addNote')
 69 |         this.$nextTick().then(() => {
 70 |           const lastNote = this.$refs.notes.$children.pop()
 71 |           lastNote.$refs.editor.quill.focus()
 72 |         })
 73 |       },
 74 | 
 75 |       onDragStart (el) {
 76 |         el.target.classList.add('drag-start')
 77 |       },
 78 | 
 79 |       onDragEnd (el) {
 80 |         el.target.classList.remove('drag-start')
 81 |       }
 82 | 
 83 |     }
 84 |   }
 85 | </script>
 86 | 
 87 | <style scoped>
 88 |   .Column {
 89 |     background-color: var(--color-note);
 90 | 
 91 |     &-header {
 92 |       .new {
 93 |         background-color: var(--color-note-primary);
 94 |       }
 95 |     }
 96 | 
 97 |     /deep/ {
 98 | 
 99 |       .drag-start {
100 |         .handle {
101 |           display: none;
102 |         }
103 |       }
104 | 
105 |     }
106 | 
107 |   }
108 | </style>
109 | 
110 | <style>
111 |   .ql-container {
112 |     font: inherit;
113 | 
114 |     .ql-editor {
115 |       padding: 20px 0;
116 |       line-height: inherit;
117 | 
118 |       &.ql-blank::before {
119 |         left: 0;
120 |         font-style: normal;
121 |         right: 0;
122 |       }
123 |     }
124 |   }
125 | </style>
126 | 


--------------------------------------------------------------------------------
/src/components/note/note.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 |   .note
  3 | 
  4 |     .handle
  5 |       icon-drag
  6 | 
  7 |     button.remove(
  8 |     type="button"
  9 |     v-if="!removing"
 10 |     @click="timerRemove")
 11 |       iconRemove
 12 | 
 13 |     button.stop(
 14 |     type="button"
 15 |     v-if="removing"
 16 |     @click="stop")
 17 |       span {{ countdown }}
 18 | 
 19 |     quill-editor(
 20 |     ref="editor"
 21 |     v-model="content"
 22 |     @blur="onEditorBlur"
 23 |     @focus="onEditorFocus"
 24 |     :options="editorOption")
 25 | 
 26 | </template>
 27 | 
 28 | <script>
 29 |   import iconDrag from '@/icons/drag'
 30 |   import iconRemove from '@/icons/remove'
 31 | 
 32 |   export default {
 33 |     name: 'Note',
 34 | 
 35 |     props: {
 36 |       note: {
 37 |         required: true,
 38 |         type: Object
 39 |       }
 40 |     },
 41 | 
 42 |     data () {
 43 |       return {
 44 |         removing: false,
 45 |         countdown: null,
 46 |         editorOption: {
 47 |           modules: {
 48 |             toolbar: [
 49 |               ['bold', 'italic', 'link'],
 50 |               [{ 'list': 'bullet' }, 'code', 'clean']
 51 |             ]
 52 |           },
 53 |           placeholder: 'New note...',
 54 |           theme: 'bubble'
 55 |         }
 56 |       }
 57 |     },
 58 | 
 59 |     components: {
 60 |       iconDrag,
 61 |       iconRemove
 62 |     },
 63 | 
 64 |     computed: {
 65 | 
 66 |       content: {
 67 |         get () {
 68 |           return this.note.content
 69 |         },
 70 |         set (value) {
 71 |           this.$store.commit('changeNote', {
 72 |             note: this.note,
 73 |             content: value
 74 |           })
 75 |         }
 76 |       }
 77 |     },
 78 | 
 79 |     methods: {
 80 | 
 81 |       onEditorFocus () {
 82 |         this.$el.classList.add('focus')
 83 |       },
 84 | 
 85 |       onEditorBlur () {
 86 |         this.$el.classList.remove('focus')
 87 |       },
 88 | 
 89 |       timerRemove () {
 90 |         this.removing = true
 91 |         this.countdown = 5
 92 |         this.$interval = setInterval(() => {
 93 |           this.countdown--
 94 |         }, 1000)
 95 |         this.$timer = setTimeout(() => {
 96 |           this.remove()
 97 |         }, this.countdown * 1000)
 98 |       },
 99 | 
100 |       remove () {
101 |         this.$store.commit('removeNote', this.note)
102 |       },
103 | 
104 |       stop () {
105 |         this.removing = false
106 |         clearInterval(this.$interval)
107 |         clearTimeout(this.$timer)
108 |       }
109 | 
110 |     }
111 |   }
112 | </script>
113 | 
114 | <style>
115 |   .note {
116 |     position: relative;
117 |     padding-left: 30px;
118 |     padding-right: 30px;
119 |     background-color: var(--color-note);
120 | 
121 |     &.focus {
122 |       z-index: 1;
123 |     }
124 | 
125 |     &:not(:last-child):after {
126 |       content: "";
127 |       display: block;
128 |       border-bottom: var(--border-line-height) solid var(--border-line-color);
129 |     }
130 | 
131 |     &.sortable-chosen {
132 |     }
133 | 
134 |     &.sortable-ghost {
135 |       background-color: #EEFAFD;
136 |     }
137 | 
138 |     .handle {
139 |       color: var(--color-lighter);
140 |       transition: var(--transition);
141 |       transform: translateX(-100%);
142 |       opacity: 0;
143 |       position: absolute;
144 |       left: 0;
145 |       top: 19px;
146 |       cursor: ns-resize;
147 |     }
148 | 
149 |     .remove,
150 |     .stop {
151 |       padding: 4px;
152 |       line-height: 1;
153 |       border-radius: var(--border-radius);
154 |       transition: var(--transition);
155 |       position: absolute;
156 |       top: 20px;
157 |       right: 10px;
158 |       display: inline-flex;
159 |       align-items: center;
160 |       justify-content: center;
161 |       color: var(--color-light);
162 |       vertical-align: middle;
163 |     }
164 | 
165 |     .stop {
166 |       opacity: 1;
167 |       font-size: var(--font-size-small);
168 |       background-color: var(--color-shadow);
169 |     }
170 | 
171 |     .remove {
172 |       opacity: 0;
173 | 
174 |       &:hover {
175 |         color: red;
176 |       }
177 | 
178 |       .icon {
179 |         width: 16px;
180 |         height: 16px;
181 |       }
182 |     }
183 | 
184 |     &:hover {
185 |       .handle {
186 |         opacity: 1;
187 |         transform: translateX(0);
188 |       }
189 |       .remove {
190 |         opacity: 1;
191 |       }
192 |     }
193 |   }
194 | </style>
195 | 


--------------------------------------------------------------------------------
/src/components/task/index.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 |   .Column
  3 | 
  4 |     .Column-header
  5 |       h3.title TASK
  6 |       button(
  7 |       class="btn small new"
  8 |       type="button"
  9 |       @click="addTask")
 10 |         iconPlus
 11 |         span New
 12 | 
 13 |     .Column-body
 14 | 
 15 |       .active-tasks
 16 | 
 17 |         .empty-state(
 18 |         v-if="!hasActiveTasks")
 19 |           | Yapacak hiç bir işin yok mu yani?
 20 | 
 21 |         Draggable(
 22 |         v-if="hasActiveTasks"
 23 |         v-model="tasks"
 24 |         ref="activeTasks"
 25 |         @start="onDragStart"
 26 |         @end="onDragEnd"
 27 |         :options="{ animation: 120, handle: '.handle' }")
 28 | 
 29 |           task(
 30 |           v-for="task in tasks"
 31 |           :key="task.id"
 32 |           v-if="!task.status"
 33 |           :class="{ 'completed' : task.status }"
 34 |           :task="task")
 35 | 
 36 |       .completed-tasks(
 37 |       v-if="hasCompletedTasks")
 38 | 
 39 |         task(
 40 |         v-for="task in tasks"
 41 |         :key="task.id"
 42 |         v-if="task.status"
 43 |         :class="{ 'completed' : task.status }"
 44 |         :task="task")
 45 | </template>
 46 | 
 47 | <script>
 48 |   import task from './task'
 49 |   import iconPlus from '@/icons/plus'
 50 | 
 51 |   export default {
 52 |     name: 'Tasks',
 53 | 
 54 |     components: {
 55 |       task,
 56 |       iconPlus
 57 |     },
 58 | 
 59 |     data () {
 60 |       return {
 61 |         isShow: false
 62 |       }
 63 |     },
 64 | 
 65 |     computed: {
 66 | 
 67 |       hasActiveTasks () {
 68 |         return this.$store.getters.hasActiveTasks
 69 |       },
 70 | 
 71 |       hasCompletedTasks () {
 72 |         return this.$store.getters.hasCompletedTasks
 73 |       },
 74 | 
 75 |       tasks: {
 76 |         get () {
 77 |           return this.$store.state.tasks
 78 |         },
 79 |         set (value) {
 80 |           this.$store.commit('updateTasks', value)
 81 |         }
 82 |       }
 83 | 
 84 |     },
 85 | 
 86 |     methods: {
 87 | 
 88 |       addTask () {
 89 |         this.$store.commit('addTask')
 90 |         this.$nextTick().then(() => {
 91 |           const lastTask = this.$refs.activeTasks.$children.pop()
 92 |           lastTask.isEdit = true
 93 |         })
 94 |       },
 95 | 
 96 |       onDragStart (el) {
 97 |         el.target.classList.add('drag-start')
 98 |       },
 99 | 
100 |       onDragEnd (el) {
101 |         el.target.classList.add('drag-start')
102 |       }
103 | 
104 |     }
105 | 
106 |   }
107 | </script>
108 | 
109 | <style scoped>
110 |   .Column {
111 | 
112 |     &-header {
113 |       .new {
114 |         background-color: var(--color-task);
115 |       }
116 |     }
117 | 
118 |     /deep/ {
119 | 
120 |       .drag-start {
121 |         .handle,
122 |         .remove {
123 |           display: none;
124 |         }
125 |       }
126 | 
127 |       .completed-tasks {
128 |         margin-top: 20px;
129 | 
130 |         &:before {
131 |           content: "";
132 |           display: block;
133 |           margin-left: 30px;
134 |           margin-right: 30px;
135 |           margin-bottom: 20px;
136 |           height: var(--border-line-height);
137 |           background-color: var(--border-line-color);
138 |         }
139 | 
140 |         .task {
141 |           padding-top: 4px;
142 |           padding-bottom: 4px;
143 | 
144 |           .handle {
145 |             display: none;
146 |           }
147 | 
148 |           &-checkbox {
149 |             margin-left: 4px;
150 |             width: 18px;
151 |             height: 18px;
152 |             .icon {
153 |               transform: translateY(-1px);
154 |             }
155 |           }
156 |           &-text {
157 |             color: var(--color-light);
158 |             font-size: var(--font-size-small);
159 |           }
160 | 
161 |           .remove {
162 |             margin-top: -2px;
163 |           }
164 |         }
165 |       }
166 | 
167 |     }
168 | 
169 |   }
170 | </style>
171 | 


--------------------------------------------------------------------------------
/src/components/task/task.vue:
--------------------------------------------------------------------------------
  1 | <template lang="pug">
  2 |   .task
  3 | 
  4 |     .handle
  5 |       icon-drag
  6 | 
  7 |     // checkbox
  8 |     label.task-checkbox(
  9 |     :class="{ 'check' : status }")
 10 |       icon-check
 11 |       input(
 12 |       type="checkbox"
 13 |       v-model="status")
 14 | 
 15 |     .task-text
 16 | 
 17 |       // edit
 18 |       autosize(
 19 |       ref="autosize"
 20 |       rows="1"
 21 |       placeholder="New task..."
 22 |       @blur="blur"
 23 |       @enter="blur"
 24 |       @esc="blur"
 25 |       v-if="isEdit"
 26 |       v-model="text")
 27 | 
 28 |       // normal
 29 |       span.text(
 30 |       v-if="!isEdit"
 31 |       @click="isEdit = true")
 32 |         | {{ text }}
 33 |         button.remove(
 34 |         type="button"
 35 |         v-if="!isEdit && !removing"
 36 |         @click.stop="timerRemove")
 37 |           iconRemove
 38 |         button.stop(
 39 |         type="button"
 40 |         v-if="removing"
 41 |         @click.stop="stop")
 42 |           span {{ countdown }}
 43 | 
 44 | </template>
 45 | 
 46 | <script>
 47 |   import iconDrag from '@/icons/drag'
 48 |   import iconCheck from '@/icons/check'
 49 |   import iconRemove from '@/icons/remove'
 50 |   import autosize from '../global/autosize'
 51 | 
 52 |   export default {
 53 |     name: 'Task',
 54 | 
 55 |     props: {
 56 |       task: {
 57 |         required: true,
 58 |         type: Object
 59 |       }
 60 |     },
 61 | 
 62 |     components: {
 63 |       iconDrag,
 64 |       iconCheck,
 65 |       iconRemove,
 66 |       autosize
 67 |     },
 68 | 
 69 |     data () {
 70 |       return {
 71 |         isEdit: false,
 72 |         removing: false,
 73 |         countdown: null
 74 |       }
 75 |     },
 76 | 
 77 |     watch: {
 78 |       isEdit (value) {
 79 |         if (!value) return
 80 |         this.$nextTick().then(() => {
 81 |           this.$refs.autosize.$el.focus()
 82 |         })
 83 |       }
 84 |     },
 85 | 
 86 |     computed: {
 87 | 
 88 |       text: {
 89 |         get () {
 90 |           return this.task.text
 91 |         },
 92 |         set (value) {
 93 |           this.$store.commit('changeTextTask', {
 94 |             task: this.task,
 95 |             text: value
 96 |           })
 97 |         }
 98 |       },
 99 | 
100 |       status: {
101 |         get () {
102 |           return this.task.status
103 |         },
104 |         set (value) {
105 |           this.$store.commit('changeStatusTask', {
106 |             task: this.task,
107 |             status: value
108 |           })
109 |         }
110 |       }
111 | 
112 |     },
113 | 
114 |     methods: {
115 | 
116 |       timerRemove () {
117 |         this.removing = true
118 |         this.countdown = 5
119 |         this.$interval = setInterval(() => {
120 |           this.countdown--
121 |         }, 1000)
122 |         this.$timer = setTimeout(() => {
123 |           this.remove()
124 |         }, this.countdown * 1000)
125 |       },
126 | 
127 |       remove () {
128 |         this.$store.commit('removeTasks', this.task)
129 |       },
130 | 
131 |       stop () {
132 |         this.removing = false
133 |         clearInterval(this.$interval)
134 |         clearTimeout(this.$timer)
135 |       },
136 | 
137 |       blur (event) {
138 |         if (this.task.isEmpty) {
139 |           return this.remove()
140 |         }
141 |         this.isEdit = false
142 |       }
143 | 
144 |     },
145 | 
146 |     beforeDestroy () {
147 |       this.stop()
148 |     }
149 | 
150 |   }
151 | </script>
152 | 
153 | <style>
154 |   .task {
155 |     padding: 5px 30px;
156 |     position: relative;
157 |     display: flex;
158 |     align-items: flex-start;
159 |     background-color: #FFF;
160 | 
161 |     &.sortable-ghost {
162 |       background-color: #EEFAFD;
163 |     }
164 | 
165 |     .handle {
166 |       transition: var(--transition);
167 |       color: var(--color-lighter);
168 |       transform: translateX(-100%);
169 |       opacity: 0;
170 |       position: absolute;
171 |       left: 0;
172 |       top: 4px;
173 |       cursor: ns-resize;
174 |     }
175 | 
176 |     &-checkbox {
177 |       margin-top: 1px;
178 |       transition: var(--transition);
179 |       cursor: pointer;
180 |       margin-right: 10px;
181 |       flex-shrink: 0;
182 |       display: flex;
183 |       align-items: center;
184 |       position: relative;
185 |       width: 22px;
186 |       height: 22px;
187 |       color: white;
188 |       border: 1px solid var(--color-lighter);
189 |       border-radius: var(--border-radius);
190 | 
191 |       &:hover {
192 |         background-color: var(--color-shadow);
193 |       }
194 | 
195 |       .icon {
196 |         transition: var(--transition);
197 |         opacity: 0;
198 |         width: 100%;
199 |         height: 100%;
200 |       }
201 | 
202 |       &.check {
203 |         background-color: var(--color-task);
204 | 
205 |         .icon {
206 |           opacity: 1;
207 |         }
208 |       }
209 | 
210 |       input {
211 |         position: absolute;
212 |         pointer-events: none;
213 |         opacity: 0;
214 |       }
215 |     }
216 | 
217 |     &-text {
218 |       flex-grow: 1;
219 | 
220 |       textarea {
221 |         display: block;
222 |         width: 100%;
223 |       }
224 |     }
225 | 
226 |     .remove,
227 |     .stop {
228 |       margin-left: 6px;
229 |       padding: 4px;
230 |       line-height: 1;
231 |       border-radius: var(--border-radius);
232 |       transition: var(--transition);
233 |       position: absolute;
234 |       display: inline-flex;
235 |       align-items: center;
236 |       justify-content: center;
237 |       color: var(--color-light);
238 |       vertical-align: middle;
239 |     }
240 | 
241 |     .stop {
242 |       opacity: 1;
243 |       font-size: var(--font-size-small);
244 |       background-color: var(--color-shadow);
245 |     }
246 | 
247 |     .remove {
248 |       opacity: 0;
249 |       margin-top: -1px;
250 | 
251 |       &:hover {
252 |         color: red;
253 |       }
254 | 
255 |       .icon {
256 |         width: 16px;
257 |         height: 16px;
258 |       }
259 |     }
260 | 
261 |     &:hover {
262 |       .handle {
263 |         opacity: 1;
264 |         transform: translateX(0);
265 |       }
266 |       .remove {
267 |         opacity: 1;
268 |       }
269 |     }
270 | 
271 |   }
272 | </style>
273 | 


--------------------------------------------------------------------------------
/src/icons/check.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   svg(
 3 |   class="icon"
 4 |   width="22"
 5 |   height="22"
 6 |   viewBox="0 0 22 22"
 7 |   xmlns="http://www.w3.org/2000/svg")
 8 |     path(
 9 |     stroke="currentColor"
10 |     stroke-width="2"
11 |     d="M16 6L9.743 17 6 12.09"
12 |     fill="none"
13 |     fill-rule="evenodd"
14 |     stroke-linecap="round"
15 |     stroke-linejoin="round")
16 | </template>
17 | 
18 | <script>
19 |   export default {
20 |     name: 'icon-check'
21 |   }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/icons/drag.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   svg(
 3 |   class="icon"
 4 |   width="20"
 5 |   height="9"
 6 |   viewBox="0 0 20 9"
 7 |   xmlns="http://www.w3.org/2000/svg")
 8 |     g(
 9 |     fill="currentColor"
10 |     fill-rule="evenodd")
11 |       path(d="M0 0h20v1H0zM0 4h20v1H0zM0 8h20v1H0z")
12 | </template>
13 | 
14 | <script>
15 |   export default {
16 |     name: 'icon-drag'
17 |   }
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/icons/plus.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg xmlns="http://www.w3.org/2000/svg"
 3 |        width="24" height="24"
 4 |        viewBox="0 0 24 24"
 5 |        fill="none"
 6 |        stroke="currentColor"
 7 |        stroke-width="2"
 8 |        stroke-linecap="round"
 9 |        stroke-linejoin="round"
10 |        class="icon">
11 |     <line x1="12" y1="5" x2="12" y2="19"></line>
12 |     <line x1="5" y1="12" x2="19" y2="12"></line>
13 |   </svg>
14 | </template>
15 | 
16 | <script>
17 |   export default {
18 |     name: 'icon-plus'
19 |   }
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/icons/refresh.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg xmlns="http://www.w3.org/2000/svg"
 3 |        width="24" height="24"
 4 |        viewBox="0 0 24 24"
 5 |        fill="none"
 6 |        stroke="currentColor"
 7 |        stroke-width="2"
 8 |        stroke-linecap="round"
 9 |        stroke-linejoin="round"
10 |        class="icon">
11 |     <polyline points="1 4 1 10 7 10"></polyline>
12 |     <polyline points="23 20 23 14 17 14"></polyline>
13 |     <path
14 |       d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
15 |   </svg>
16 | </template>
17 | 
18 | <script>
19 |   export default {
20 |     name: 'icon-refresh'
21 |   }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/icons/remove.vue:
--------------------------------------------------------------------------------
 1 | <template lang="pug">
 2 |   svg(
 3 |   class="icon"
 4 |   xmlns="http://www.w3.org/2000/svg"
 5 |   width="24"
 6 |   height="24"
 7 |   viewBox="0 0 24 24"
 8 |   fill="none"
 9 |   stroke="currentColor"
10 |   stroke-width="2"
11 |   stroke-linecap="round"
12 |   stroke-linejoin="round")
13 |     polyline(points="3 6 5 6 21 6")
14 |     path(d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2")
15 |     line(x1="10", y1="11", x2="10", y2="17")
16 |     line(x1="14", y1="11", x2="14", y2="17")
17 | </template>
18 | 
19 | <script>
20 |   export default {
21 |     name: 'icon-remove'
22 |   }
23 | </script>
24 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import store from './store'
 4 | import moment from 'moment'
 5 | import 'moment/locale/tr'
 6 | 
 7 | import Draggable from 'vuedraggable'
 8 | import VueQuillEditor from 'vue-quill-editor'
 9 | 
10 | Vue.component('Draggable', Draggable)
11 | Vue.use(VueQuillEditor, {})
12 | 
13 | Vue.prototype.$moment = moment
14 | Vue.prototype.$isDev = process.env.NODE_ENV === 'development'
15 | Vue.config.productionTip = false
16 | 
17 | new Vue({
18 |   store,
19 |   render: h => h(App)
20 | }).$mount('#app')
21 | 
22 | if (store.getters.hasToken) {
23 |   store.commit('setToken', store.state.token)
24 |   // if (store.getters.calendarDataExpire) {
25 |   //   store.dispatch('getEventList')
26 |   // }
27 | }
28 | 
29 | // if (store.state.notification === 'default') {
30 | //   Notification.requestPermission(function (permission) {
31 | //     store.commit('changeNotification', permission)
32 | //   })
33 | // }
34 | 
35 | if (Vue.prototype.$isDev) {
36 |   store.commit('calSetDummyData')
37 | }
38 | 
39 | // DEV
40 | if (localStorage.getItem('vuex')) {
41 |   store.commit('moveOldData')
42 | }
43 | 


--------------------------------------------------------------------------------
/src/model/index.js:
--------------------------------------------------------------------------------
 1 | export class Note {
 2 |   constructor (data = {}) {
 3 |     this.id = data.id || new Date().getTime()
 4 |     this.content = data.content || ''
 5 |   }
 6 | }
 7 | 
 8 | export class Task {
 9 |   constructor (data = {}) {
10 |     this.id = data.id || new Date().getTime()
11 |     this.status = data.text || false
12 |     this.text = data.text || ''
13 |   }
14 | 
15 |   get isEmpty () {
16 |     return this.text.trim().length === 0
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/src/store/dummy-data.js:
--------------------------------------------------------------------------------
  1 | export const dummyCalendarList = () => {
  2 |   return [
  3 |     {
  4 |       'accessRole': 'owner',
  5 |       'backgroundColor': '#9fc6e7',
  6 |       'defaultReminders': [],
  7 |       'etag': '"435465ygfdfgdf"',
  8 |       'foregroundColor': '#000000',
  9 |       'id': 'gdfdssfdgd544@group.calendar.google.com',
 10 |       'kind': 'calendar#calendarListEntry',
 11 |       'location': 'ISTANBUL',
 12 |       'summary': 'Genel',
 13 |       'timeZone': 'Europe/Istanbul'
 14 |     },
 15 |     {
 16 |       'accessRole': 'owner',
 17 |       'backgroundColor': '#b3dc6c',
 18 |       'defaultReminders': [{ 'method': 'popup', 'minutes': 30 }],
 19 |       'etag': '"sdgfhggdf45"',
 20 |       'foregroundColor': '#000000',
 21 |       'id': '35efagsa@gmail.com',
 22 |       'kind': 'calendar#calendarListEntry',
 23 |       'location': 'ISTANBUL',
 24 |       'selected': true,
 25 |       'summary': 'Özel',
 26 |       'timeZone': 'Europe/Istanbul'
 27 |     },
 28 |     {
 29 |       'accessRole': 'reader',
 30 |       'backgroundColor': '#16a765',
 31 |       'defaultReminders': [],
 32 |       'etag': '"1537106192955000"',
 33 |       'foregroundColor': '#000000',
 34 |       'id': 'tr.turkish#holiday@group.v.calendar.google.com',
 35 |       'kind': 'calendar#calendarListEntry',
 36 |       'summary': 'Türkiye\'deki Tatiller',
 37 |       'timeZone': 'Europe/Istanbul'
 38 |     },
 39 |     {
 40 |       'accessRole': 'reader',
 41 |       'backgroundColor': '#fbe983',
 42 |       'defaultReminders': [],
 43 |       'etag': '"1537106200237000"',
 44 |       'foregroundColor': '#000000',
 45 |       'id': 'ht3jlfaac5lfd6263ulfh4tql8@group.calendar.google.com',
 46 |       'kind': 'calendar#calendarListEntry',
 47 |       'summary': 'Phases of the Moon',
 48 |       'timeZone': 'Europe/Istanbul'
 49 |     }
 50 |   ]
 51 | }
 52 | export const dummyCalendarItems = () => {
 53 |   return [
 54 |     {
 55 |       'attendees': [
 56 |         {
 57 |           'email': 'ademilter@gmail.com',
 58 |           'displayName': 'Adem Ilter',
 59 |           'self': true,
 60 |           'responseStatus': 'accepted'
 61 |         }, {
 62 |           'email': 'ilyas.teker@gmail.com',
 63 |           'displayName': 'ilyas teker',
 64 |           'organizer': true,
 65 |           'responseStatus': 'accepted'
 66 |         }
 67 |       ],
 68 |       'created': '2018-09-03T20:52:25.000Z',
 69 |       'creator': {
 70 |         'email': 'ilyas.teker@gmail.com',
 71 |         'displayName': 'ilyas teker'
 72 |       },
 73 |       'description': 'Saati 17:00 yapsak uyar mi abi?',
 74 |       'end': { 'dateTime': '2018-09-20T18:00:00+03:00' },
 75 |       'etag': '"3074216283874000"',
 76 |       'htmlLink': 'https://www.google.com/calendar/event?eid=ZzAwNHV2MzNzbTk4Ymc3NHNlM2NscTRoNGcgYWRlbWlsdGVyQG0',
 77 |       'iCalUID': 'g004uv33sm98bg74se3clq4h4g@google.com',
 78 |       'id': 'g004uv33sm98bg74se3clq4h4g',
 79 |       'kind': 'calendar#event',
 80 |       'location': 'Capitol Starbucks',
 81 |       'organizer': {
 82 |         'email': 'ilyas.teker@gmail.com',
 83 |         'displayName': 'ilyas teker'
 84 |       },
 85 |       'reminders': { 'useDefault': true },
 86 |       'sequence': 0,
 87 |       'start': { 'dateTime': '2018-09-20T17:00:00+03:00' },
 88 |       'status': 'confirmed',
 89 |       'summary': 'Adem - İlyas Bulusma',
 90 |       'updated': '2018-09-16T14:29:01.937Z'
 91 |     },
 92 |     {
 93 |       'attendees': [
 94 |         {
 95 |           'email': 'ademilter@gmail.com',
 96 |           'displayName': 'Adem Ilter',
 97 |           'self': true,
 98 |           'responseStatus': 'accepted'
 99 |         }
100 |       ],
101 |       'created': '2018-08-21T08:40:53.000Z',
102 |       'creator': {
103 |         'email': 'ademilter@gmail.com',
104 |         'displayName': 'Adem Ilter',
105 |         'self': true
106 |       },
107 |       'description': 'Bunun gibi otomatik oluşturulmuş etkinlikler hakkında ayrıntılı bilgi görmek üzere, resmî Google Takvim uygulamasını kullanın. https://g.co/calendar\n\nBu etkinlik, Gmail\'e aldığınız bir e-postan oluşturuldu. https://mail.google.com/mail?extsrc=cal&plid=ACUX6DPFcYfLJYrZOEh7QWpkJORwc7Vr-Jfxirc\n',
108 |       'end': { 'dateTime': '2018-09-23T07:00:00+03:00' },
109 |       'etag': '"3069681706778000"',
110 |       'htmlLink': 'https://www.google.com/calendar/event?eid=XzZ0bG5hcXJsZTVwNmNwYjRkaG1qNHBocGVocW40ZDlwNmRrbjhyOWpjNHBqMnFiOWUxbDM0c3BsY29vM2dxajRkdHI2b29yNjY5cDMwbzlwZWRvbWdvajljcGs3MGNqNGN0aTNhZGoyY2hrbWUgYWRlbWlsdGVyQG0',
111 |       'iCalUID': '7kukuqrfedlm2f9tur593itm3a31iipj2s5f08jdovlcf2r0a9sqhbifhp2dgd56bdig',
112 |       'id': '_6tlnaqrle5p6cpb4dhmj4phpehqn4d9p6dkn8r9jc4pj2qb9e1l34splcoo3gqj4dtr6oor669p30o9pedomgoj9cpk70cj4cti3adj2chkme',
113 |       'kind': 'calendar#event',
114 |       'location': 'İstanbul IST',
115 |       'organizer': { 'email': 'unknownorganizer@calendar.google.com' },
116 |       'reminders': { 'useDefault': false },
117 |       'sequence': 0,
118 |       'start': { 'dateTime': '2018-09-23T05:15:00+03:00' },
119 |       'status': 'confirmed',
120 |       'summary': 'Uçuş hedefi: Elazığ (TK 2642)',
121 |       'updated': '2018-08-21T08:40:53.484Z'
122 |     },
123 |     {
124 |       'created': '2008-11-18T00:00:00.000Z',
125 |       'creator': {
126 |         'email': 'ht3jlfaac5lfd6263ulfh4tql8@group.calendar.google.com',
127 |         'displayName': 'Phases of the Moon',
128 |         'self': true
129 |       },
130 |       'end': { 'date': '2018-09-18' },
131 |       'etag': '"2453932800000000"',
132 |       'htmlLink': 'https://www.google.com/calendar/event?eid=bW9vbnBoYXNlKzE1MzcxMzk3MDAwMDAgaHQzamxmYWFjNWxmZDYyNjN1bGZoNHRxbDhAZw',
133 |       'iCalUID': 'moonphase+1537139700000@google.com',
134 |       'id': 'moonphase+1537139700000',
135 |       'kind': 'calendar#event',
136 |       'organizer': {
137 |         'email': 'ht3jlfaac5lfd6263ulfh4tql8@group.calendar.google.com',
138 |         'displayName': 'Phases of the Moon',
139 |         'self': true
140 |       },
141 |       'sequence': 0,
142 |       'start': { 'date': '2018-09-17' },
143 |       'status': 'confirmed',
144 |       'summary': 'İlk dördün 02:15',
145 |       'updated': '2008-11-18T00:00:00.000Z'
146 |     },
147 |     {
148 |       'created': '2008-11-18T00:00:00.000Z',
149 |       'creator': {
150 |         'email': 'ht3jlfaac5lfd6263ulfh4tql8@group.calendar.google.com',
151 |         'displayName': 'Phases of the Moon',
152 |         'self': true
153 |       },
154 |       'end': { 'date': '2018-09-26' },
155 |       'etag': '"2453932800000000"',
156 |       'htmlLink': 'https://www.google.com/calendar/event?eid=bW9vbnBoYXNlKzE1Mzc4NDM5ODAwMDAgaHQzamxmYWFjNWxmZDYyNjN1bGZoNHRxbDhAZw',
157 |       'iCalUID': 'moonphase+1537843980000@google.com',
158 |       'id': 'moonphase+1537843980000',
159 |       'kind': 'calendar#event',
160 |       'organizer': {
161 |         'email': 'ht3jlfaac5lfd6263ulfh4tql8@group.calendar.google.com',
162 |         'displayName': 'Phases of the Moon',
163 |         'self': true
164 |       },
165 |       'sequence': 0,
166 |       'start': { 'date': '2018-09-25' },
167 |       'status': 'confirmed',
168 |       'summary': 'Dolunay 05:53',
169 |       'updated': '2008-11-18T00:00:00.000Z'
170 |     },
171 |     {
172 |       'created': '2008-11-18T00:00:00.000Z',
173 |       'creator': {
174 |         'email': 'ht3jlfaac5lfd6263ulfh4tql8@group.calendar.google.com',
175 |         'displayName': 'Phases of the Moon',
176 |         'self': true
177 |       },
178 |       'end': { 'date': '2018-09-20' },
179 |       'etag': '"2453932800000000"',
180 |       'htmlLink': 'https://www.google.com/calendar/event?eid=bW9vbnBoYXNlKzE1Mzc4NDM5ODAwMDAgaHQzamxmYWFjNWxmZDYyNjN1bGZoNHRxbDhAZw',
181 |       'iCalUID': 'moonphase+1537843980000@google.com',
182 |       'id': 'moonphase+1537843980000',
183 |       'kind': 'calendar#event',
184 |       'organizer': {
185 |         'email': 'ht3jlfaac5lfd6263ulfh4tql8@group.calendar.google.com',
186 |         'displayName': 'Phases of the Moon',
187 |         'self': true
188 |       },
189 |       'sequence': 0,
190 |       'start': { 'date': '2018-09-20' },
191 |       'status': 'confirmed',
192 |       'summary': 'Dolunay 05:53',
193 |       'updated': '2008-11-18T00:00:00.000Z'
194 |     }
195 |   ]
196 | }
197 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
  1 | import Vue from 'vue'
  2 | import Vuex from 'vuex'
  3 | import createPersistedState from 'vuex-persistedstate'
  4 | import httpCalendar from '../utils/http-calendar'
  5 | import moment from 'moment'
  6 | import { Note, Task } from '../model'
  7 | import { dummyCalendarList, dummyCalendarItems } from './dummy-data'
  8 | 
  9 | Vue.use(Vuex)
 10 | 
 11 | export default new Vuex.Store({
 12 | 
 13 |   plugins: [createPersistedState({
 14 |     key: 'FrameExtension'
 15 |   })],
 16 | 
 17 |   state: {
 18 |     // data
 19 |     notes: [],
 20 |     tasks: [],
 21 |     calendarList: [],
 22 |     calendarItems: [],
 23 |     // config
 24 |     token: null,
 25 |     notification: 'default',
 26 |     calendarLastUpdate: moment().startOf('hour')
 27 |   },
 28 | 
 29 |   getters: {
 30 |     hasToken: state => state.token !== null,
 31 |     calendarDataExpire: state => {
 32 |       return moment().startOf('hour').format('H') - moment(state.calendarLastUpdate).format('H') > 0
 33 |     },
 34 |     allowNotification: state => state.notification === 'granted',
 35 |     hasNote: state => !!state.notes.length,
 36 |     hasActiveTasks: state => state.tasks.some(o => !o.status),
 37 |     hasCompletedTasks: state => state.tasks.some(o => o.status),
 38 |     hasCalenderItem: state => !!state.calendarItems.length,
 39 |     eventsSortAndGroupBy: state => {
 40 |       const sortDates = {}
 41 |       // groupBy
 42 |       const groupBy = state.calendarItems.reduce((acc, obj) => {
 43 |         const key = moment(obj.start.date || obj.start.dateTime).format('YYYY-MM-DD');
 44 |         (acc[key] || (acc[key] = [])).push(obj)
 45 |         return acc
 46 |       }, {})
 47 |       // sort by timestamp and move new object
 48 |       Object.keys(groupBy).sort((a, b) => {
 49 |         return moment(a).format('X') - moment(b).format('X')
 50 |       }).forEach(key => {
 51 |         sortDates[key] = groupBy[key]
 52 |       })
 53 |       return sortDates
 54 |     }
 55 |   },
 56 | 
 57 |   actions: {
 58 | 
 59 |     afterLogin ({ commit, dispatch }, token) {
 60 |       commit('changeToken', token)
 61 |       commit('setToken', token)
 62 |       dispatch('getEventList')
 63 |     },
 64 | 
 65 |     async getCalendarList ({ commit }) {
 66 |       const response = await httpCalendar.get('users/me/calendarList')
 67 |       commit('setCalendarList', response.data)
 68 |     },
 69 | 
 70 |     async getEventList ({ state, getters, dispatch, commit }) {
 71 |       await dispatch('getCalendarList')
 72 | 
 73 |       const fromDate = moment()
 74 |       const toDate = moment().add(14, 'days')
 75 | 
 76 |       const requestList = state.calendarList.map(cal => {
 77 |         const url = [
 78 |           'calendars/',
 79 |           encodeURIComponent(cal.id),
 80 |           '/events',
 81 |           '?timeMin=' + encodeURIComponent(fromDate.toISOString()),
 82 |           '&timeMax=' + encodeURIComponent(toDate.toISOString()),
 83 |           '&maxResults=50',
 84 |           '&orderBy=startTime',
 85 |           '&singleEvents=true'
 86 |         ].join('')
 87 |         return httpCalendar.get(url)
 88 |       })
 89 | 
 90 |       const response = await Promise.all(requestList)
 91 |       commit('setCalendarItems', response)
 92 |       commit('updateCalendarLastUpdate')
 93 |     }
 94 | 
 95 |   },
 96 | 
 97 |   mutations: {
 98 | 
 99 |     changeToken (state, token) {
100 |       state.token = token
101 |     },
102 | 
103 |     setToken (state, token) {
104 |       httpCalendar.defaults.headers.common.Authorization = `Bearer ${token}`
105 |     },
106 | 
107 |     changeNotification (state, status) {
108 |       state.notification = status
109 |     },
110 | 
111 |     updateCalendarLastUpdate (state) {
112 |       state.calendarLastUpdate = moment().startOf('hour')
113 |     },
114 | 
115 |     moveOldData (state) {
116 |       const oldData = JSON.parse(localStorage.getItem('vuex'))
117 |       localStorage.removeItem('vuex')
118 |       state.notes = oldData.notes
119 |       state.tasks = oldData.tasks
120 |     },
121 | 
122 |     // NOTE
123 | 
124 |     addNote (state) {
125 |       state.notes.unshift(new Note())
126 |     },
127 |     changeNote (state, { note, content }) {
128 |       note.content = content
129 |     },
130 |     updateNotes (state, newList) {
131 |       state.notes = newList
132 |     },
133 |     removeNote (state, note) {
134 |       const index = state.notes.indexOf(note)
135 |       if (index > -1) {
136 |         state.notes.splice(index, 1)
137 |       }
138 |     },
139 | 
140 |     // TASK
141 | 
142 |     updateTasks (state, newList) {
143 |       state.tasks = newList
144 |     },
145 |     addTask (state) {
146 |       state.tasks.unshift(new Task())
147 |     },
148 |     changeTextTask (state, { task, text }) {
149 |       task.text = text
150 |     },
151 |     changeStatusTask (state, { task, status }) {
152 |       task.status = status
153 |     },
154 |     removeTasks (state, task) {
155 |       const index = state.tasks.indexOf(task)
156 |       if (index > -1) {
157 |         state.tasks.splice(index, 1)
158 |       }
159 |     },
160 | 
161 |     // CALENDAR
162 | 
163 |     calSetDummyData (state) {
164 |       state.calendarList = dummyCalendarList()
165 |       state.calendarItems = dummyCalendarItems()
166 |     },
167 | 
168 |     setCalendarList (state, data) {
169 |       state.calendarList = data.items
170 |     },
171 | 
172 |     setCalendarItems (state, items) {
173 |       const data = items.map(item => item.data)
174 |       const events = data.map(calendar => calendar.items)
175 |       state.calendarItems = events.flat()
176 |     }
177 |   }
178 | 
179 | })
180 | 


--------------------------------------------------------------------------------
/src/utils/get-token.js:
--------------------------------------------------------------------------------
 1 | /* global chrome */
 2 | import store from '../store'
 3 | 
 4 | const authUrl = () => {
 5 |   const manifest = chrome.runtime.getManifest()
 6 |   const redirectUrl = chrome.identity.getRedirectURL()
 7 |   console.info('redirect url', redirectUrl)
 8 |   return [
 9 |     'https://accounts.google.com/o/oauth2/auth',
10 |     '?client_id=' + manifest.oauth2.client_id_firefox,
11 |     '&response_type=token',
12 |     '&redirect_uri=' + encodeURIComponent(redirectUrl),
13 |     '&scope=' + manifest.oauth2.scopes.join(',')
14 |   ].join('')
15 | }
16 | 
17 | const extractAccessToken = redirectUri => {
18 |   const m = redirectUri.match(/[#?](.*)/)
19 |   if (!m || m.length < 1) {
20 |     return null
21 |   }
22 |   const params = new URLSearchParams(m[1].split('#')[0])
23 |   return params.get('access_token')
24 | }
25 | 
26 | const getAuthToken = () => {
27 |   if (process.env.VUE_APP_PLATFORM === 'firefox') {
28 |     chrome.identity.launchWebAuthFlow({
29 |       interactive: true,
30 |       url: authUrl()
31 |     }, async redirectUri => {
32 |       const token = extractAccessToken(redirectUri)
33 |       store.dispatch('afterLogin', token)
34 |     })
35 |   } else {
36 |     chrome.identity.getAuthToken({
37 |       interactive: true
38 |     }, async function (token) {
39 |       store.dispatch('afterLogin', token)
40 |     })
41 |   }
42 | }
43 | 
44 | export default getAuthToken
45 | 


--------------------------------------------------------------------------------
/src/utils/http-calendar.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | import store from '../store'
 3 | 
 4 | const httpCalendar = axios.create({
 5 |   baseURL: 'https://www.googleapis.com/calendar/v3/'
 6 | })
 7 | 
 8 | // Setting up an interceptor in case of a token
 9 | // expiration or unsuccessful authentication.
10 | 
11 | httpCalendar.interceptors.response.use(null, error => {
12 |   if (error.response.status === 401) {
13 |     console.error('token expired')
14 |     if (store.getters.hasToken) {
15 |       store.commit('changeToken', null)
16 |     }
17 |   }
18 |   return Promise.reject(error)
19 | })
20 | 
21 | export default httpCalendar
22 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const MomentLocalesPlugin = require('moment-locales-webpack-plugin')
 2 | 
 3 | module.exports = {
 4 |   configureWebpack: {
 5 |     plugins: [
 6 |       new MomentLocalesPlugin({
 7 |         localesToKeep: ['tr']
 8 |       })
 9 |     ]
10 |   }
11 | }
12 | 


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