Merge pull request #137 from Bushido/master
Guiders and new gem version
This commit is contained in:
Kev Zettler
commit
13e247691f
|
|
@ -58,7 +58,7 @@ GEM
|
|||
bson (1.3.1)
|
||||
bson_ext (1.3.1)
|
||||
builder (2.1.2)
|
||||
bushido (0.0.29)
|
||||
bushido (0.0.30)
|
||||
highline (>= 1.6.1)
|
||||
json (>= 1.4.6)
|
||||
rest-client (>= 1.6.1)
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
- if can? :create, Page
|
||||
- content_for :buttons do
|
||||
= admin_button_tag :new, new_admin_page_url, :class => 'new'
|
||||
= admin_button_tag :new, new_admin_page_url, :class => 'new', :id => "newpage"
|
||||
|
||||
%p!= t('.help')
|
||||
|
||||
|
|
|
|||
|
|
@ -4,11 +4,13 @@
|
|||
#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", :target => "_blank"
|
||||
- if multi_sites? && current_admin.sites.size > 1
|
||||
%span= '|'
|
||||
= link_to t('.switch'), '#', :id => 'sites-picker-link'
|
||||
%span= '|'
|
||||
= link_to 'Help', '#', :class => "tutorial", :id => "help"
|
||||
%span= '|'
|
||||
= link_to t('.logout'), destroy_admin_session_url, :confirm => t('admin.messages.confirm')
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@
|
|||
"ruby_version": "1.9.2",
|
||||
"sql": false,
|
||||
"mongodb": true,
|
||||
"start_page": "admin/pages",
|
||||
"start_page": "admin/pages#guider=welcome",
|
||||
"project_name": "locomotive"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ Locomotive::Application.configure do
|
|||
|
||||
# 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"
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ en:
|
|||
form_actions:
|
||||
back: Back without saving
|
||||
create: Create
|
||||
update: Update
|
||||
update: Save
|
||||
send: Send
|
||||
|
||||
errors:
|
||||
|
|
@ -106,7 +106,7 @@ en:
|
|||
updated_at: updated at
|
||||
edit:
|
||||
show: show
|
||||
help: "The page title can be updated by clicking it. To apply your changes, click on the \"Update\" button."
|
||||
help: "The page title can be updated by clicking it. To apply your changes, click on the \"Save\" button."
|
||||
ask_for_title: "Please type the new page title"
|
||||
form:
|
||||
delete_file: Delete file
|
||||
|
|
@ -144,7 +144,7 @@ en:
|
|||
export: export
|
||||
import: import
|
||||
new_membership: add account
|
||||
help: "The site name can be updated by clicking it. To apply your changes, click on the \"Update\" button."
|
||||
help: "The site name can be updated by clicking it. To apply your changes, click on the \"Save\" button."
|
||||
ask_for_name: "Please type the new site name"
|
||||
|
||||
memberships:
|
||||
|
|
@ -163,7 +163,7 @@ en:
|
|||
|
||||
my_account:
|
||||
edit:
|
||||
help: "Your name can be updated by clicking it. To apply your changes, click on the \"Update\" button."
|
||||
help: "Your name can be updated by clicking it. To apply your changes, click on the \"Save\" button."
|
||||
new_site: new site
|
||||
en: English
|
||||
de: German
|
||||
|
|
|
|||
|
|
@ -31,4 +31,4 @@ production:
|
|||
# uri: <%= ENV['MONGOHQ_URL'] %>
|
||||
|
||||
# bushido (mongohq_url will also work)
|
||||
uri: <%= ENV['MONGODB_URL'] %>
|
||||
uri: <%= ENV['MONGODB_URL'] %>
|
||||
|
|
|
|||
|
|
@ -19,10 +19,8 @@ module Locomotive
|
|||
sign_in(Account.order_by(:created_at).first)
|
||||
end
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -62,6 +62,31 @@ var TinyMceDefaultSettings = {
|
|||
fullscreen_new_window : false,
|
||||
fullscreen_settings : {
|
||||
theme_advanced_path_location : "top"
|
||||
},
|
||||
/*
|
||||
*
|
||||
* These are call backs aide in the guider creation
|
||||
*
|
||||
*/
|
||||
onchange_callback: function(){
|
||||
if($('#pageeditcontent:visible').length > 0){
|
||||
guiders.next();
|
||||
}
|
||||
},
|
||||
oninit: function(){
|
||||
if(typeof window.guiders !== 'undefined' &&
|
||||
window.location.pathname.match('admin/pages/.+\/edit') != null){
|
||||
guiders.createGuider({
|
||||
attachTo: '#page_editable_elements_attributes_1_content_ifr',
|
||||
title: "Edit the content of the page",
|
||||
description: "You can edit the content of your page in this text box. Go Ahead, add somethign like 'locomotiveCMS rocks!'. We'll wait for you.",
|
||||
buttons: [],
|
||||
id: "pageeditcontent",
|
||||
next: "savepageedit",
|
||||
position: 9,
|
||||
width: 300
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -101,6 +126,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();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,322 @@
|
|||
/**
|
||||
* guiders.js
|
||||
*
|
||||
* version 1.1.0
|
||||
*
|
||||
* Developed at Optimizely. (www.optimizely.com)
|
||||
* We make A/B testing you'll actually use.
|
||||
*
|
||||
* Released under the Apache License 2.0.
|
||||
* www.apache.org/licenses/LICENSE-2.0.html
|
||||
*
|
||||
* Questions about Guiders or Optimizely?
|
||||
* Email us at jeff+pickhardt@optimizely.com or hello@optimizely.com.
|
||||
*
|
||||
* Enjoy!
|
||||
*/
|
||||
|
||||
var guiders = (function($){
|
||||
var guiders = {
|
||||
version: "1.1.0",
|
||||
|
||||
_defaultSettings: {
|
||||
attachTo: null,
|
||||
buttons: [{name: "Close"}],
|
||||
buttonCustomHTML: "",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
|
||||
isHashable: true,
|
||||
onShow: null,
|
||||
overlay: false,
|
||||
position: 0, // 1-12 follows an analog clock, 0 means centered
|
||||
title: "Sample title goes here",
|
||||
width: 400
|
||||
},
|
||||
|
||||
_htmlSkeleton: [
|
||||
"<div class='guider'>",
|
||||
" <div class='guider_content'>",
|
||||
" <h1 class='guider_title'></h1>",
|
||||
" <p class='guider_description'></p>",
|
||||
" <div class='guider_buttons'>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class='guider_arrow'>",
|
||||
" </div>",
|
||||
"</div>"
|
||||
].join(""),
|
||||
|
||||
_arrowSize: 42, // = arrow's width and height
|
||||
_guiders: {},
|
||||
_currentGuiderID: null,
|
||||
_lastCreatedGuiderID: null,
|
||||
|
||||
_addButtons: function(myGuider) {
|
||||
// Add buttons
|
||||
var guiderButtonsContainer = myGuider.elem.find(".guider_buttons");
|
||||
for (var i = myGuider.buttons.length-1; i >= 0; i--) {
|
||||
var thisButton = myGuider.buttons[i];
|
||||
var thisButtonElem = $("<a></a>", {
|
||||
"class" : "guider_button",
|
||||
"text" : thisButton.name });
|
||||
if (typeof thisButton.classString !== "undefined" && thisButton.classString !== null) {
|
||||
thisButtonElem.addClass(thisButton.classString);
|
||||
}
|
||||
|
||||
guiderButtonsContainer.append(thisButtonElem);
|
||||
|
||||
if (thisButton.onclick) {
|
||||
thisButtonElem.bind("click", thisButton.onclick);
|
||||
} else if (!thisButton.onclick && thisButton.name.toLowerCase() === "close") {
|
||||
thisButtonElem.bind("click", function() { guiders.hideAll(); });
|
||||
} else if (!thisButton.onclick && thisButton.name.toLowerCase() === "next") {
|
||||
thisButtonElem.bind("click", function() { guiders.next(); });
|
||||
}
|
||||
}
|
||||
|
||||
if (myGuider.buttonCustomHTML !== "") {
|
||||
var myCustomHTML = $(myGuider.buttonCustomHTML);
|
||||
myGuider.elem.find(".guider_buttons").append(myCustomHTML);
|
||||
}
|
||||
},
|
||||
|
||||
_attach: function(myGuider) {
|
||||
if (typeof myGuider.attachTo === "undefined" || myGuider === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
var myHeight = myGuider.elem.innerHeight();
|
||||
var myWidth = myGuider.elem.innerWidth();
|
||||
|
||||
if (myGuider.position === 0) {
|
||||
myGuider.elem.css("position", "absolute");
|
||||
myGuider.elem.css("top", ($(window).height() - myHeight) / 3 + $(window).scrollTop() + "px");
|
||||
myGuider.elem.css("left", ($(window).width() - myWidth) / 2 + $(window).scrollLeft() + "px");
|
||||
return;
|
||||
}
|
||||
|
||||
myGuider.attachTo = $(myGuider.attachTo);
|
||||
var base = myGuider.attachTo.offset();
|
||||
var attachToHeight = myGuider.attachTo.innerHeight();
|
||||
var attachToWidth = myGuider.attachTo.innerWidth();
|
||||
|
||||
var top = base.top;
|
||||
var left = base.left;
|
||||
|
||||
var bufferOffset = 0.9 * guiders._arrowSize;
|
||||
|
||||
var offsetMap = { // Follows the form: [height, width]
|
||||
1: [-bufferOffset - myHeight, attachToWidth - myWidth],
|
||||
2: [0, bufferOffset + attachToWidth],
|
||||
3: [attachToHeight/2 - myHeight/2, bufferOffset + attachToWidth],
|
||||
4: [attachToHeight - myHeight, bufferOffset + attachToWidth],
|
||||
5: [bufferOffset + attachToHeight, attachToWidth - myWidth],
|
||||
6: [bufferOffset + attachToHeight, attachToWidth/2 - myWidth/2],
|
||||
7: [bufferOffset + attachToHeight, 0],
|
||||
8: [attachToHeight - myHeight, -myWidth - bufferOffset],
|
||||
9: [attachToHeight/2 - myHeight/2, -myWidth - bufferOffset],
|
||||
10: [0, -myWidth - bufferOffset],
|
||||
11: [-bufferOffset - myHeight, 0],
|
||||
12: [-bufferOffset - myHeight, attachToWidth/2 - myWidth/2]
|
||||
};
|
||||
|
||||
offset = offsetMap[myGuider.position];
|
||||
top += offset[0];
|
||||
left += offset[1];
|
||||
|
||||
myGuider.elem.css({
|
||||
"position":"absolute",
|
||||
"top": top,
|
||||
"left": left
|
||||
});
|
||||
},
|
||||
|
||||
_guiderById: function(id) {
|
||||
if (typeof guiders._guiders[id] === "undefined") {
|
||||
throw "Cannot find guider with id " + id;
|
||||
}
|
||||
return guiders._guiders[id];
|
||||
},
|
||||
|
||||
_showOverlay: function() {
|
||||
$("#guider_overlay").fadeIn("fast");
|
||||
},
|
||||
|
||||
_hideOverlay: function() {
|
||||
$("#guider_overlay").fadeOut("fast");
|
||||
},
|
||||
|
||||
_initializeOverlay: function() {
|
||||
if ($("#guider_overlay").length === 0) {
|
||||
$("<div id=\"guider_overlay\"></div>").hide().appendTo("body");
|
||||
}
|
||||
},
|
||||
|
||||
_styleArrow: function(myGuider) {
|
||||
var position = myGuider.position || 0;
|
||||
if (!position) {
|
||||
return;
|
||||
}
|
||||
var myGuiderArrow = $(myGuider.elem.find(".guider_arrow"));
|
||||
var newClass = {
|
||||
1: "guider_arrow_down",
|
||||
2: "guider_arrow_left",
|
||||
3: "guider_arrow_left",
|
||||
4: "guider_arrow_left",
|
||||
5: "guider_arrow_up",
|
||||
6: "guider_arrow_up",
|
||||
7: "guider_arrow_up",
|
||||
8: "guider_arrow_right",
|
||||
9: "guider_arrow_right",
|
||||
10: "guider_arrow_right",
|
||||
11: "guider_arrow_down",
|
||||
12: "guider_arrow_down"
|
||||
};
|
||||
myGuiderArrow.addClass(newClass[position]);
|
||||
|
||||
var myHeight = myGuider.elem.innerHeight();
|
||||
var myWidth = myGuider.elem.innerWidth();
|
||||
var arrowOffset = guiders._arrowSize / 2;
|
||||
var positionMap = {
|
||||
1: ["right", arrowOffset],
|
||||
2: ["top", arrowOffset],
|
||||
3: ["top", myHeight/2 - arrowOffset],
|
||||
4: ["bottom", arrowOffset],
|
||||
5: ["right", arrowOffset],
|
||||
6: ["left", myWidth/2 - arrowOffset],
|
||||
7: ["left", arrowOffset],
|
||||
8: ["bottom", arrowOffset],
|
||||
9: ["top", myHeight/2 - arrowOffset],
|
||||
10: ["top", arrowOffset],
|
||||
11: ["left", arrowOffset],
|
||||
12: ["left", myWidth/2 - arrowOffset]
|
||||
};
|
||||
var position = positionMap[myGuider.position];
|
||||
myGuiderArrow.css(position[0], position[1] + "px");
|
||||
},
|
||||
|
||||
/**
|
||||
* One way to show a guider to new users is to direct new users to a URL such as
|
||||
* http://www.mysite.com/myapp#guider=welcome
|
||||
*
|
||||
* This can also be used to run guiders on multiple pages, by redirecting from
|
||||
* one page to another, with the guider id in the hash tag.
|
||||
*
|
||||
* Alternatively, if you use a session variable or flash messages after sign up,
|
||||
* you can add selectively add JavaScript to the page: "guiders.show('first');"
|
||||
*/
|
||||
_showIfHashed: function(myGuider) {
|
||||
var GUIDER_HASH_TAG = "guider=";
|
||||
var hashIndex = window.location.hash.indexOf(GUIDER_HASH_TAG);
|
||||
if (hashIndex !== -1) {
|
||||
var hashGuiderId = window.location.hash.substr(hashIndex + GUIDER_HASH_TAG.length);
|
||||
if (myGuider.id.toLowerCase() === hashGuiderId.toLowerCase()) {
|
||||
// Success!
|
||||
guiders.show(myGuider.id);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
next: function() {
|
||||
var currentGuider = guiders._guiders[guiders._currentGuiderID];
|
||||
if (typeof currentGuider === "undefined") {
|
||||
return;
|
||||
}
|
||||
var nextGuiderId = currentGuider.next || null;
|
||||
if (nextGuiderId !== null && nextGuiderId !== "") {
|
||||
var myGuider = guiders._guiderById(nextGuiderId);
|
||||
var omitHidingOverlay = myGuider.overlay ? true : false;
|
||||
guiders.hideAll(omitHidingOverlay);
|
||||
guiders.show(nextGuiderId);
|
||||
}
|
||||
},
|
||||
|
||||
createGuider: function(passedSettings) {
|
||||
if (passedSettings === null || passedSettings === undefined) {
|
||||
passedSettings = {};
|
||||
}
|
||||
|
||||
// Extend those settings with passedSettings
|
||||
myGuider = $.extend({}, guiders._defaultSettings, passedSettings);
|
||||
myGuider.id = myGuider.id || String(Math.floor(Math.random() * 1000));
|
||||
|
||||
var guiderElement = $(guiders._htmlSkeleton);
|
||||
myGuider.elem = guiderElement;
|
||||
myGuider.elem.css("width", myGuider.width + "px");
|
||||
guiderElement.find("h1.guider_title").html(myGuider.title);
|
||||
guiderElement.find("p.guider_description").html(myGuider.description);
|
||||
|
||||
guiders._addButtons(myGuider);
|
||||
|
||||
guiderElement.hide();
|
||||
guiderElement.appendTo("body");
|
||||
guiderElement.attr("id", myGuider.id);
|
||||
|
||||
// Ensure myGuider.attachTo is a jQuery element.
|
||||
if (typeof myGuider.attachTo !== "undefined" && myGuider !== null) {
|
||||
guiders._attach(myGuider);
|
||||
guiders._styleArrow(myGuider);
|
||||
}
|
||||
|
||||
guiders._initializeOverlay();
|
||||
|
||||
guiders._guiders[myGuider.id] = myGuider;
|
||||
guiders._lastCreatedGuiderID = myGuider.id;
|
||||
|
||||
/**
|
||||
* If the URL of the current window is of the form
|
||||
* http://www.myurl.com/mypage.html#guider=id
|
||||
* then show this guider.
|
||||
*/
|
||||
if (myGuider.isHashable) {
|
||||
guiders._showIfHashed(myGuider);
|
||||
}
|
||||
|
||||
return guiders;
|
||||
},
|
||||
|
||||
hideAll: function(omitHidingOverlay) {
|
||||
$(".guider").fadeOut("fast");
|
||||
if (typeof omitHidingOverlay !== "undefined" && omitHidingOverlay === true) {
|
||||
// do nothing for now
|
||||
} else {
|
||||
guiders._hideOverlay();
|
||||
}
|
||||
return guiders;
|
||||
},
|
||||
|
||||
show: function(id) {
|
||||
if (!id && guiders._lastCreatedGuiderID) {
|
||||
id = guiders._lastCreatedGuiderID;
|
||||
}
|
||||
|
||||
var myGuider = guiders._guiderById(id);
|
||||
if (myGuider.overlay) {
|
||||
guiders._showOverlay();
|
||||
}
|
||||
|
||||
guiders._attach(myGuider);
|
||||
|
||||
// You can use an onShow function to take some action before the guider is shown.
|
||||
if (myGuider.onShow) {
|
||||
myGuider.onShow(myGuider);
|
||||
}
|
||||
|
||||
myGuider.elem.fadeIn("fast");
|
||||
|
||||
var windowHeight = $(window).height();
|
||||
var scrollHeight = $(window).scrollTop();
|
||||
var guiderOffset = myGuider.elem.offset();
|
||||
var guiderElemHeight = myGuider.elem.height();
|
||||
|
||||
if (guiderOffset.top - scrollHeight < 0 ||
|
||||
guiderOffset.top + guiderElemHeight + 40 > scrollHeight + windowHeight) {
|
||||
window.scrollTo(0, Math.max(guiderOffset.top + (guiderElemHeight / 2) - (windowHeight / 2), 0));
|
||||
}
|
||||
|
||||
guiders._currentGuiderID = id;
|
||||
return guiders;
|
||||
}
|
||||
};
|
||||
|
||||
return guiders;
|
||||
}).call(this, jQuery);
|
||||
|
|
@ -0,0 +1,600 @@
|
|||
$(document).ready(function(){
|
||||
|
||||
/*
|
||||
*
|
||||
* /admin/pages
|
||||
*
|
||||
*/
|
||||
if(window.location.pathname == "/admin/pages"){
|
||||
|
||||
$('#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}],
|
||||
description: "Click above to make a new page",
|
||||
id: "newpage",
|
||||
position: 6,
|
||||
width: 200,
|
||||
title: "Make a new page",
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
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: "pagewelcome",
|
||||
overlay: true,
|
||||
title: "Welcome to Locomotive CMS"
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "#help",
|
||||
buttons: [],
|
||||
description: "Click 'help' in the future to start these guides",
|
||||
id: "welcome",
|
||||
next: "pagewelcome",
|
||||
position: 6,
|
||||
width: 260,
|
||||
height: 100,
|
||||
title: ""
|
||||
});
|
||||
|
||||
var pagehook = (function(){
|
||||
var possibles = ['ul.folder:first li',
|
||||
'ul#pages-list li'];
|
||||
for(var i = 0; i<possibles.length; i++){
|
||||
console.log("checking possibles", i, possibles[i]);
|
||||
if($(possibles[i]).length > 0){
|
||||
return possibles[i];
|
||||
}
|
||||
}
|
||||
}());
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: pagehook,
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next - Edit "+$(pagehook+' a:first').text()+"", onclick: function(){
|
||||
window.location = $(pagehook+' a:first').attr('href') + "#guider=editpagewelcome"
|
||||
}
|
||||
}],
|
||||
description: "These are pages. You can click on the page name to edit it.",
|
||||
id: "pagepointer",
|
||||
next: "editpagewelcome",
|
||||
width: 200,
|
||||
position: 9,
|
||||
overlay: true,
|
||||
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 '"+$(pagehook+' a:first').text()+"' page. To do that you would click on the page name.",
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next"}],
|
||||
id: "pagewelcome",
|
||||
next: "pagepointer",
|
||||
overlay: true,
|
||||
title: "What is a page?"// ,
|
||||
// onShow: function(){
|
||||
// guiders.show('pagepointer')
|
||||
// }
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: 'li.hoverable:eq(2)',
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next - Edit an Event",
|
||||
onclick: function(){
|
||||
window.location = $('li.hoverable:eq(2) li:first a').attr('href') + "#guider=editmodelwelcome";
|
||||
}}],
|
||||
description: "These are models.<br /> You can hover over to edit them. For this next section of the guide. We will edit an Event model. '"+$('.inner:eq(3) li:first a').text()+"' ",
|
||||
id: "modelpointer",
|
||||
next: "editpagewelcome",
|
||||
width: 240,
|
||||
position: 4,
|
||||
title: ""
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: 'div.action span',
|
||||
buttons: [],
|
||||
description: "Click here to make a new model",
|
||||
id: "newmodelpointer",
|
||||
next: "editpagewelcome",
|
||||
position: 6,
|
||||
overlay: true,
|
||||
width: 200,
|
||||
title: ""
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: 'div.action span',
|
||||
buttons: [],
|
||||
description: "Click here to make a new model",
|
||||
id: "newmodelpointer-next",
|
||||
next: "editpagewelcome",
|
||||
position: 6,
|
||||
width: 200,
|
||||
title: "",
|
||||
onShow: function(){
|
||||
console.log("updating new model url");
|
||||
$('div.action a').attr('href',
|
||||
$('div.action a').attr('href') + "#guider=newmodelwelcome");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "undefined",
|
||||
description: (function(){
|
||||
var ret = "What is a model?<br />\
|
||||
The concept of a model within locomotiveCMS is a peice of content that you might reuse through out your site.\
|
||||
Some example models could be: Blog posts, Products, Events, Locations, Photos<br /></br />"
|
||||
|
||||
if($('li.hoverable').length > 1){
|
||||
ret += "For this next section of the guide. We will edit our Event model. '"+$('.inner:eq(3) li:first a').text()+"' ";
|
||||
}else{
|
||||
ret += "For this next section of the guide, lets make a new model";
|
||||
}
|
||||
|
||||
return ret;
|
||||
}()),
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next"}],
|
||||
// (function(){
|
||||
// if($('li.hoverable').length < 1){
|
||||
// return {
|
||||
// name: "Next - Create a Model",
|
||||
// onclick: function(){
|
||||
// guiders.hideAll();
|
||||
// guiders.show('newmodelpointer-next');
|
||||
// }
|
||||
// };
|
||||
// }else{
|
||||
// return {
|
||||
// name: "Next - Edit an Event",
|
||||
// onclick: function(){
|
||||
// window.location = $('li.hoverable:eq(2) li:first a').attr('href') + "#guider=editmodelwelcome";
|
||||
// }
|
||||
// };
|
||||
// }
|
||||
// }())],
|
||||
id: "modelwelcome",
|
||||
next: (function(){
|
||||
if($('li.hoverable').length > 1){
|
||||
return "modelpointer";
|
||||
}
|
||||
return 'newmodelpointer';
|
||||
}()),
|
||||
overlay: true,
|
||||
title: "Lets talk about Models...",
|
||||
// onShow: function(){
|
||||
// if($('li.hoverable').length > 1){
|
||||
// guiders.show("modelpointer");
|
||||
// }
|
||||
// //guiders.show('newmodelpointer');
|
||||
// }
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: 'li.settings a',
|
||||
buttons: [],
|
||||
description: "Click this tab to edit your settings.",
|
||||
id: "settingspointer",
|
||||
position: 3,
|
||||
width: 200,
|
||||
title: ""
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "undefined",
|
||||
description: "LocomotiveCMS has several features that you can adjust in the settings panel. Lets head there now!",
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next - Goto Settings", onclick: function(){
|
||||
window.location = $('li.settings a').attr('href') + "#guider=settingseditwelcome";
|
||||
}}],
|
||||
id: "settingswelcome",
|
||||
overlay: true,
|
||||
title: "How To Change Your Settings",
|
||||
onShow: function(){
|
||||
guiders.show("settingspointer");
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* /admin/pages/edit
|
||||
*
|
||||
*/
|
||||
if(window.location.pathname.match('admin/pages/.+\/edit') != null){
|
||||
|
||||
// /*
|
||||
// * We have to delay the creation of this guider
|
||||
// * so TinyMCE can render it
|
||||
// */
|
||||
// window.onload = function(){
|
||||
// window.setTimeout(function(){
|
||||
// guiders.createGuider({
|
||||
// attachTo: '#page_editable_elements_attributes_1_content_ifr',
|
||||
// title: "Edit the content of the page",
|
||||
// description: "You can edit the content of your page in this text box. Go Ahead, add somethign like 'locomotiveCMS rocks!'. We'll wait for you.",
|
||||
// buttons: [],
|
||||
// id: "pageeditcontent",
|
||||
// next: "savepageedit",
|
||||
// position: 9,
|
||||
// width: 300
|
||||
// });
|
||||
// }, 2000);
|
||||
// };
|
||||
|
||||
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"
|
||||
});
|
||||
|
||||
|
||||
var page_title = 'Guide Demo Page';
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "a.editable:first",
|
||||
buttons: [],
|
||||
title: "",
|
||||
id: "editpagetitle",
|
||||
next: "greatjob",
|
||||
position: 6,
|
||||
width: 200,
|
||||
height: 100,
|
||||
description: "Click here to edit the page title. <br /><br /> Change the title to '"+page_title+"'"
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "undefined",
|
||||
description: "You just changed the title of this page. Lets continue by editing the page content.",
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next"}],
|
||||
id: "greatjob",
|
||||
next: "pageeditcontent",
|
||||
overlay: true,
|
||||
title: "Great Job!"
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
buttons: [],
|
||||
attachTo: "button.light:last",
|
||||
description: "Click this save button to save any changes you've made to the page.",
|
||||
id: "savepageedit",
|
||||
position: 12,
|
||||
title: "Save Your Work",
|
||||
onShow: function(){
|
||||
$('form.save-with-shortcut').attr('action',
|
||||
$('form.save-with-shortcut').attr('action')+"#guider=editsavesuccess");
|
||||
}
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "undefined",
|
||||
description: "Great work! you've update this page. You can review your work by checking out the 'frontend' of the site.",
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next"}],
|
||||
id: "editsavesuccess",
|
||||
next: "viewsite2",
|
||||
overlay: true,
|
||||
title: "Page Saved Successfully!"
|
||||
});
|
||||
|
||||
function viewSiteClick(e){
|
||||
console.log("viewsite click!");
|
||||
var $this = $(e.target);
|
||||
e.preventDefault();
|
||||
window.open($this.attr('href'),"_blank");
|
||||
$this.attr('href', '#');
|
||||
guiders.next();
|
||||
$this.unbind('click', viewSiteClick);
|
||||
return false;
|
||||
//should probably unbind this to prevent double clicking
|
||||
}
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "#viewsite_ele",
|
||||
buttons: [],
|
||||
description: "This will open a new tab in your browser and take you to the 'frontend' of your site. The frontend is what other visitors to your site will see. Come back to this tab in your browser to continue the guide.",
|
||||
id: "viewsite2",
|
||||
next: "editfinish",
|
||||
position: 6,
|
||||
width: 280,
|
||||
title: "Click Here To View Your Site",
|
||||
onShow: function(){
|
||||
console.log("binding click for view site", $('#viewsite_ele'));
|
||||
$('#viewsite_ele').bind('click', viewSiteClick);
|
||||
}
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "undefined",
|
||||
description: "Congratulations. You've just edited a page using LocomotiveCMS! Moving on, we will now move onto models. Lets return to the admin home.",
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next - Goto Admin Home", onclick: function(){
|
||||
window.location = "/admin/pages#guider=modelwelcome";
|
||||
}}],
|
||||
id: "editfinish",
|
||||
overlay: true,
|
||||
title: "Done editing."
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* New model
|
||||
*
|
||||
*/
|
||||
if(window.location.pathname.match('admin/content_types/new') != null ||
|
||||
window.location.pathname.match('admin/content_types/.+/edit')){
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "undefined",
|
||||
description: "A model is how you define the content on your site. Lots of sites have: Blog Posts, Products, Photo Albums, Events.\
|
||||
These are all differnt models.<br /><br />\
|
||||
Models have fields. Fields are properties of a model. For example a Blog Post, has fields of: Author, Title, Content.<br /></br/>\
|
||||
Try creating your own model and saving it!",
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next"}],
|
||||
id: "newmodelwelcome",
|
||||
next: "createmodel",
|
||||
overlay: true,
|
||||
title: "Lets create a new model!"
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
buttons: [],
|
||||
attachTo: "button.light:first",
|
||||
description: "Click this button to create your new model!",
|
||||
id: "createmodel",
|
||||
next: "help",
|
||||
position: 9,
|
||||
title: "Save Your Work",
|
||||
onShow: function(){
|
||||
$('#new_content_type').attr('action',
|
||||
$('#new_content_type').attr('action')+"#guider=newmodelsuccess");
|
||||
}
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "undefined",
|
||||
description: (function(){
|
||||
if($('.inline-errors').length > 0){
|
||||
return "Looks like you forgot something. Please Check out the errors and try again!";
|
||||
}else{
|
||||
return "You've Successfully created a model! Moving on. Lets adjust the settings of your LocomotiveCMS";
|
||||
}
|
||||
}),
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next - Settings", onclick: function(){
|
||||
window.location = "/admin/pages#guider=settingswelcome";
|
||||
}}],
|
||||
id: "newmodelsuccess",
|
||||
next: "editsubdomain",
|
||||
overlay: true,
|
||||
title: (function(){
|
||||
if($('.inline-errors').length > 0){
|
||||
return "Uh oh.";
|
||||
}else{
|
||||
return "Great Work! You Made A New Model.";
|
||||
}
|
||||
}),
|
||||
onShow: (function(){
|
||||
if($('.inline-errors').length > 0){
|
||||
guiders.show('createmodel');
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
*
|
||||
* Content edits
|
||||
*
|
||||
*/
|
||||
if(window.location.pathname.match('admin/content_types/events/contents/.+/edit') != null){
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "undefined",
|
||||
description: "You are now edting an instance of our event model.\
|
||||
Make some changes to this event model and it will be reflected everywhere the data is used throught the site.",
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next"}],
|
||||
id: "editmodelwelcome",
|
||||
next: "savemodel",
|
||||
overlay: true,
|
||||
title: "Editing an Event model"
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
buttons: [],
|
||||
attachTo: "button.light:last",
|
||||
description: "Click this update button to save any changes you've made to the page.",
|
||||
id: "savemodel",
|
||||
position: 12,
|
||||
title: "Save Your Work",
|
||||
onShow: function(){
|
||||
$('form.save-with-shortcut').attr('action',
|
||||
$('form.save-with-shortcut').attr('action')+"#guider=modelsavesuccess");
|
||||
}
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "undefined",
|
||||
description: "You've Successfully updated this model",
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next - Goto Admin Home", onclick: function(){
|
||||
window.location = "/admin/pages#guider=settingswelcome";
|
||||
}}],
|
||||
id: "modelsavesuccess",
|
||||
overlay: true,
|
||||
title: "Great Work!"
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* Settings page
|
||||
*
|
||||
*/
|
||||
if(window.location.pathname.match("admin/current_site/edit") != null){
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "undefined",
|
||||
description: "Welcome to the Settings page. Here you can create new user accounts to use LocomotiveCMS, Edit SEO options, and more. We will start by changing the subomain of our site.",
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next"}],
|
||||
id: "settingseditwelcome",
|
||||
next: "editsubdomain",
|
||||
overlay: true,
|
||||
title: "The Settings Page"
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "#site_subdomain",
|
||||
description: "Edit this field to change the subdomain of your site",
|
||||
buttons: [],
|
||||
id: "editsubdomain",
|
||||
next: "settingssave",
|
||||
title: '',
|
||||
position: 12,
|
||||
onShow: function(){
|
||||
$('#site_subdomain').bind('change', function(){
|
||||
guiders.next();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
buttons: [],
|
||||
attachTo: "button.light:last",
|
||||
description: "Click this update button to save any changes you've made to the settings.",
|
||||
id: "settingssave",
|
||||
position: 12,
|
||||
title: "Save Your Work",
|
||||
onShow: function(){
|
||||
$('form.save-with-shortcut').attr('action',
|
||||
$('form.save-with-shortcut').attr('action')+"#guider=settingssavesuccess");
|
||||
}
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "undefined",
|
||||
title: "Great Work!",
|
||||
description: "You've Successfully updated your LocomotiveCMS settings. Dosen't that feel awesome?",
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll},
|
||||
{name: "Next", onclick: function(){
|
||||
if($('#bushi_banner').length > 0){
|
||||
guiders.hideAll();
|
||||
guiders.show("bushi_banner_guide");
|
||||
}else{
|
||||
guiders.hideAll();
|
||||
guiders.show("congratulations");
|
||||
}
|
||||
}}],
|
||||
id: "settingssavesuccess",
|
||||
overlay: true
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
*
|
||||
* Global
|
||||
*
|
||||
*/
|
||||
guiders.createGuider({
|
||||
attachTo: "#help",
|
||||
buttons: [{name: "Quit", onclick: guiders.hideAll}],
|
||||
description: "How To:<ul>\
|
||||
<li><a id='newpage' class='tutorial' href=\"/admin/pages\">Make a new Page</a></li>\
|
||||
<li><a id='viewsite' class='tutorial' href=\"#\">View Your Site</a></li>\
|
||||
<li><a id='pagewelcome' class='tutorial' href=\"/admin/pages\">Edit A Page</a></li>\
|
||||
<li><a id='modelwelcome' class='tutorial' href=\"/admin/pages\">Edit a a Content instance</a></li>\
|
||||
<li><a id='settingseditwelcome' class='tutorial' href=\"/admin/current_site/edit\">Edit your site's settings</a></li></ul>",
|
||||
id: "help",
|
||||
position: 6,
|
||||
width: 200,
|
||||
title: "Locomotive Guides",
|
||||
});
|
||||
|
||||
$(".tutorial").click(function(){
|
||||
var $this = $(this);
|
||||
guiders.hideAll();
|
||||
if($this.attr('href') != '#'){
|
||||
window.location = $this.attr('href') + "#guider=" + $this.attr('id');
|
||||
window.location.refresh;
|
||||
}else{
|
||||
guiders.show($this.attr('id'));
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "#viewsite_ele",
|
||||
buttons: [{name: "Close", 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: 280,
|
||||
title: "Click Here To View Your Site",
|
||||
});
|
||||
|
||||
guiders.createGuider({
|
||||
attachTo: "undefined",
|
||||
description: "You've gone through the LocomotiveCMS guide! For more info on LocomotiveCMS,\
|
||||
checkout out <a href='http://www.locomotivecms.com/support/'>The LocomotiveCMS support pages</a>",
|
||||
buttons:[{name: "Finished!", onclick: guiders.hideAll}],
|
||||
id: "congratulations",
|
||||
next: "bushi_banner",
|
||||
overlay: true,
|
||||
title: "Congratulations!"
|
||||
});
|
||||
|
||||
window.onload = function(){
|
||||
window.setTimeout(function(){
|
||||
guiders.createGuider({
|
||||
attachTo: "#bushi_banner",
|
||||
description: "You may have noticed the bar at the top of your site. Its provided by Bushido. Bushido are friends of LocomotiveCMS. They are our official hosting partner.\
|
||||
<br /><br /> They will keep your LocomotiveCMS site up and running. If you want to keep your LocomotiveCMS site, they have a short signup processes above. Check it out!",
|
||||
buttons: [{name: "Next"}],
|
||||
id: "bushi_banner_guide",
|
||||
overlay: true,
|
||||
title: "One more Thing...",
|
||||
next: "congratulations",
|
||||
position: 6
|
||||
});
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
.guider {
|
||||
background: #FFF;
|
||||
border: 1px solid #666;
|
||||
font-family: arial;
|
||||
position: absolute;
|
||||
outline: none;
|
||||
z-index: 100000005 !important;
|
||||
padding: 4px 12px;
|
||||
width: 500px;
|
||||
z-index: 100;
|
||||
|
||||
/* Shadow */
|
||||
-moz-box-shadow: 0 0px 8px #111;
|
||||
-webkit-box-shadow: 0 0px 8px #111;
|
||||
box-shadow: 0 0px 8px #111;
|
||||
/* End shadow */
|
||||
|
||||
/* Rounded corners */
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
/* End rounded corners */
|
||||
}
|
||||
|
||||
.guider_buttons {
|
||||
height: 36px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.guider_content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.guider_content h1 {
|
||||
color: #1054AA;
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.guider_content p {
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.guider_button {
|
||||
background: -moz-linear-gradient(top, #5CA9FF 0%, #3D79C3 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5CA9FF), color-stop(100%, #3D79C3));
|
||||
background-color: #4A95E0; /* overruled by background gradient, in browsers where they exist */
|
||||
border: solid 1px #4B5D7E;
|
||||
color: #FFF;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
font-size: 75%;
|
||||
font-weight: bold;
|
||||
margin-left: 6px;
|
||||
min-width: 40px;
|
||||
padding: 3px 5px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
/* Rounded corners */
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
/* End rounded corners */
|
||||
}
|
||||
|
||||
#guider_overlay {
|
||||
background-color: #000;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
opacity: 0.5;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
filter: alpha(opacity=50);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.guider_arrow {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 100000006 !important;
|
||||
|
||||
/**
|
||||
* For optimization, the arrows image is inlined in the css below.
|
||||
*
|
||||
* To use your own arrows image, replace this background-image with your own arrows.
|
||||
* It should have four arrows, top, right, left, and down.
|
||||
*/
|
||||
background-image: url(data:image/png;base64,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);
|
||||
*background-image: url('guider_arrows.png');
|
||||
}
|
||||
|
||||
.guider_arrow_right {
|
||||
display: block;
|
||||
background-position: 0px 0px;
|
||||
right: -42px;
|
||||
}
|
||||
.guider_arrow_down {
|
||||
display: block;
|
||||
background-position: 0px -42px;
|
||||
bottom: -42px;
|
||||
}
|
||||
.guider_arrow_up {
|
||||
display: block;
|
||||
background-position: 0px -126px;
|
||||
top: -42px;
|
||||
}
|
||||
.guider_arrow_left {
|
||||
display: block;
|
||||
background-position: 0px -84px;
|
||||
left: -42px;
|
||||
}
|
||||
Loading…
Reference in New Issue