omg awesome guides

app/views/admin/shared/_header.html.haml

@@ -4,12 +4,12 @@
 #global-actions-bar
   != t('.welcome', :name => link_to(current_admin.name, edit_admin_my_account_url))
   %span= '|'
-  = link_to t('.see'), current_site_url
+  = link_to t('.see'), current_site_url, :id => "viewsite_ele"
   - if multi_sites? && current_admin.sites.size > 1
     %span= '|'
     = link_to t('.switch'), '#', :id => 'sites-picker-link'
   %span= '|'
-  = link_to 'Help', '#guider=help', :id => "tutorial"
+  = link_to 'Help', '#guider=help', :id => "help_ele"
   %span= '|'
   = link_to t('.logout'), destroy_admin_session_url, :confirm => t('admin.messages.confirm')
 

config/assets.yml

@@ -3,6 +3,8 @@ embed_assets: off
 s3_bucket: <%= ENV['S3_BUCKET'] %>
 s3_access_key_id: <%= ENV['S3_KEY_ID'] %>
 s3_secret_access_key: <%= ENV['S3_SECRET_KEY'] %>
+compress_assets: off
+package_assets: off
 
 javascripts:
   box:
@@ -26,6 +28,8 @@ javascripts:
     - public/javascripts/admin/locales/datepicker_pt-BR.js
     - public/javascripts/admin/locales/datepicker_it.js
     - public/javascripts/admin/application.js
+    - public/javascripts/admin/guiders-1.1.0.js
+    - public/javascripts/admin/tutorial.js
   custom_fields:
     - public/javascripts/admin/plugins/fancybox.js
     - public/javascripts/admin/plugins/mustache.js
@@ -91,6 +95,7 @@ stylesheets:
     - public/stylesheets/admin/sites_picker.css
     - public/stylesheets/admin/application.css
     - public/stylesheets/admin/safari.css
+    - public/stylesheets/admin/guiders-1.1.0.css
   fancybox:
     - public/stylesheets/admin/plugins/fancybox.css
     - public/stylesheets/admin/fancybox_changes.css

config/environments/production.rb

@@ -3,11 +3,11 @@ Locomotive::Application.configure do
 
   # The production environment is meant for finished, "live" apps.
   # Code is not reloaded between requests
-  config.cache_classes = true
+  config.cache_classes = false
 
   # Full error reports are disabled and caching is turned on
   config.consider_all_requests_local       = false
-  config.action_controller.perform_caching = true
+  config.action_controller.perform_caching = false
 
   # Specifies the header that your server uses for sending files
   config.action_dispatch.x_sendfile_header = "X-Sendfile"
@@ -29,7 +29,7 @@ Locomotive::Application.configure do
 
   # Disable Rails's static asset server
   # In production, Apache or nginx will already do this
-  config.serve_static_assets = false
+  config.serve_static_assets = true
 
   # Enable serving of images, stylesheets, and javascripts from an asset server
   # config.action_controller.asset_host = "http://assets.example.com"

public/javascripts/admin/application.js

@@ -101,6 +101,7 @@ $(document).ready(function() {
       var newValue = prompt(hint, $(this).html());
       if (newValue && newValue != '') {
         $(this).html(newValue);
+        try{guiders.next();}catch(ex){}
         target.val(newValue);
       }
       event.preventDefault();

public/javascripts/admin/tutorial.js

@@ -1,37 +1,147 @@
 $(document).ready(function(){
   
+  /*
+  *
+  * /admin/pages
+  *
+  */
+  if(window.location.pathname == "/admin/pages"){
+    
     guiders.createGuider({
-    description: "Welcome to LocomotiveCMS, <br /><br /> This guide will help you get up and running with locomotive",
-    buttons: [{name: "Quit Guide", onclick: guiders.hideAll},
-              {name: "Continue", onclick: guiders.next}],
+      attachTo: "undefined",
+      description: "Thank you for choosing LocomotiveCMS!, <br /><br />\
+      This guide will help you get up and running.\
+      We will walk you through some common tasks of LocomotiveCMS.\
+      This guide can be reached at any time by clicking the \"Help\" link<br /><br />\
+      Lets start by editing a page.",
+      buttons: [{name: "Quit", onclick: guiders.hideAll},
+                {name: "Next"}],
       id: "welcome",
-    next: "help",
+      next: "pagewelcome",
       overlay: true,
       title: "Welcome to Locomotive CMS"
     });
   
     guiders.createGuider({
-    attachTo: "#tutorial",
-    buttons: [{name: "Close", onclick: guiders.hideAll}],
+      attachTo: "#help_ele",
+      buttons: [],
+      description: "Click 'help' in the future to start these guides",
+      id: "welcome",
+      next: "pagewelcome",
+      position: 6,
+      width: 260,
+      height: 100,
+      title: ""
+    });
+  
+  
+    guiders.createGuider({
+      attachTo: "ul.folder:first li",
+      buttons: [],
+      description: "These are pages. You can click on the page name to edit it.",
+      id: "pagepointer",
+      next: "editpagewelcome",
+      width: 200,
+      position: 9,
+      title: ""
+    });
+    
+    guiders.createGuider({
+      attachTo: "undefined",
+      description: "A page is a collection of content on your site that can be reached at a web address <br /></br> For this example we will edit the 'About Us' page. To do that you would click on the page name.",
+      buttons: [{name: "Quit", onclick: guiders.hideAll},
+                {name: "Next", onclick: function(){
+                  window.location = $('ul.folder:first li a').attr('href') + "#guider=editpagewelcome"
+                }
+              }],
+      id: "pagewelcome",
+      next: "editpagewelcome",
+      overlay: true,
+      title: "What is a page?",
+      onShow: function(){
+        guiders.show('pagepointer')
+      }
+    });
+  
+  }
+  
+  
+  /*
+  *
+  * /admin/pages/edit 
+  *
+  */
+  if(window.location.pathname.indexOf('edit') !== -1){
+    guiders.createGuider({
+      attachTo: "undefined",
+      description:     "You are now editing the '"+$('a.editable:first').text()+"' page. Lets start by changing the title of this page.",
+      buttons: [{name: "Quit", onclick: guiders.hideAll},
+                {name: "Next"}],
+      id: "editpagewelcome",
+      next: "editpagetitle",
+      overlay: true,
+      title: "Editing A Page"
+    });
+  
+    guiders.createGuider({
+      attachTo: "a.editable:first",
+      buttons: [],
+      description: "",
+      id: "editpagetitle",
+      next: "help",
+      position: 6,
+      width: 250,
+      height: 100,
+      title: "Click here to edit the page title"
+    });
+  
+    guiders.createGuider({
+      description: "A page is a collection of content on your site that can be reached by an address",
+      buttons: [{name: "Quit", onclick: guiders.hideAll},
+                {name: "Next"}],
+      id: "pagetitle",
+      next: "editpagecontent",
+      title: "How to Change a Page Title"
+    });
+  
+  }
+  
+  guiders.createGuider({
+    attachTo: "#help_ele",
+    buttons: [{name: "Quit", onclick: guiders.hideAll}],
     description: "How To:<ul>\
-    <li><a id='new_page_tutorial' href=\"/admin/pages#guider=newpage\">Make a new Page</a></li>\
-    <li><a href=\"\">Edit a Page</a></li></ul>",
+    <li><a id='newpage' class='tutorial' href=\"/admin/pages#guider=newpage\">Make a new Page</a></li>\
+    <li><a id='viewsite' class='tutorial' href=\"\">View Your Site</a></li>\
+    <li><a id='editpagetutorial' class='tutorial' href=\"\">Edit A Page</a></li>\
+    <li><a id='editpagetutorial' class='tutorial' href=\"\">Create Content</a></li>\
+    <li><a id='editpagetutorial' class='tutorial' href=\"\">Save Your Site</a></li>\
+    <li><a id='editpagetutorial' class='tutorial' href=\"\">Edit a a Content instance</a></li>\
+    <li><a id='editpagetutorial' class='tutorial' href=\"\">Edit your site's settings</a></li></ul>",
     id: "help",
     position: 6,
     width: 200,
     title: "Locomotive Tutorials",
   });
   
-  $('#new_page_tutorial').click(function(){
+  $(".tutorial").click(function(){
     guiders.hideAll();
-    guiders.show('newpage');
+    guiders.show($(this).attr('id'));
     return false;
   });
   
+  $('#new_page_tutorial').click(function(){
+    if($('#newpage').length > 0){
+      guiders.hideAll();
+      guiders.show('newpage');
+    }else{
+      window.location = "/admin/pages#guider=newpage"
+    }
+    return false;
+  });
   
   guiders.createGuider({
     attachTo: "#newpage",
-    buttons: [{name: "Close", onclick: guiders.hideAll}],
+    buttons: [{name: "Quit", onclick: guiders.hideAll}],
     description: "Click above to make a new page",
     id: "newpage",
     position: 6,
@@ -39,5 +149,17 @@ $(document).ready(function(){
     title: "Make a new page",
   });
   
+  guiders.createGuider({
+    attachTo: "#viewsite_ele",
+    buttons: [{name: "Quit", onclick: guiders.hideAll}],
+    description: "This will take you to the 'frontend' of your site. Where you can see what users visiting your site see.",
+    id: "viewsite",
+    position: 6,
+    width: 250,
+    title: "Click Here To View Your Site",
+  });
+  
+  
+  
   
 });