Browse Source

Heres the file to make the search bar that's under the toolbar and stays under it

carlos.diaz44 4 years ago
parent
commit
2fd44e38e7
100 changed files with 35193 additions and 0 deletions
  1. 27
    0
      Calendars/calendar.html
  2. 6
    0
      Calendars/calendar_files/css/demo.css
  3. 111
    0
      Calendars/calendar_files/css/theme1.css
  4. 111
    0
      Calendars/calendar_files/css/theme2.css
  5. 95
    0
      Calendars/calendar_files/css/theme3.css
  6. 299
    0
      Calendars/calendar_files/js/caleandar.js
  7. 1
    0
      Calendars/calendar_files/js/caleandar.min.js
  8. 8
    0
      Calendars/calendar_files/js/events.js
  9. 1466
    0
      Calendars/onsenui/CHANGELOG.md
  10. 202
    0
      Calendars/onsenui/LICENSE
  11. 110
    0
      Calendars/onsenui/README.md
  12. 26
    0
      Calendars/onsenui/bower.json
  13. 33
    0
      Calendars/onsenui/css-components-src/README.md
  14. 276
    0
      Calendars/onsenui/css-components-src/gulpfile.js
  15. BIN
      Calendars/onsenui/css-components-src/misc/screenshot-01.png
  16. BIN
      Calendars/onsenui/css-components-src/misc/screenshot-02.png
  17. 48
    0
      Calendars/onsenui/css-components-src/package.json
  18. 376
    0
      Calendars/onsenui/css-components-src/patterns.yaml
  19. 64
    0
      Calendars/onsenui/css-components-src/previewer-src/app.js
  20. 190
    0
      Calendars/onsenui/css-components-src/previewer-src/components/app-page.js
  21. 36
    0
      Calendars/onsenui/css-components-src/previewer-src/components/category-page.js
  22. 32
    0
      Calendars/onsenui/css-components-src/previewer-src/components/component-page.js
  23. 68
    0
      Calendars/onsenui/css-components-src/previewer-src/components/components-page.js
  24. 9
    0
      Calendars/onsenui/css-components-src/previewer-src/components/notfound-page.js
  25. 33
    0
      Calendars/onsenui/css-components-src/previewer-src/components/pattern-page.js
  26. 49
    0
      Calendars/onsenui/css-components-src/previewer-src/components/patterns-page.js
  27. 25
    0
      Calendars/onsenui/css-components-src/previewer-src/components/platform-select.js
  28. 30
    0
      Calendars/onsenui/css-components-src/previewer-src/components/preview-component.js
  29. 48
    0
      Calendars/onsenui/css-components-src/previewer-src/components/theme-select.js
  30. 32
    0
      Calendars/onsenui/css-components-src/previewer-src/index.html.eco
  31. 13
    0
      Calendars/onsenui/css-components-src/previewer-src/select-icon.svg
  32. 313
    0
      Calendars/onsenui/css-components-src/previewer-src/style.css
  33. 31
    0
      Calendars/onsenui/css-components-src/previewer-src/util.js
  34. 229
    0
      Calendars/onsenui/css-components-src/src/components/action-sheet.css
  35. 328
    0
      Calendars/onsenui/css-components-src/src/components/alert-dialog.css
  36. 115
    0
      Calendars/onsenui/css-components-src/src/components/button-bar.css
  37. 436
    0
      Calendars/onsenui/css-components-src/src/components/button.css
  38. 102
    0
      Calendars/onsenui/css-components-src/src/components/card.css
  39. 331
    0
      Calendars/onsenui/css-components-src/src/components/checkbox.css
  40. 86
    0
      Calendars/onsenui/css-components-src/src/components/combination.css
  41. 79
    0
      Calendars/onsenui/css-components-src/src/components/dialog.css
  42. 256
    0
      Calendars/onsenui/css-components-src/src/components/fab.css
  43. 83
    0
      Calendars/onsenui/css-components-src/src/components/global.css
  44. 32
    0
      Calendars/onsenui/css-components-src/src/components/index.css
  45. 1044
    0
      Calendars/onsenui/css-components-src/src/components/list.css
  46. 41
    0
      Calendars/onsenui/css-components-src/src/components/modal.css
  47. 68
    0
      Calendars/onsenui/css-components-src/src/components/notification.css
  48. 105
    0
      Calendars/onsenui/css-components-src/src/components/page.css
  49. 197
    0
      Calendars/onsenui/css-components-src/src/components/popover.css
  50. 150
    0
      Calendars/onsenui/css-components-src/src/components/progress-bar.css
  51. 135
    0
      Calendars/onsenui/css-components-src/src/components/progress-circular.css
  52. 246
    0
      Calendars/onsenui/css-components-src/src/components/radio-button.css
  53. 245
    0
      Calendars/onsenui/css-components-src/src/components/range.css
  54. 96
    0
      Calendars/onsenui/css-components-src/src/components/search-input.css
  55. 176
    0
      Calendars/onsenui/css-components-src/src/components/segment.css
  56. 203
    0
      Calendars/onsenui/css-components-src/src/components/select.css
  57. 224
    0
      Calendars/onsenui/css-components-src/src/components/switch.css
  58. 523
    0
      Calendars/onsenui/css-components-src/src/components/tabbar.css
  59. 189
    0
      Calendars/onsenui/css-components-src/src/components/text-input.css
  60. 79
    0
      Calendars/onsenui/css-components-src/src/components/textarea.css
  61. 88
    0
      Calendars/onsenui/css-components-src/src/components/toast.css
  62. 170
    0
      Calendars/onsenui/css-components-src/src/components/toolbar-button.css
  63. 385
    0
      Calendars/onsenui/css-components-src/src/components/toolbar.css
  64. 160
    0
      Calendars/onsenui/css-components-src/src/components/util.css
  65. 5
    0
      Calendars/onsenui/css-components-src/src/dark-onsen-css-components.css
  66. 147
    0
      Calendars/onsenui/css-components-src/src/dark-theme.css
  67. 20
    0
      Calendars/onsenui/css-components-src/src/img/android-search-input-icon.svg
  68. 14
    0
      Calendars/onsenui/css-components-src/src/img/ios-search-input-icon.svg
  69. 16
    0
      Calendars/onsenui/css-components-src/src/img/select-arrow.svg
  70. 14
    0
      Calendars/onsenui/css-components-src/src/iphonex-support/action-sheet.css
  71. 318
    0
      Calendars/onsenui/css-components-src/src/iphonex-support/combination.css
  72. 36
    0
      Calendars/onsenui/css-components-src/src/iphonex-support/fab.css
  73. 11
    0
      Calendars/onsenui/css-components-src/src/iphonex-support/global.css
  74. 30
    0
      Calendars/onsenui/css-components-src/src/iphonex-support/index.css
  75. 12
    0
      Calendars/onsenui/css-components-src/src/iphonex-support/page.css
  76. 7
    0
      Calendars/onsenui/css-components-src/src/iphonex-support/tabbar.css
  77. 13
    0
      Calendars/onsenui/css-components-src/src/iphonex-support/toast.css
  78. 14
    0
      Calendars/onsenui/css-components-src/src/iphonex-support/toolbar.css
  79. 32
    0
      Calendars/onsenui/css-components-src/src/license.css
  80. 5
    0
      Calendars/onsenui/css-components-src/src/old-onsen-css-components.css
  81. 150
    0
      Calendars/onsenui/css-components-src/src/old-theme.css
  82. 5
    0
      Calendars/onsenui/css-components-src/src/onsen-css-components.css
  83. 147
    0
      Calendars/onsenui/css-components-src/src/theme.css
  84. 210
    0
      Calendars/onsenui/css-components-src/stylelint.config.js
  85. 6746
    0
      Calendars/onsenui/css-components-src/yarn.lock
  86. 7395
    0
      Calendars/onsenui/css/dark-onsen-css-components.css
  87. 31
    0
      Calendars/onsenui/css/dark-onsen-css-components.min.css
  88. 4329
    0
      Calendars/onsenui/css/font_awesome/css/all.css
  89. 5
    0
      Calendars/onsenui/css/font_awesome/css/all.min.css
  90. 14
    0
      Calendars/onsenui/css/font_awesome/css/brands.css
  91. 5
    0
      Calendars/onsenui/css/font_awesome/css/brands.min.css
  92. 4296
    0
      Calendars/onsenui/css/font_awesome/css/fontawesome.css
  93. 5
    0
      Calendars/onsenui/css/font_awesome/css/fontawesome.min.css
  94. 15
    0
      Calendars/onsenui/css/font_awesome/css/regular.css
  95. 5
    0
      Calendars/onsenui/css/font_awesome/css/regular.min.css
  96. 16
    0
      Calendars/onsenui/css/font_awesome/css/solid.css
  97. 5
    0
      Calendars/onsenui/css/font_awesome/css/solid.min.css
  98. 346
    0
      Calendars/onsenui/css/font_awesome/css/svg-with-js.css
  99. 5
    0
      Calendars/onsenui/css/font_awesome/css/svg-with-js.min.css
  100. 0
    0
      Calendars/onsenui/css/font_awesome/css/v4-shims.css

+ 27
- 0
Calendars/calendar.html View File

@@ -0,0 +1,27 @@
1
+<!DOCTYPE html>
2
+<html>
3
+<head>
4
+	<title>Ferias</title>
5
+	<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
6
+    <link rel="stylesheet" href="calendar_files/css/demo.css"/>
7
+    <link rel="stylesheet" href="calendar_files/css/theme1.css"/>
8
+    <link rel= "stylesheet" href = "onsenui/css/onsenui.css">
9
+	<link rel = "stylesheet" href = "onsenui/css/onsen-css-components.min.css">
10
+	<script src = "onsenui/js/onsenui.min.js"></script>
11
+	<link rel = "stylesheet" href = "searchbar1.css">
12
+</head>
13
+<body>
14
+	<ons-page>
15
+	<ons-toolbar>
16
+	          <div class="center">
17
+	            Ferias
18
+	          </div>
19
+	</ons-toolbar>
20
+
21
+	<div id = "caleandar" class = "calendar">
22
+		<script type="text/javascript" src="calendar_files/js/caleandar.js"></script>
23
+    	<script type="text/javascript" src="calendar_files/js/events.js"></script>
24
+	</div>
25
+	</ons-page>
26
+</body>
27
+</html>

+ 6
- 0
Calendars/calendar_files/css/demo.css View File

@@ -0,0 +1,6 @@
1
+body{
2
+  font-family: Calibri, sans-serif;
3
+  font-family: 'Roboto Condensed', sans-serif;
4
+  color: #333;
5
+  text-align: center;
6
+}

+ 111
- 0
Calendars/calendar_files/css/theme1.css View File

@@ -0,0 +1,111 @@
1
+.cld-main{
2
+  width: 330px;
3
+}
4
+.cld-main a{
5
+  color: #333;
6
+  font-weight: bold;
7
+}
8
+  .cld-datetime{
9
+    position: relative;
10
+    width: 66%;
11
+    min-width: 100px;
12
+    max-width: 300px;
13
+    margin: auto;
14
+    overflow: hidden;
15
+  }
16
+  .cld-datetime .today{
17
+    position: relative;
18
+    float: left;
19
+    width: calc(100% - 40px);
20
+    margin: auto;
21
+    text-align: center;
22
+  }
23
+  .cld-nav{
24
+    position: relative;
25
+    width: 20px;
26
+    height: 20px;
27
+    margin-top: 2px;
28
+  }
29
+  .cld-nav:hover{
30
+    cursor: pointer;
31
+  }
32
+  .cld-nav:hover svg{
33
+      fill: #666;
34
+  }
35
+  .cld-rwd{
36
+    float: left;
37
+  }
38
+  .cld-fwd{
39
+    float: right;
40
+  }
41
+    .cld-nav svg:hover{
42
+
43
+    }
44
+.cld-labels, .cld-days{
45
+  padding-left: 0;
46
+}
47
+  .cld-label, .cld-day{
48
+    display: inline-block;
49
+    width: 14.28%;
50
+    text-align: center;
51
+  }
52
+  .cld-day.today .cld-number{
53
+    display: inline-block;
54
+    height: 20px;
55
+    width: 20px;
56
+    border-radius: 50px;
57
+    background: #666;
58
+    color: #fff;
59
+  }
60
+  .cld-day.disableDay{
61
+    opacity: 0.5;
62
+  }
63
+  .cld-day.nextMonth, .cld-day.prevMonth{
64
+    opacity: 0.33;
65
+  }
66
+    .cld-number{
67
+      position: relative;
68
+      margin: 5px;
69
+      padding: 5px;
70
+    }
71
+      .cld-title{
72
+        position: absolute;
73
+        z-index: 5;
74
+        display: none;
75
+        top: 30px;
76
+        left: 0;
77
+        padding: 5px 10px;
78
+        background: #fff;
79
+        white-space: nowrap;
80
+        border: 1px solid #ccc;
81
+        border-radius: 5px;
82
+        font-size: 12px;
83
+      }
84
+      .cld-number:hover .cld-title{
85
+        display: block;
86
+      }
87
+      .cld-title::before{
88
+        content: '';
89
+        position: absolute;
90
+        top: -7.5px; left: 7.5px;
91
+        width: 0;
92
+        height: 0;
93
+        border-left: 7.5px solid transparent;
94
+        border-right: 7.5px solid transparent;
95
+
96
+        border-bottom: 7.5px solid #ccc;
97
+      }
98
+      .cld-number.eventday{
99
+        display: inline-block;
100
+        height: 20px;
101
+        width: 20px;
102
+        border-radius: 50px;
103
+        border: 1px solid #999;
104
+      }
105
+      .cld-number.eventday:hover{
106
+        cursor: pointer;
107
+        background: #eee;
108
+      }
109
+      .today .cld-number.eventday:hover{
110
+        background: #888;
111
+      }

+ 111
- 0
Calendars/calendar_files/css/theme2.css View File

@@ -0,0 +1,111 @@
1
+.cld-main{
2
+  width: 200px;
3
+  text-align: center;
4
+}
5
+.cld-main a{
6
+  color: #0080FF;
7
+}
8
+.cld-main svg{
9
+  fill: #0080FF;
10
+}
11
+  .cld-datetime{
12
+    position: relative;
13
+    width: 66%;
14
+    min-width: 100px;
15
+    max-width: 300px;
16
+    margin: auto;
17
+    overflow: hidden;
18
+  }
19
+  .cld-datetime .today{
20
+    position: relative;
21
+    float: left;
22
+    width: calc(100% - 40px);
23
+    margin: auto;
24
+    text-align: center;
25
+  }
26
+  .cld-nav{
27
+    position: relative;
28
+    width: 20px;
29
+    height: 20px;
30
+    margin-top: 2px;
31
+  }
32
+  .cld-nav:hover{
33
+    cursor: pointer;
34
+  }
35
+  .cld-nav:hover svg{
36
+      fill: #005EFF;
37
+  }
38
+  .cld-rwd{
39
+    float: left;
40
+  }
41
+  .cld-fwd{
42
+    float: right;
43
+  }
44
+    .cld-nav svg:hover{
45
+
46
+    }
47
+.cld-labels, .cld-days{
48
+  padding-left: 0;
49
+}
50
+  .cld-label, .cld-day{
51
+    box-sizing: border-box;
52
+    display: inline-block;
53
+    width: 14.28%;
54
+    text-align: center;
55
+  }
56
+  .cld-day{
57
+    border: 1px solid #eee;
58
+  }
59
+  .cld-day.today .cld-number{
60
+    background: #0080FF;
61
+    color: #fff;
62
+  }
63
+  .cld-day.disableDay{
64
+    opacity: 0.5;
65
+  }
66
+  .cld-day.nextMonth, .cld-day.prevMonth{
67
+    opacity: 0.33;
68
+  }
69
+    .cld-number{
70
+      position: relative;
71
+      margin: 0;
72
+      padding: 10px;
73
+    }
74
+      .cld-title{
75
+        position: absolute;
76
+        z-index: 5;
77
+        display: none;
78
+        top: 35px;
79
+        left: 0;
80
+        padding: 5px 10px;
81
+        background: #fff;
82
+        white-space: nowrap;
83
+        border: 1px solid #ccc;
84
+        border-radius: 5px;
85
+        font-size: 12px;
86
+      }
87
+      .cld-number:hover .cld-title{
88
+        display: block;
89
+      }
90
+      .cld-title::before{
91
+        content: '';
92
+        position: absolute;
93
+        top: -7.5px; left: 10px;
94
+        width: 0;
95
+        height: 0;
96
+        border-left: 7.5px solid transparent;
97
+        border-right: 7.5px solid transparent;
98
+
99
+        border-bottom: 7.5px solid #ccc;
100
+      }
101
+      .cld-number.eventday{
102
+        font-weight: bold;
103
+        color: #0080FF;
104
+      }
105
+      .cld-number.eventday:hover{
106
+        cursor: pointer;
107
+        background: #eee;
108
+      }
109
+      .today .cld-number.eventday:hover{
110
+        background: #005EFF;
111
+      }

+ 95
- 0
Calendars/calendar_files/css/theme3.css View File

@@ -0,0 +1,95 @@
1
+.cld-main{
2
+  width: 660px;
3
+  text-align: center;
4
+}
5
+.cld-main a{
6
+  color: #7B00FF;
7
+}
8
+  .cld-datetime{
9
+    position: relative;
10
+    width: 66%;
11
+    min-width: 100px;
12
+    max-width: 300px;
13
+    margin: auto;
14
+    overflow: hidden;
15
+  }
16
+  .cld-datetime .today{
17
+    position: relative;
18
+    float: left;
19
+    width: calc(100% - 40px);
20
+    margin: auto;
21
+    text-align: center;
22
+  }
23
+  .cld-nav{
24
+    position: relative;
25
+    width: 20px;
26
+    height: 20px;
27
+    margin-top: 2px;
28
+  }
29
+  .cld-nav:hover{
30
+    cursor: pointer;
31
+  }
32
+  .cld-nav:hover svg{
33
+      fill: #666;
34
+  }
35
+  .cld-rwd{
36
+    float: left;
37
+  }
38
+  .cld-fwd{
39
+    float: right;
40
+  }
41
+    .cld-nav svg:hover{
42
+
43
+    }
44
+.cld-labels, .cld-days{
45
+  padding-left: 0;
46
+}
47
+  .cld-label, .cld-day{
48
+    box-sizing: border-box;
49
+    display: inline-block;
50
+    width: 14.28%;
51
+    text-align: center;
52
+  }
53
+  .cld-day{
54
+    display: block;
55
+    float: left;
56
+    position: relative;
57
+    margin: 0;
58
+    padding: 5px;
59
+    height: 66px;
60
+    border: 1px solid #ddd;
61
+    overflow-y: auto;
62
+  }
63
+  .cld-day.clickable:hover{
64
+    cursor: pointer;
65
+  }
66
+  .cld-day.today{
67
+    border: 1px solid #7B00FF;
68
+  }
69
+  .cld-day.disableDay{
70
+    opacity: 0.5;
71
+  }
72
+  .cld-day.nextMonth, .cld-day.prevMonth{
73
+    opacity: 0.33;
74
+  }
75
+    .cld-number{
76
+      margin: 0;
77
+      text-align: left;
78
+    }
79
+      .cld-title{
80
+        font-size: 10px;
81
+        display: block;
82
+        margin: 0;
83
+        font-weight: normal;
84
+      }
85
+      .cld-day:hover{
86
+        background: #eee;
87
+      }
88
+      .cld-number.eventday{
89
+        font-weight: bold;
90
+      }
91
+      .cld-number.eventday:hover{
92
+        background: #eee;
93
+      }
94
+      .today .cld-number.eventday:hover{
95
+      }

+ 299
- 0
Calendars/calendar_files/js/caleandar.js View File

@@ -0,0 +1,299 @@
1
+/*
2
+  Author: Jack Ducasse;
3
+  Version: 0.1.0;
4
+  (◠‿◠✿)
5
+*/
6
+var Calendar = function(model, options, date){
7
+  // Default Values
8
+  this.Options = {
9
+    Color: '',
10
+    LinkColor: '',
11
+    NavShow: true,
12
+    NavVertical: false,
13
+    NavLocation: '',
14
+    DateTimeShow: true,
15
+    DateTimeFormat: 'mmm, yyyy',
16
+    DatetimeLocation: '',
17
+    EventClick: '',
18
+    EventTargetWholeDay: false,
19
+    DisabledDays: [],
20
+    ModelChange: model
21
+  };
22
+  // Overwriting default values
23
+  for(var key in options){
24
+    this.Options[key] = typeof options[key]=='string'?options[key].toLowerCase():options[key];
25
+  }
26
+
27
+  model?this.Model=model:this.Model={};
28
+  this.Today = new Date();
29
+
30
+  this.Selected = this.Today
31
+  this.Today.Month = this.Today.getMonth();
32
+  this.Today.Year = this.Today.getFullYear();
33
+  if(date){this.Selected = date}
34
+  this.Selected.Month = this.Selected.getMonth();
35
+  this.Selected.Year = this.Selected.getFullYear();
36
+
37
+  this.Selected.Days = new Date(this.Selected.Year, (this.Selected.Month + 1), 0).getDate();
38
+  this.Selected.FirstDay = new Date(this.Selected.Year, (this.Selected.Month), 1).getDay();
39
+  this.Selected.LastDay = new Date(this.Selected.Year, (this.Selected.Month + 1), 0).getDay();
40
+
41
+  this.Prev = new Date(this.Selected.Year, (this.Selected.Month - 1), 1);
42
+  if(this.Selected.Month==0){this.Prev = new Date(this.Selected.Year-1, 11, 1);}
43
+  this.Prev.Days = new Date(this.Prev.getFullYear(), (this.Prev.getMonth() + 1), 0).getDate();
44
+};
45
+
46
+function createCalendar(calendar, element, adjuster){
47
+  if(typeof adjuster !== 'undefined'){
48
+    var newDate = new Date(calendar.Selected.Year, calendar.Selected.Month + adjuster, 1);
49
+    calendar = new Calendar(calendar.Model, calendar.Options, newDate);
50
+    element.innerHTML = '';
51
+  }else{
52
+    for(var key in calendar.Options){
53
+      typeof calendar.Options[key] != 'function' && typeof calendar.Options[key] != 'object' && calendar.Options[key]?element.className += " " + key + "-" + calendar.Options[key]:0;
54
+    }
55
+  }
56
+  var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
57
+
58
+  function AddSidebar(){
59
+    var sidebar = document.createElement('div');
60
+    sidebar.className += 'cld-sidebar';
61
+
62
+    var monthList = document.createElement('ul');
63
+    monthList.className += 'cld-monthList';
64
+
65
+    for(var i = 0; i < months.length - 3; i++){
66
+      var x = document.createElement('li');
67
+      x.className += 'cld-month';
68
+      var n = i - (4 - calendar.Selected.Month);
69
+      // Account for overflowing month values
70
+      if(n<0){n+=12;}
71
+      else if(n>11){n-=12;}
72
+      // Add Appropriate Class
73
+      if(i==0){
74
+        x.className += ' cld-rwd cld-nav';
75
+        x.addEventListener('click', function(){
76
+          typeof calendar.Options.ModelChange == 'function'?calendar.Model = calendar.Options.ModelChange():calendar.Model = calendar.Options.ModelChange;
77
+          createCalendar(calendar, element, -1);});
78
+        x.innerHTML += '<svg height="15" width="15" viewBox="0 0 100 75" fill="rgba(255,255,255,0.5)"><polyline points="0,75 100,75 50,0"></polyline></svg>';
79
+      }
80
+      else if(i==months.length - 4){
81
+        x.className += ' cld-fwd cld-nav';
82
+        x.addEventListener('click', function(){
83
+          typeof calendar.Options.ModelChange == 'function'?calendar.Model = calendar.Options.ModelChange():calendar.Model = calendar.Options.ModelChange;
84
+          createCalendar(calendar, element, 1);} );
85
+        x.innerHTML += '<svg height="15" width="15" viewBox="0 0 100 75" fill="rgba(255,255,255,0.5)"><polyline points="0,0 100,0 50,75"></polyline></svg>';
86
+      }
87
+      else{
88
+        if(i < 4){x.className += ' cld-pre';}
89
+        else if(i > 4){x.className += ' cld-post';}
90
+        else{x.className += ' cld-curr';}
91
+
92
+        //prevent losing var adj value (for whatever reason that is happening)
93
+        (function () {
94
+          var adj = (i-4);
95
+          //x.addEventListener('click', function(){createCalendar(calendar, element, adj);console.log('kk', adj);} );
96
+          x.addEventListener('click', function(){
97
+            typeof calendar.Options.ModelChange == 'function'?calendar.Model = calendar.Options.ModelChange():calendar.Model = calendar.Options.ModelChange;
98
+            createCalendar(calendar, element, adj);} );
99
+          x.setAttribute('style', 'opacity:' + (1 - Math.abs(adj)/4));
100
+          x.innerHTML += months[n].substr(0,3);
101
+        }()); // immediate invocation
102
+
103
+        if(n==0){
104
+          var y = document.createElement('li');
105
+          y.className += 'cld-year';
106
+          if(i<5){
107
+            y.innerHTML += calendar.Selected.Year;
108
+          }else{
109
+            y.innerHTML += calendar.Selected.Year + 1;
110
+          }
111
+          monthList.appendChild(y);
112
+        }
113
+      }
114
+      monthList.appendChild(x);
115
+    }
116
+    sidebar.appendChild(monthList);
117
+    if(calendar.Options.NavLocation){
118
+      document.getElementById(calendar.Options.NavLocation).innerHTML = "";
119
+      document.getElementById(calendar.Options.NavLocation).appendChild(sidebar);
120
+    }
121
+    else{element.appendChild(sidebar);}
122
+  }
123
+
124
+  var mainSection = document.createElement('div');
125
+  mainSection.className += "cld-main";
126
+
127
+  function AddDateTime(){
128
+      var datetime = document.createElement('div');
129
+      datetime.className += "cld-datetime";
130
+      if(calendar.Options.NavShow && !calendar.Options.NavVertical){
131
+        var rwd = document.createElement('div');
132
+        rwd.className += " cld-rwd cld-nav";
133
+        rwd.addEventListener('click', function(){createCalendar(calendar, element, -1);} );
134
+        rwd.innerHTML = '<svg height="15" width="15" viewBox="0 0 75 100" fill="rgba(0,0,0,0.5)"><polyline points="0,50 75,0 75,100"></polyline></svg>';
135
+        datetime.appendChild(rwd);
136
+      }
137
+      var today = document.createElement('div');
138
+      today.className += ' today';
139
+      today.innerHTML = months[calendar.Selected.Month] + ", " + calendar.Selected.Year;
140
+      datetime.appendChild(today);
141
+      if(calendar.Options.NavShow && !calendar.Options.NavVertical){
142
+        var fwd = document.createElement('div');
143
+        fwd.className += " cld-fwd cld-nav";
144
+        fwd.addEventListener('click', function(){createCalendar(calendar, element, 1);} );
145
+        fwd.innerHTML = '<svg height="15" width="15" viewBox="0 0 75 100" fill="rgba(0,0,0,0.5)"><polyline points="0,0 75,50 0,100"></polyline></svg>';
146
+        datetime.appendChild(fwd);
147
+      }
148
+      if(calendar.Options.DatetimeLocation){
149
+        document.getElementById(calendar.Options.DatetimeLocation).innerHTML = "";
150
+        document.getElementById(calendar.Options.DatetimeLocation).appendChild(datetime);
151
+      }
152
+      else{mainSection.appendChild(datetime);}
153
+  }
154
+
155
+  function AddLabels(){
156
+    var labels = document.createElement('ul');
157
+    labels.className = 'cld-labels';
158
+    var labelsList = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
159
+    for(var i = 0; i < labelsList.length; i++){
160
+      var label = document.createElement('li');
161
+      label.className += "cld-label";
162
+      label.innerHTML = labelsList[i];
163
+      labels.appendChild(label);
164
+    }
165
+    mainSection.appendChild(labels);
166
+  }
167
+  function AddDays(){
168
+    // Create Number Element
169
+    function DayNumber(n){
170
+      var number = document.createElement('p');
171
+      number.className += "cld-number";
172
+      number.innerHTML += n;
173
+      return number;
174
+    }
175
+    var days = document.createElement('ul');
176
+    days.className += "cld-days";
177
+    // Previous Month's Days
178
+    for(var i = 0; i < (calendar.Selected.FirstDay); i++){
179
+      var day = document.createElement('li');
180
+      day.className += "cld-day prevMonth";
181
+      //Disabled Days
182
+      var d = i%7;
183
+      for(var q = 0; q < calendar.Options.DisabledDays.length; q++){
184
+        if(d==calendar.Options.DisabledDays[q]){
185
+          day.className += " disableDay";
186
+        }
187
+      }
188
+
189
+      var number = DayNumber((calendar.Prev.Days - calendar.Selected.FirstDay) + (i+1));
190
+      day.appendChild(number);
191
+
192
+      days.appendChild(day);
193
+    }
194
+    // Current Month's Days
195
+    for(var i = 0; i < calendar.Selected.Days; i++){
196
+      var day = document.createElement('li');
197
+      day.className += "cld-day currMonth";
198
+      //Disabled Days
199
+      var d = (i + calendar.Selected.FirstDay)%7;
200
+      for(var q = 0; q < calendar.Options.DisabledDays.length; q++){
201
+        if(d==calendar.Options.DisabledDays[q]){
202
+          day.className += " disableDay";
203
+        }
204
+      }
205
+      var number = DayNumber(i+1);
206
+      // Check Date against Event Dates
207
+      for(var n = 0; n < calendar.Model.length; n++){
208
+        var evDate = calendar.Model[n].Date;
209
+        var toDate = new Date(calendar.Selected.Year, calendar.Selected.Month, (i+1));
210
+        if(evDate.getTime() == toDate.getTime()){
211
+          number.className += " eventday";
212
+          var title = document.createElement('span');
213
+          title.className += "cld-title";
214
+          if(typeof calendar.Model[n].Link == 'function' || calendar.Options.EventClick){
215
+            var a = document.createElement('a');
216
+            a.setAttribute('href', '#');
217
+            a.innerHTML += calendar.Model[n].Title;
218
+            if(calendar.Options.EventClick){
219
+              var z = calendar.Model[n].Link;
220
+              if(typeof calendar.Model[n].Link != 'string'){
221
+                  a.addEventListener('click', calendar.Options.EventClick.bind.apply(calendar.Options.EventClick, [null].concat(z)) );
222
+                  if(calendar.Options.EventTargetWholeDay){
223
+                    day.className += " clickable";
224
+                    day.addEventListener('click', calendar.Options.EventClick.bind.apply(calendar.Options.EventClick, [null].concat(z)) );
225
+                  }
226
+              }else{
227
+                a.addEventListener('click', calendar.Options.EventClick.bind(null, z) );
228
+                if(calendar.Options.EventTargetWholeDay){
229
+                  day.className += " clickable";
230
+                  day.addEventListener('click', calendar.Options.EventClick.bind(null, z) );
231
+                }
232
+              }
233
+            }else{
234
+              a.addEventListener('click', calendar.Model[n].Link);
235
+              if(calendar.Options.EventTargetWholeDay){
236
+                day.className += " clickable";
237
+                day.addEventListener('click', calendar.Model[n].Link);
238
+              }
239
+            }
240
+            title.appendChild(a);
241
+          }else{
242
+            title.innerHTML += '<a href="' + calendar.Model[n].Link + '">' + calendar.Model[n].Title + '</a>';
243
+          }
244
+          number.appendChild(title);
245
+        }
246
+      }
247
+      day.appendChild(number);
248
+      // If Today..
249
+      if((i+1) == calendar.Today.getDate() && calendar.Selected.Month == calendar.Today.Month && calendar.Selected.Year == calendar.Today.Year){
250
+        day.className += " today";
251
+      }
252
+      days.appendChild(day);
253
+    }
254
+    // Next Month's Days
255
+    // Always same amount of days in calander
256
+    var extraDays = 13;
257
+    if(days.children.length>35){extraDays = 6;}
258
+    else if(days.children.length<29){extraDays = 20;}
259
+
260
+    for(var i = 0; i < (extraDays - calendar.Selected.LastDay); i++){
261
+      var day = document.createElement('li');
262
+      day.className += "cld-day nextMonth";
263
+      //Disabled Days
264
+      var d = (i + calendar.Selected.LastDay + 1)%7;
265
+      for(var q = 0; q < calendar.Options.DisabledDays.length; q++){
266
+        if(d==calendar.Options.DisabledDays[q]){
267
+          day.className += " disableDay";
268
+        }
269
+      }
270
+
271
+      var number = DayNumber(i+1);
272
+      day.appendChild(number);
273
+
274
+      days.appendChild(day);
275
+    }
276
+    mainSection.appendChild(days);
277
+  }
278
+  if(calendar.Options.Color){
279
+    mainSection.innerHTML += '<style>.cld-main{color:' + calendar.Options.Color + ';}</style>';
280
+  }
281
+  if(calendar.Options.LinkColor){
282
+    mainSection.innerHTML += '<style>.cld-title a{color:' + calendar.Options.LinkColor + ';}</style>';
283
+  }
284
+  element.appendChild(mainSection);
285
+
286
+  if(calendar.Options.NavShow && calendar.Options.NavVertical){
287
+    AddSidebar();
288
+  }
289
+  if(calendar.Options.DateTimeShow){
290
+    AddDateTime();
291
+  }
292
+  AddLabels();
293
+  AddDays();
294
+}
295
+
296
+function caleandar(el, data, settings){
297
+  var obj = new Calendar(data, settings);
298
+  createCalendar(obj, el);
299
+}

+ 1
- 0
Calendars/calendar_files/js/caleandar.min.js
File diff suppressed because it is too large
View File


+ 8
- 0
Calendars/calendar_files/js/events.js View File

@@ -0,0 +1,8 @@
1
+var events = [
2
+  {'Date': new Date(2019, 9, 7), 'Title': 'Doctor appointment at 3:25pm.'},
3
+  {'Date': new Date(2019, 9, 18), 'Title': 'New Garfield movie comes out!', 'Link': 'https://garfield.com'},
4
+  {'Date': new Date(2019, 9, 27), 'Title': '25 year anniversary', 'Link': 'https://www.google.com.au/#q=anniversary+gifts'},
5
+];
6
+var settings = {};
7
+var element = document.getElementById('caleandar');
8
+caleandar(element, events, settings);

+ 1466
- 0
Calendars/onsenui/CHANGELOG.md
File diff suppressed because it is too large
View File


+ 202
- 0
Calendars/onsenui/LICENSE View File

@@ -0,0 +1,202 @@
1
+
2
+                                 Apache License
3
+                           Version 2.0, January 2004
4
+                        http://www.apache.org/licenses/
5
+
6
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
7
+
8
+   1. Definitions.
9
+
10
+      "License" shall mean the terms and conditions for use, reproduction,
11
+      and distribution as defined by Sections 1 through 9 of this document.
12
+
13
+      "Licensor" shall mean the copyright owner or entity authorized by
14
+      the copyright owner that is granting the License.
15
+
16
+      "Legal Entity" shall mean the union of the acting entity and all
17
+      other entities that control, are controlled by, or are under common
18
+      control with that entity. For the purposes of this definition,
19
+      "control" means (i) the power, direct or indirect, to cause the
20
+      direction or management of such entity, whether by contract or
21
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
22
+      outstanding shares, or (iii) beneficial ownership of such entity.
23
+
24
+      "You" (or "Your") shall mean an individual or Legal Entity
25
+      exercising permissions granted by this License.
26
+
27
+      "Source" form shall mean the preferred form for making modifications,
28
+      including but not limited to software source code, documentation
29
+      source, and configuration files.
30
+
31
+      "Object" form shall mean any form resulting from mechanical
32
+      transformation or translation of a Source form, including but
33
+      not limited to compiled object code, generated documentation,
34
+      and conversions to other media types.
35
+
36
+      "Work" shall mean the work of authorship, whether in Source or
37
+      Object form, made available under the License, as indicated by a
38
+      copyright notice that is included in or attached to the work
39
+      (an example is provided in the Appendix below).
40
+
41
+      "Derivative Works" shall mean any work, whether in Source or Object
42
+      form, that is based on (or derived from) the Work and for which the
43
+      editorial revisions, annotations, elaborations, or other modifications
44
+      represent, as a whole, an original work of authorship. For the purposes
45
+      of this License, Derivative Works shall not include works that remain
46
+      separable from, or merely link (or bind by name) to the interfaces of,
47
+      the Work and Derivative Works thereof.
48
+
49
+      "Contribution" shall mean any work of authorship, including
50
+      the original version of the Work and any modifications or additions
51
+      to that Work or Derivative Works thereof, that is intentionally
52
+      submitted to Licensor for inclusion in the Work by the copyright owner
53
+      or by an individual or Legal Entity authorized to submit on behalf of
54
+      the copyright owner. For the purposes of this definition, "submitted"
55
+      means any form of electronic, verbal, or written communication sent
56
+      to the Licensor or its representatives, including but not limited to
57
+      communication on electronic mailing lists, source code control systems,
58
+      and issue tracking systems that are managed by, or on behalf of, the
59
+      Licensor for the purpose of discussing and improving the Work, but
60
+      excluding communication that is conspicuously marked or otherwise
61
+      designated in writing by the copyright owner as "Not a Contribution."
62
+
63
+      "Contributor" shall mean Licensor and any individual or Legal Entity
64
+      on behalf of whom a Contribution has been received by Licensor and
65
+      subsequently incorporated within the Work.
66
+
67
+   2. Grant of Copyright License. Subject to the terms and conditions of
68
+      this License, each Contributor hereby grants to You a perpetual,
69
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
70
+      copyright license to reproduce, prepare Derivative Works of,
71
+      publicly display, publicly perform, sublicense, and distribute the
72
+      Work and such Derivative Works in Source or Object form.
73
+
74
+   3. Grant of Patent License. Subject to the terms and conditions of
75
+      this License, each Contributor hereby grants to You a perpetual,
76
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
77
+      (except as stated in this section) patent license to make, have made,
78
+      use, offer to sell, sell, import, and otherwise transfer the Work,
79
+      where such license applies only to those patent claims licensable
80
+      by such Contributor that are necessarily infringed by their
81
+      Contribution(s) alone or by combination of their Contribution(s)
82
+      with the Work to which such Contribution(s) was submitted. If You
83
+      institute patent litigation against any entity (including a
84
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
85
+      or a Contribution incorporated within the Work constitutes direct
86
+      or contributory patent infringement, then any patent licenses
87
+      granted to You under this License for that Work shall terminate
88
+      as of the date such litigation is filed.
89
+
90
+   4. Redistribution. You may reproduce and distribute copies of the
91
+      Work or Derivative Works thereof in any medium, with or without
92
+      modifications, and in Source or Object form, provided that You
93
+      meet the following conditions:
94
+
95
+      (a) You must give any other recipients of the Work or
96
+          Derivative Works a copy of this License; and
97
+
98
+      (b) You must cause any modified files to carry prominent notices
99
+          stating that You changed the files; and
100
+
101
+      (c) You must retain, in the Source form of any Derivative Works
102
+          that You distribute, all copyright, patent, trademark, and
103
+          attribution notices from the Source form of the Work,
104
+          excluding those notices that do not pertain to any part of
105
+          the Derivative Works; and
106
+
107
+      (d) If the Work includes a "NOTICE" text file as part of its
108
+          distribution, then any Derivative Works that You distribute must
109
+          include a readable copy of the attribution notices contained
110
+          within such NOTICE file, excluding those notices that do not
111
+          pertain to any part of the Derivative Works, in at least one
112
+          of the following places: within a NOTICE text file distributed
113
+          as part of the Derivative Works; within the Source form or
114
+          documentation, if provided along with the Derivative Works; or,
115
+          within a display generated by the Derivative Works, if and
116
+          wherever such third-party notices normally appear. The contents
117
+          of the NOTICE file are for informational purposes only and
118
+          do not modify the License. You may add Your own attribution
119
+          notices within Derivative Works that You distribute, alongside
120
+          or as an addendum to the NOTICE text from the Work, provided
121
+          that such additional attribution notices cannot be construed
122
+          as modifying the License.
123
+
124
+      You may add Your own copyright statement to Your modifications and
125
+      may provide additional or different license terms and conditions
126
+      for use, reproduction, or distribution of Your modifications, or
127
+      for any such Derivative Works as a whole, provided Your use,
128
+      reproduction, and distribution of the Work otherwise complies with
129
+      the conditions stated in this License.
130
+
131
+   5. Submission of Contributions. Unless You explicitly state otherwise,
132
+      any Contribution intentionally submitted for inclusion in the Work
133
+      by You to the Licensor shall be under the terms and conditions of
134
+      this License, without any additional terms or conditions.
135
+      Notwithstanding the above, nothing herein shall supersede or modify
136
+      the terms of any separate license agreement you may have executed
137
+      with Licensor regarding such Contributions.
138
+
139
+   6. Trademarks. This License does not grant permission to use the trade
140
+      names, trademarks, service marks, or product names of the Licensor,
141
+      except as required for reasonable and customary use in describing the
142
+      origin of the Work and reproducing the content of the NOTICE file.
143
+
144
+   7. Disclaimer of Warranty. Unless required by applicable law or
145
+      agreed to in writing, Licensor provides the Work (and each
146
+      Contributor provides its Contributions) on an "AS IS" BASIS,
147
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
148
+      implied, including, without limitation, any warranties or conditions
149
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
150
+      PARTICULAR PURPOSE. You are solely responsible for determining the
151
+      appropriateness of using or redistributing the Work and assume any
152
+      risks associated with Your exercise of permissions under this License.
153
+
154
+   8. Limitation of Liability. In no event and under no legal theory,
155
+      whether in tort (including negligence), contract, or otherwise,
156
+      unless required by applicable law (such as deliberate and grossly
157
+      negligent acts) or agreed to in writing, shall any Contributor be
158
+      liable to You for damages, including any direct, indirect, special,
159
+      incidental, or consequential damages of any character arising as a
160
+      result of this License or out of the use or inability to use the
161
+      Work (including but not limited to damages for loss of goodwill,
162
+      work stoppage, computer failure or malfunction, or any and all
163
+      other commercial damages or losses), even if such Contributor
164
+      has been advised of the possibility of such damages.
165
+
166
+   9. Accepting Warranty or Additional Liability. While redistributing
167
+      the Work or Derivative Works thereof, You may choose to offer,
168
+      and charge a fee for, acceptance of support, warranty, indemnity,
169
+      or other liability obligations and/or rights consistent with this
170
+      License. However, in accepting such obligations, You may act only
171
+      on Your own behalf and on Your sole responsibility, not on behalf
172
+      of any other Contributor, and only if You agree to indemnify,
173
+      defend, and hold each Contributor harmless for any liability
174
+      incurred by, or claims asserted against, such Contributor by reason
175
+      of your accepting any such warranty or additional liability.
176
+
177
+   END OF TERMS AND CONDITIONS
178
+
179
+   APPENDIX: How to apply the Apache License to your work.
180
+
181
+      To apply the Apache License to your work, attach the following
182
+      boilerplate notice, with the fields enclosed by brackets "[]"
183
+      replaced with your own identifying information. (Don't include
184
+      the brackets!)  The text should be enclosed in the appropriate
185
+      comment syntax for the file format. We also recommend that a
186
+      file or class name and description of purpose be included on the
187
+      same "printed page" as the copyright notice for easier
188
+      identification within third-party archives.
189
+
190
+   Copyright 2013-2018 ASIAL CORPORATION
191
+
192
+   Licensed under the Apache License, Version 2.0 (the "License");
193
+   you may not use this file except in compliance with the License.
194
+   You may obtain a copy of the License at
195
+
196
+       http://www.apache.org/licenses/LICENSE-2.0
197
+
198
+   Unless required by applicable law or agreed to in writing, software
199
+   distributed under the License is distributed on an "AS IS" BASIS,
200
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
201
+   See the License for the specific language governing permissions and
202
+   limitations under the License.

+ 110
- 0
Calendars/onsenui/README.md View File

@@ -0,0 +1,110 @@
1
+
2
+<p align="center"><a href="https://onsen.io/" target="_blank"><img width="140" src="https://onsenui.github.io/art/logos/onsenui-logo-1.png"></a></p>
3
+
4
+<p align="center">
5
+  <a href="https://community.onsen.io/"><img src="https://img.shields.io/badge/forum-onsen--ui-FF412D.svg" alt="Forum"></a>
6
+  <a href="https://github.com/OnsenUI/OnsenUI/blob/master/core/src/onsenui.d.ts"><img src="http://definitelytyped.org/badges/standard.svg" alt="TypeScript definitions"></a>
7
+  <br>
8
+  <a href="https://circleci.com/gh/OnsenUI/OnsenUI"><img src="https://circleci.com/gh/OnsenUI/OnsenUI.svg?style=shield" alt="Circle CI"></a>
9
+  <a href="https://badge.fury.io/js/onsenui"><img src="https://badge.fury.io/js/onsenui.svg" alt="NPM version"></a>
10
+  <a href="https://cdnjs.com/libraries/onsen"><img src="https://img.shields.io/cdnjs/v/onsen.svg" alt="CDNJS"></a>
11
+</p>
12
+
13
+# [Onsen UI](https://onsen.io/) - Cross-Platform Hybrid App and PWA Framework
14
+
15
+Onsen UI is an <strong>open source</strong> framework that makes it easy to create native-feeling Progressive Web Apps (PWAs) and hybrid apps.
16
+
17
+The core library is written in <strong>pure Javascript</strong> (on top of <a href="http://webcomponents.org/">Web Components</a>) and is <strong>framework agnostic</strong>, which means you can use it with your favorite framework and its tools. We provide some extra binding packages to make it easy to use Onsen UI's API with many popular frameworks:
18
+
19
+<table>
20
+  <tbody><tr>
21
+    <td align="center" width="150"><a href="https://onsen.io/react"><img src="https://onsen.io/images/common/icn_react_top.svg" height="40"><br><strong>React</strong></a></td>
22
+    <td align="center" width="150"><a href="https://onsen.io/angular2"><img src="https://onsen.io/images/common/icn_angular2_top.svg" height="40"><br><strong>Angular 2+</strong></a><br></td>
23
+    <td align="center" width="150"><a href="https://onsen.io/vue"><img src="https://onsen.io/images/common/icn_vuejs_top.svg" height="40"><br><strong>Vue</strong></a><br></td>
24
+    <td align="center" width="150"><a href="https://onsen.io/v2/docs/guide/angular1/index.html"><img src="https://onsen.io/images/common/icn_angular1_top.svg" height="40"><br><strong>AngularJS 1.x</strong></a><br></td>
25
+  </tr></tbody>
26
+</table>
27
+
28
+Some other frameworks are supported by __community__ packages (not tested or implemented by the core team): [Aurelia](https://www.npmjs.com/package/aurelia-onsenui), [EmberJS](https://www.npmjs.com/package/ember-onsenui).
29
+
30
+Both <strong>flat (iOS) and Material (Android) designs</strong> are included. The components are optionally auto-styled based on the platform, which makes it possible to support both iOS and Android with the <strong>same source code</strong>.
31
+
32
+
33
+## Getting started
34
+We have several resources to help you get started creating hybrid apps and PWAs with Onsen UI:
35
+
36
+* __The official docs__: We provide guides and references for all of the components and bindings, as well as how to publish your app. These are our _Getting Started_ guides:
37
+  * [Core guide (no framework)](https://onsen.io/v2/guide)
38
+  * [Vue guide](https://onsen.io/v2/guide/vue/)
39
+  * [React guide](https://onsen.io/v2/guide/react/)
40
+  * [Angular 2+ guide](https://onsen.io/v2/guide/angular2/)
41
+  * [AngularJS 1.x guide](https://onsen.io/v2/guide/angular1/)
42
+  * [jQuery guide](https://onsen.io/v2/guide/jquery/)
43
+  * [Creating an Onsen UI hybrid app using Cordova](https://onsen.io/v2/guide/hybrid/cordova.html)
44
+  * [Progressive Web Apps (PWAs) with Onsen UI](https://onsen.io/v2/guide/pwa/intro.html)
45
+* __Components overview__: a [list of included CSS components](https://onsen.io/v2/docs/css.html) in both flat and Material Design. Note that these components are just pure and performant CSS without JavaScript behavior. Some extra details (such as dragging or ripple effect) are added by Onsen UI custom elements.
46
+* __Playground__: an [interactive Onsen UI tutorial](https://onsen.io/playground/) where you can learn how to use Onsen UI and play around with the components.
47
+* __Blog__: there are lots of great tutorials and guides published in our [official Onsen UI blog](https://onsen.io/blog/categories/tutorial.html) and we are adding new content regularly.
48
+* __Support__: if you are having trouble using some component the best place to get help is the [Onsen UI Forum](https://community.onsen.io/) or the community-run [Discord Chat](https://discord.gg/JWhBbnE). We are also available to answer short questions on Twitter at [@Onsen_UI](https://twitter.com/Onsen_UI).
49
+
50
+## Get Onsen UI
51
+
52
+### __Download the latest released version__
53
+We have a [distribution repository](https://github.com/OnsenUI/OnsenUI-dist/releases) with changelog. Onsen UI is also available in __npm__, __bower__ and __jspm__. Example:
54
+
55
+```bash
56
+npm install onsenui
57
+```
58
+
59
+This downloads the core Onsen UI library. To install bindings, you can install `react-onsenui`, `vue-onsenui`, `ngx-onsenui` or `angularjs-onsenui`.
60
+
61
+### __Download or request from a CDN__
62
+You can also take the necessary files from a CDN. Some of the options are [unpkg](https://unpkg.com/onsenui/), [jsDelivr](https://www.jsdelivr.com/package/npm/onsenui) and [cdnjs](https://cdnjs.com/libraries/onsen).
63
+
64
+### __Get the latest development build__
65
+Optionally, you can download the [latest development build here](https://onsenui.github.io/latest-build). Be careful, usually everything there is already tested but it might be unstable sometimes.
66
+
67
+## Examples with source code
68
+There are lots of sample applications written using Onsen UI. __[Here are some examples](https://onsen.io/samples) with source code and tutorials__ to give you an idea of what kind of apps you can create.
69
+
70
+<p align="center">
71
+  <a href="https://argelius.github.io/angular2-onsenui-pokedex/" target="_blank"><img src="https://onsen.io/images/samples/pokedex-pikachu.png"></a>
72
+  <a href="http://argelius.github.io/react-onsenui-redux-weather/demo.html" target="_blank"><img src="https://onsen.io/images/samples/react-redux-weather.png"></a>
73
+  <a href="https://frandiox.github.io/OnsenUI-YouTube" target="_blank"><img src="https://onsen.io/images/samples/youtube.png"></a>
74
+</p>
75
+
76
+## Onsen UI ecosystem
77
+Because sometimes a UI framework may not be enough to make hybrid app development easy, Onsen UI comes with a __complete ecosystem__ of well integrated tools. Meet [__Monaca__](https://monaca.io/).
78
+
79
+<p align="center"><a href="https://monaca.io" target="_blank"><img width="300"src="https://onsenui.github.io/art/logos/monaca-logo-2.png"></a></p>
80
+
81
+Developed by the Onsen UI team, __Monaca__ is a toolkit that makes hybrid mobile app development with __PhoneGap / Cordova__ simple and easy: Onsen UI Cordova templates, debugging suite, push notifications, remote build, back-end solutions, encryption, version control, continuous integration and more. Furthermore, it provides multiple development environments with everything already configured and ready to go:
82
+
83
+<p align="center">
84
+  <a href="https://monaca.io/cloud.html"><strong>Cloud IDE</strong></a> -
85
+  <a href="https://monaca.io/cli.html"><strong>Command Line Interface</strong></a> -
86
+  <a href="https://monaca.io/localkit.html"><strong>Localkit GUI</strong></a>
87
+</p>
88
+
89
+Example with __CLI__:
90
+
91
+```
92
+$ [sudo] npm -g install monaca
93
+$ monaca create helloworld # And choose the starter template
94
+$ monaca preview # Preview on the browser
95
+$ monaca debug # Preview on a real device
96
+$ monaca remote build --browser # Production build on the cloud
97
+```
98
+
99
+See the [Onsen UI Getting Started Page](http://onsen.io/v2/guide/) for more information.
100
+
101
+## Browser Support
102
+Onsen UI is tested to work with the following browsers and mobile OS.
103
+
104
+ * Android 4.4.4+
105
+ * iOS 9+
106
+ * Chrome
107
+ * Safari
108
+
109
+## Contribution
110
+We welcome your contribution, no matter how big or small! Please have a look at the [contribution guide](https://github.com/OnsenUI/OnsenUI/blob/master/CONTRIBUTING.md) for details about project structure, development environment, test suite, code style, etc. All the version updates are mentioned in the [changelog](https://github.com/OnsenUI/OnsenUI/blob/master/CHANGELOG.md).

+ 26
- 0
Calendars/onsenui/bower.json View File

@@ -0,0 +1,26 @@
1
+{
2
+  "name": "onsenui",
3
+  "homepage": "https://onsen.io",
4
+  "authors": [
5
+    "Kruy Vanna <kruyvanna@gmail.com>",
6
+    "Mitsunori KUBOTA <anatoo.jp@gmail.com>"
7
+  ],
8
+  "description": "Web Component inspired HTML5 UI framework for building modern mobile application",
9
+  "main": [
10
+    "js/onsenui.js",
11
+    "css/onsenui.css",
12
+    "css/onsen-css-components.css"
13
+  ],
14
+  "keywords": [
15
+    "onsenui",
16
+    "angular",
17
+    "html5",
18
+    "cordova",
19
+    "phonegap",
20
+    "web",
21
+    "component",
22
+    "monaca"
23
+  ],
24
+  "dependencies": {},
25
+  "license": "Apache License, Version 2.0"
26
+}

+ 33
- 0
Calendars/onsenui/css-components-src/README.md View File

@@ -0,0 +1,33 @@
1
+# Onsen CSS Components
2
+
3
+Onsen CSS Components is CSS components for Cordova Apps.
4
+
5
+![Screenshot](./misc/screenshot-01.png)
6
+![Screenshot](./misc/screenshot-02.png)
7
+
8
+## How to Build
9
+
10
+This CSS components is built by PostCSS + cssnext. You can build with following commands.
11
+
12
+```
13
+$ yarn install --pure-lockfile
14
+$ yarn run build
15
+```
16
+
17
+## How to Customize CSS Components
18
+
19
+Execute the following command.
20
+
21
+```
22
+$ yarn install --pure-lockfile
23
+$ yarn run serve
24
+```
25
+
26
+When you open `http://localhost:4321/` in the browser, a preview of the CSS components is displayed.
27
+
28
+When you edit the cssnext files under the `src` directory, the cssnext files is automatically built into the CSS and the browser is reloaded. The built CSS file is located in `./build/onsen-css-components.css`.
29
+
30
+To customize theme colors, you can edit `./src/theme.css`. This file contains CSS variables for the theme colors.
31
+
32
+If you want to customize components' details, you can edit `./src/components/*.css`. These files contain actual rules for all CSS components. But these files may be changed significantly by minor version release.
33
+

+ 276
- 0
Calendars/onsenui/css-components-src/gulpfile.js View File

@@ -0,0 +1,276 @@
1
+const gulp = require('gulp');
2
+const pkg = require('./package.json');
3
+const corePkg = require('../package.json');
4
+const merge = require('event-stream').merge;
5
+const browserSync = require('browser-sync').create();
6
+const $ = require('gulp-load-plugins')();
7
+const eco = require('eco');
8
+const fs = require('fs');
9
+const ancss = require('@onsenui/ancss');
10
+const cssnextPlugin = require('postcss-cssnext');
11
+const reporter = require('postcss-reporter');
12
+const historyApiFallback = require('connect-history-api-fallback');
13
+const {rollup} = require('rollup');
14
+const babel = require('rollup-plugin-babel');
15
+const commonjs = require('rollup-plugin-commonjs');
16
+const glob = require('glob');
17
+const rimraf = require('rimraf');
18
+const path = require('path');
19
+const yaml = require('js-yaml');
20
+
21
+// Include these plugins outside $ to fix gulp-hub
22
+const plumber = require('gulp-plumber');
23
+const postcss = require('gulp-postcss');
24
+const stylelintPlugin = require('gulp-stylelint');
25
+
26
+const prefix = __dirname + '/../build/css/';
27
+const babelrc = Object.assign({}, corePkg.babel);
28
+babelrc.babelrc = babelrc.presets[0][1].modules = false;
29
+babelrc.exclude = 'node_modules/**';
30
+
31
+const cwdOption = {
32
+  cwd: __dirname // makes sure the correct relative path is used when tasks are run from main OnsenUI gulpfile
33
+};
34
+
35
+////////////////////////////////////////
36
+// build-css
37
+////////////////////////////////////////
38
+gulp.task('build-css', gulp.series(cssClean, stylelint, cssnext, cssmin));
39
+
40
+////////////////////////////////////////
41
+// build
42
+////////////////////////////////////////
43
+gulp.task('build', gulp.series('build-css', generatePreview));
44
+
45
+////////////////////////////////////////
46
+// stylelint
47
+////////////////////////////////////////
48
+function stylelint() {
49
+  return gulp.src([
50
+      './src/**/*.css',
51
+      '!./src/components/combination.css', // not following BEM
52
+      '!./src/iphonex-support/**/*.css' // not following BEM
53
+    ], cwdOption)
54
+    .pipe(stylelintPlugin({
55
+      failAfterError: false,
56
+      reporters: [{formatter: 'string', console: true}],
57
+      configFile: path.join(__dirname, 'stylelint.config.js') // uses css-components/stylelint.config.js even when run from main gulpfile
58
+    }));
59
+}
60
+
61
+////////////////////////////////////////
62
+// cssmin
63
+////////////////////////////////////////
64
+function cssmin() {
65
+  return gulp.src(prefix + '{*-,}onsen-css-components.css')
66
+    .pipe($.cssmin())
67
+    .pipe($.rename({suffix: '.min'}))
68
+    .pipe(gulp.dest('./build/'))
69
+    .pipe(gulp.dest(prefix));
70
+}
71
+
72
+////////////////////////////////////////
73
+// cssnext
74
+////////////////////////////////////////
75
+function cssnext() {
76
+  const plugins = [
77
+    require('postcss-import'),
78
+    require('postcss-base64')({
79
+      extensions: ['.svg'],
80
+      root: __dirname + '/src/components/'
81
+    }),
82
+    cssnextPlugin({
83
+      browsers: babelrc.presets[0][1].targets.browsers,
84
+    }),
85
+    reporter({
86
+      clearAllMessages: true,
87
+      clearReportedMessages: true,
88
+      throwError: false
89
+    })
90
+  ];
91
+
92
+  return gulp.src('src/{*-,}onsen-css-components.css', cwdOption)
93
+    //.pipe(plumber()) // this was causing the task to never complete with gulp 4, but why...?
94
+    .pipe(postcss(plugins))
95
+    .pipe(gulp.dest('./build/'))
96
+    .pipe(gulp.dest(prefix))
97
+    .pipe(browserSync.stream());
98
+}
99
+gulp.task('cssnext', gulp.series(stylelint, cssnext));
100
+
101
+function cssClean(done) {
102
+  rimraf.sync(__dirname + '/build/{*-,}onsen-css-components.css');
103
+  rimraf.sync(__dirname + '/build/{*-,}onsen-css-components.min.css');
104
+  rimraf.sync(prefix + '/{*-,}onsen-css-components.css');
105
+  rimraf.sync(prefix + '/{*-,}onsen-css-components.min.css');
106
+  done();
107
+}
108
+gulp.task('css-clean', cssClean);
109
+
110
+////////////////////////////////////////
111
+// generate-preview
112
+////////////////////////////////////////
113
+let lastMarkupToken = '';
114
+
115
+function generatePreview(done) {
116
+  const components = parseComponents();
117
+  const markupToken = identifyComponentsMarkup(components);
118
+
119
+  if (markupToken !== lastMarkupToken) {
120
+    gulp.series(previewAssets, previewJs, (done) => {
121
+      generate(components);
122
+      browserSync.reload();
123
+
124
+      lastMarkupToken = markupToken;
125
+      done();
126
+    })();
127
+    done();
128
+  } else {
129
+    lastMarkupToken = markupToken;
130
+    done();
131
+  }
132
+}
133
+
134
+function generatePreviewForce(done) {
135
+  generate(parseComponents());
136
+  browserSync.reload();
137
+  done();
138
+}
139
+exports['generate-preview-force'] = gulp.series(previewAssets, previewJs, generatePreviewForce);
140
+
141
+function generate(components) {
142
+  const template = fs.readFileSync(__dirname + '/previewer-src/index.html.eco', 'utf-8');
143
+  const patterns = yaml.safeLoadAll(fs.readFileSync(__dirname + '/patterns.yaml', 'utf-8'));
144
+  const themes = glob.sync(__dirname + '/build/{*-,}onsen-css-components.css').map(filePath => path.basename(filePath, '.css'));
145
+  const toJSON = JSON.stringify.bind(JSON);
146
+
147
+  fs.writeFileSync(__dirname + '/build/index.html', eco.render(template, {toJSON, components, themes, patterns}), 'utf-8');
148
+}
149
+
150
+function identifyComponentsMarkup(componentsJSON) {
151
+  const token = componentsJSON.map(component => {
152
+    return component.annotation.markup;
153
+  }).join('');
154
+
155
+  return token;
156
+}
157
+
158
+function parseComponents() {
159
+  const css = fs.readFileSync(__dirname + '/build/onsen-css-components.css', 'utf-8');
160
+  const components = ancss.parse(css, {detect: line => line.match(/^~/)});
161
+  return components || [];
162
+}
163
+
164
+////////////////////////////////////////
165
+// preview-assets
166
+////////////////////////////////////////
167
+function previewAssets() {
168
+  return gulp.src('previewer-src/*.{svg,css}')
169
+    .pipe(gulp.dest('./build/'));
170
+}
171
+
172
+////////////////////////////////////////
173
+// preview-js
174
+////////////////////////////////////////
175
+function previewJs() {
176
+  return rollup({
177
+    input: 'previewer-src/app.js',
178
+    plugins: [
179
+      commonjs,
180
+      babel(babelrc)
181
+    ]
182
+  })
183
+  .then(bundle => {
184
+    return bundle.write({
185
+      file: 'build/app.gen.js',
186
+      format: 'umd',
187
+      sourcemap: 'inline'
188
+    });
189
+  });
190
+}
191
+
192
+////////////////////////////////////////
193
+// reset-console
194
+////////////////////////////////////////
195
+function reset(done) {
196
+  process.stdout.write('\x1Bc');
197
+  done();
198
+}
199
+
200
+const outputDevServerInfo = (() => {
201
+  let defer = true;
202
+
203
+  return function () {
204
+    if (defer) {
205
+      setTimeout(() => {
206
+        output();
207
+        defer = true;
208
+      }, 60);
209
+      defer = false;
210
+    }
211
+  }
212
+
213
+  function output() {
214
+    const localUrl = browserSync.getOption('urls').get('local');
215
+    const externalUrl = browserSync.getOption('urls').get('external');
216
+
217
+    console.log('\nAccess URLs:');
218
+    console.log('     Local:', $.util.colors.magenta(localUrl));
219
+    console.log('  External:', $.util.colors.magenta(externalUrl));
220
+    console.log();
221
+
222
+    displayBuildCSSInfo();
223
+  }
224
+})();
225
+
226
+function displayBuildCSSInfo() {
227
+
228
+  console.log('Built CSS Files:')
229
+  getCSSPaths().forEach(cssPath => {
230
+    console.log('  ' + $.util.colors.magenta(cssPath));
231
+  });
232
+
233
+  function getCSSPaths() {
234
+    return glob.sync(__dirname + '/build/{*-,}onsen-css-components.css').map(cssPath => {
235
+      return '.' + path.sep + path.relative(__dirname, cssPath);
236
+    });
237
+  }
238
+}
239
+
240
+function getCSSPaths() {
241
+  return glob.sync(__dirname + '/build/{*-,}onsen-css-components.css').map(cssPath => {
242
+    return '.' + path.sep + path.relative(__dirname, cssPath);
243
+  });
244
+}
245
+
246
+////////////////////////////////////////
247
+// serve
248
+////////////////////////////////////////
249
+function serve(done) {
250
+  gulp.watch(['src/**/*.css'], () => {
251
+    reset();
252
+    gulp.series('build-css', 'generate-preview', outputDevServerInfo);
253
+  });
254
+
255
+  gulp.watch(['previewer-src/**', 'patterns.yaml'], () => {
256
+    reset();
257
+    gulp.series('generate-preview-force', outputDevServerInfo)
258
+  });
259
+
260
+  browserSync.emitter.on('init', outputDevServerInfo);
261
+
262
+  browserSync.init({
263
+    logLevel: 'silent',
264
+    ui: false,
265
+    port: 4321,
266
+    notify: false,
267
+    server: {
268
+      baseDir: __dirname + '/build',
269
+      middleware: [historyApiFallback()],
270
+    },
271
+    startPath: '/',
272
+    open: false
273
+  });
274
+}
275
+
276
+exports.serve = gulp.series('build', serve);

BIN
Calendars/onsenui/css-components-src/misc/screenshot-01.png View File


BIN
Calendars/onsenui/css-components-src/misc/screenshot-02.png View File


+ 48
- 0
Calendars/onsenui/css-components-src/package.json View File

@@ -0,0 +1,48 @@
1
+{
2
+  "name": "",
3
+  "version": "0.0.0",
4
+  "private": true,
5
+  "scripts": {
6
+    "build": "gulp build",
7
+    "serve": "gulp serve"
8
+  },
9
+  "dependencies": {
10
+    "browser-sync": "^2.18.6",
11
+    "eco": "^1.1.0-rc-3",
12
+    "event-stream": "3.3.4",
13
+    "gulp": "^4.0.0",
14
+    "gulp-cssmin": "^0.1.7",
15
+    "gulp-less": "^1.2.3",
16
+    "gulp-load-plugins": "^0.5.0",
17
+    "gulp-order": "^1.0.6",
18
+    "gulp-plumber": "^0.6.1",
19
+    "gulp-postcss": "^7.0.0",
20
+    "gulp-rename": "^1.2.2",
21
+    "gulp-shell": "^0.2.4",
22
+    "gulp-stylelint": "^3.9.0",
23
+    "gulp-stylus": "^1.0.0",
24
+    "gulp-util": "^2.2.14",
25
+    "immutable-css": "^1.1.2",
26
+    "postcss-base64": "^0.6.1",
27
+    "postcss-cssnext": "^3.0.2",
28
+    "postcss-import": "^9.1.0",
29
+    "postcss-reporter": "^3.0.0",
30
+    "rimraf": "^2.6.1"
31
+  },
32
+  "engines": {
33
+    "node": ">=0.10.0"
34
+  },
35
+  "devDependencies": {
36
+    "@onsenui/ancss": "^1.0.0",
37
+    "babel-core": "^6.25.0",
38
+    "babel-preset-env": "^1.6.1",
39
+    "babel-preset-stage-3": "^6.24.1",
40
+    "connect-history-api-fallback": "^1.3.0",
41
+    "glob": "^7.1.2",
42
+    "gulp-file": "^0.3.0",
43
+    "js-yaml": "^3.10.0",
44
+    "rollup": "^0.51.5",
45
+    "rollup-plugin-babel": "^3.0.2",
46
+    "rollup-plugin-commonjs": "^8.2.6"
47
+  }
48
+}

+ 376
- 0
Calendars/onsenui/css-components-src/patterns.yaml View File

@@ -0,0 +1,376 @@
1
+---
2
+name: Basic
3
+markup: |
4
+  <div class="page">
5
+    <div class="toolbar">
6
+      <div class="toolbar__left"><span class="toolbar-button">Label</span></div>
7
+      <div class="toolbar__center">Title</div>
8
+      <div class="toolbar__right"><span class="toolbar-button">Label</span></div>
9
+    </div>
10
+
11
+    <div>
12
+      <br>
13
+
14
+      <div class="list-title">Title</div>
15
+
16
+      <ul class="list">
17
+        <li class="list-item">
18
+          <div class="list-item__center">Item</div>
19
+        </li>
20
+        <li class="list-item">
21
+          <div class="list-item__center">Item</div>
22
+        </li>
23
+      </ul>
24
+
25
+      <br>
26
+
27
+      <ul class="list">
28
+        <li class="list-item">
29
+          <div class="list-item__center">
30
+            <div class="list-item__title">
31
+              Title
32
+            </div>
33
+            <div class="list-item__subtitle">
34
+              Subtitle
35
+            </div>
36
+          </div>
37
+        </li>
38
+        <li class="list-item">
39
+          <div class="list-item__center">
40
+            <div class="list-item__title">
41
+              Title
42
+            </div>
43
+            <div class="list-item__subtitle">
44
+              Subtitle
45
+            </div>
46
+          </div>
47
+        </li>
48
+      </ul>
49
+
50
+    </div>
51
+    <div class="bottom-bar">
52
+      <div class="bottom-bar__line-height" style="text-align:center">Label</div>
53
+    </div>
54
+  </div>
55
+---
56
+name: Material Basic
57
+markup: |
58
+  <div class="page page--material">
59
+    <div class="toolbar toolbar--material">
60
+      <div class="toolbar__left toolbar--material__left"></div>
61
+      <div class="toolbar__center toolbar--material__center">Title</div>
62
+      <div class="toolbar__right toolbar--material__right"></div>
63
+    </div>
64
+
65
+    <div>
66
+      <h3 class="list-title list-title--material">Title</h3>
67
+      <ul class="list list--material">
68
+        <li class="list-item list-item--material">
69
+          <div class="list-item__center list-item--material__center">Item</div>
70
+        </li>
71
+        <li class="list-item list-item--material">
72
+          <div class="list-item__center list-item--material__center">Item</div>
73
+        </li>
74
+      </ul>
75
+
76
+      <br>
77
+      <ul class="list list--material">
78
+        <li class="list-item list-item--material">
79
+          <div class="list-item__center list-item--material__center">
80
+            <div class="list-item__title list-item--material__title">Title</div>
81
+            <div class="list-item__subtitle list-item--material__subtitle">Subtitle</div>
82
+          </div>
83
+        </li>
84
+        <li class="list-item list-item--material">
85
+          <div class="list-item__center list-item--material__center">
86
+            <div class="list-item__title list-item--material__title">Title</div>
87
+            <div class="list-item__subtitle list-item--material__subtitle">Subtitle</div>
88
+          </div>
89
+        </li>
90
+      </ul>
91
+
92
+    </div>
93
+  </div>
94
+---
95
+name: Settings
96
+markup: |
97
+  <div class="page">
98
+    <div class="toolbar">
99
+      <div class="toolbar__left"><span class="toolbar-button">Label</span></div>
100
+      <div class="toolbar__center">Title</div>
101
+      <div class="toolbar__right"><span class="toolbar-button">Label</span></div>
102
+    </div>
103
+
104
+    <div>
105
+      <br>
106
+
107
+      <ul class="list">
108
+        <li class="list-item">
109
+          <div class="list-item__left">
110
+            <i class="ion-ios-volume-low" style="font-size: 28px"></i>
111
+          </div>
112
+          <div class="list-item__center">
113
+            <div class="range" style="width: 100%">
114
+              <input type="range" class="range__input">
115
+            </div>
116
+          </div>
117
+          <div class="list-item__right">
118
+            <i class="ion-ios-volume-high" style="font-size: 28px"></i>
119
+          </div>
120
+        </li>
121
+      </ul>
122
+
123
+      <br>
124
+
125
+      <ul class="list">
126
+        <li class="list-item">
127
+          <div class="list-item__center">
128
+            Label
129
+          </div>
130
+          <div class="list-item__right">
131
+            <label class="switch">
132
+              <input type="checkbox" class="switch__input" checked>
133
+              <div class="switch__toggle">
134
+                <div class="switch__handle"></div>
135
+              </div>
136
+            </label>
137
+          </div>
138
+        </li>
139
+      </ul>
140
+
141
+      <br>
142
+
143
+      <ul class="list">
144
+        <li class="list-item list-item--tappable">
145
+          <div class="list-item__left">
146
+            <label class="checkbox checkbox--noborder">
147
+              <input id="s1" type="checkbox" class="checkbox__input checkbox--noborder__input">
148
+              <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
149
+            </label>
150
+          </div>
151
+          <label for="s1" class="list-item__center">
152
+            Checkbox
153
+          </label>
154
+        </li>
155
+        <li class="list-item list-item--tappable">
156
+          <div class="list-item__left">
157
+            <label class="checkbox checkbox--noborder">
158
+              <input id="s2" type="checkbox" class="checkbox__input checkbox--noborder__input" checked>
159
+              <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
160
+            </label>
161
+          </div>
162
+          <label for="s2" class="list-item__center">
163
+            Checkbox
164
+          </label>
165
+        </li>
166
+      </ul>
167
+
168
+    </div>
169
+  </div>
170
+---
171
+name: Material Settings
172
+markup: |
173
+  <div class="page page--material">
174
+    <div class="toolbar toolbar--material">
175
+      <div class="toolbar__left toolbar--material__left"></div>
176
+      <div class="toolbar__center toolbar--material__center">Title</div>
177
+      <div class="toolbar__right toolbar--material__right"></div>
178
+    </div>
179
+
180
+    <div>
181
+      
182
+      <br>
183
+
184
+      <ul class="list list--material">
185
+        <li class="list-item list-item--material">
186
+          <div class="list-item__left list-item--material__left" style="min-width: 0; width: 20px;">
187
+            <i class="ion-ios-volume-low" style="font-size: 28px"></i>
188
+          </div>
189
+          <div class="list-item__center list-item--material__center">
190
+            <div class="range range--material" style="width: 100%">
191
+              <input type="range" class="range__input range--material__input">
192
+            </div>
193
+          </div>
194
+          <div class="list-item__right list-item--material__right">
195
+            <i class="ion-ios-volume-high" style="font-size: 28px"></i>
196
+          </div>
197
+        </li>
198
+      </ul>
199
+
200
+      <br>
201
+
202
+      <ul class="list list--material">
203
+        <li class="list-item list-item--material">
204
+          <div class="list-item__left list-item--material__left">
205
+            Label
206
+          </div>
207
+          <div class="list-item__center list-item--material__center">
208
+          </div>
209
+          <div class="list-item__right list-item--material__right">
210
+            <label class="switch switch--material">
211
+              <input type="checkbox" class="switch__input switch--material__input" checked>
212
+              <div class="switch__toggle switch--material__toggle">
213
+                <div class="switch__handle switch--material__handle"></div>
214
+              </div>
215
+            </label>
216
+          </div>
217
+        </li>
218
+      </ul>
219
+
220
+      <br>
221
+
222
+      <ul class="list list--material">
223
+        <li class="list-item list-item--material">
224
+          <div class="list-item__left list-item--material__left">
225
+            <label class="checkbox checkbox--material">
226
+              <input type="checkbox" id="checkbox3" class="checkbox__input checkbox--material__input">
227
+              <div class="checkbox__checkmark checkbox--material__checkmark"></div>
228
+            </label>
229
+          </div>
230
+
231
+          <label for="checkbox3" class="list-item__center list-item--material__center">
232
+            <div class="list-item__title list-item--material__title">Checkbox</div>
233
+          </label>
234
+        </li>
235
+
236
+        <li class="list-item list-item--material">
237
+          <div class="list-item__left list-item--material__left">
238
+            <label class="checkbox checkbox--material">
239
+              <input type="checkbox" id="checkbox4" class="checkbox__input checkbox--material__input" checked="checked">
240
+              <div class="checkbox__checkmark checkbox--material__checkmark"></div>
241
+            </label>
242
+          </div>
243
+
244
+          <label for="checkbox4" class="list-item__center list-item--material__center">
245
+            <div class="list-item__title list-item--material__title">Checkbox</div>
246
+          </label>
247
+        </li>
248
+
249
+      </ul>
250
+
251
+    </div>
252
+  </div>
253
+---
254
+name: Tabbar
255
+markup: |
256
+  <div class="page">
257
+    <div class="toolbar">
258
+      <div class="toolbar__left"></div>
259
+      <div class="toolbar__center">Title</div>
260
+      <div class="toolbar__right"></div>
261
+    </div>
262
+
263
+    <div class="tabbar">
264
+      <label class="tabbar__item">
265
+        <input type="radio" name="tabbar-a" checked="checked">
266
+        <button class="tabbar__button">
267
+          <i class="tabbar__icon ion-record"></i>
268
+          <div class="tabbar__label">Label</div>
269
+        </button>
270
+      </label>
271
+
272
+      <label class="tabbar__item">
273
+        <input type="radio" name="tabbar-a">
274
+        <button class="tabbar__button">
275
+          <i class="tabbar__icon ion-record"></i>
276
+          <div class="tabbar__label">Label</div>
277
+        </button>
278
+      </label>
279
+
280
+      <label class="tabbar__item">
281
+        <input type="radio" name="tabbar-a">
282
+        <button class="tabbar__button">
283
+          <i class="tabbar__icon ion-record"></i>
284
+          <div class="tabbar__label">Label</div>
285
+        </button>
286
+      </label>
287
+    </div>
288
+  </div>
289
+---
290
+name: Material Tabbar
291
+markup: |
292
+  <div class="page page--material">
293
+    <div class="toolbar toolbar--material">
294
+      <div class="toolbar__left toolbar--material__left"></div>
295
+      <div class="toolbar__center toolbar--material__center">Title</div>
296
+      <div class="toolbar__right toolbar--material__right"></div>
297
+    </div>
298
+
299
+    <div class="tabbar tabbar--material tabbar--top">
300
+      <label class="tabbar__item tabbar--material__item">
301
+        <input type="radio" name="material-tabbar" checked="checked">
302
+        <button class="tabbar__button tabbar--material__button">
303
+          <i class="tabbar__icon tabbar--material__icon ion-record"></i>
304
+          <div class="tabbar__label tabbar--material__label">Label</div>
305
+        </button>
306
+      </label>
307
+
308
+      <label class="tabbar__item tabbar--material__item">
309
+        <input type="radio" name="material-tabbar" checked="checked">
310
+        <button class="tabbar__button tabbar--material__button">
311
+          <i class="tabbar__icon tabbar--material__icon ion-record"></i>
312
+          <div class="tabbar__label tabbar--material__label">Label</div>
313
+        </button>
314
+      </label>
315
+
316
+      <label class="tabbar__item tabbar--material__item">
317
+        <input type="radio" name="material-tabbar" checked="checked">
318
+        <button class="tabbar__button tabbar--material__button">
319
+          <i class="tabbar__icon tabbar--material__icon ion-record"></i>
320
+          <div class="tabbar__label tabbar--material__label">Label</div>
321
+        </button>
322
+      </label>
323
+    </div>
324
+  </div>
325
+---
326
+name: Alert Dialog
327
+markup: |
328
+  <div class="page">
329
+    <div class="toolbar">
330
+      <div class="toolbar__left"><span class="toolbar-button">Label</span></div>
331
+      <div class="toolbar__center">Title</div>
332
+      <div class="toolbar__right"><span class="toolbar-button">Label</span></div>
333
+    </div>
334
+    <div></div>
335
+  </div>
336
+  <div class="alert-dialog-mask"></div>
337
+  <div class="alert-dialog">
338
+    <div class="alert-dialog-container">
339
+      <div class="alert-dialog-title">Alert</div>
340
+
341
+      <div class="alert-dialog-content">
342
+        Hello World!
343
+      </div>
344
+
345
+      <div class="alert-dialog-footer">
346
+        <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
347
+      </div>
348
+    </div>
349
+  </div>
350
+---
351
+name: Material Alert Dialog
352
+markup: |
353
+  <div class="page page--material">
354
+    <div class="toolbar toolbar--material">
355
+      <div class="toolbar__left toolbar--material__left"></div>
356
+      <div class="toolbar__center toolbar--material__center">Title</div>
357
+      <div class="toolbar__right toolbar--material__right"></div>
358
+    </div>
359
+    <div>
360
+    </div>
361
+  </div>
362
+  <div class="alert-dialog-mask alert-dialog-mask--material"></div>
363
+  <div class="alert-dialog alert-dialog--material">
364
+    <div class="alert-dialog-container alert-dialog-container--material">
365
+      <div class="alert-dialog-title alert-dialog-title--material">
366
+        Dialog title
367
+      </div>
368
+      <div class="alert-dialog-content alert-dialog-content--material">
369
+        Some dialog content.
370
+      </div>
371
+      <div class="alert-dialog-footer alert-dialog-footer--material">
372
+        <button class="alert-dialog-button alert-dialog-button--material">OK</button>
373
+        <button class="alert-dialog-button alert-dialog-button--material">CANCEL</button>
374
+      </div>
375
+    </div>
376
+  </div>

+ 64
- 0
Calendars/onsenui/css-components-src/previewer-src/app.js View File

@@ -0,0 +1,64 @@
1
+import {createAppPageComponent} from './components/app-page';
2
+
3
+function init() {
4
+  const components = loadComponents();
5
+  const categories = loadCategories(components);
6
+  const themes = loadThemes();
7
+  const patterns = loadPatterns();
8
+
9
+  window.components = components;
10
+  window.categories = categories;
11
+  window.themes = themes;
12
+  window.patterns = patterns;
13
+
14
+  const app = new Vue(createAppPageComponent({
15
+    components,
16
+    categories
17
+  }));
18
+};
19
+
20
+function loadCategories(components) {
21
+  const set = new Set();
22
+  components.forEach(component => {
23
+    set.add(component.category);
24
+  });
25
+
26
+  return [...set.values()].map(value => {
27
+    return {
28
+      name: value,
29
+      hash: value.toLowerCase().replace(/ /g, '_')
30
+    };
31
+  });
32
+}
33
+
34
+function loadComponents() {
35
+  return JSON.parse(document.querySelector('#data').getAttribute('data-components')).map(component => {
36
+    component = component.annotation;
37
+    component.id = component.name.toLowerCase().replace(/ /g, '_');
38
+    return component;
39
+  });
40
+}
41
+
42
+function loadThemes() {
43
+  const themes = JSON.parse(document.querySelector('#data').getAttribute('data-themes')).map(theme => {
44
+    return theme;
45
+  }).filter(theme => {
46
+    return theme !== 'onsen-css-components';
47
+  });
48
+
49
+  // デフォルトのテーマを先頭に追加
50
+  themes.unshift('onsen-css-components');
51
+
52
+  return themes;
53
+}
54
+
55
+function loadPatterns() {
56
+  return JSON.parse(document.querySelector('#data').getAttribute('data-patterns')).map(pattern => {
57
+    pattern.id = pattern.name.toLowerCase().replace(/ +/g, '_');
58
+
59
+    return pattern;
60
+  });
61
+}
62
+
63
+window.onload = init;
64
+

+ 190
- 0
Calendars/onsenui/css-components-src/previewer-src/components/app-page.js View File

@@ -0,0 +1,190 @@
1
+import {ComponentsPage} from './components-page';
2
+import {ComponentPage} from './component-page';
3
+import {CategoryPage} from './category-page';
4
+import {PatternsPage} from './patterns-page';
5
+import {PatternPage} from './pattern-page';
6
+import {NotFoundPage} from './notfound-page';
7
+import {getQueryParams, mergeQueryString, parseQueryString} from '../util';
8
+
9
+export const createAppPageComponent = ({components, categories}) => ({
10
+  el: '#app',
11
+  data: {
12
+    components,
13
+    categories
14
+  },
15
+  template: `
16
+    <div>
17
+      <div class="pv-side-navi">
18
+        <a class="pv-side-navi__title" href="/">
19
+          Onsen<br />
20
+          CSS<br />
21
+          Components
22
+        </a>
23
+
24
+        <div>
25
+          <a class="pv-side-navi__category" href="/">Components</a>
26
+          <div v-for="category in categories" class="pv-side-navi__category-item">
27
+            <a :href="'/categories/' + category.hash" class="pv-side-navi__item-link">{{category.name}}</a>
28
+          </div>
29
+          <a class="pv-side-navi__category" href="/patterns">Patterns</a>
30
+        </div>
31
+      </div>
32
+
33
+      <my-router :base-params="createParams()" />
34
+    </div>
35
+  `,
36
+  components: {
37
+    'my-router': createRouter()
38
+  },
39
+  methods: {
40
+    createParams() {
41
+      const params = {};
42
+
43
+      params.components = [].concat(this.components);
44
+      params.categories = [].concat(this.categories);
45
+
46
+      return params;
47
+    }
48
+  }
49
+});
50
+
51
+const createRouter = () => {
52
+  return {
53
+    props: ['baseParams'],
54
+    data: () => {
55
+      return {
56
+        component: ComponentsPage,
57
+        params: {},
58
+        query: getQueryParams()
59
+      };
60
+    },
61
+    created() {
62
+      // Load query string
63
+      page('*', (context, next) => {
64
+        requestAnimationFrame(() => {
65
+          context.query = parseQueryString(location.search.slice(0));
66
+          next();
67
+        });
68
+      });
69
+
70
+      page('*', (context, next) => {
71
+        document.body.scrollTop = document.body.scrollLeft = 0;
72
+
73
+        // Load selected theme css.
74
+        const theme = context.query.theme;
75
+        if (typeof theme === 'string' && theme !== '') {
76
+          document.querySelector('#theme-css').setAttribute('href', `/${theme}.css`);
77
+        } else {
78
+          document.querySelector('#theme-css').setAttribute('href', '/onsen-css-components.css');
79
+        }
80
+
81
+        next();
82
+      });
83
+
84
+      page('/components/:id', (context) => {
85
+        this.component = ComponentPage;
86
+        this.params = context.params;
87
+        this.query = context.query;
88
+      });
89
+
90
+      page('/categories/:id', (context) => {
91
+        this.component = CategoryPage;
92
+        this.params = context.params;
93
+        this.query = context.query;
94
+      });
95
+
96
+      page('/patterns', (context) => {
97
+        this.component = PatternsPage;
98
+        this.params = context.params;
99
+        this.query = context.query;
100
+      });
101
+
102
+      page('/patterns/:id', (context) => {
103
+        this.component = PatternPage;
104
+        this.params = context.params;
105
+        this.query = context.query;
106
+      });
107
+
108
+      page('/', (context) => {
109
+        this.component = ComponentsPage;
110
+        this.params = context.params;
111
+        this.query = context.query;
112
+      });
113
+
114
+      page('*', () => {
115
+        this.component = NotFoundPage;
116
+        this.params = context.params;
117
+        this.query = context.query;
118
+      });
119
+
120
+      page({click: false});
121
+    },
122
+    render(h) {
123
+      const props = {};
124
+
125
+      if (this.baseParams) {
126
+        for (let key in this.baseParams) {
127
+          if (this.baseParams.hasOwnProperty(key)) {
128
+            props[key] = this.baseParams[key];
129
+          }
130
+        }
131
+      }
132
+
133
+      for (let key in this.params) {
134
+        if (this.params.hasOwnProperty(key)) {
135
+          props[key] = this.params[key];
136
+        }
137
+      }
138
+
139
+      props.query = {};
140
+      for (let key in this.query) {
141
+        if (this.query.hasOwnProperty(key)) {
142
+          props.query[key] = this.query[key];
143
+        }
144
+      }
145
+
146
+      return h(this.component, {props});
147
+    }
148
+  };
149
+};
150
+
151
+document.body.addEventListener('click', e => {
152
+  if (e.metaKey || e.ctrlKey || e.shiftKey) {
153
+    return;
154
+  }
155
+
156
+  if (e.defaultPrevented) {
157
+    return;
158
+  }
159
+
160
+  // ensure link
161
+  let el = e.target;
162
+  while (el && 'A' !== el.nodeName) {
163
+    el = el.parentNode;
164
+  }
165
+  if (!el || 'A' !== el.nodeName) {
166
+    return;
167
+  }
168
+
169
+  // ensure non-hash for the same path
170
+  var link = el.getAttribute('href');
171
+  if (el.pathname === location.pathname && (el.hash || '#' === link)) {
172
+    return;
173
+  }
174
+
175
+  // Check for mailto: in the href
176
+  if (link && link.indexOf('mailto:') > -1) {
177
+    return;
178
+  }
179
+
180
+  // check target
181
+  if (el.target) {
182
+    return;
183
+  }
184
+  
185
+  // rebuild path
186
+  const path = el.pathname + mergeQueryString(el.search, location.search) + (el.hash || '');
187
+
188
+  e.preventDefault();
189
+  page.show(path);
190
+});

+ 36
- 0
Calendars/onsenui/css-components-src/previewer-src/components/category-page.js View File

@@ -0,0 +1,36 @@
1
+import {PreviewComponent} from './preview-component';
2
+import {ThemeSelect} from './theme-select';
3
+
4
+export const CategoryPage = {
5
+  props: ['components', 'categories', 'id', 'query'],
6
+  template: `
7
+    <div class="pv-content">
8
+
9
+      <h2 class="pv-content__header">{{category.name}} Components</h2>
10
+
11
+      <theme-select :theme="query.theme" :query="query" />
12
+
13
+      <div class="pv-components">
14
+        <css-component v-for="component in filterComponents()" :component="component" :key="component.id" />
15
+      </div>
16
+    </div>
17
+  `,
18
+  components: {
19
+    'css-component': PreviewComponent,
20
+    'theme-select': ThemeSelect
21
+  },
22
+  computed: {
23
+    category() {
24
+      return this.categories.filter(category => category.hash === this.id)[0];
25
+    }
26
+  },
27
+  methods: {
28
+    filterComponents() {
29
+      const category = this.category;
30
+      const components = this.components.filter(component => {
31
+        return component.category === category.name;
32
+      });
33
+      return components;
34
+    },
35
+  }
36
+};

+ 32
- 0
Calendars/onsenui/css-components-src/previewer-src/components/component-page.js View File

@@ -0,0 +1,32 @@
1
+import {ComponentExample} from './preview-component.js';
2
+import {ThemeSelect} from './theme-select';
3
+
4
+export const ComponentPage = {
5
+  props: ['components', 'id', 'query'],
6
+  components: {
7
+    'component-example': ComponentExample,
8
+    'theme-select': ThemeSelect
9
+  },
10
+  computed: {
11
+    component() {
12
+      return this.components.filter(component => component.id === this.id)[0];
13
+    }
14
+  },
15
+  template: `
16
+    <div class="pv-content" v-if="component">
17
+      <div>
18
+        <h2 class="pv-content__header">{{component.name}}</h2>
19
+
20
+        <theme-select :theme="query.theme" :query="query" />
21
+
22
+        <h3 class="pv-title-label">Example</h3>
23
+
24
+        <component-example :component="component" />
25
+
26
+        <h3 class="pv-title-label">HTML</h3>
27
+
28
+        <pre class="pv-markup">{{component.markup}}</pre>
29
+      </div>
30
+    </div>
31
+  `
32
+};

+ 68
- 0
Calendars/onsenui/css-components-src/previewer-src/components/components-page.js View File

@@ -0,0 +1,68 @@
1
+import {PreviewComponent} from './preview-component';
2
+import {PlatformSelect} from './platform-select';
3
+import {ThemeSelect} from './theme-select';
4
+
5
+export const ComponentsPage = {
6
+  props: ['components', 'categories', 'query'],
7
+  template: `
8
+    <div class="pv-content">
9
+      <platform-select :platform="query.platform" />
10
+
11
+      <h2 class="pv-content__header">Components</h2>
12
+
13
+      <theme-select :theme="query.theme" :query="query" />
14
+
15
+      <div class="pv-components">
16
+        <css-component v-for="component in filterComponents" :component="component" :key="component.id" />
17
+      </div>
18
+    </div>
19
+  `,
20
+  data: () => ({
21
+    themes: window.themes
22
+  }),
23
+  components: {
24
+    'css-component': PreviewComponent,
25
+    'platform-select': PlatformSelect,
26
+    'theme-select': ThemeSelect
27
+  },
28
+  computed: {
29
+    filterComponents() {
30
+      const components = this.components;
31
+      if (this.query.platform === 'android') {
32
+        return components.filter(function(component) {
33
+          return component.name.match(/Material/);
34
+        });
35
+      } else if (this.query.platform === 'ios') {
36
+        return components.filter(function(component) {
37
+          return !component.name.match(/Material/);
38
+        });
39
+      }
40
+      return components;
41
+    }
42
+  },
43
+  methods: {
44
+    download(event) {
45
+      const theme = this.$refs.themeSelect.value;
46
+      if (!theme) {
47
+        window.open('/onsen-css-components.css');
48
+      } else {
49
+        window.open(`${theme}.css`);
50
+      }
51
+      event.preventDefault();
52
+    },
53
+    changeTheme(event) {
54
+      const theme = event.target.value;
55
+      const suffix = this.query.platform ? `platform=${this.query.platform}` : '';
56
+
57
+      if (theme === 'onsen-css-components') {
58
+        if (suffix === '') {
59
+          page.show('/');
60
+        } else {
61
+          page.show(`?${suffix}`);
62
+        } 
63
+      } else {
64
+        page.show(`?theme=${theme}${suffix === '' ? '' : `&${suffix}`}`);
65
+      }
66
+    }
67
+  }
68
+};

+ 9
- 0
Calendars/onsenui/css-components-src/previewer-src/components/notfound-page.js View File

@@ -0,0 +1,9 @@
1
+
2
+export const NotFoundPage = {
3
+  props: ['components', 'categories', 'id', 'query'],
4
+  template: `
5
+    <div class="pv-content">
6
+      <h2 class="pv-content__header">Not Found</h2>
7
+    </div>
8
+  `,
9
+};

+ 33
- 0
Calendars/onsenui/css-components-src/previewer-src/components/pattern-page.js View File

@@ -0,0 +1,33 @@
1
+import {ThemeSelect} from './theme-select';
2
+
3
+export const PatternPage = {
4
+  props: ['id', 'query'],
5
+  data() {
6
+    const pattern = window.patterns.filter(pattern => {
7
+      return pattern.id == this.id;
8
+    })[0];
9
+
10
+    return {pattern};
11
+  },
12
+  components: {
13
+    'theme-select': ThemeSelect
14
+  },
15
+  template: `
16
+    <div class="pv-content">
17
+      <div v-if="pattern">
18
+        <h2 class="pv-content__header">{{pattern.name}} Pattern</h2>
19
+
20
+        <theme-select :theme="query.theme" :query="query" />
21
+
22
+        <h3 class="pv-title-label">Example</h3>
23
+        <div>
24
+          <div class="pv-pattern__example"><div style="position: static" v-html="pattern.markup"></div></div>
25
+        </div>
26
+
27
+        <h3 class="pv-title-label">HTML</h3>
28
+
29
+        <pre class="pv-markup">{{pattern.markup}}</pre>
30
+      </div>
31
+    </div>
32
+  `,
33
+};

+ 49
- 0
Calendars/onsenui/css-components-src/previewer-src/components/patterns-page.js View File

@@ -0,0 +1,49 @@
1
+import {PlatformSelect} from './platform-select';
2
+import {ThemeSelect} from './theme-select';
3
+
4
+export const PatternsPage = {
5
+  props: ['query'],
6
+  template: `
7
+    <div class="pv-content">
8
+      <platform-select :platform="query.platform" />
9
+
10
+      <h2 class="pv-content__header">Patterns</h2>
11
+
12
+      <theme-select :query="query" />
13
+
14
+      <div class="pv-patterns">
15
+        <div class="pv-pattern" v-for="pattern in filterPatterns">
16
+          <a class="pv-pattern__name pv-title-label" :href="'/patterns/' + pattern.id">{{pattern.name}}</a>
17
+          <div class="pv-pattern__example"><div v-html="pattern.markup" style="position: static"></div></div>
18
+        </div>
19
+      </div>
20
+    </div>
21
+  `,
22
+  data: () => ({
23
+    patterns: []
24
+  }),
25
+  components: {
26
+    'platform-select': PlatformSelect,
27
+    'theme-select': ThemeSelect
28
+  },
29
+  created() {
30
+    // Load patterns data.
31
+    this.patterns = window.patterns;
32
+  },
33
+  computed: {
34
+    filterPatterns() {
35
+      const patterns = this.patterns;
36
+
37
+      if (this.query.platform === 'android') {
38
+        return patterns.filter(function(pattern) {
39
+          return pattern.name.match(/Material/);
40
+        });
41
+      } else if (this.query.platform === 'ios') {
42
+        return patterns.filter(function(pattern) {
43
+          return !pattern.name.match(/Material/);
44
+        });
45
+      }
46
+      return patterns;
47
+    }
48
+  },
49
+};

+ 25
- 0
Calendars/onsenui/css-components-src/previewer-src/components/platform-select.js View File

@@ -0,0 +1,25 @@
1
+
2
+export const PlatformSelect = {
3
+  props: ['platform'],
4
+  template: `
5
+    <div class="pv-platform-select">
6
+      <a class="pv-platform-select__link" 
7
+        :class="{'pv-platform-select__link--active': this.platform !== 'ios' && this.platform !== 'android'}"
8
+        :href="getLocation() + '?platform=all'">All</a>
9
+
10
+      <a class="pv-platform-select__link" 
11
+        :class="{'pv-platform-select__link--active': this.platform === 'ios'}"
12
+        :href="getLocation() + '?platform=ios'">iOS</a>
13
+
14
+      <a class="pv-platform-select__link"
15
+        :class="{'pv-platform-select__link--active': this.platform === 'android'}"
16
+        :href="getLocation() + '?platform=android'">Android</a>
17
+
18
+    </div>
19
+  `,
20
+  methods: {
21
+    getLocation() {
22
+      return location.pathname;
23
+    }
24
+  }
25
+};

+ 30
- 0
Calendars/onsenui/css-components-src/previewer-src/components/preview-component.js View File

@@ -0,0 +1,30 @@
1
+
2
+export const ComponentExample = {
3
+  props: ['component'],
4
+  template: `
5
+      <div class="page pv-component-example" :class="{'page--material__background': isAndroid()}">
6
+        <!-- ontouchstart is a hack to enable :active CSS selector in iOS browsers. -->
7
+        <div style="width: 100%;" v-html="component.markup" ontouchstart=""></div>
8
+      </div>
9
+    `,
10
+  methods: {
11
+    isAndroid() {
12
+      return this.component.name.match(/Material/);
13
+    }
14
+  }
15
+};
16
+
17
+export const PreviewComponent = {
18
+  props: ['component'],
19
+  template: `
20
+      <div class="pv-component-preview">
21
+        <a class="pv-title-label" :href="'/components/' + component.id">{{component.name}}</a>
22
+
23
+        <component-example :component="component" />
24
+      </div>
25
+    `,
26
+  components: {
27
+    'component-example': ComponentExample
28
+  }
29
+};
30
+

+ 48
- 0
Calendars/onsenui/css-components-src/previewer-src/components/theme-select.js View File

@@ -0,0 +1,48 @@
1
+
2
+export const ThemeSelect = {
3
+  props: ['query'],
4
+  template: `
5
+    <div class="pv-built-css">
6
+      <select ref="themeSelect" class="pv-built-css__select" @change="changeTheme($event)">
7
+        <option v-for="theme in themes" :value="theme">{{theme}}.css</option>
8
+      </select>
9
+      <button class="pv-built-css__button" @click="download($event)">Download</button>
10
+    </div>
11
+  `,
12
+  data() {
13
+    return {
14
+      themes: window.themes
15
+    };
16
+  },
17
+  mounted() {
18
+    if (this.query.theme) {
19
+      this.$refs.themeSelect.value = this.query.theme;
20
+    }
21
+  },
22
+  methods: {
23
+    download(event) {
24
+      const theme = this.$refs.themeSelect.value;
25
+      if (!theme) {
26
+        window.open('/onsen-css-components.css');
27
+      } else {
28
+        window.open(`${theme}.css`);
29
+      }
30
+      event.preventDefault();
31
+    },
32
+
33
+    changeTheme(event) {
34
+      const theme = event.target.value;
35
+      const suffix = this.query.platform ? `platform=${this.query.platform}` : '';
36
+
37
+      if (theme === 'onsen-css-components') {
38
+        if (suffix === '') {
39
+          page.show(location.pathname);
40
+        } else {
41
+          page.show(`${location.pathname}?${suffix}`);
42
+        } 
43
+      } else {
44
+        page.show(`${location.pathname}?theme=${theme}${suffix === '' ? '' : `&${suffix}`}`);
45
+      }
46
+    }
47
+  }
48
+};

+ 32
- 0
Calendars/onsenui/css-components-src/previewer-src/index.html.eco View File

@@ -0,0 +1,32 @@
1
+<!DOCTYPE html>
2
+<html>
3
+<head>
4
+  <meta charset="utf-8">
5
+  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1,minimum-scale=1">
6
+  <base href="/">
7
+
8
+  <title>Onsen CSS Components</title>
9
+
10
+  <link rel="stylesheet" href="/onsen-css-components.css" id="theme-css" />
11
+  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/font_awesome/css/font-awesome.min.css">
12
+  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/ionicons/css/ionicons.min.css">
13
+  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/material-design-iconic-font/css/material-design-iconic-font.min.css">
14
+  <link rel="stylesheet" href="/style.css">
15
+
16
+
17
+</head>
18
+<body ontouchstart=""> <!-- Hack to activate :active CSS selector on iOS browsers.-->
19
+
20
+  <div id="app"></div>
21
+
22
+  <script src="https://unpkg.com/vue@2.4.2" async></script>
23
+  <script src="https://unpkg.com/page.js@4.13.3/page.js" async></script>
24
+  <script src="/app.gen.js" async></script>
25
+
26
+  <div id="data"
27
+    data-components="<%= @toJSON(@components) %>"
28
+    data-themes="<%= @toJSON(@themes) %>"
29
+    data-patterns="<%= @toJSON(@patterns) %>"></div>
30
+
31
+</body>
32
+</html>

+ 13
- 0
Calendars/onsenui/css-components-src/previewer-src/select-icon.svg View File

@@ -0,0 +1,13 @@
1
+<?xml version="1.0" encoding="UTF-8"?>
2
+<svg width="6px" height="8px" viewBox="0 0 6 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4
+    <title>select-icon</title>
5
+    <desc>Created with Sketch.</desc>
6
+    <defs></defs>
7
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8
+        <g id="select-icon" fill="#888888">
9
+            <polygon id="Triangle" points="3 0 6 3 0 3"></polygon>
10
+            <polygon id="Triangle" transform="translate(3.000000, 6.500000) scale(1, -1) translate(-3.000000, -6.500000) " points="3 5 6 8 0 8"></polygon>
11
+        </g>
12
+    </g>
13
+</svg>

+ 313
- 0
Calendars/onsenui/css-components-src/previewer-src/style.css View File

@@ -0,0 +1,313 @@
1
+
2
+body {
3
+  margin: 0;
4
+  padding: 0;
5
+  position: static;
6
+  background-color: white;
7
+  overflow: visible;
8
+  font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
9
+}
10
+
11
+* {
12
+  user-select: auto !important;
13
+}
14
+
15
+a,
16
+a:link,
17
+a:visited {
18
+  color: #999;
19
+  font-family: 'Helvetica Neue', 'Helevetica', sans-serif;
20
+}
21
+
22
+a:hover {
23
+  text-decoration: none;
24
+}
25
+
26
+.pv-content {
27
+  padding-left: 140px;
28
+  width: 100%;
29
+  box-sizing: border-box;
30
+}
31
+
32
+.pv-content__header {
33
+  font-size: 22px;
34
+  font-weight: 400;
35
+  font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
36
+  color: #444;
37
+  margin: 18px 0 6px 0;
38
+  padding: 0;
39
+}
40
+
41
+.pv-components {
42
+  clear: both;
43
+  display: flex;
44
+  flex-wrap: wrap;
45
+  margin: 0 0 50vh -10px;
46
+}
47
+
48
+.pv-component-preview {
49
+  display: block;
50
+  width: 350px;
51
+  box-sizing: border-box;
52
+  margin: 0px 10px 6px 10px;
53
+}
54
+
55
+.pv-component-preview__link,
56
+.pv-component-preview__link:link,
57
+.pv-component-preview__link:visited {
58
+  color: #333;
59
+  text-decoration: none;
60
+}
61
+
62
+.pv-component-preview__link:hover {
63
+  text-decoration: underline;
64
+}
65
+
66
+.pv-component-example {
67
+  height: 201px;
68
+  text-align: center;
69
+  position: relative;
70
+  z-index: 0;
71
+  display: flex;
72
+  justify-content: center;
73
+  align-items: center;
74
+  text-align: center;
75
+  border-radius: 3px;
76
+  width: 350px;
77
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
78
+}
79
+
80
+.pv-patterns {
81
+  clear: both;
82
+  display: flex;
83
+  flex-wrap: wrap;
84
+  margin: 0 0 50vh -10px;
85
+}
86
+
87
+.pv-pattern {
88
+  width: 320px;
89
+  box-sizing: border-box;
90
+  display: inline-block;
91
+  margin: 0px 10px 6px 10px;
92
+}
93
+
94
+.pv-pattern__example {
95
+  display: block;
96
+  position: relative;
97
+  width: 320px;
98
+  height: 568px;
99
+  border-radius: 2px;
100
+  border: 1px solid rgba(0, 0, 0, 0.08);
101
+  box-sizing: border-box;
102
+}
103
+
104
+.pv-title-label,
105
+.pv-title-label:link,
106
+.pv-title-label:visited,
107
+.pv-title-label:hover {
108
+  font-size: 12px;
109
+  color: #444;
110
+  font-weight: 500;
111
+  line-height: 1.4;
112
+  text-decoration: none;
113
+  margin: 12px 0 4px 0;
114
+  display: inline-block;
115
+}
116
+
117
+a.pv-title-label:hover {
118
+  color: #999;
119
+}