fixed for sharepoint

.tmp/styles/main.css

@@ -0,0 +1,5 @@
+/* line 1, ../../app/styles/main.scss */
+#carousel {
+  height: 680px;
+  background: black;
+}

Gruntfile.js

@@ -3,13 +3,12 @@ var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
 var mountFolder = function (connect, dir) {
     return connect.static(require('path').resolve(dir));
 };
-
+var sp2010rest = require('sp2010-rest');
 // # Globbing
 // for performance reasons we're only matching one level down:
 // 'test/spec/{,*/}*.js'
 // use this if you want to match all subfolders:
 // 'test/spec/**/*.js'
-// templateFramework: 'lodash'
 
 module.exports = function (grunt) {
     // load all grunt tasks
@@ -52,9 +51,12 @@ module.exports = function (grunt) {
                 tasks: ['jst']
             }
         },
+        livereload: {
+            port: 9345
+        },
         connect: {
             options: {
-                port: 9000,
+                port: 9234,
                 // change this to '0.0.0.0' to access the server from outside
                 hostname: 'localhost'
             },
@@ -63,6 +65,7 @@ module.exports = function (grunt) {
                     middleware: function (connect) {
                         return [
                             lrSnippet,
+                            sp2010rest(connect, 'lists'),
                             mountFolder(connect, '.tmp'),
                             mountFolder(connect, 'app')
                         ];
@@ -162,9 +165,6 @@ module.exports = function (grunt) {
                     // `name` and `out` is set by grunt-usemin
                     baseUrl: 'app/scripts',
                     optimize: 'none',
-                    paths: {
-                        'templates': '../../.tmp/scripts/templates'
-                    },
                     // TODO: Figure out how to make sourcemaps work with grunt-usemin
                     // https://github.com/yeoman/grunt-usemin/issues/30
                     //generateSourceMaps: true,
@@ -232,14 +232,6 @@ module.exports = function (grunt) {
             }
         },
         copy: {
-            defaultTemplate: {
-                files: [{
-                    expand: true,
-                    cwd: require('path').dirname(require.resolve('generator-backbone/app/templates/templates.js')),
-                    dest: '.tmp/scripts/',
-                    src: [ 'templates.js' ]
-                }]
-            },
             dist: {
                 files: [{
                     expand: true,
@@ -249,7 +241,8 @@ module.exports = function (grunt) {
                     src: [
                         '*.{ico,txt}',
                         '.htaccess',
-                        'images/{,*/}*.{webp,gif}'
+                        'images/{,*/}*.{webp,gif}',
+                        'scripts/vendor/**'
                     ]
                 }]
             }
@@ -281,7 +274,6 @@ module.exports = function (grunt) {
         grunt.task.run([
             'clean:server',
             'coffee:dist',
-            'copy:defaultTemplate',
             'jst',
             'compass:server',
             'livereload-start',
@@ -294,7 +286,6 @@ module.exports = function (grunt) {
     grunt.registerTask('test', [
         'clean:server',
         'coffee',
-        'copy:defaultTemplate',
         'jst',
         'compass',
         'connect:test',
@@ -304,7 +295,6 @@ module.exports = function (grunt) {
     grunt.registerTask('build', [
         'clean:dist',
         'coffee',
-        'copy:defaultTemplate',
         'jst',
         'compass:dist',
         'useminPrepare',
@@ -314,7 +304,7 @@ module.exports = function (grunt) {
         'concat',
         'cssmin',
         'uglify',
-        'copy:dist',
+        'copy',
         'usemin'
     ]);
 

app/index.html

@@ -9,44 +9,48 @@
         <title></title>
         <meta name="description" content="">
         <meta name="viewport" content="width=device-width">
-        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+
         <link rel="stylesheet" href="styles/main.css">
         <!-- build:js scripts/vendor/modernizr.js -->
         <script src="components/modernizr/modernizr.js"></script>
         <!-- endbuild -->
     </head>
     <body>
         <div class="container">
-            <div class="hero-unit">
-                <h1>'Allo, 'Allo!</h1>
-                <p>You now have</p>
-                <ul>
-                    <li>HTML5 Boilerplate</li>
-                    <li>jQuery</li>
-                    <li>Backbone.js</li>
-                    <li>Underscore.js</li>
-                    <li>RequireJS</li>
-                    <li>Twitter Bootstrap</li>
-                </ul>
-                <p>installed.</p>
-                <h3>Enjoy coding! - Yeoman</h3>
-            </div>
+            <div id="main"></div>
         </div>
 
-        <!--[if lt IE 7]>
-            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
-        <![endif]-->
+        <script id="gallery-template" type="text/template">
+        <div id="carousel"></div>
+        </script>
+
+
+        <script id="slide-template" type="text/template">
+        <img src="{{ src }}" alt="01" width="{{ width }}" height="{{ height }}" />
+        </script>
+
+        <script id="AWgallery-template" type="text/template">
+        <div id="carousel"></div>
+        </script>
+
 
-        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
-        <script>
-            var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
-            (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
-            g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
-            s.parentNode.insertBefore(g,s)}(document,'script'));
+        <script id="AWslide-template" type="text/template">
+        <div class="showcase-content">
+            <div class="showcase-content-wrapper">
+                <img src="{{ src }}" alt="01" width="{{ width }}" height="{{ height }}" />
+                {[ if(alt){ ]}
+                <p class="static-caption">{{ alt }}</p>
+                {[ } ]}
+            </div>
+        </div>
+        <div class="AWshowcase-thumbnail">
+            <img src="{{ thumb }}" alt="{{ alt }}" />
+            <div class="showcase-thumbnail-cover"></div>
+        </div>
         </script>
 
         <!-- build:js scripts/main.js -->
-        <script data-main="scripts/main" src="components/requirejs/require.js"></script>
+        <script data-main="scripts/config" src="components/requirejs/require.js"></script>
         <!-- endbuild -->
-</body>
+    </body>
 </html>

app/scripts/comment-model.js

@@ -0,0 +1,15 @@
+/*global define*/
+
+define([
+    'underscore',
+    'backbone',
+], function (_, Backbone) {
+    'use strict';
+
+    var CommentModel = Backbone.Model.extend({
+        defaults:{
+        }
+    });
+
+    return CommentModel;
+});

app/scripts/comments-collection.js

@@ -0,0 +1,15 @@
+/*global define*/
+
+define([
+    'underscore',
+    'backbone',
+    'models/comments-model'
+], function (_, Backbone, CommentsModel) {
+    'use strict';
+
+    var CommentsCollection = Backbone.Collection.extend({
+        model: CommentsModel
+    });
+
+    return CommentsCollection;
+});

app/scripts/config.js

@@ -0,0 +1,31 @@
+/*global require*/
+'use strict';
+
+require.config({
+    deps: ['main'],
+    paths: {
+        'jquery': '../components/jquery/jquery',
+        'underscore': '../components/underscore-amd/underscore',
+        'backbone': '../components/backbone-amd/backbone',
+        'backbone.wreqr': '../components/backbone.wreqr/lib/amd/backbone.wreqr',
+        'backbone.eventbinder': '../components/backbone.eventbinder/lib/amd/backbone.eventbinder',
+        'backbone.babysitter': '../components/backbone.babysitter/lib/amd/backbone.babysitter',
+        'marionette': '../components/marionette/lib/core/amd/backbone.marionette',
+        'backbone-sharepoint': 'vendor/backbone-sharepoint.odata-amd',
+        'bootstrap': 'vendor/bootstrap',
+        'galleria': '../components/jquery-galleria/src/galleria'
+    },
+    shim: {
+        'underscore': {
+            exports: '_'
+        },
+        'bootstrap': {
+            deps: ['jquery'],
+            exports: 'jquery'
+        },
+        'galleria': {
+            deps: ['jquery'],
+            exports: 'jquery'
+        }
+    }
+});

app/scripts/gallery/gallery-layout.js

@@ -0,0 +1,39 @@
+/*global define*/
+
+define([
+    'jquery',
+    'marionette',
+    'gallery/slides-collection',
+    'gallery/gallery-view',
+    'backbone-sharepoint'
+], function ($, Marionette, SlidesCollection, GalleryView) {
+    'use strict';
+    var Gallery = Marionette.Layout.extend({
+        template: "#gallery-template",
+
+        regions: {
+            carousel: "#carousel"
+        },
+        loading: new $.Deferred(),
+        onRender: function() {
+            var self = this;
+            this.slides = new SlidesCollection();
+
+            this.galleria = new GalleryView({
+                collection: this.slides
+            });
+            this.galleria.loading.done(function() {
+                self.loading.resolve();
+            });
+            // pass the event up the from the view to the layout
+            this.galleria.on('slideChange', function(slideIndex){
+                var slide = self.slides.get(slideIndex + 1);
+                self.trigger('slideChange', slide);
+            });
+
+            this.carousel.show(this.galleria);
+        }
+    });
+
+    return Gallery;
+});

app/scripts/gallery/gallery-router.js

@@ -0,0 +1,14 @@
+/*global define*/
+
+require([
+    'marionette'
+], function (Marionette) {
+    var GalleryRouter = Marionette.AppRouter.extend({
+        appRoutes : {
+            '': 'gotoStart',
+            'photo/:slug': 'gotoPhoto'
+        }
+    });
+
+    return GalleryRouter;
+});

app/scripts/gallery/gallery-view.js

@@ -0,0 +1,48 @@
+/*global define*/
+
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'marionette',
+    'gallery/slide-view',
+    'galleria'
+], function ($, _, Backbone, Marionette, SlideView) {
+    'use strict';
+
+    _.templateSettings = {
+         evaluate : /\{\[([\s\S]+?)\]\}/g,
+         interpolate : /\{\{([\s\S]+?)\}\}/g
+    };
+
+    var GalleryView = Marionette.CollectionView.extend({
+        itemView: SlideView,
+        loading: new $.Deferred(),
+        initialize: function(galleryView) {
+            this.collection.fetch({
+              orderby: 'Name asc'
+            })
+            .done(_.bind(this.initGal, this, galleryView));
+        },
+        initGal: function() {
+            var self = this;
+            // needed to give Galleria a target
+            self.$el.attr('id', 'images');
+
+            Galleria.loadTheme('scripts/vendor/galleria-theme/galleria.classic.js');
+            Galleria.run('#carousel', { dataSource: '#images' });
+            Galleria.on('loadstart', function(e) {
+                var galleria = this
+                self.trigger('slideChange', galleria.getIndex());
+            });
+            Galleria.ready(function() {
+                // delay until after first image
+                _.defer(function(){
+                    self.loading.resolve();
+                });
+            });
+        }
+    });
+
+    return GalleryView;
+});

app/scripts/gallery/slide-model.js

@@ -0,0 +1,27 @@
+/*global define*/
+
+define([
+    'backbone',
+    'gallery/utils',
+    'backbone-sharepoint'
+], function (Backbone, utils) {
+    'use strict';
+
+    var SlideModel = Backbone.SP.Item.extend({
+        initialize: function() {
+            var pic = this.attributes;
+            var name = pic.Name.substring(0, pic.Name.lastIndexOf('.'));
+
+            this.set({
+                src: pic.__metadata.media_src,
+                slug: utils.string_to_slug(name),
+                alt: pic.Title,
+                width: pic.PictureWidth,
+                height: pic.PictureHeight,
+                thumb: pic.Path + utils.thumbFromName(pic.Name)
+            });
+        }
+    });
+
+    return SlideModel;
+});