Try again in a few, the developer has been notified. The most likely culprit is this issue which Tyler is working to fix. (Any memory leak experts?)
+Try again in a few. We restart often due to this issue, and we're rewriting the site to fix it. (AngularJS developers, come join us!)
+ +If this page persists, the server may be experiencing issues; the developers have been notified. Try switching to the beta site or the main site.
');
+// });
+// }
+
+ // Google Analytics, only in production
+ if (window.env.NODE_ENV === 'production') {
+ window._gaq = [["_setAccount", "UA-33510635-1"], ["_setDomainName", "habitrpg.com"], ["_trackPageview"]];
+ $.getScript(("https:" === document.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js");
+ }
+
+ // Scripts only for desktop
+ if (!window.env.IS_MOBILE) {
+ // Add This
+ $.getScript("//s7.addthis.com/js/250/addthis_widget.js#pubid=lefnire");
+
+ // Google Charts
+ $.getScript("//www.google.com/jsapi", function() {
+ google.load("visualization", "1", {
+ packages: ["corechart"],
+ callback: function() {}
+ });
+ });
+ }
+ }
+
+ /**
+ * Debug functions. Note that the server route for gems is only available if process.env.DEBUG=true
+ */
+ $scope.addMissedDay = function(){
+ if (!confirm("Are you sure you want to reset the day?")) return;
+ var dayBefore = moment(User.user.lastCron).subtract('days', 1).toDate();
+ User.set('lastCron', dayBefore);
+ Notification.text('-1 day, remember to refresh');
+ }
+ $scope.addTenGems = function(){
+ console.log(API_URL);
+ $http.post(API_URL + '/api/v1/user/addTenGems').success(function(){
+ User.log({});
+ })
+ }
+ $scope.addLevelsAndGold = function(){
+ User.setMultiple({
+ 'stats.exp': User.user.stats.exp + 10000,
+ 'stats.gp': User.user.stats.gp + 10000
+ });
+ }
+ }])
\ No newline at end of file
diff --git a/public/js/controllers/groupsCtrl.js b/public/js/controllers/groupsCtrl.js
new file mode 100644
index 0000000000..5f6bd6e115
--- /dev/null
+++ b/public/js/controllers/groupsCtrl.js
@@ -0,0 +1,240 @@
+"use strict";
+
+habitrpg.controller("GroupsCtrl", ['$scope', '$rootScope', 'Groups', '$http', 'API_URL', '$q', 'User', 'Members', '$state',
+ function($scope, $rootScope, Groups, $http, API_URL, $q, User, Members, $state) {
+
+ $scope.isMember = function(user, group){
+ return ~(group.members.indexOf(user._id));
+ }
+
+ $scope.Members = Members;
+ $scope._editing = {group:false};
+
+ $scope.save = function(group){
+ if(group._newLeader && group._newLeader._id) group.leader = group._newLeader._id;
+ group.$save();
+ group._editing = false;
+ }
+
+ $scope.addWebsite = function(group){
+ group.websites.push(group._newWebsite);
+ group._newWebsite = '';
+ }
+
+ $scope.removeWebsite = function(group, $index){
+ group.websites.splice($index,1);
+ }
+
+ // ------ Modals ------
+
+ $scope.clickMember = function(uid, forceShow) {
+ if (User.user._id == uid && !forceShow) {
+ if ($state.is('tasks')) {
+ $state.go('options');
+ } else {
+ $state.go('tasks');
+ }
+ } else {
+ // We need the member information up top here, but then we pass it down to the modal controller
+ // down below. Better way of handling this?
+ Members.selectMember(uid);
+ $rootScope.modals.member = true;
+ }
+ }
+
+ $scope.removeMember = function(group, member, isMember){
+ var yes = confirm("Do you really want to remove this member from the party?")
+ if(yes){
+ Groups.Group.removeMember({gid: group._id, uuid: member._id }, undefined, function(){
+ if(isMember){
+ _.pull(group.members, member);
+ }else{
+ _.pull(group.invites, member);
+ }
+ });
+ }
+ }
+
+ // ------ Invites ------
+
+ $scope.invite = function(group){
+ Groups.Group.invite({gid: group._id, uuid: group.invitee}, undefined, function(){
+ group.invitee = '';
+ }, function(){
+ group.invitee = '';
+ });
+ }
+ }
+ ])
+
+ .controller("MemberModalCtrl", ['$scope', '$rootScope', 'Members',
+ function($scope, $rootScope, Members) {
+ $scope.timestamp = function(timestamp){
+ return moment(timestamp).format('MM/DD/YYYY');
+ }
+ // We watch Members.selectedMember because it's asynchronously set, so would be a hassle to handle updates here
+ $scope.$watch( function() { return Members.selectedMember; }, function (member) {
+ $scope.profile = member;
+ });
+ }
+ ])
+
+ .controller('ChatCtrl', ['$scope', 'Groups', 'User', function($scope, Groups, User){
+ $scope._chatMessage = '';
+ $scope._sending = false;
+
+ $scope.postChat = function(group, message){
+ if (_.isEmpty(message) || $scope._sending) return;
+ $scope._sending = true;
+ var previousMsg = (group.chat && group.chat[0]) ? group.chat[0].id : false;
+ Groups.Group.postChat({gid: group._id, message:message, previousMsg: previousMsg}, undefined, function(data){
+ if(data.chat){
+ group.chat = data.chat;
+ }else if(data.message){
+ group.chat.unshift(data.message);
+ }
+ $scope._chatMessage = '';
+ $scope._sending = false;
+ }, function(err){
+ $scope._sending = false;
+ });
+ }
+
+ $scope.deleteChatMessage = function(group, message){
+ if(message.uuid === User.user.id || (User.user.backer && User.user.contributor.admin)){
+ var previousMsg = (group.chat && group.chat[0]) ? group.chat[0].id : false;
+ Groups.Group.deleteChatMessage({gid:group._id, messageId:message.id, previousMsg:previousMsg}, undefined, function(data){
+ if(data.chat) group.chat = data.chat;
+
+ var i = _.findIndex(group.chat, {id: message.id});
+ if(i !== -1) group.chat.splice(i, 1);
+ });
+ }
+ }
+
+ $scope.sync = function(group){
+ group.$get();
+ }
+
+ }])
+
+ .controller("GuildsCtrl", ['$scope', 'Groups', 'User', '$rootScope', '$state', '$location',
+ function($scope, Groups, User, $rootScope, $state, $location) {
+ $scope.groups = {
+ guilds: Groups.myGuilds(),
+ "public": Groups.publicGuilds()
+ }
+ $scope.type = 'guild';
+ $scope.text = 'Guild';
+ $scope.newGroup = new Groups.Group({type:'guild', privacy:'private', leader: User.user._id, members: [User.user._id]});
+
+ $scope.create = function(group){
+ if (User.user.balance < 1) return $rootScope.modals.buyGems = true;
+
+ if (confirm("Create Guild for 4 Gems?")) {
+ group.$save(function(saved){
+ User.user.balance--;
+ $scope.groups.guilds.push(saved);
+ if(saved.privacy === 'public') $scope.groups.public.push(saved);
+ $state.go('options.social.guilds.detail', {gid: saved._id});
+ });
+ }
+ }
+
+ $scope.join = function(group){
+ // If we're accepting an invitation, we don't have the actual group object, but a faux group object (for performance
+ // purposes) {id, name}. Let's trick ngResource into thinking we have a group, so we can call the same $join
+ // function (server calls .attachGroup(), which finds group by _id and handles this properly)
+ if (group.id && !group._id) {
+ group = new Groups.Group({_id:group.id});
+ }
+
+ group.$join(function(joined){
+ var i = _.findIndex(User.user.invitations.guilds, {id:joined._id});
+ if (~i) User.user.invitations.guilds.splice(i,1);
+ $scope.groups.guilds.push(joined);
+ if(joined.privacy == 'public'){
+ joined._isMember = true;
+ joined.memberCount++;
+ }
+ $state.go('options.social.guilds.detail', {gid: joined._id});
+ })
+ }
+
+ $scope.leave = function(group){
+ if (confirm("Are you sure you want to leave this guild?") !== true) {
+ return;
+ }
+ Groups.Group.leave({gid: group._id}, undefined, function(){
+ $scope.groups.guilds.splice(_.indexOf($scope.groups.guilds, group), 1);
+ // remove user from group members if guild is public so that he can re-join it immediately
+ if(group.privacy == 'public' || !group.privacy){ //public guilds with only some fields fetched
+ var i = _.findIndex($scope.groups.public, {_id: group._id});
+ if(~i){
+ var guild = $scope.groups.public[i];
+ guild.memberCount--;
+ guild._isMember = false;
+ }
+ }
+ $state.go('options.social.guilds');
+ });
+ }
+
+ $scope.reject = function(guild){
+ var i = _.findIndex(User.user.invitations.guilds, {id:guild.id});
+ if (~i){
+ User.user.invitations.guilds.splice(i, 1);
+ User.set('invitations.guilds', User.user.invitations.guilds);
+ }
+ }
+ }
+ ])
+
+ .controller("PartyCtrl", ['$scope', 'Groups', 'User', '$state',
+ function($scope, Groups, User, $state) {
+ $scope.type = 'party';
+ $scope.text = 'Party';
+ $scope.group = Groups.party();
+ $scope.newGroup = new Groups.Group({type:'party', leader: User.user._id, members: [User.user._id]});
+ $scope.create = function(group){
+ group.$save(function(newGroup){
+ $scope.group = newGroup;
+ });
+ }
+
+ $scope.join = function(party){
+ var group = new Groups.Group({_id: party.id, name: party.name});
+ // there a better way to access GroupsCtrl.groups.party?
+ group.$join(function(groupJoined){
+ $scope.group = groupJoined;
+ });
+ }
+
+ $scope.leave = function(group){
+ if (confirm("Are you sure you want to leave this party?") !== true) {
+ return;
+ }
+ Groups.Group.leave({gid: group._id}, undefined, function(){
+ $scope.group = undefined;
+ });
+ }
+
+ $scope.reject = function(){
+ User.user.invitations.party = undefined;
+ User.log({op:'set',data:{'invitations.party':{}}});
+ }
+ }
+ ])
+
+ .controller("TavernCtrl", ['$scope', 'Groups', 'User',
+ function($scope, Groups, User) {
+ $scope.group = Groups.tavern();
+ $scope.rest = function(){
+ User.user.flags.rest = !User.user.flags.rest;
+ User.log({op:'set',data:{'flags.rest':User.user.flags.rest}});
+ }
+ $scope.toggleUserTier = function($event) {
+ $($event.target).next().toggle();
+ }
+ }
+ ])
diff --git a/public/js/controllers/headerCtrl.js b/public/js/controllers/headerCtrl.js
new file mode 100644
index 0000000000..65da48b89e
--- /dev/null
+++ b/public/js/controllers/headerCtrl.js
@@ -0,0 +1,11 @@
+"use strict";
+
+habitrpg.controller("HeaderCtrl", ['$scope', 'Groups', 'User',
+ function($scope, Groups, User) {
+ $scope.party = Groups.party(function(){
+ $scope.partyMinusSelf = _.filter($scope.party.members, function(member){
+ return member._id !== User.user._id;
+ });
+ });
+ }
+]);
diff --git a/public/js/controllers/inventoryCtrl.js b/public/js/controllers/inventoryCtrl.js
new file mode 100644
index 0000000000..6dc8d16955
--- /dev/null
+++ b/public/js/controllers/inventoryCtrl.js
@@ -0,0 +1,92 @@
+habitrpg.controller("InventoryCtrl", ['$scope', 'User',
+ function($scope, User) {
+
+ // convenience vars since these are accessed frequently
+ $scope.userEggs = User.user.items.eggs;
+ $scope.userHatchingPotions = User.user.items.hatchingPotions;
+
+ $scope.selectedEgg = null; // {index: 1, name: "Tiger", value: 5}
+ $scope.selectedPotion = null; // {index: 5, name: "Red", value: 3}
+
+ $scope.chooseEgg = function(egg, $index){
+ if ($scope.selectedEgg && $scope.selectedEgg.index == $index) {
+ return $scope.selectedEgg = null; // clicked same egg, unselect
+ }
+ var eggData = _.defaults({index:$index}, egg);
+ if (!$scope.selectedPotion) {
+ $scope.selectedEgg = eggData;
+ } else {
+ $scope.hatch(eggData, $scope.selectedPotion);
+ }
+ }
+
+ $scope.choosePotion = function(potion, $index){
+ if ($scope.selectedPotion && $scope.selectedPotion.index == $index) {
+ return $scope.selectedPotion = null; // clicked same egg, unselect
+ }
+ // we really didn't think through the way these things are stored and getting passed around...
+ var potionData = _.findWhere(window.habitrpgShared.items.items.hatchingPotions, {name:potion});
+ potionData = _.defaults({index:$index}, potionData);
+ if (!$scope.selectedEgg) {
+ $scope.selectedPotion = potionData;
+ } else {
+ $scope.hatch($scope.selectedEgg, potionData);
+ }
+ }
+
+ $scope.sellInventory = function() {
+ if ($scope.selectedEgg) {
+ $scope.userEggs.splice($scope.selectedEgg.index, 1);
+ User.setMultiple({
+ 'items.eggs': $scope.userEggs,
+ 'stats.gp': User.user.stats.gp + $scope.selectedEgg.value
+ });
+ $scope.selectedEgg = null;
+ } else if ($scope.selectedPotion) {
+ $scope.userHatchingPotions.splice($scope.selectedPotion.index, 1);
+ User.setMultiple({
+ 'items.hatchingPotions': $scope.userHatchingPotions,
+ 'stats.gp': User.user.stats.gp + $scope.selectedPotion.value
+ });
+ $scope.selectedPotion = null;
+ }
+ }
+
+ $scope.ownsPet = function(egg, potion){
+ if (!egg || !potion) return;
+ var pet = egg.name + '-' + potion;
+ return User.user.items.pets && ~User.user.items.pets.indexOf(pet)
+ }
+
+ $scope.selectableInventory = function(egg, potion, $index) {
+ if (!egg || !potion) return;
+ // FIXME this isn't updating the view for some reason
+ //if ($scope.selectedEgg && $scope.selectedEgg.index == $index) return 'selectableInventory';
+ //if ($scope.selectedPotion && $scope.selectedPotion.index == $index) return 'selectableInventory';
+ if (!$scope.ownsPet(egg, potion)) return 'selectableInventory';
+ }
+
+ $scope.hatch = function(egg, potion){
+ if ($scope.ownsPet(egg, potion.name)){
+ return alert("You already have that pet, hatch a different combo.")
+ }
+ var pet = egg.name + '-' + potion.name;
+ $scope.userEggs.splice(egg.index, 1);
+ $scope.userHatchingPotions.splice(potion.index, 1);
+
+ if(!User.user.items.pets) User.user.items.pets = [];
+ User.user.items.pets.push(pet);
+
+ User.log([
+ { op: 'set', data: {'items.pets': User.user.items.pets} },
+ { op: 'set', data: {'items.eggs': $scope.userEggs} },
+ { op: 'set', data: {'items.hatchingPotions': $scope.userHatchingPotions} }
+ ]);
+
+ alert("Your egg hatched! Visit your stable to equip your pet.");
+
+ $scope.selectedEgg = null;
+ $scope.selectedPotion = null;
+ }
+
+ }]);
\ No newline at end of file
diff --git a/public/js/controllers/marketCtrl.js b/public/js/controllers/marketCtrl.js
new file mode 100644
index 0000000000..c0cf429539
--- /dev/null
+++ b/public/js/controllers/marketCtrl.js
@@ -0,0 +1,37 @@
+habitrpg.controller("MarketCtrl", ['$rootScope', '$scope', 'User', 'API_URL', '$http',
+ function($rootScope, $scope, User, API_URL, $http) {
+
+ $scope.eggs = window.habitrpgShared.items.items.pets;
+ $scope.hatchingPotions = window.habitrpgShared.items.items.hatchingPotions;
+ $scope.userEggs = User.user.items.eggs;
+ $scope.userHatchingPotions = User.user.items.hatchingPotions;
+
+ $scope.buy = function(type, item){
+ var gems = User.user.balance * 4,
+ store = type === 'egg' ? $scope.userEggs : $scope.userHatchingPotions,
+ storePath = type === 'egg' ? 'items.eggs' : 'items.hatchingPotions'
+
+ if(gems < item.value){
+ return $rootScope.modals.buyGems = true;
+ }
+
+ var message = "Buy this " + (type == 'egg' ? 'egg' : 'hatching potion') + " with " + item.value + " of your " + gems + " Gems?"
+
+ if(confirm(message)){
+ $http.post(API_URL + '/api/v1/market/buy?type=' + type, item)
+ .success(function(data){
+ // don't know what's going on, but trying to work with the returned data (a) isn't updating the ui, (b) isnt'
+ // stickign between refreshes until a force-refresh is called (user._v--).
+ User.user._v--;
+ User.log({});
+ //User.user.balance = data.balance;
+ store.push(type === 'egg' ? item : item.name);
+ //$scope.items = data.items.eggs; // FIXME this isn't updating the UI
+ }).error(function(data){
+ alert(data);
+ console.error(data);
+ });
+ }
+ }
+
+ }]);
\ No newline at end of file
diff --git a/public/js/controllers/notificationCtrl.js b/public/js/controllers/notificationCtrl.js
new file mode 100644
index 0000000000..618964f70f
--- /dev/null
+++ b/public/js/controllers/notificationCtrl.js
@@ -0,0 +1,75 @@
+'use strict';
+
+habitrpg.controller('NotificationCtrl',
+ ['$scope', '$rootScope', 'User', 'Guide', 'Notification', function ($scope, $rootScope, User, Guide, Notification) {
+
+ $rootScope.$watch('user.stats.hp', function(after, before) {
+ if (after == before) return;
+ Notification.hp(after - before, 'hp');
+ });
+
+ $rootScope.$watch('user.stats.exp', function(after, before) {
+ if (after == before) return;
+ Notification.exp(after - before);
+ });
+
+ $rootScope.$watch('user.stats.gp', function(after, before) {
+ if (after == before) return;
+ var money = after - before;
+ Notification.gp(money);
+
+ //Append Bonus
+ var bonus = User.user._tmp.streakBonus;
+
+ if ((money > 0) && !!bonus) {
+ if (bonus < 0.01) bonus = 0.01;
+ Notification.text("+ " + Notification.coins(bonus) + " Streak Bonus!");
+ delete User.user._tmp.streakBonus;
+ }
+ });
+
+ $rootScope.$watch('user._tmp.drop', function(after, before){
+ if (after == before || !after) return;
+ $rootScope.modals.drop = true;
+ });
+
+ $rootScope.$watch('user.achievements.streak', function(after, before){
+ if(after == before || after < before) return;
+ $rootScope.modals.achievements.streak = true;
+ });
+
+ $rootScope.$watch('user.achievements.ultimateGear', function(after, before){
+ if (after === before || after !== true) return;
+ $rootScope.modals.achievements.ultimateGear = true;
+ });
+
+ $rootScope.$watch('user.items.pets.length', function(after, before){
+ if(after === before || after < 90) return;
+ User.user.achievements.beastMaster = true;
+ $rootScope.modals.achievements.beastMaster = true;
+ })
+
+ /*_.each(['weapon', 'head', 'chest', 'shield'], function(watched){
+ $rootScope.$watch('user.items.' + watched, function(before, after){
+ if (after == before) return;
+ if (+after < +before) {
+ Notification.death();
+ //don't want to day "lost a head"
+ if (watched === 'head') watched = 'helm';
+ Notification.text('Lost GP, 1 LVL, ' + watched);
+ }
+ })
+ });*/
+
+ $rootScope.$watch('user.stats.lvl', function(after, before) {
+ if (after == before) return;
+ if (after > before) {
+ Notification.lvl();
+ }
+ });
+
+ $rootScope.$on('responseError', function(ev, error){
+ Notification.error(error);
+ });
+ }
+]);
diff --git a/public/js/controllers/petsCtrl.js b/public/js/controllers/petsCtrl.js
new file mode 100644
index 0000000000..7d4e6ba5ed
--- /dev/null
+++ b/public/js/controllers/petsCtrl.js
@@ -0,0 +1,32 @@
+habitrpg.controller("PetsCtrl", ['$scope', 'User',
+ function($scope, User) {
+
+ $scope.userPets = User.user.items.pets;
+ $scope.userCurrentPet = User.user.items.currentPet;
+ $scope.pets = window.habitrpgShared.items.items.pets;
+ $scope.hatchingPotions = window.habitrpgShared.items.items.hatchingPotions;
+ $scope.totalPets = $scope.pets.length * $scope.hatchingPotions.length;
+
+ $scope.hasPet = function(name, potion){
+ if (!$scope.userPets) return false;
+ return _.contains($scope.userPets, name + '-' + potion) ? true : false;
+ }
+
+ $scope.isCurrentPet = function(name, potion){
+ if (!$scope.userCurrentPet || !$scope.userPets) return false;
+ return $scope.userCurrentPet.str === (name + '-' + potion);
+ }
+
+ $scope.choosePet = function(name, potion){
+ if($scope.userCurrentPet && $scope.userCurrentPet.str === (name + '-' + potion)){
+ $scope.userCurrentPet = null;
+ }else{
+ var pet = _.find($scope.pets, {name: name});
+ pet.modifier = potion;
+ pet.str = name + '-' + potion;
+ $scope.userCurrentPet = pet;
+ }
+ User.set('items.currentPet', $scope.userCurrentPet);
+ }
+
+ }]);
\ No newline at end of file
diff --git a/public/js/controllers/rootCtrl.js b/public/js/controllers/rootCtrl.js
new file mode 100644
index 0000000000..eab96974a5
--- /dev/null
+++ b/public/js/controllers/rootCtrl.js
@@ -0,0 +1,121 @@
+"use strict";
+
+/* Make user and settings available for everyone through root scope.
+ */
+
+habitrpg.controller("RootCtrl", ['$scope', '$rootScope', '$location', 'User', '$http', '$state', '$stateParams',
+ function($scope, $rootScope, $location, User, $http, $state, $stateParams) {
+ $rootScope.modals = {};
+ $rootScope.modals.achievements = {};
+ $rootScope.User = User;
+ $rootScope.user = User.user;
+ $rootScope.settings = User.settings;
+
+ // Angular UI Router
+ $rootScope.$state = $state;
+ $rootScope.$stateParams = $stateParams;
+
+ // indexOf helper
+ $scope.indexOf = function(haystack, needle){
+ return haystack && ~haystack.indexOf(needle);
+ }
+
+ $scope.safeApply = function(fn) {
+ var phase = this.$root.$$phase;
+ if(phase == '$apply' || phase == '$digest') {
+ if(fn && (typeof(fn) === 'function')) {
+ fn();
+ }
+ } else {
+ this.$apply(fn);
+ }
+ };
+
+ /*
+ FIXME this is dangerous, organize helpers.coffee better, so we can group them by which controller needs them,
+ and then simply _.defaults($scope, Helpers.user) kinda thing
+ */
+ _.defaults($rootScope, window.habitrpgShared.algos);
+ _.defaults($rootScope, window.habitrpgShared.helpers);
+
+ $rootScope.set = User.set;
+ $rootScope.authenticated = User.authenticated;
+
+ $rootScope.dismissAlert = function() {
+ $rootScope.modals.newStuff = false;
+ $rootScope.set('flags.newStuff',false);
+ }
+
+ $rootScope.notPorted = function(){
+ alert("This feature is not yet ported from the original site.");
+ }
+
+ $rootScope.dismissErrorOrWarning = function(type, $index){
+ $rootScope.flash[type].splice($index, 1);
+ }
+
+ $rootScope.showStripe = function() {
+ StripeCheckout.open({
+ key: window.env.STRIPE_PUB_KEY,
+ address: false,
+ amount: 500,
+ name: "Checkout",
+ description: "Buy 20 Gems, Disable Ads, Support the Developers",
+ panelLabel: "Checkout",
+ token: function(data) {
+ $scope.$apply(function(){
+ $http.post("/api/v1/user/buy-gems", data)
+ .success(function() {
+ window.location.href = "/";
+ }).error(function(err) {
+ alert(err);
+ });
+ })
+ }
+ });
+ }
+
+ $scope.contribText = function(contrib, backer){
+ if (!contrib && !backer) return;
+ if (backer && backer.npc) return backer.npc;
+ var l = contrib && contrib.level;
+ if (l && l > 0) {
+ var level = (l < 3) ? 'Friend' : (l < 5) ? 'Elite' : (l < 7) ? 'Champion' : (l < 8) ? 'Legendary' : 'Heroic';
+ return level + ' ' + contrib.text;
+ }
+ }
+
+ $rootScope.charts = {};
+ $rootScope.toggleChart = function(id, task) {
+ var history = [], matrix, data, chart, options;
+ switch (id) {
+ case 'exp':
+ $rootScope.charts.exp = !$rootScope.charts.exp;
+ history = User.user.history.exp;
+ break;
+ case 'todos':
+ $rootScope.charts.todos = !$rootScope.charts.todos;
+ history = User.user.history.todos;
+ break;
+ default:
+ $rootScope.charts[id] = !$rootScope.charts[id];
+ history = task.history;
+ if (task && task._editing) task._editing = false;
+ }
+ matrix = [['Date', 'Score']];
+ _.each(history, function(obj) {
+ matrix.push([moment(obj.date).format('MM/DD/YY'), obj.value]);
+ });
+ data = google.visualization.arrayToDataTable(matrix);
+ options = {
+ title: 'History',
+ backgroundColor: {
+ fill: 'transparent'
+ },
+ width:300
+ };
+ chart = new google.visualization.LineChart($("." + id + "-chart")[0]);
+ chart.draw(data, options);
+ };
+ }
+]);
diff --git a/public/js/controllers/settingsCtrl.js b/public/js/controllers/settingsCtrl.js
new file mode 100644
index 0000000000..dec606770f
--- /dev/null
+++ b/public/js/controllers/settingsCtrl.js
@@ -0,0 +1,110 @@
+'use strict';
+
+// Make user and settings available for everyone through root scope.
+habitrpg.controller('SettingsCtrl',
+ ['$scope', 'User', '$rootScope', '$http', 'API_URL', 'Guide', '$location',
+ function($scope, User, $rootScope, $http, API_URL, Guide, $location) {
+
+ // FIXME we have this re-declared everywhere, figure which is the canonical version and delete the rest
+// $scope.auth = function (id, token) {
+// User.authenticate(id, token, function (err) {
+// if (!err) {
+// alert('Login successful!');
+// $location.path("/habit");
+// }
+// });
+// }
+
+ $scope.showTour = function(){
+ User.set('flags.showTour',true);
+ Guide.initTour();
+ $location.path('/tasks');
+ }
+
+ $scope.showBailey = function(){
+ User.set('flags.newStuff',true);
+ }
+
+ $scope.saveDayStart = function(){
+ var dayStart = +User.user.preferences.dayStart;
+ if (dayStart < 0 || dayStart > 24) {
+ dayStart = 0;
+ }
+ User.log({'op':'set', data:{'preferences.dayStart': dayStart}});
+ }
+
+ $scope.reroll = function(){
+
+ $http.post(API_URL + '/api/v1/user/reroll')
+ .success(function(){
+ window.location.href = '/';
+ // FIXME, I can't get the tasks to update in the browser, even with _.extend(user,data). refreshing for now
+ })
+ .error(function(data){
+ alert(data.err)
+ })
+ }
+
+ $scope.changePassword = function(changePass){
+ if (!changePass.oldPassword || !changePass.newPassword || !changePass.confirmNewPassword) {
+ return alert("Please fill out all fields");
+ }
+ $http.post(API_URL + '/api/v1/user/change-password', changePass)
+ .success(function(){
+ alert("Password successfully changed");
+ $scope.changePass = {};
+ })
+ .error(function(data){
+ alert(data);
+ });
+ }
+
+ $scope.restoreValues = {};
+ $rootScope.$watch('modals.restore', function(value){
+ if(value === true){
+ $scope.restoreValues.stats = angular.copy(User.user.stats);
+ $scope.restoreValues.items = angular.copy(User.user.items);
+ $scope.restoreValues.achievements = {streak: User.user.achievements.streak || 0};
+ }
+ })
+
+ $scope.restore = function(){
+ var stats = $scope.restoreValues.stats,
+ items = $scope.restoreValues.items,
+ achievements = $scope.restoreValues.achievements;
+ User.setMultiple({
+ "stats.hp": stats.hp,
+ "stats.exp": stats.exp,
+ "stats.gp": stats.gp,
+ "stats.lvl": stats.lvl,
+ "items.weapon": items.weapon,
+ "items.armor": items.armor,
+ "items.head": items.head,
+ "items.shield": items.shield,
+ "achievements.streak": achievements.streak
+ });
+ $rootScope.modals.restore = false;
+ }
+ $scope.reset = function(){
+ $http.post(API_URL + '/api/v1/user/reset')
+ .success(function(){
+ User.user._v--;
+ User.log({});
+ $rootScope.modals.reset = false;
+ })
+ .error(function(data){
+ alert(data);
+ });
+ }
+ $scope['delete'] = function(){
+ $http['delete'](API_URL + '/api/v1/user')
+ .success(function(){
+ localStorage.clear();
+ window.location.href = '/logout';
+ })
+ .error(function(data){
+ alert(data);
+ });
+ }
+ }
+]);
diff --git a/public/js/controllers/tasksCtrl.js b/public/js/controllers/tasksCtrl.js
new file mode 100644
index 0000000000..5b599e9473
--- /dev/null
+++ b/public/js/controllers/tasksCtrl.js
@@ -0,0 +1,146 @@
+"use strict";
+
+habitrpg.controller("TasksCtrl", ['$scope', '$rootScope', '$location', 'User', 'Algos', 'Helpers', 'Notification', '$http', 'API_URL',
+ function($scope, $rootScope, $location, User, Algos, Helpers, Notification, $http, API_URL) {
+ $scope.obj = User.user; // used for task-lists
+
+ $scope.score = function(task, direction) {
+ if (task.type === "reward" && User.user.stats.gp < task.value){
+ return Notification.text('Not enough GP.');
+ }
+ Algos.score(User.user, task, direction);
+ User.log({op: "score",data: task, dir: direction});
+
+ };
+
+ $scope.addTask = function(addTo, listDef) {
+ var task = window.habitrpgShared.helpers.taskDefaults({text: listDef.newTask, type: listDef.type}, User.user.filters);
+ addTo.unshift(task);
+ User.log({op: "addTask", data: task});
+ delete listDef.newTask;
+ };
+
+ /**
+ * Add the new task to the actions log
+ */
+ $scope.clearDoneTodos = function() {};
+
+ /**
+ * This is calculated post-change, so task.completed=true if they just checked it
+ */
+ $scope.changeCheck = function(task) {
+ if (task.completed) {
+ $scope.score(task, "up");
+ } else {
+ $scope.score(task, "down");
+ }
+ };
+ /* TODO this should be somewhere else, but fits the html location better here
+ */
+
+ $scope.removeTask = function(list, $index) {
+ if (!confirm("Are you sure you want to delete this task?")) return;
+ User.log({ op: "delTask", data: list[$index] });
+ list.splice($index, 1);
+ };
+
+ $scope.saveTask = function(task) {
+ var setVal = function(k, v) {
+ var op;
+ if (typeof v !== "undefined") {
+ op = { op: "set", data: {} };
+ op.data["tasks." + task.id + "." + k] = v;
+ return log.push(op);
+ }
+ };
+ var log = [];
+ setVal("text", task.text);
+ setVal("notes", task.notes);
+ setVal("priority", task.priority);
+ setVal("tags", task.tags);
+ if (task.type === "habit") {
+ setVal("up", task.up);
+ setVal("down", task.down);
+ } else if (task.type === "daily") {
+ setVal("repeat", task.repeat);
+ // TODO we'll remove this once rewrite's running for a while. This was a patch for derby issues
+ setVal("streak", task.streak);
+
+ } else if (task.type === "todo") {
+ setVal("date", task.date);
+ } else {
+ if (task.type === "reward") {
+ setVal("value", task.value);
+ }
+ }
+ User.log(log);
+ task._editing = false;
+ };
+
+ /**
+ * Reset $scope.task to $scope.originalTask
+ */
+ $scope.cancel = function() {
+ var key;
+ for (key in $scope.task) {
+ $scope.task[key] = $scope.originalTask[key];
+ }
+ $scope.originalTask = null;
+ $scope.editedTask = null;
+ $scope.editing = false;
+ };
+
+ $scope.unlink = function(task, keep) {
+ // TODO move this to userServices, turn userSerivces.user into ng-resource
+ $http.post(API_URL + '/api/v1/user/task/' + task.id + '/unlink?keep=' + keep)
+ .success(function(){
+ User.log({});
+ });
+ };
+
+ /*
+ ------------------------
+ Items
+ ------------------------
+ */
+
+ var updateStore = function(){
+ var sorted, updated;
+ updated = window.habitrpgShared.items.updateStore(User.user);
+ /* Figure out whether we wanna put this in habitrpg-shared
+ */
+
+ sorted = [updated.weapon, updated.armor, updated.head, updated.shield, updated.potion, updated.reroll];
+ $scope.itemStore = sorted;
+ }
+
+ updateStore();
+
+ $scope.buy = function(type) {
+ var hasEnough = window.habitrpgShared.items.buyItem(User.user, type);
+ if (hasEnough) {
+ User.log({op: "buy",type: type});
+ Notification.text("Item purchased.");
+ updateStore();
+ } else {
+ Notification.text("Not enough GP.");
+ }
+ };
+
+ $scope.clearCompleted = function() {
+ User.user.todos = _.reject(User.user.todos, {completed:true});
+ User.log({op: 'clear-completed'});
+ }
+
+ /**
+ * See conversation on http://productforums.google.com/forum/#!topic/adsense/WYkC_VzKwbA,
+ * Adsense is very sensitive. It must be called once-and-only-once for every , else things break.
+ * Additionally, angular won't run javascript embedded into a script template, so we can't copy/paste
+ * the html provided by adsense - we need to run this function post-link
+ */
+ $scope.initAds = function(){
+ $.getScript('//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
+ (window.adsbygoogle = window.adsbygoogle || []).push({});
+ }
+
+ }]);
diff --git a/public/js/controllers/userCtrl.js b/public/js/controllers/userCtrl.js
new file mode 100644
index 0000000000..d306020935
--- /dev/null
+++ b/public/js/controllers/userCtrl.js
@@ -0,0 +1,41 @@
+"use strict";
+
+habitrpg.controller("UserCtrl", ['$rootScope', '$scope', '$location', 'User', '$http',
+ function($rootScope, $scope, $location, User, $http) {
+ $scope.profile = User.user;
+ $scope.hideUserAvatar = function() {
+ $(".userAvatar").hide();
+ };
+ $scope.toggleHelm = function(val){
+ User.log({op:'set', data:{'preferences.showHelm':val}});
+ }
+
+ $scope.$watch('_editing.profile', function(value){
+ if(value === true) $scope.editingProfile = angular.copy(User.user.profile);
+ });
+
+ $scope.save = function(){
+ var values = {};
+ _.each($scope.editingProfile, function(value, key){
+ // Using toString because we need to compare two arrays (websites)
+ var curVal = $scope.profile.profile[key];
+ if(!curVal || $scope.editingProfile[key].toString() !== curVal.toString())
+ values['profile.' + key] = value;
+ });
+ User.setMultiple(values);
+ $scope._editing.profile = false;
+ }
+
+ $scope.addWebsite = function(){
+ if (!$scope.editingProfile.websites) $scope.editingProfile.websites = [];
+ $scope.editingProfile.websites.push($scope._newWebsite);
+ $scope._newWebsite = '';
+ }
+ $scope.removeWebsite = function($index){
+ $scope.editingProfile.websites.splice($index,1);
+ }
+
+ $scope.unlock = User.unlock;
+
+ }
+]);
diff --git a/public/js/directives/directives.js b/public/js/directives/directives.js
new file mode 100644
index 0000000000..62c225f39f
--- /dev/null
+++ b/public/js/directives/directives.js
@@ -0,0 +1,155 @@
+'use strict';
+
+/**
+ * Directive that places focus on the element it is applied to when the expression it binds to evaluates to true.
+ */
+habitrpg.directive('taskFocus',
+ ['$timeout',
+ function($timeout) {
+ return function(scope, elem, attrs) {
+ scope.$watch(attrs.taskFocus, function(newval) {
+ if ( newval ) {
+ $timeout(function() {
+ elem[0].focus();
+ }, 0, false);
+ }
+ });
+ };
+ }
+]);
+
+habitrpg.directive('habitrpgAdsense', function() {
+ return {
+ restrict: 'A',
+ transclude: true,
+ replace: true,
+ template: '',
+ link: function ($scope, element, attrs) {}
+ }
+})
+
+habitrpg.directive('whenScrolled', function() {
+ return function(scope, elm, attr) {
+ var raw = elm[0];
+
+ elm.bind('scroll', function() {
+ if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
+ scope.$apply(attr.whenScrolled);
+ }
+ });
+ };
+});
+
+/**
+ * Add sortable
+ */
+habitrpg.directive('habitrpgSortable', ['User', function(User) {
+ return function($scope, element, attrs, ngModel) {
+ $(element).sortable({
+ axis: "y",
+ distance: 5,
+ start: function (event, ui) {
+ ui.item.data('startIndex', ui.item.index());
+ },
+ stop: function (event, ui) {
+ var taskType = angular.element(ui.item[0]).scope().task.type + 's';
+ var startIndex = ui.item.data('startIndex');
+ var task = User.user[taskType][startIndex];
+ // FIXME - this is a really inconsistent way of API handling. we need to fix the batch-update route
+ User.log({op: 'sortTask', data: _.defaults({from: startIndex, to: ui.item.index()}, task)});
+ }
+ });
+ }
+}]);
+
+/**
+ * Markdown
+ * See http://www.heikura.me/#!/angularjs-markdown-directive
+ */
+(function(){
+ var md = function () {
+ marked.setOptions({
+ gfm:true,
+ pedantic:false,
+ sanitize:true
+ // callback for code highlighter
+ // Uncomment this (and htljs.tabReplace below) if we add in highlight.js (http://www.heikura.me/#!/angularjs-markdown-directive)
+// highlight:function (code, lang) {
+// if (lang != undefined)
+// return hljs.highlight(lang, code).value;
+//
+// return hljs.highlightAuto(code).value;
+// }
+ });
+
+ var toHtml = function (markdown) {
+ if (markdown == undefined)
+ return '';
+
+ return marked(markdown);
+ };
+
+ //hljs.tabReplace = ' ';
+
+ return {
+ toHtml:toHtml
+ };
+ }();
+
+ habitrpg.directive('markdown', function() {
+ return {
+ restrict: 'E',
+ link: function(scope, element, attrs) {
+ scope.$watch(attrs.ngModel, function(value, oldValue) {
+ var markdown = value;
+ var html = md.toHtml(markdown);
+ element.html(html);
+ });
+ }
+ };
+ });
+})()
+
+habitrpg
+ .directive('habitrpgTasks', ['$rootScope', 'User', function($rootScope, User) {
+ return {
+ restrict: 'EA',
+ templateUrl: 'templates/habitrpg-tasks.html',
+ //transclude: true,
+ //scope: {
+ // main: '@', // true if it's the user's main list
+ // obj: '='
+ //},
+ controller: ['$scope', '$rootScope', function($scope, $rootScope){
+ $scope.editTask = function(task){
+ task._editing = !task._editing;
+ if($rootScope.charts[task.id]) $rootScope.charts[task.id] = false;
+ };
+ }],
+ link: function(scope, element, attrs) {
+ // $scope.obj needs to come from controllers, so we can pass by ref
+ scope.main = attrs.main;
+ $rootScope.lists = [
+ {
+ header: 'Habits',
+ type: 'habit',
+ placeHolder: 'New Habit'
+ }, {
+ header: 'Dailies',
+ type: 'daily',
+ placeHolder: 'New Daily'
+ }, {
+ header: 'To-Dos',
+ type: 'todo',
+ placeHolder: 'New To-Do'
+ }, {
+ header: 'Rewards',
+ type: 'reward',
+ placeHolder: 'New Reward'
+ }
+ ];
+
+ }
+ }
+ }]);
+
diff --git a/public/js/filters/filters.js b/public/js/filters/filters.js
new file mode 100644
index 0000000000..65223c5957
--- /dev/null
+++ b/public/js/filters/filters.js
@@ -0,0 +1,10 @@
+angular.module('habitrpg')
+ .filter('gold', function () {
+ return function (gp) {
+ return Math.floor(gp);
+ }
+ }).filter('silver', function () {
+ return function (gp) {
+ return Math.floor((gp - Math.floor(gp))*100);
+ }
+ });
diff --git a/public/js/services/authServices.js b/public/js/services/authServices.js
new file mode 100644
index 0000000000..4efa0efd46
--- /dev/null
+++ b/public/js/services/authServices.js
@@ -0,0 +1,104 @@
+'use strict';
+
+/**
+ * Services that persists and retrieves user from localStorage.
+ * FIXME is this file ever used?
+ */
+
+var facebook = {}
+
+angular.module('authServices', ['userServices']).
+factory('Facebook',
+ ['$http', '$location', 'User', 'API_URL',
+ function($http, $location, User, API_URL) {
+ //TODO FB.init({appId: '${section.parameters['facebook.app.id']}', status: true, cookie: true, xfbml: true});
+ var auth, user = User.user;
+
+ facebook.handleStatusChange = function(session) {
+ if (session.authResponse) {
+
+ FB.api('/me', {
+ fields: 'name, picture, email'
+ }, function(response) {
+ console.log(response.error)
+ if (!response.error) {
+
+ var data = {
+ name: response.name,
+ facebook_id: response.id,
+ email: response.email
+ }
+
+ $http.post(API_URL + '/api/v1/user/auth/facebook', data).success(function(data, status, headers, config) {
+ User.authenticate(data.id, data.token, function(err) {
+ if (!err) {
+ alert('Login successful!');
+ $location.path("/habit");
+ }
+ });
+ }).error(function(response) {
+ console.log('error')
+ })
+
+ } else {
+ alert('napaka')
+ }
+ //clearAction();
+ });
+ } else {
+ document.body.className = 'not_connected';
+ //clearAction();
+ }
+ }
+
+ return {
+
+ authUser: function() {
+ FB.Event.subscribe('auth.statusChange', facebook.handleStatusChange);
+ },
+
+ getAuth: function() {
+ return auth;
+ },
+
+ login: function() {
+
+ FB.login(null, {
+ scope: 'email'
+ });
+ },
+
+ logout: function() {
+ FB.logout(function(response) {
+ window.location.reload();
+ });
+ }
+ }
+
+ }
+])
+
+.factory('LocalAuth',
+ ['$http', 'User',
+ function($http, User) {
+ var auth,
+ user = User.user;
+
+ return {
+ getAuth: function() {
+ return auth;
+ },
+
+ login: function() {
+ user.id = '';
+ user.apiToken = '';
+ User.authenticate();
+ return;
+
+ },
+
+ logout: function() {}
+ }
+
+ }
+]);
diff --git a/public/js/services/challengeServices.js b/public/js/services/challengeServices.js
new file mode 100644
index 0000000000..f21cbc9d82
--- /dev/null
+++ b/public/js/services/challengeServices.js
@@ -0,0 +1,27 @@
+'use strict';
+
+/**
+ * Services that persists and retrieves user from localStorage.
+ */
+
+angular.module('challengeServices', ['ngResource']).
+ factory('Challenges', ['API_URL', '$resource', 'User', '$q', 'Members',
+ function(API_URL, $resource, User, $q, Members) {
+ var Challenge = $resource(API_URL + '/api/v1/challenges/:cid',
+ {cid:'@_id'},
+ {
+ //'query': {method: "GET", isArray:false}
+ join: {method: "POST", url: API_URL + '/api/v1/challenges/:cid/join'},
+ leave: {method: "POST", url: API_URL + '/api/v1/challenges/:cid/leave'},
+ close: {method: "POST", params: {uid:''}, url: API_URL + '/api/v1/challenges/:cid/close'},
+ getMember: {method: "GET", url: API_URL + '/api/v1/challenges/:cid/member/:uid'}
+ });
+
+ //var challenges = [];
+
+ return {
+ Challenge: Challenge
+ //challenges: challenges
+ }
+ }
+]);
diff --git a/public/js/services/groupServices.js b/public/js/services/groupServices.js
new file mode 100644
index 0000000000..bce061f374
--- /dev/null
+++ b/public/js/services/groupServices.js
@@ -0,0 +1,47 @@
+'use strict';
+
+/**
+ * Services that persists and retrieves user from localStorage.
+ */
+
+angular.module('groupServices', ['ngResource']).
+ factory('Groups', ['API_URL', '$resource', '$q',
+ function(API_URL, $resource, $q) {
+ var Group = $resource(API_URL + '/api/v1/groups/:gid',
+ {gid:'@_id', messageId: '@_messageId'},
+ {
+ //query: {method: "GET", isArray:false},
+ postChat: {method: "POST", url: API_URL + '/api/v1/groups/:gid/chat'},
+ deleteChatMessage: {method: "DELETE", url: API_URL + '/api/v1/groups/:gid/chat/:messageId'},
+ join: {method: "POST", url: API_URL + '/api/v1/groups/:gid/join'},
+ leave: {method: "POST", url: API_URL + '/api/v1/groups/:gid/leave'},
+ invite: {method: "POST", url: API_URL + '/api/v1/groups/:gid/invite'},
+ removeMember: {method: "POST", url: API_URL + '/api/v1/groups/:gid/removeMember'}
+ });
+
+ // Defer loading everything until they're requested
+ var party, myGuilds, publicGuilds, tavern;
+
+ return {
+ party: function(cb){
+ if (!party) return (party = Group.get({gid: 'party'}, cb));
+ return (cb) ? cb(party) : party;
+ },
+ publicGuilds: function(){
+ //TODO combine these as {type:'guilds,public'} and create a $filter() to separate them
+ if (!publicGuilds) publicGuilds = Group.query({type:'public'});
+ return publicGuilds;
+ },
+ myGuilds: function(){
+ if (!myGuilds) myGuilds = Group.query({type:'guilds'});
+ return myGuilds;
+ },
+ tavern: function(){
+ if (!tavern) tavern = Group.get({gid:'habitrpg'});
+ return tavern;
+ },
+
+ Group: Group
+ }
+ }
+]);
diff --git a/public/js/services/guideServices.js b/public/js/services/guideServices.js
new file mode 100644
index 0000000000..3e709ce4c5
--- /dev/null
+++ b/public/js/services/guideServices.js
@@ -0,0 +1,134 @@
+'use strict';
+
+/**
+ * Services for each tour step when you unlock features
+ */
+
+angular.module('guideServices', []).
+ factory('Guide', ['$rootScope', 'User', 'Items', 'Helpers', function($rootScope, User, Items, Helpers) {
+
+ /**
+ * Init and show the welcome tour. Note we do it listening to a $rootScope broadcasted 'userLoaded' message,
+ * this because we need to determine whether to show the tour *after* the user has been pulled from the server,
+ * otherwise it's always start off as true, and then get set to false later
+ */
+ $rootScope.$on('userUpdated', initTour);
+ function initTour(){
+ if (User.user.flags.showTour === false) return;
+ var tourSteps = [
+ {
+ element: ".main-herobox",
+ title: "Welcome to HabitRPG",
+ content: "Welcome to HabitRPG, a habit-tracker which treats your goals like a Role Playing Game. I'm Justin, your guide! "
+ }, {
+ element: "#bars",
+ title: "Achieve goals and level up",
+ content: "As you accomplish goals, you level up. If you fail your goals, you lose hit points. Lose all your HP and you die."
+ }, {
+ element: "ul.habits",
+ title: "Habits",
+ content: "Habits are goals that you constantly track.",
+ placement: "bottom"
+ }, {
+ element: "ul.dailys",
+ title: "Dailies",
+ content: "Dailies are goals that you want to complete once a day.",
+ placement: "bottom"
+ }, {
+ element: "ul.todos",
+ title: "Todos",
+ content: "Todos are one-off goals which need to be completed eventually.",
+ placement: "bottom"
+ }, {
+ element: "ul.rewards",
+ title: "Rewards",
+ content: "As you complete goals, you earn gold to buy rewards. Buy them liberally - rewards are integral in forming good habits.",
+ placement: "bottom"
+ }, {
+ element: "ul.habits li:first-child",
+ title: "Hover over comments",
+ content: "Different task-types have special properties. Hover over each task's comment for more information. When you're ready to get started, delete the existing tasks and add your own.",
+ placement: "right"
+ }
+ ];
+ _.each(tourSteps, function(step){
+ step.content = "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
-Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
-Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
-Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the collapsible option to true. Click on the currently open section to collapse its content pane.
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
-Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
-Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
-Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-Customize the header icons with the icons option, which accepts classes for the header's default and active (open) state. Use any class from the UI CSS framework, or create custom classes with background images.
- Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer - ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit - amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut - odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. -
-- Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet - purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor - velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In - suscipit faucibus urna. -
-- Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. - Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero - ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis - lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. -
-- Cras dictum. Pellentesque habitant morbi tristique senectus et netus - et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in - faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia - mauris vel est. -
-- Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. - Class aptent taciti sociosqu ad litora torquent per conubia nostra, per - inceptos himenaeos. -
--Click headers to expand/collapse content that is broken into logical sections, much like tabs. -Optionally, toggle sections open/closed on mouseover. -
--The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is -usable without JavaScript. -
-Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the heightStyle option to "fill", and the script will automatically set the dimensions of the accordion to the height of its parent container.
- Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer - ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit - amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut - odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. -
-- Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet - purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor - velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In - suscipit faucibus urna. -
-- Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. - Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero - ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis - lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. -
-- Cras dictum. Pellentesque habitant morbi tristique senectus et netus - et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in - faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia - mauris vel est. -
-- Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. - Class aptent taciti sociosqu ad litora torquent per conubia nostra, per - inceptos himenaeos. -
--Click headers to expand/collapse content that is broken into logical sections, much like tabs. -Optionally, toggle sections open/closed on mouseover. -
--The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is -usable without JavaScript. -
-Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
-Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
-Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
-Setting heightStyle: "content" allows the accordion panels to keep their native height.
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
-Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
-Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
-Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-Drag the header to re-order panels.
-This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.
-Click the button above to preview the effect.
-A categorized search result. Try typing "a" or "n".
-A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.
-The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.
-This is not a supported or even complete widget. Its purely for demoing what autocomplete can do with a bit of customization. For a detailed explanation of how the widget works, check out this Learning jQuery article.
-
-
-
-
-
-You can use your own custom data formats and displays by simply overriding the default focus and select actions.
-Try typing "j" to get a list of projects or just press the down arrow.
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.
-The datasource is a simple JavaScript array, provided to the widget using the source-option.
-The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.
-Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".
-When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through.
-Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.
-This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.
-Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.
-This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.
-In this case, the datasource is the geonames.org webservice. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.
-Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.
-The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.
-The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.
-This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.
-This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.
-A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.
-This demo also demonstrates three checkboxes styled as a button set by calling .buttonset() on a common container.
Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.
-Some buttons with various combinations of text and icons.
-A set of three radio buttons transformed into a button set.
-An example of a split button built with two buttons: A plain button with just text, one with only a primary icon -and no text. Both are grouped together in a set.
-- A mediaplayer toolbar. Take a look at the underlying markup: A few button elements, - an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options. -
-Date:
- -Populate an alternate field with its own date format whenever a date is selected using the altField and altFormat options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.
Date:
- -Animations:
-
-
Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.
-Date:
- -Display a button for selecting Today's date and a Done button for closing the calendar with the boolean showButtonPanel option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.
Date:
- -Format options:
-
-
Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.
-Select the date range to search for.
-Date:
- -The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.
-Date:
- -Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean changeMonth and changeYear options.
Date:
- -Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.
-Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.
-Date: -
- -Localize the datepicker calendar language and format (English / Western formatting is the default). The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.
-Date:
- -Restrict the range of selectable dates with the minDate and maxDate options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.
Date:
- -Set the numberOfMonths option to an integer of 2 or more to show multiple months in a single datepicker.
Date:
- -The datepicker can show dates that come from other than the main month - being displayed. These other dates can also be made selectable.
-Date:
- -The datepicker can show the week of the year. The default calculation follows - the ISO 8601 definition: the week starts on Monday, the first week of the year - contains the first Thursday of the year. This means that some days from one - year may be placed into weeks 'belonging' to another year.
-This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
-Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.
-This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
-The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.
-These items will be permanently deleted and cannot be recovered. Are you sure?
-Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.
- -Confirm an action that may be destructive or important. Set the modal option to true, and specify primary and secondary user actions with the buttons option.
All form fields are required.
- - -Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.
- - Your files have downloaded successfully into the My Downloads folder. -
-- Currently using 36% of your storage space. -
-Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.
- -Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the modal option to true, and specify a primary action (Ok) with the buttons option.
Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.
-Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.
- -A modal dialog prevents the user from interacting with the rest of the page until it is closed.
-Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the axis option to limit the draggable's path to the x- or y-axis, or use the containment option to specify a parent DOM element or a jQuery selector, like 'document.'
Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the cursorAt option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). Customize the cursor's appearance by supplying the cursor option with a valid CSS cursor value: default, move, pointer, crosshair, etc.
Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
-Delay the start of dragging for a number of milliseconds with the delay option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the distance option.
Layer functionality onto the draggable using the start, drag, and stop events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.
Allow dragging only when the cursor is over a specific part of the draggable. Use the handle option to specify the jQuery selector of an element (or group of elements) used to drag the object.
Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the cancel option to specify a jQuery selector over which to "cancel" draggable functionality.
Return the draggable (or it's helper) to its original location when dragging stops with the boolean revert option.
Automatically scroll the document when the draggable is moved beyond the viewport. Set the scroll option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the scrollSensitivity and scrollSpeed options.
Snap the draggable to the inner or outer boundaries of a DOM element. Use the snap, snapMode (inner, outer, both), and snapTolerance (distance in pixels the draggable must be from the element when snapping is invoked) options.
Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.
Draggables are built to interact seamlessly with sortables.
-Provide feedback to users as they drag an object in the form of a helper. The helper option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the opacity option.
To clarify which draggable is in play, bring the draggable in motion to front. Use the zIndex option to set a higher z-index for the helper, if in play, or use the stack option to ensure that the last item dragged will appear on top of others in the same group on drag stop.
Specify using the accept option which element (or group of elements) is accepted by the target droppable.
Enable any DOM element to be droppable, a target for draggable elements.
-You can delete an image either by dragging it to the Trash or by clicking the trash icon.
-You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.
-You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.
-When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the greedy option set to true prevents event propagation when a draggable is dropped on a child node (droppable).
Return the draggable (or it's helper) to its original location when dragging stops with the boolean revert option set on the draggable.
Demonstrate how to use an accordion to structure products into a catalog and make use of drag and drop for adding them to a shopping cart, where they are sortable.
-Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the hoverClass or activeClass options to specify respective classes.
Click the button above to show the effect.
-All easings provided by jQuery UI are drawn above, using a HTML canvas element. Click a diagram to see the easing in action.
-Click the button above to preview the effect.
-A menu with the default configuration, disabled items and nested menus. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.
-A menu with the default configuration, showing how to use a menu with icons.
-A photoviewer prototype using Position to place images at the center, left and right and cycle them.
-
Use the links at the top to cycle, or click on the images on the left and right.
-
Note how the images are repositioned when resizing the window.
-
- This is the position parent element. -
-- to position -
-- to position 2 -
-Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
-
Drag around the parent element to see collision detection in action.
Default determinate progress bar.
-Indeterminate progress bar and switching between determinate and indeterminate styles.
-Custom updated label demo.
-Click the button above to preview the effect.
-Animate the resize action using the animate option (boolean). When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop.
Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the aspectRatio option to true, and optionally pass in a new ratio (i.e., 4/3)
Define the boundaries of the resizable area. Use the containment option to specify a parent DOM element or a jQuery selector, like 'document.'
Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.
-Delay the start of resizng for a number of milliseconds with the delay option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the distance option.
Display only an outline of the element while resizing by setting the helper option to a CSS class.
Limit the resizable element to a maximum or minimum height or width using the maxHeight, maxWidth, minHeight, and minWidth options.
Snap the resizable element to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.
Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the alsoResize option.
Display only an outline of the element while resizing by setting the helper option to a CSS class.
Instead of showing the actual element during resize, set the ghost option to true to show a semi-transparent part of the element.
Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.
-To arrange selectable items as a grid, give them identical dimensions and float them using CSS.
--You've selected: none. -
- -Write a function that fires on the stop event to collect the index values of selected items. Present values as feedback, or pass as a data string.
Click the button above to preview the effect.
-- - Simple Colorpicker -
- - - - - - - -Combine three sliders to create a simple RGB colorpicker.
-The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.
-How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.
-- - Master volume -
- - - -- - Graphic EQ -
- -Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.
-- - -
- - - -Change the orientation of the range slider to vertical. Assign a height value via .height() or by setting the height through CSS, and set the orientation option to "vertical."
- - -
- - - -Set the range option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.
- - -
- - -Fix the maximum value of the range slider so that the user can only select a minimum. Set the range option to "max."
- - -
- - - -Fix the minimum value of the range slider so that the user can only select a maximum. Set the range option to "min."
Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.
-- - -
- - - -Change the orientation of the slider to vertical. Assign a height value via .height() or by setting the height through CSS, and set the orientation option to "vertical."
- - -
- - - -Increment slider values with the step option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.
Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.
-
- Sort items from one list into another and vice versa, by passing a selector into
- the connectWith option. The simplest way to do this is to
- group all related lists with a CSS class, and then pass that class into the
- sortable function (i.e., connectWith: '.myclass').
-
- Enable a group of DOM elements to be sortable. Click on and drag an
- element to a new spot within the list, and the other items will adjust to
- fit. By default, sortable items share draggable properties.
-
- Prevent accidental sorting either by delay (time) or distance. Set a number of
- milliseconds the element needs to be dragged before sorting starts
- with the delay option. Set a distance in pixels the element
- needs to be dragged before sorting starts with the distance
- option.
-
- To arrange sortable items as a grid, give them identical dimensions and - float them using CSS. -
-
- Prevent all items in a list from being dropped into a separate, empty list
- using the dropOnEmpty option set to false. By default,
- sortable items can be dropped on empty lists.
-
- Specify which items are eligible to sort by passing a jQuery selector into
- the items option. Items excluded from this option are not
- sortable, nor are they valid targets for sortable items.
-
- To only prevent sorting on certain items, pass a jQuery selector into the
- cancel option. Cancelled items remain valid sort targets for
- others.
-
- When dragging a sortable item to a new location, other items will make room
- for the that item by shifting to allow white space between them. Pass a
- class into the placeholder option to style that space to
- be visible. Use the boolean forcePlaceholderSize option
- to set dimensions on the placeholder.
-
- Enable portlets (styled divs) as sortables and use the connectWith
- option to allow sorting between columns.
-
- - -
-- - -
- -Example of a donation form, with currency selection and amount spinner.
-- - -
-- - -
- -
- Example of a decimal spinner. Step is set to 0.01.
-
The code handling the culture change reads the current spinner value,
- then changes the culture, then sets the value again, resulting in an updated
- formatting, based on the new culture.
-
- - -
- -- - -
- -- - -
- -Default spinner.
-Google Maps integration, using spinners to change latidude and longitude.
-- - -
- --Overflowing spinner restricted to a range of -10 to 10. -For anything above 10, it'll overflow to -10, and the other way round. -
-- - -
-- - -
- -- A custom widget extending spinner. Use the Globalization plugin to parse and output - a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down - spins hours. -
-Click the button above to preview the effect.
-Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
-Fetch external content via Ajax for the tabs by setting an href value in the tab links. While the Ajax request is waiting for a response, the tab label changes to say "Loading...", then returns to the normal label once loaded.
-Tabs 3 and 4 demonstrate slow-loading and broken AJAX tabs, and how to handle serverside errors in those cases. Note: These two require a webserver to interpret PHP. They won't work from the filesystem.
-This content was loaded via ajax.
-Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
-Mauris vitae ante. Curabitur augue. Nulla purus nibh, lobortis ut, feugiat at, aliquam id, purus. Sed venenatis, lorem venenatis volutpat commodo, purus quam lacinia justo, mattis interdum pede pede a odio. Fusce nibh. Morbi nisl mauris, dapibus in, tristique eget, accumsan et, pede. Donec mauris risus, pulvinar ut, faucibus eu, mollis in, nunc. In augue massa, commodo a, cursus vehicula, varius eu, dui. Suspendisse sodales suscipit lorem. Morbi malesuada, eros quis condimentum dignissim, lectus nibh tristique urna, non bibendum diam massa vel risus. Morbi suscipit. Proin egestas, eros at scelerisque scelerisque, dolor lacus fringilla lacus, ut ullamcorper mi magna at quam. Aliquam sed elit. Aliquam turpis purus, congue quis, iaculis id, ullamcorper sit amet, justo. Maecenas sed mauris. Proin magna justo, interdum in, tincidunt eu, viverra eu, turpis. Suspendisse mollis. In magna. Phasellus pellentesque, urna pellentesque convallis pellentesque, augue sem blandit pede, at rhoncus libero nisl a odio.
-Sed vitae nibh non magna semper tempor. Duis dolor. Nam congue laoreet arcu. Fusce lobortis enim quis ligula. Maecenas commodo odio id mi. Maecenas scelerisque tellus eu odio. Etiam dolor purus, lacinia a, imperdiet in, aliquam et, eros. In pellentesque. Nullam ac massa. Integer et turpis. Ut quam augue, congue non, imperdiet id, eleifend ac, nisi. Etiam ac arcu. Cras iaculis accumsan erat. Nullam vulputate sapien nec nisi pretium rhoncus. Aliquam a nibh. Vivamus est ante, fermentum a, tincidunt ut, imperdiet nec, velit. Aenean non tortor. Sed nec mauris eget tellus condimentum rutrum.
\ No newline at end of file diff --git a/public/vendor/jquery-ui-1.10.2/demos/tabs/ajax/content2.html b/public/vendor/jquery-ui-1.10.2/demos/tabs/ajax/content2.html deleted file mode 100644 index 18b03e40ba..0000000000 --- a/public/vendor/jquery-ui-1.10.2/demos/tabs/ajax/content2.html +++ /dev/null @@ -1,4 +0,0 @@ -This other content was loaded via ajax.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis justo, et facilisis ligula. In congue interdum odio, a scelerisque eros posuere ac. Aenean massa tellus, dictum sit amet laoreet ut, aliquam in orci. Duis eu aliquam ligula. Nullam vel placerat ligula. Fusce venenatis viverra dictum. Phasellus dui dolor, imperdiet in sodales at, mattis sed libero. Morbi ac ipsum ligula. Quisque suscipit dui vel diam pretium nec cursus lacus malesuada. Donec sollicitudin, eros eget dignissim mollis, risus leo feugiat tellus, vel posuere nisl ipsum eu erat. Quisque posuere lacinia imperdiet. Quisque nunc leo, elementum quis ultricies et, vehicula sit amet turpis. Nullam sed nunc nec nibh condimentum mattis. Quisque sed ligula sit amet nisi ultricies bibendum eget id nisi.
-Proin ut erat vel nunc tincidunt commodo. Curabitur feugiat, nisi et vehicula viverra, nisl orci eleifend arcu, sed blandit lectus nisl quis nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aenean rutrum gravida velit ac imperdiet. Integer vitae arcu risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt orci at leo egestas porta. Vivamus ac augue et enim bibendum hendrerit ut id urna. Donec sollicitudin pulvinar turpis vitae scelerisque. Etiam tempor porttitor est sed blandit. Phasellus varius consequat leo eget tincidunt. Aliquam ac dui lectus. In et consectetur orci. Duis posuere nulla ac turpis faucibus vestibulum. Sed ut velit et dolor rhoncus dapibus. Sed sit amet pellentesque est.
-Nam in volutpat orci. Morbi sit amet orci in erat egestas dignissim. Etiam mi sapien, tempus sed iaculis a, adipiscing quis tellus. Suspendisse potenti. Nam malesuada tristique vestibulum. In tempor tellus dignissim neque consectetur eu vestibulum nisl pellentesque. Phasellus ultrices cursus velit, id aliquam nisl fringilla quis. Cras varius elit sed urna ultrices congue. Sed ornare odio sed velit pellentesque id varius nisl sodales. Sed auctor ligula egestas mi pharetra ut consectetur erat pharetra.
\ No newline at end of file diff --git a/public/vendor/jquery-ui-1.10.2/demos/tabs/ajax/content3-slow.php b/public/vendor/jquery-ui-1.10.2/demos/tabs/ajax/content3-slow.php deleted file mode 100644 index 7ad43ec06b..0000000000 --- a/public/vendor/jquery-ui-1.10.2/demos/tabs/ajax/content3-slow.php +++ /dev/null @@ -1,7 +0,0 @@ - -This content was loaded via ajax, though it took a second.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec turpis justo, et facilisis ligula. In congue interdum odio, a scelerisque eros posuere ac. Aenean massa tellus, dictum sit amet laoreet ut, aliquam in orci. Duis eu aliquam ligula. Nullam vel placerat ligula. Fusce venenatis viverra dictum. Phasellus dui dolor, imperdiet in sodales at, mattis sed libero. Morbi ac ipsum ligula. Quisque suscipit dui vel diam pretium nec cursus lacus malesuada. Donec sollicitudin, eros eget dignissim mollis, risus leo feugiat tellus, vel posuere nisl ipsum eu erat. Quisque posuere lacinia imperdiet. Quisque nunc leo, elementum quis ultricies et, vehicula sit amet turpis. Nullam sed nunc nec nibh condimentum mattis. Quisque sed ligula sit amet nisi ultricies bibendum eget id nisi.
-Proin ut erat vel nunc tincidunt commodo. Curabitur feugiat, nisi et vehicula viverra, nisl orci eleifend arcu, sed blandit lectus nisl quis nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aenean rutrum gravida velit ac imperdiet. Integer vitae arcu risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin tincidunt orci at leo egestas porta. Vivamus ac augue et enim bibendum hendrerit ut id urna. Donec sollicitudin pulvinar turpis vitae scelerisque. Etiam tempor porttitor est sed blandit. Phasellus varius consequat leo eget tincidunt. Aliquam ac dui lectus. In et consectetur orci. Duis posuere nulla ac turpis faucibus vestibulum. Sed ut velit et dolor rhoncus dapibus. Sed sit amet pellentesque est.
-Nam in volutpat orci. Morbi sit amet orci in erat egestas dignissim. Etiam mi sapien, tempus sed iaculis a, adipiscing quis tellus. Suspendisse potenti. Nam malesuada tristique vestibulum. In tempor tellus dignissim neque consectetur eu vestibulum nisl pellentesque. Phasellus ultrices cursus velit, id aliquam nisl fringilla quis. Cras varius elit sed urna ultrices congue. Sed ornare odio sed velit pellentesque id varius nisl sodales. Sed auctor ligula egestas mi pharetra ut consectetur erat pharetra.
\ No newline at end of file diff --git a/public/vendor/jquery-ui-1.10.2/demos/tabs/ajax/content4-broken.php b/public/vendor/jquery-ui-1.10.2/demos/tabs/ajax/content4-broken.php deleted file mode 100644 index 55ea2fe9f8..0000000000 --- a/public/vendor/jquery-ui-1.10.2/demos/tabs/ajax/content4-broken.php +++ /dev/null @@ -1,3 +0,0 @@ - \ No newline at end of file diff --git a/public/vendor/jquery-ui-1.10.2/demos/tabs/bottom.html b/public/vendor/jquery-ui-1.10.2/demos/tabs/bottom.html deleted file mode 100644 index 0a4caea72b..0000000000 --- a/public/vendor/jquery-ui-1.10.2/demos/tabs/bottom.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - -Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
-Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
-Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
-Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.
-With some additional CSS (for positioning) and JS (to put the right classes on elements) the tabs can be placed below their content.
-Click this tab again to close the content pane.
-Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
-Click this tab again to close the content pane.
-Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
-Click this tab again to close the content pane.
-Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.
-Click the selected tab to toggle its content closed/open. To enable this functionality, set the collapsible option to true.
collapsible: true
-
-Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
-Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
-Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
-Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.
-Click tabs to swap between content that is broken into logical sections.
-Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
-Simple tabs adding and removing.
-Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
-Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
-Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
-Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.
-Toggle sections open/closed on mouseover with the event option. The default value for event is "click."
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
-Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
-Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
-Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.
-Drag the tabs above to re-order them.
-Making tabs sortable is as simple as calling .sortable() on the .ui-tabs-nav element.
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.
-Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.
-Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.
-Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.
-Click tabs to swap between content that is broken into logical sections.
-Click the button above to preview the effect.
-Click the button above to preview the effect.
-This content was loaded via ajax.
\ No newline at end of file diff --git a/public/vendor/jquery-ui-1.10.2/demos/tooltip/ajax/content2.html b/public/vendor/jquery-ui-1.10.2/demos/tooltip/ajax/content2.html deleted file mode 100644 index f4132d731b..0000000000 --- a/public/vendor/jquery-ui-1.10.2/demos/tooltip/ajax/content2.html +++ /dev/null @@ -1 +0,0 @@ -This other content was loaded via ajax.
\ No newline at end of file diff --git a/public/vendor/jquery-ui-1.10.2/demos/tooltip/custom-animation.html b/public/vendor/jquery-ui-1.10.2/demos/tooltip/custom-animation.html deleted file mode 100644 index 46126d55f5..0000000000 --- a/public/vendor/jquery-ui-1.10.2/demos/tooltip/custom-animation.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - -There are various ways to customize the animation of a tooltip.
-You can use the show and -hide options.
-You can also use the open event.
- -This demo shows how to customize animations using the show and hide options, -as well as the open event.
-All images are part of Wikimedia Commons -and are licensed under CC BY-SA 3.0 by the copyright holder.
- -Shows how to combine different event delegated tooltips into a single instance, by customizing the items and content options.
-We realize you may want to interact with the map tooltips. This is a planned feature for a future version.
-Tooltips can be attached to any element. When you hover -the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
-But as it's not a native tooltip, it can be styled. Any themes built with -ThemeRoller -will also style tooltips accordingly.
-Tooltips are also useful for form elements, to show some additional information in the context of each field.
--
Hover the field to see the tooltip.
- -Hover the links above or use the tab key to cycle the focus on each element.
-Tooltips can be attached to any element. When you hover -the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
-But as it's not a native tooltip, it can be styled. Any themes built with -ThemeRoller -will also style tooltips accordingly.
-Tooltips are also useful for form elements, to show some additional information in the context of each field.
- -Hover the field to see the tooltip.
- -Hover the links above or use the tab key to cycle the focus on each element.
-Use the button below to display the help texts, or just focus or mouseover the indivdual inputs.
-A fixed width is defined in CSS to make the tooltips look consistent when displayed all at once.
-Tooltips can be attached to any element. When you hover -the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.
-But as it's not a native tooltip, it can be styled. Any themes built with -ThemeRoller -will also style tooltips accordingly.
-Tooltips are also useful for form elements, to show some additional information in the context of each field.
- -Hover the field to see the tooltip.
- -Here the tooltips are positioned relative to the mouse, and follow the mouse while it moves above the element.
-A fake video player with like/share/stats button, each with a custom-styled tooltip.
-This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).
-The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works, its heavily commented
-| Source: | " + escapeText( source ) + " |
|---|
| Expected: | " + expected + " |
|---|---|
| Result: | " + actual + " |
| Diff: | " + QUnit.diff( expected, actual ) + " |
| Source: | " + escapeText( source ) + " |
| Result: | " + escapeText( actual ) + " |
|---|---|
| Source: | " + escapeText( source ) + " |
| t |