From 1786eab09ddfb7d0c2687805d8f8ee82ce22cf5c Mon Sep 17 00:00:00 2001 From: Scott Erickson Date: Sat, 14 Jun 2014 07:37:31 -0700 Subject: [PATCH] Initial work on a demo view. But brunch won't build demo-app.js for some reason. --- app/lib/Router.coffee | 5 +- app/styles/demo.sass | 14 ++++ app/templates/demo.jade | 22 ++++++ app/views/{test.coffee => TestView.coffee} | 59 ++------------- config.coffee | 3 +- demo/views/editor/PatchesView.demo.coffee | 21 ++++++ test/app/lib/requireUtils.coffee | 48 ++++++++++++ test/app/views/DemoView.coffee | 85 ++++++++++++++++++++++ 8 files changed, 201 insertions(+), 56 deletions(-) create mode 100644 app/styles/demo.sass create mode 100644 app/templates/demo.jade rename app/views/{test.coffee => TestView.coffee} (60%) create mode 100644 demo/views/editor/PatchesView.demo.coffee create mode 100644 test/app/lib/requireUtils.coffee create mode 100644 test/app/views/DemoView.coffee diff --git a/app/lib/Router.coffee b/app/lib/Router.coffee index 775a2dae5..d7ac1a1cc 100644 --- a/app/lib/Router.coffee +++ b/app/lib/Router.coffee @@ -16,8 +16,9 @@ module.exports = class CocoRouter extends Backbone.Router # editor views tend to have the same general structure 'editor/:model(/:slug_or_id)(/:subview)': 'editorModelView' - # Experimenting with direct links - 'test/*subpath': go('test') + # Direct links + 'test/*subpath': go('TestView') + 'demo/*subpath': go('DemoView') 'play/ladder/:levelID': go('play/ladder/ladder_view') 'play/ladder': go('play/ladder_home') diff --git a/app/styles/demo.sass b/app/styles/demo.sass new file mode 100644 index 000000000..dec0fcba3 --- /dev/null +++ b/app/styles/demo.sass @@ -0,0 +1,14 @@ +#demo-view + margin: 0 20px + + h2 + background: #add8e6 + font-family: Arial, Geneva, sans-serif + padding: 20px + font-weight: bold + + #demo-wrapper + width: 78% + + #demo-nav + width: 20% diff --git a/app/templates/demo.jade b/app/templates/demo.jade new file mode 100644 index 000000000..4c093d0fd --- /dev/null +++ b/app/templates/demo.jade @@ -0,0 +1,22 @@ +h2 Demo Page + +ol.breadcrumb + for path in parentFolders + li + a(href=path.url)= path.name + li.active= currentFolder + +.well.pull-left#demo-wrapper + #demo-area + +.nav.nav-pills.nav-stacked.pull-right.well#demo-nav + for child in children + li(class=child.type) + a(href=child.url).small + if child.type == 'folder' + span.glyphicon.glyphicon-folder-close + else + span.glyphicon.glyphicon-file + span.spl= child.name + if child.type == 'folder' + strong (#{child.size}) diff --git a/app/views/test.coffee b/app/views/TestView.coffee similarity index 60% rename from app/views/test.coffee rename to app/views/TestView.coffee index f4667fc44..e999b3b0f 100644 --- a/app/views/test.coffee +++ b/app/views/TestView.coffee @@ -1,7 +1,9 @@ CocoView = require 'views/kinds/CocoView' template = require 'templates/test' +requireUtils = require 'lib/requireUtils' -TEST_BASE_PATH = 'test/app/' +TEST_REQUIRE_PREFIX = 'test/app/' +TEST_URL_PREFIX = '/test/' module.exports = TestView = class TestView extends CocoView id: "test-view" @@ -33,67 +35,18 @@ module.exports = TestView = class TestView extends CocoView getRenderData: -> c = super(arguments...) - c.parentFolders = @getParentFolders() - c.children = @getChildren() + c.parentFolders = requireUtils.getParentFolders(@subPath, TEST_URL_PREFIX) + c.children = requireUtils.parseImmediateChildren(@specFiles, @subPath, TEST_REQUIRE_PREFIX, TEST_URL_PREFIX) parts = @subPath.split('/') c.currentFolder = parts[parts.length-1] or parts[parts.length-2] or 'All' c - - getParentFolders: -> - return [] unless @subPath - paths = [] - parts = @subPath.split('/') - while parts.length - parts.pop() - paths.unshift { - name: parts[parts.length-1] or 'All' - url: '/test/' + parts.join('/') - } - paths - - getChildren: -> - return [] unless @specFiles - folders = {} - files = {} - - requirePrefix = TEST_BASE_PATH + @subPath - if requirePrefix[requirePrefix.length-1] isnt '/' - requirePrefix += '/' - - for f in @specFiles - f = f[requirePrefix.length..] - continue unless f - parts = f.split('/') - name = parts[0] - group = if parts.length is 1 then files else folders - group[name] ?= 0 - group[name] += 1 - - children = [] - urlPrefix = '/test/'+@subPath - urlPrefix += '/' if urlPrefix[urlPrefix.length-1] isnt '/' - - for name in _.keys(folders) - children.push { - type:'folder', - url: urlPrefix+name - name: name+'/' - size: folders[name] - } - for name in _.keys(files) - children.push { - type:'file', - url: urlPrefix+name - name: name - } - children # RUNNING TESTS initSpecFiles: -> @specFiles = TestView.getAllSpecFiles() if @subPath - prefix = TEST_BASE_PATH + @subPath + prefix = TEST_REQUIRE_PREFIX + @subPath @specFiles = (f for f in @specFiles when f.startsWith prefix) @runTests: (specFiles) -> diff --git a/config.coffee b/config.coffee index 56adbd46d..eabcfcfc3 100644 --- a/config.coffee +++ b/config.coffee @@ -35,7 +35,8 @@ exports.config = (bower_components[\/\\]aether[\/\\]build[\/\\]aether.js) )/// 'javascripts/test-app.js': /^test[\/\\]app/ -# 'test/javascripts/test-vendor.js': /^test[\/\\](?=vendor)/ + 'javascripts/demo-app.js': /^demo/ + order: before: [ 'bower_components/jquery/dist/jquery.js' diff --git a/demo/views/editor/PatchesView.demo.coffee b/demo/views/editor/PatchesView.demo.coffee new file mode 100644 index 000000000..9004924ae --- /dev/null +++ b/demo/views/editor/PatchesView.demo.coffee @@ -0,0 +1,21 @@ +PatchesView = require 'views/editor/patches_view' +CocoModel = require 'models/CocoModel' + +class BlandModel extends CocoModel + @className: 'Bland' + @schema: { + type: 'object' + additionalProperties: false + properties: + number: {type: 'number'} + object: {type: 'object'} + string: {type: 'string'} + _id: {type: 'string'} + } + urlRoot: '/db/bland' + + +module.exports = -> + model = new BlandModel({_id:'12345'}) + new PatchesView(model) + diff --git a/test/app/lib/requireUtils.coffee b/test/app/lib/requireUtils.coffee new file mode 100644 index 000000000..a79fe790c --- /dev/null +++ b/test/app/lib/requireUtils.coffee @@ -0,0 +1,48 @@ +module.exports.getParentFolders = (subPath, urlPrefix='/test/') -> + return [] unless subPath + paths = [] + parts = subPath.split('/') + while parts.length + parts.pop() + paths.unshift { + name: parts[parts.length-1] or 'All' + url: urlPrefix + parts.join('/') + } + paths + +module.exports.parseImmediateChildren = (allChildren, subPath, baseRequirePath='test/app/', urlPrefix='/test/') -> + return [] unless allChildren + folders = {} + files = {} + + requirePrefix = baseRequirePath + subPath + if requirePrefix[requirePrefix.length-1] isnt '/' + requirePrefix += '/' + + for f in allChildren + f = f[requirePrefix.length..] + continue unless f + parts = f.split('/') + name = parts[0] + group = if parts.length is 1 then files else folders + group[name] ?= 0 + group[name] += 1 + + children = [] + urlPrefix += subPath + urlPrefix += '/' if urlPrefix[urlPrefix.length-1] isnt '/' + + for name in _.keys(folders) + children.push { + type:'folder', + url: urlPrefix+name + name: name+'/' + size: folders[name] + } + for name in _.keys(files) + children.push { + type:'file', + url: urlPrefix+name + name: name + } + children diff --git a/test/app/views/DemoView.coffee b/test/app/views/DemoView.coffee new file mode 100644 index 000000000..b3470ab9d --- /dev/null +++ b/test/app/views/DemoView.coffee @@ -0,0 +1,85 @@ +CocoView = require 'views/kinds/CocoView' +template = require 'templates/demo' +requireUtils = require 'lib/requireUtils' + +DEMO_REQUIRE_PREFIX = 'demo/app/' +DEMO_URL_PREFIX = '/demo/' + +### + What are demo files? + + They could be a function which returns an element to insert into the demo page. + But what about demoing achievements? They'll get put into the main html. Or modals. + Well, I was thinking that a single folder would show all demos at the same time, line them up. + But it'd be confusing to have a whole bunch of achievement demos show up all at the same time? + Maybe there could be a button to show all the demos. Hmm, that'd be cool. + It could work like Jasmine, where it modifies the path and so when you select to run them, they all run with page reloads. + I think for now, I'll just say: have it be a function which we can run anytime. + It may or may not return an element to be inserted into the main area. + + Another idea. Do we want root views to just take over the full view? + Or should they just go into the central part? + Probably should take over the full view, and if you want to get out of the demo, you navigate back. + +### + +module.exports = DemoView = class DemoView extends CocoView + id: "demo-view" + template: template + + # INITIALIZE + + constructor: (options, @subPath='') -> + super(options) + @subPath = @subPath[1..] if @subPath[0] is '/' + @loadDemoingLibs() unless DemoView.loaded + + loadDemoingLibs: -> + @queue = new createjs.LoadQueue() + @queue.on('complete', @scriptsLoaded, @) + for f in ['jasmine', 'jasmine-html', 'boot', 'mock-ajax', 'demo-app'] + @queue.loadFile({ + src: "/javascripts/#{f}.js" + type: createjs.LoadQueue.JAVASCRIPT + }) + + scriptsLoaded: -> + @initDemoFiles() + @children = requireUtils.parseImmediateChildren(@demoFiles, @subPath, DEMO_REQUIRE_PREFIX, DEMO_URL_PREFIX) + @render() + @runDemo() + + # RENDER DATA + + getRenderData: -> + c = super(arguments...) + c.parentFolders = requireUtils.getParentFolders(@subPath, DEMO_URL_PREFIX) + c.children = @children or [] + parts = @subPath.split('/') + c.currentFolder = parts[parts.length-1] or parts[parts.length-2] or 'All' + c + + # RUNNING DEMOS + + initDemoFiles: -> + @demoFiles = @getAllDemoFiles() + if @subPath + prefix = TEST_REQUIRE_PREFIX + @subPath + @demoFiles = (f for f in @demoFiles when f.startsWith prefix) + + runDemo: -> + # TODO: Maybe have an option to run all demos in this folder at the same time? + return unless @subPath and _.last(@subPath.split('/')).indexOf('.demo') > -1 + requirePath = DEMO_REQUIRE_PREFIX + @subPath + demoFunc = require requirePath + if not _.isFunction(demoFunc) + console.error "Demo files must export a function. #{requirePath} does not." + return + view = demoFunc() + return unless view + @$el.find('#demo-area').empty().append(view.el) + # TODO, maybe handle root views differently than modal views differently than everything else? + + getAllDemoFiles = -> + allFiles = window.require.list() + (f for f in allFiles when f.indexOf('.demo') > -1)