Commit 8ce4a228 authored by santiaago's avatar santiaago
Browse files

we can now share 'try it out' context. 

Fixes #87
When editor is used, params are filled in url.
If url is then shared, we scroll to try it out section
and initilize editor with param values.
parent 4d7be3d3

app/app.js

+5 −3
Original line number Diff line number Diff line
@@ -11,6 +11,8 @@ angular.module('tinygraphs', [ 
    'tinygraphs.prettify',

    'tinygraphs.editor'

]).

    config(['$routeProvider', function($routeProvider) {

    config(['$locationProvider', '$routeProvider', 

	    function($locationProvider, $routeProvider) {

		$routeProvider.otherwise({redirectTo: '/'});

    }]);
 
	    }

	   ]);

app/components/editor/editor.js

+25 −8
Original line number Diff line number Diff line 
'use strict';



angular.module('tinygraphs.editor', [])

    .controller('EditorCtrl', ['$scope', '$location', EditorCtrl]);

    .controller('EditorCtrl', ['$scope', '$location', '$routeParams', EditorCtrl]);



function EditorCtrl($scope, $location, $routeParams) {



    var init = function () {

	if($location.$$hash == 'tryitout'){

	    $scope.editorName = $location.search().name;

	    $scope.editorShape = $location.search().shape;

	    $scope.editorTheme = $location.search().theme;

	    $scope.editorColorNumber = $location.search().numcolors;

	}else{

	    $scope.editorName = 'tinygraphs';

	    $scope.editorShape = 'squares';

	    $scope.editorTheme = 'frogideas';

	    $scope.editorColorNumber = '4';

	}

    };

    init();



function EditorCtrl($scope, $location) {

    $scope.editorChanged = function(){

	$location.search({

	$location.hash('tryitout')

	    .search({

		name: $scope.editorName, 

		shape: $scope.editorShape, 

		theme: $scope.editorTheme,

app/partials/marketing/editor.html

+4 −4
Original line number Diff line number Diff line
@@ -10,7 +10,7 @@ 
        <h4>TYPE YOUR NAME</h4>

        <div class="row">

          <div class="col-xs-8 col-xs-offset-2">

            <input class="form-control" type="text" ng-init="editorName='tinygraphs'" ng-model="editorName", ng-change="editorChanged()">

            <input class="form-control" type="text" ng-model="editorName", ng-change="editorChanged()">

          </div>

        </div>

      </div>
@@ -23,7 +23,7 @@ 
            <img class="editor-themePalette--height img-responsive" src="/themes/{{editorTheme}}">

          </div>

          <div class="col-xs-8">

            <select class="form-control" ng-init="editorTheme='frogideas'" ng-model="editorTheme" ng-change="editorChanged()">

            <select class="form-control" ng-model="editorTheme" ng-change="editorChanged()">

              <option>frogideas</option>

              <option>sugarsweets</option>

              <option>heatwave</option>
@@ -46,7 +46,7 @@ 
        <h4>SELECT THE SHAPE</h4>

        <div class="row">

          <div class="col-xs-8 col-xs-offset-2">

            <select class="form-control" ng-init="editorShape='squares'" ng-model="editorShape" ng-change="editorChanged()">

            <select class="form-control" ng-model="editorShape" ng-change="editorChanged()">

              <option>squares</option>

              <option>isogrids</option>

              <option value="spaceinvaders">space invaders</option>
@@ -61,7 +61,7 @@ 
      <h4>NUMBER OF COLORS</h4>

      <div class="row">

        <div class="col-xs-8 col-xs-offset-2">

          <select class="form-control" ng-init="editorColorNumber='4'" ng-model="editorColorNumber" ng-change="editorChanged()">

          <select class="form-control" ng-model="editorColorNumber" ng-change="editorChanged()">

            <option>2</option>

            <option>3</option>

            <option>4</option>