Menu icon Foundation

Coder | Rochester, NY

I work at Eucalyptus Systems

My Posts


  • 5
    Replies
  • Movable tile dashboard

    By David Kavanagh

    tiles

    Has anybody done a configurable dashboard with Foundation? I'm thinking of something where a user can arrange some tiles in the order they like. Ideally, they'd be able to add/remove tiles to suit their needs. I've seen this sort of things in some Atlassian products.

    Last Reply by David Kavanagh over 5 years ago



  • 15
    Replies
  • foundation 5 tab issues

    By David Kavanagh

    tabsdeep linkingjs

    I'm going to take a chance and mention all my issues in one post. First, my tabs do switch just fine. I got things styled nicely, but... - the URL fragment doesn't reliably change when I select tabs. I thought I would see the #tab1 or #tab2 set in the UR... (continued)

    Last Reply by Andy Grand over 5 years ago


  • 7
    Replies
  • Abide with server validation

    By David Kavanagh

    abideAJAX

    I had a question since I'm trying to do some validation on a form. This is a change password form and I need more than simple pattern checking. I need to ensure the new password != the old password and that the new password is the same as the confirm pass... (continued)

    Last Reply by thangtm150892 over 1 year ago


My Comments

David Kavanagh commented on David Kavanagh's post over 4 years

I updated to foundation 5.5.2 and my example code started working!

David Kavanagh commented on David Kavanagh's post over 4 years

I'm trying to determine how the codepen environment lets this work. Running $.fn.jquery shows 2.1.1
I'll report back if I can find something specific that helps. Btw, I downloaded jquery 2.1.4 and that didn't help in the standalone test (outside of codepen).

Inspecting the foundation.js file in codepen, it looks different than the 5.5.1 version of foundation.min.js I have, even in the first few characters. Is there any way to determine what version of foundation is loaded from the javascript console (like I did with jquery)? (answer: i searched the text of the foundation.js file and found 5.5.2). Looks like there is a version property

David Kavanagh commented on tomex's post about 5 years

I looked over the current abide code and it looks like this may have been addressed differently. So, I tested it with my application and so far, so good! Looks like my patch won't be needed after all! We just need to wait for our next release cycle and pick up current foundation code.

David Kavanagh commented on tomex's post about 5 years

Anyone from Zurb care to look at the patch I put on the gist? It is something we really need to address and I'd really prefer to work with you guys to get something like this into the package vs having to maintain it on my own.

David Kavanagh commented on David Kavanagh's post over 5 years

I was able to do some really trivial additions to my existing tile dashboard to allow the tiles to be rearranged. I wrote some more code to save and restore the sort order, but the basics are:

Add this to an onready function (or in my case, an angular controller init method):
+ $('#sortable').sortable();
+ $('#sortable').disableSelection();

set an ID (in this case, 'sortable') for the surrounding
-
+ <ul id="sortable" class="small-block-grid-2 medium-block-grid-3 large-block-grid

and finally, make sure to include jquery-ui:
+

I have since pulled jquery-ui.js into my repo, but this was just to get things going and play around with movable tiles. I also fooled around with code to save the tile order in local storage and restore it when the sortable is created. I ended up using a cookie and the server-side templating to build the DOM in the desired order from the start.

David Kavanagh commented on David Kavanagh's post over 5 years

I'm thinking of making a moveable tile dash based on http://jqueryui.com/sortable/#portlets, but so that it is responsive. If it works out, I'd like to contribute back to foundation. Any guidelines for that?

David Kavanagh commented on tomex's post over 5 years

I spent some time on this yesterday. To preface, I have a form with a save and a cancel button. Validation is fine when the user hits the save button. The problem comes with the cancel button if the form doesn't pass validation. The cancel button click is swallowed because the blur listener on the field being validated returns false. To get around that, I rigged up something so that if my form defines "cancel-target" as an attribute, that cancel-target (a selector) triggers different behavior. If the attribute is set, normal validation on blur is turned off and the blur target is saved. The other part of this is that validation is turned on in a focus listener for every other element under the form. That allows validation if the user changes focus except when the target specified in the "cancel-target" is clicked. Here's the code diff for foundation.abide.js

index 9898eac..44eab0e 100644
--- a/eucaconsole/static/js/thirdparty/foundation/foundation.abide.js
+++ b/eucaconsole/static/js/thirdparty/foundation/foundation.abide.js
@@ -53,7 +53,8 @@
events : function (scope) {
var self = this,
form = $(scope).attr('novalidate', 'novalidate'),
- settings = form.data('abide-init');
+ settings = form.data('abide-init'),
+ cancel_target = form.attr('cancel-target');

   form
     .off('.abide')

@@ -63,9 +64,17 @@
})
.find('input, textarea, select')
.off('.abide')
- .on('blur.fndtn.abide change.fndtn.abide', function (e) {
+ .on('change.fndtn.abide', function (e) {
self.validate([this], e);
})
+ .on('blur.fndtn.abide', function (e) {
+ if (cancel_target !== undefined) {
+ self.blur_target = this;
+ }
+ else {
+ self.validate([this], e);
+ }
+ })
.on('keydown.fndtn.abide', function (e) {
var settings = $(this).closest('form').data('abide-init');
clearTimeout(self.timer);
@@ -73,6 +82,11 @@
self.validate([this], e);
}.bind(this), settings.timeout);
});
+ if (cancel_target) {
+ form.find(':not('+cancel_target+')').on('focus.fndtn.abide', function (e) {
+ self.validate([self.blur_target], e);
+ })
+ }
},

 validate : function (els, e, is_ajax) {

I can't promise this is completely free from errors, but it satisfies my case. I've also put it into a gist to facilitate more interaction and comments: https://gist.github.com/dkavanagh/32874d28420cabc90816

David Kavanagh commented on tomex's post over 5 years

The problem with any of this is that if you rely on abide for normal submit validation, you can't turn it off. Yet if you want to not have validation when clicking a "cancel" link, the click listener won't get called because abide handles a focus change event and swallows the click event. I have to click twice on cancel.. the first time abide errors appear on required fields, the 2nd time, cancel is actually clicked.

David Kavanagh commented on David Kavanagh's post over 5 years

I've looked at various options and we're using a block-grid arrangement right now that none of them will play well with. If I want to stick with foundation responsive layout, I'm steering towards rolling our own. I though about making our tiles draggable (in the jquery sense) and then using custom code to control placement/ordering/prefs(save/load)

David Kavanagh commented on David Kavanagh's post almost 6 years

I'll answer my own post. A co-worker fixed it right away in css!

.reveal-modal { z-index: 9999999; }

Posts Followed

No Content

Following

    No Content

Followers

My Posts






My Comments

You commented on David Kavanagh's post over 4 years

I updated to foundation 5.5.2 and my example code started working!

You commented on David Kavanagh's post over 4 years

I'm trying to determine how the codepen environment lets this work. Running $.fn.jquery shows 2.1.1
I'll report back if I can find something specific that helps. Btw, I downloaded jquery 2.1.4 and that didn't help in the standalone test (outside of codepen).

Inspecting the foundation.js file in codepen, it looks different than the 5.5.1 version of foundation.min.js I have, even in the first few characters. Is there any way to determine what version of foundation is loaded from the javascript console (like I did with jquery)? (answer: i searched the text of the foundation.js file and found 5.5.2). Looks like there is a version property

You commented on tomex's post about 5 years

I looked over the current abide code and it looks like this may have been addressed differently. So, I tested it with my application and so far, so good! Looks like my patch won't be needed after all! We just need to wait for our next release cycle and pick up current foundation code.

You commented on tomex's post about 5 years

Anyone from Zurb care to look at the patch I put on the gist? It is something we really need to address and I'd really prefer to work with you guys to get something like this into the package vs having to maintain it on my own.

You commented on David Kavanagh's post over 5 years

I was able to do some really trivial additions to my existing tile dashboard to allow the tiles to be rearranged. I wrote some more code to save and restore the sort order, but the basics are:

Add this to an onready function (or in my case, an angular controller init method):
+ $('#sortable').sortable();
+ $('#sortable').disableSelection();

set an ID (in this case, 'sortable') for the surrounding
-
+ <ul id="sortable" class="small-block-grid-2 medium-block-grid-3 large-block-grid

and finally, make sure to include jquery-ui:
+

I have since pulled jquery-ui.js into my repo, but this was just to get things going and play around with movable tiles. I also fooled around with code to save the tile order in local storage and restore it when the sortable is created. I ended up using a cookie and the server-side templating to build the DOM in the desired order from the start.

You commented on David Kavanagh's post over 5 years

I'm thinking of making a moveable tile dash based on http://jqueryui.com/sortable/#portlets, but so that it is responsive. If it works out, I'd like to contribute back to foundation. Any guidelines for that?

You commented on tomex's post over 5 years

I spent some time on this yesterday. To preface, I have a form with a save and a cancel button. Validation is fine when the user hits the save button. The problem comes with the cancel button if the form doesn't pass validation. The cancel button click is swallowed because the blur listener on the field being validated returns false. To get around that, I rigged up something so that if my form defines "cancel-target" as an attribute, that cancel-target (a selector) triggers different behavior. If the attribute is set, normal validation on blur is turned off and the blur target is saved. The other part of this is that validation is turned on in a focus listener for every other element under the form. That allows validation if the user changes focus except when the target specified in the "cancel-target" is clicked. Here's the code diff for foundation.abide.js

index 9898eac..44eab0e 100644
--- a/eucaconsole/static/js/thirdparty/foundation/foundation.abide.js
+++ b/eucaconsole/static/js/thirdparty/foundation/foundation.abide.js
@@ -53,7 +53,8 @@
events : function (scope) {
var self = this,
form = $(scope).attr('novalidate', 'novalidate'),
- settings = form.data('abide-init');
+ settings = form.data('abide-init'),
+ cancel_target = form.attr('cancel-target');

   form
     .off('.abide')

@@ -63,9 +64,17 @@
})
.find('input, textarea, select')
.off('.abide')
- .on('blur.fndtn.abide change.fndtn.abide', function (e) {
+ .on('change.fndtn.abide', function (e) {
self.validate([this], e);
})
+ .on('blur.fndtn.abide', function (e) {
+ if (cancel_target !== undefined) {
+ self.blur_target = this;
+ }
+ else {
+ self.validate([this], e);
+ }
+ })
.on('keydown.fndtn.abide', function (e) {
var settings = $(this).closest('form').data('abide-init');
clearTimeout(self.timer);
@@ -73,6 +82,11 @@
self.validate([this], e);
}.bind(this), settings.timeout);
});
+ if (cancel_target) {
+ form.find(':not('+cancel_target+')').on('focus.fndtn.abide', function (e) {
+ self.validate([self.blur_target], e);
+ })
+ }
},

 validate : function (els, e, is_ajax) {

I can't promise this is completely free from errors, but it satisfies my case. I've also put it into a gist to facilitate more interaction and comments: https://gist.github.com/dkavanagh/32874d28420cabc90816

You commented on tomex's post over 5 years

The problem with any of this is that if you rely on abide for normal submit validation, you can't turn it off. Yet if you want to not have validation when clicking a "cancel" link, the click listener won't get called because abide handles a focus change event and swallows the click event. I have to click twice on cancel.. the first time abide errors appear on required fields, the 2nd time, cancel is actually clicked.

You commented on David Kavanagh's post over 5 years

I've looked at various options and we're using a block-grid arrangement right now that none of them will play well with. If I want to stick with foundation responsive layout, I'm steering towards rolling our own. I though about making our tiles draggable (in the jquery sense) and then using custom code to control placement/ordering/prefs(save/load)

You commented on David Kavanagh's post almost 6 years

I'll answer my own post. A co-worker fixed it right away in css!

.reveal-modal { z-index: 9999999; }

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content