Skip to content

Commit 232dd42

Browse files
AktaneeAktanee
committed
4.1.2 - Templates HTML
Use promise on sass generation Use iframe to display HTML and add custom styling Add folder for data & add wip state of templates Add new SCSS to support show state Refactor to support correct variable & add interaction with new view Add templates page
1 parent 444098d commit 232dd42

45 files changed

Lines changed: 733 additions & 1629 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

app/scss/variables.json renamed to app/data/scss-variables.json

File renamed without changes.

‎app/data/template-html.json‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
[
2+
{
3+
"name": "Frameworks",
4+
"data": [
5+
{
6+
"name": "Empty",
7+
"slug": "empty",
8+
"description": "Nothing",
9+
"image_url": ""
10+
},
11+
{
12+
"name": "Starter Template",
13+
"slug": "starter-template",
14+
"description": "Nothing but the basics: compiled CSS and JavaScript.",
15+
"image_url": "https://getbootstrap.com/docs/4.0/examples/screenshots/starter-template.jpg"
16+
},
17+
{
18+
"name": "Grids",
19+
"slug": "grids",
20+
"description": "Multiple examples of grid layouts with all four tiers, nesting, and more.",
21+
"image_url": "https://getbootstrap.com/docs/4.0/examples/screenshots/grid.jpg"
22+
},
23+
{
24+
"name": "Jumbotron",
25+
"slug": "jumbotron",
26+
"description": "Build around the jumbotron with a navbar and some basic grid columns.",
27+
"image_url": "https://getbootstrap.com/docs/4.0/examples/screenshots/jumbotron.jpg"
28+
},
29+
{
30+
"name": "Jumbotron Narrow",
31+
"slug": "jumbotron-narrow",
32+
"description": "Build a more custom page by narrowing the default container and jumbotron.",
33+
"image_url": "https://getbootstrap.com/docs/4.0/examples/screenshots/jumbotron-narrow.jpg"
34+
}
35+
]
36+
},
37+
{
38+
"name": "Frameworks 2",
39+
"data": [
40+
{
41+
"name": "Empty",
42+
"slug": "empty",
43+
"image_url": ""
44+
},
45+
{
46+
"name": "Starter Template",
47+
"slug": "starter-template",
48+
"image_url": "https://getbootstrap.com/docs/4.0/examples/screenshots/starter-template.jpg"
49+
},
50+
{
51+
"name": "Grids",
52+
"slug": "grids",
53+
"image_url": "https://getbootstrap.com/docs/4.0/examples/screenshots/grid.jpg"
54+
},
55+
{
56+
"name": "Jumbotron",
57+
"slug": "jumbotron",
58+
"image_url": "https://getbootstrap.com/docs/4.0/examples/screenshots/jumbotron.jpg"
59+
},
60+
{
61+
"name": "Jumbotron Narrow",
62+
"slug": "jumbotron-narrow",
63+
"image_url": "https://getbootstrap.com/docs/4.0/examples/screenshots/jumbotron-narrow.jpg"
64+
}
65+
]
66+
}
67+
]

‎app/index.html‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,8 @@
1919
</style>
2020

2121
<script src="lib/angular/angular-loader.min.js"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/script.js/2.5.8/script.min.js"></script>
2223
<script>
23-
// include a third-party async loader library
24-
/*!
25-
* $script.js v1.3
26-
* https://github.com/ded/script.js
27-
* Copyright: @ded & @fat - Dustin Diaz, Jacob Thornton 2011
28-
* Follow our software http://twitter.com/dedfat
29-
* License: MIT
30-
*/
31-
!function (a, b, c) { function t(a, c) { var e = b.createElement("script"), f = j; e.onload = e.onerror = e[o] = function () { e[m] && !/^c|loade/.test(e[m]) || f || (e.onload = e[o] = null, f = 1, c()) }, e.async = 1, e.src = a, d.insertBefore(e, d.firstChild) } function q(a, b) { p(a, function (a) { return !b(a) }) } var d = b.getElementsByTagName("head")[0], e = {}, f = {}, g = {}, h = {}, i = "string", j = !1, k = "push", l = "DOMContentLoaded", m = "readyState", n = "addEventListener", o = "onreadystatechange", p = function (a, b) { for (var c = 0, d = a.length; c < d; ++c)if (!b(a[c])) return j; return 1 }; !b[m] && b[n] && (b[n](l, function r() { b.removeEventListener(l, r, j), b[m] = "complete" }, j), b[m] = "loading"); var s = function (a, b, d) { function o() { if (!--m) { e[l] = 1, j && j(); for (var a in g) p(a.split("|"), n) && !q(g[a], n) && (g[a] = []) } } function n(a) { return a.call ? a() : e[a] } a = a[k] ? a : [a]; var i = b && b.call, j = i ? b : d, l = i ? a.join("") : b, m = a.length; c(function () { q(a, function (a) { h[a] ? (l && (f[l] = 1), o()) : (h[a] = 1, l && (f[l] = 1), t(s.path ? s.path + a + ".js" : a, o)) }) }, 0); return s }; s.get = t, s.ready = function (a, b, c) { a = a[k] ? a : [a]; var d = []; !q(a, function (a) { e[a] || d[k](a) }) && p(a, function (a) { return e[a] }) ? b() : !function (a) { g[a] = g[a] || [], g[a][k](b), c && c(d) }(a.join("|")); return s }; var u = a.$script; s.noConflict = function () { a.$script = u; return this }, typeof module != "undefined" && module.exports ? module.exports = s : a.$script = s }(this, document, setTimeout)
32-
33-
3424
var dev = true;
3525
var ext = (dev) ? '?now=' + new Date().getTime() : '';
3626

‎app/js/app.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use strict'
22

3-
angular
3+
window.angular
44
.module('bootstrapVariablesEditor', [
55
'bootstrapVariablesEditor.filters',
66
'bootstrapVariablesEditor.services',
@@ -10,15 +10,9 @@ angular
1010
'ui.codemirror'
1111
])
1212
.config(function($routeProvider, $locationProvider) {
13-
$locationProvider.hashPrefix('!')
14-
$routeProvider.when('/editor', { templateUrl: 'partials/editor.html', controller: SassCtrl })
15-
$routeProvider.when('/create-website-pikock', {
16-
templateUrl: 'partials/create-website-pikock.html',
17-
controller: PageCtrl
18-
})
19-
$routeProvider.when('/submit-theme', {
20-
templateUrl: 'partials/submit-theme.html',
21-
controller: PageCtrl
13+
$routeProvider.when('/editor', {
14+
templateUrl: 'partials/editor.html',
15+
controller: window.SassCtrl
2216
})
2317
$routeProvider.otherwise({ redirectTo: '/editor' })
2418
})

‎app/js/controllers.js‎

Lines changed: 106 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,32 @@
11
/* Controllers */
2+
var angular = window.angular
23

3-
function SassCtrl($scope, $http, apSass, $timeout) {
4+
function SassCtrl($scope, $http, apSass, $timeout, $sce, $q) {
45
var scopeVar = {
56
variables: {},
67
fonts: {},
7-
autoapplysass: false,
8+
templates: undefined,
9+
autoapplysass: true,
810
isViewLoading: false,
9-
minified: false,
11+
show: 'variables',
1012
editorOptions: {
11-
lineWrapping: true,
13+
lineWrapping: false,
1214
lineNumbers: true,
15+
firstLineNumber: 1,
1316
mode: 'text/html',
17+
tabSize: 2,
1418
onKeyEvent: function(e, s) {
1519
if (s.type === 'keyup') {
1620
window.CodeMirror.showHint(e)
1721
}
1822
},
1923
extraKeys: { 'Ctrl-Space': 'autocomplete' }
2024
},
21-
myHTML:
22-
'I am an <code>HTML</code>string with ' + '<a href="#">links!</a> and other <em>stuff</em>',
23-
customHtml: `<div class="bd-example" data-example-id="">
24-
<div class="p-4 mb-2 bg-primary text-white">.bg-primary</div>
25-
<div class="p-4 mb-2 bg-secondary text-white">.bg-secondary</div>
26-
<div class="p-4 mb-2 bg-success text-white">.bg-success</div>
27-
<div class="p-4 mb-2 bg-danger text-white">.bg-danger</div>
28-
<div class="p-4 mb-2 bg-warning text-white">.bg-warning</div>
29-
<div class="p-4 mb-2 bg-info text-white">.bg-info</div>
30-
<div class="p-4 mb-2 bg-light text-gray-dark">.bg-light</div>
31-
<div class="p-4 mb-2 bg-dark text-white">.bg-dark</div>
32-
<div class="p-4 mb-2 bg-white text-gray-dark">.bg-white</div>
33-
<div class="p-4 mb-2 swatch-100">.swatch-100</div>
34-
<div class="p-4 mb-2 swatch-200">.swatch-200</div>
35-
<div class="p-4 mb-2 swatch-300">.swatch-300</div>
36-
<div class="p-4 mb-2 swatch-400">.swatch-400</div>
37-
<div class="p-4 mb-2 swatch-500">.swatch-500</div>
38-
<div class="p-4 mb-2 swatch-600">.swatch-600</div>
39-
<div class="p-4 mb-2 swatch-700">.swatch-700</div>
40-
<div class="p-4 mb-2 swatch-800">.swatch-800</div>
41-
<div class="p-4 mb-2 swatch-900">.swatch-900</div>
42-
</div>
43-
`
25+
template: {
26+
blobUrl: undefined,
27+
html: undefined,
28+
css: undefined
29+
}
4430
}
4531

4632
var scopeFunction = {
@@ -54,10 +40,14 @@ function SassCtrl($scope, $http, apSass, $timeout) {
5440
saveCSS: saveCSS,
5541
resetSassVariables: resetSassVariables,
5642
saveSassVariables: saveSassVariables,
43+
initTemplatesVariables: initTemplatesVariables,
5744
resetBaseVariable: resetBaseVariable,
5845
codemirrorLoaded: codemirrorLoaded,
5946
format: format,
60-
toggle: toggle
47+
toggle: toggle,
48+
goTo: goTo,
49+
chooseTemplate: chooseTemplate,
50+
generatePreviewHtml: generatePreviewHtml
6151
}
6252

6353
$scope.$on('$routeChangeStart', function() {
@@ -76,48 +66,88 @@ function SassCtrl($scope, $http, apSass, $timeout) {
7666
window.CodeMirror.showHint(cm, window.CodeMirror.hint.html)
7767
}
7868

69+
function goTo(route) {
70+
middleware(route)
71+
}
72+
73+
function middleware(route) {
74+
if (route === 'show') {
75+
generatePreviewHtml()
76+
}
77+
$scope.show = route || 'show'
78+
}
79+
7980
function toggle(group) {
8081
group.hidden = !group.hidden
8182
}
8283

83-
function codemirrorLoaded(editor) {
84+
function codemirrorLoaded(selector) {
85+
var el = document.querySelector('.code-mirror[data-template="' + selector + '"]')
86+
var editor = window.CodeMirror(el, $scope.editorOptions)
8487
$scope.editor = editor
85-
// var modification = 0
8688
var doc = editor.getDoc()
8789
editor.focus()
88-
editor.setValue($scope.x)
89-
editor.setOption($scope.editorOptions)
90+
editor.setValue($scope.template[selector])
9091
doc.markClean()
9192

93+
window.doc = doc
94+
window.editor = editor
95+
9296
editor.on('change', function() {
9397
var html = editor.getValue()
94-
var code = document.querySelector('div[data-example-id="editor"]')
95-
code.innerHTML = html
98+
$scope.customHtml = html
99+
})
100+
}
101+
102+
function chooseTemplate(template) {
103+
$http({
104+
method: 'GET',
105+
url: 'preview/' + template.slug + '.html'
106+
}).then(function(templateHtml) {
107+
$scope.template.html = templateHtml
108+
$http({
109+
method: 'GET',
110+
url: 'preview/' + template.slug + '.css'
111+
}).then(function(templateCss) {
112+
$scope.template.css = templateCss.data
113+
$scope.show = 'variables'
114+
applySass()
115+
})
96116
})
97117
}
98118

99119
function format() {
100120
$scope.editor.setValue(window.html_beautify($scope.editor.getValue()))
101121
}
102122

123+
function initTemplatesVariables() {
124+
$http({
125+
method: 'GET',
126+
url: 'data/template-html.json'
127+
}).then(function(response) {
128+
$scope.templates = response.data
129+
})
130+
}
131+
103132
function initSassVariables() {
104133
$http({
105134
method: 'GET',
106-
url: 'scss/variables.json'
135+
url: 'data/scss-variables.json'
107136
}).then(function(response) {
108137
$scope.variables = response.data.map(function(d) {
109138
d.hidden = true
110139
return d
111140
})
141+
112142
$scope.applySass(false)
113143

114-
var variables_keys = apSass.getKeys($scope)
115-
var icons_keys = apSass.getUrls()
116-
var fonts_keys = apSass.getFonts()
144+
var variablesKeys = apSass.getKeys($scope)
145+
var iconsKeys = apSass.getUrls()
146+
var fontsKeys = apSass.getFonts()
117147

118148
$timeout(function() {
119149
var $colorpicker = $('.colorpicker')
120-
$colorpicker.colorpicker().on('changeColor', function(ev) {
150+
$colorpicker.colorpicker().on('cha ngeColor', function(ev) {
121151
var scope = angular.element(this).scope()
122152
scope.variable.value = ev.color.toHex()
123153

@@ -132,21 +162,23 @@ function SassCtrl($scope, $http, apSass, $timeout) {
132162
if (this.dataset.color !== color.value) {
133163
}
134164
})
165+
135166
$('.sassVariable').each(function(index) {
167+
var src
136168
var scope = angular.element(this).scope()
137169
switch (scope.variable.type) {
138170
case 'icons':
139-
var src = icons_keys
171+
src = iconsKeys
140172
break
141173
case 'font':
142-
var src = fonts_keys
174+
src = fontsKeys
143175
break
144176
case 'boolean':
145-
var src = ['true', 'false']
177+
src = ['true', 'false']
146178
break
147179
case 'color':
148180
default:
149-
var src = variables_keys
181+
src = variablesKeys
150182
}
151183
$(this).typeahead({
152184
source: src,
@@ -162,12 +194,38 @@ function SassCtrl($scope, $http, apSass, $timeout) {
162194

163195
function autoApplySass(event) {
164196
if ($scope.autoapplysass) {
165-
apSass.applySass($scope)
197+
applySass(event)
166198
}
167199
}
168200

169-
function applySass(applyAll) {
170-
apSass.applySass($scope)
201+
function generatePreviewHtml(css, html) {
202+
var previewCss = css || $scope.customCss
203+
var previewHtml = html || $scope.customHtml
204+
var generateHtml =
205+
'<!doctype html><html lang="en"><head>' +
206+
previewCss +
207+
'</head><body><div class="preview">' +
208+
previewHtml +
209+
'</div></body></html>'
210+
var blob = new Blob([generateHtml], {
211+
type: 'text/html'
212+
})
213+
214+
$timeout(function() {
215+
$scope.blobUrl = $sce.trustAsResourceUrl(URL.createObjectURL(blob))
216+
}, 0)
217+
}
218+
219+
function applySass() {
220+
apSass
221+
.applySass($scope)
222+
.then(function(result) {
223+
$scope.customCss = '<style>' + result + '</style>'
224+
generatePreviewHtml()
225+
})
226+
.catch(function(error) {
227+
console.error(error)
228+
})
171229
}
172230

173231
function resetBaseVariable(variable) {
@@ -218,8 +276,7 @@ function SassCtrl($scope, $http, apSass, $timeout) {
218276
}
219277

220278
initSassVariables()
279+
initTemplatesVariables()
221280
}
222-
SassCtrl.$inject = ['$scope', '$http', 'apSass', '$timeout']
223281

224-
function PageCtrl($scope, $http, apSass) {}
225-
PageCtrl.$inject = ['$scope', '$http', 'apSass']
282+
SassCtrl.$inject = ['$scope', '$http', 'apSass', '$timeout', '$sce', '$q']

‎app/js/directives.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/* Directives */
44

5-
angular
5+
window.angular
66
.module('bootstrapVariablesEditor.directives', [])
77
.directive('colorPickerApply', [
88
function() {

0 commit comments

Comments
 (0)