Skip to content

Commit

Permalink
publish: Merge pull request #88 from kevinsproles/master
Browse files Browse the repository at this point in the history 
generated from commit 8bd2f5e
  • Loading branch information
deploy.sh committed Aug 13, 2014
1 parent 899b954 commit 31bb93c
Show file tree
Hide file tree
Showing 6 changed files with 313 additions and 0 deletions.
79 changes: 79 additions & 0 deletions settings/app.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
angular.module('app', ['ui.bootstrap','ui.tinymce'])

.controller('ThemeSettingsCtrl', ['$scope', '$http', '$location',
function ($scope, $http, $location) {
'use strict';

/*
Welcome to the main theme settings controller.
The data model in themeSettings.json is 100% customizable. Make it your own.
Your storefront theme can read the themeSettings.json file in production at www.domain.com/scripts/themeSettings.json
And this admin interface can read & write this file via the Volusion API endpoint www.domain.com/api/v1/themes/method/settings
*/

//load data on initial page load
var apiUrl;
var environment;

if ($location.absUrl().indexOf('127.0.0.1') >= 0 || $location.absUrl().indexOf('localhost') >= 0) {
//in local development environment (i.e. grunt serve)
environment = 'dev';
apiUrl = '/settings/themeSettings.json';
$scope.debug = true;
} else {
//in production
environment = 'prod';
var queryString = $location.search();
apiUrl = '/api/v1/themes/' + queryString.themeName + '/versions/' + queryString.themeVersion + '/settings';
}
$http.get(apiUrl)
.success(function(data) {
if (environment === 'dev') {
console.log(data);
$scope.settings = data;
} else {
$scope.settings = data.data; //API in production has a "data{}" wrapper
}
});

//add slide
$scope.addSlide = function() {
$scope.settings.pages.home.slider.slides.push({
headline: '',
subHeadline: '',
imageUrl: '',
linksTo: ''
});
};

$scope.tinymceOptions = {
theme: 'modern'
,menubar: false
,statusbar: false
,toolbar: 'undo redo bold italic underline styleselect alignleft aligncenter bullist numlist link unlink image code'
,plugins: 'link,image,code,autoresize'
,autoresize_min_height: 50
,autoresize_max_height: 1000
,skin_url: 'tinymce-skin'
,content_css: '/styles/c8691436.main.css' //and this right here folks is why we can't use textAngular
};

//handle save button
$scope.save = function () {
if (environment === 'dev') {
//don't save it since we don't have a way to override the themeSettings.json
console.log('would be saved if you were in production');
window.alert('would be saved if you were in production, but since you\'re not:=, simply copy the debug output to your themeSettings.json file manually.');
} else {

//use the Volusion API to overwrite themeSettings.json
$http.put(apiUrl, $scope.settings)
.success(function () {
console.log('successfully saved');
});

}
};

}]);

205 changes: 205 additions & 0 deletions settings/theme-settings.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,205 @@
<html ng-app="app">
<head>
<script src='//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js'></script>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js'></script>
<script src='//tinymce.cachefly.net/4.1/tinymce.min.js'></script>
<script src='//cdn.rawgit.com/angular-ui/ui-tinymce/v0.0.5/src/tinymce.js'></script>
<script src='//cdn.rawgit.com/davidjbradshaw/iframe-resizer/v2.5.2/js/iframeResizer.contentWindow.min.js'></script>
<script src="app.js"></script>

<!-- Use the Volusion Admin Bootstrap -->
<link href="//cdn.rawgit.com/volusion/vol-admin-bootstrap/v0.0.1/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- use FontAwesome to get icons for the textAngular WYSIWYG -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!-- apply some styles to this page -->
<style>
.tab-content {
padding-top:10px;
}
</style>

</head>
<body ng-controller="ThemeSettingsCtrl">

<!-- Theme Settings -->
<section class="container">
<div>

<!-- TODO: remove this hack. This line needs to be here otherwise on refresh the settings model won't bind to anything below. Very strange. -->
<textarea style="display:none" ui-tinymce ng-model="settings.general.header.content.topPromo"></textarea>


<form>
<h1>Theme Settings</h1>

<!-- Tabs -->
<div data-tabset>

<!-- General -->
<div data-tab>
<div data-tab-heading>General</div>

<h3>Header Content</h3>
<div class="form-group">
<label class="control-label">Promo</label>
<textarea ui-tinymce="tinymceOptions" ng-model="settings.general.header.content.topPromo"></textarea>
</div>

<h3>Footer Content</h3>
<div class="form-group">
<label class="control-label">Column 1</label>
<textarea ui-tinymce="tinymceOptions" ng-model="settings.general.footer.content.column1"></textarea>
</div>
<div class="form-group">
<label class="control-label">Column 2</label>
<textarea ui-tinymce="tinymceOptions" ng-model="settings.general.footer.content.column2"></textarea>
</div>
<div class="form-group">
<label class="control-label">Column 3</label>
<textarea ui-tinymce="tinymceOptions" ng-model="settings.general.footer.content.column3"></textarea>
</div>
<div class="form-group">
<label class="control-label">Column 4</label>
<textarea ui-tinymce="tinymceOptions" ng-model="settings.general.footer.content.column4"></textarea>
</div>
<div class="form-group">
<label class="control-label">Bottom Row</label>
<textarea ui-tinymce="tinymceOptions" ng-model="settings.general.footer.content.bottomRow"></textarea>
</div>

</div>

<!-- Home Page -->
<div data-tab>
<div data-tab-heading>Home</div>

<h3>Content</h3>
<div class="form-group">
<label class="control-label">Content 1</label>
<textarea ui-tinymce="tinymceOptions" class="form-control" data-ng-model="settings.pages.home.content1"></textarea>
</div>
<div class="form-group">
<label class="control-label">Content 2</label>
<textarea ui-tinymce="tinymceOptions" class="form-control" data-ng-model="settings.pages.home.content2"></textarea>
</div>
<div class="form-group">
<label class="control-label">Content 3</label>
<textarea ui-tinymce="tinymceOptions" class="form-control" data-ng-model="settings.pages.home.content3"></textarea>
</div>

<input type="checkbox" data-ng-model="settings.pages.home.featuredProducts.isEnabled"> Display Featured Products

<h3>Content Tiles</h3>
<input type="checkbox" data-ng-model="settings.pages.home.tiles.isEnabled"> Display Content Tiles


<!-- Content Tiles -->
<div data-tabset>
<div data-tab data-ng-repeat="(key, obj) in settings.pages.home.tiles.tiles">
<div data-tab-heading>{{$index}}</div>
<div class="form-group">
<label class="control-label">Image Url</label>
<input class="form-control" type="text" data-ng-model="settings.pages.home.tiles.tiles[key].imageUrl" />
</div>
<div class="form-group">
<label class="control-label">Link To</label>
<input class="form-control" type="text" data-ng-model="settings.pages.home.tiles.tiles[key].linkTo" />
</div>
</div>
</div>


<h3>Home Page Slideshow</h3>
<input type="checkbox" data-ng-model="settings.pages.home.slider.isEnabled"> Display Slide Show
<br /><br />
<div data-tabset>
<button type="button" class="btn btn-info" data-ng-click="addSlide()">Add Slide</button>
<div data-tab data-ng-repeat="slide in settings.pages.home.slider.slides">
<div data-tab-heading>
Slide {{$index + 1}}
&nbsp;&nbsp;
<span class="glyphicon glyphicon-remove" data-ng-click="settings.slider.slides.splice($index, 1)"></span>
</div>
<div>
<div class="form-group">
<label class="control-label">Headline</label>
<input class="form-control" type="text" data-ng-model="slide.headline" />
</div>
<div class="form-group">
<label class="control-label">Image Url</label>
<input class="form-control" type="text" data-ng-model="slide.imageUrl" />
</div>
<div class="form-group">
<label class="control-label">Sub Headline</label>
<input class="form-control" type="text" data-ng-model="slide.subHeadline" />
</div>
<div class="form-group">
<label class="control-label">Links To</label>
<input class="form-control" type="text" data-ng-model="slide.linksTo" />
</div>
</div>
</div>
</div>

</div>

<!-- Category Page -->
<div data-tab>
<div data-tab-heading>Category</div>

TODO

</div>

</div>

<!-- Save Button -->
<hr>
<div class="form-group">
<button class="btn btn-primary btn-lg" data-ng-click="save()">Save Theme Settings</button>
</div>

</form>


</div>




<!-- Debug Panel -->
<style>
.debugPanel {
position:absolute;
right:0;
top:0;
width:500px;
padding:10px;
background-color:#ff7e47;
}
body {
margin-right:500px;
}
</style>
<div class="debugPanel" data-ng-show="debug">
<h1>Debug</h1>
<span class="pull-right glyphicon glyphicon-remove" data-ng-click="debug = false"></span>
<p>We've detected you're running locally, so only you see this debug window. Watch your theme settings json model change in real time.</p>
<div>
<textarea style="width:100%" rows=50>{{settings | json}}</textarea>
</div>
</div>
<div data-ng-hide="debug">
<span class="pull-right glyphicon glyphicon-add" data-ng-click="debug = false"></span>
</div>


</section>
</body>
</html>

1 change: 1 addition & 0 deletions settings/tinymce-skin/content.inline.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions settings/tinymce-skin/content.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions settings/tinymce-skin/skin.ie7.min.css
View file

Large diffs are not rendered by default.

26 changes: 26 additions & 0 deletions settings/tinymce-skin/skin.min.css
View file

Large diffs are not rendered by default.

0 comments on commit 31bb93c

Please sign in to comment.