Petfinder 3.3.0 introduced the Polaroid Effect option thanks to a recommendation from my good friend at GrimeyMedia. You can check it out on the demo page. Once the Polaroid Effect is enabled, a site administrator has the ability to set the maximum degree of rotation for each pet card. The range is between 1 and 10. For example, if the range is set to 5, the rotation of each pet card will be randomly assigned between -5 and 5 degrees.
To accomplish this, I first passed the user-defined value of the rotation degree to my Javascript using Joomla’s built-in “optionsStorage” introduced in version 3.7.
Then, the math:
| var pfrotation = Math.round( Math.random() * ( rotationDegree * 2 ) ) - rotationDegree; |
That calculation sets pfrotation as a whole number between -10 and 10. Next, I appended a class name that included that value to each pet card:
| pet.classList.add( 'pf-rotate' + pfrotation ); |
This allowed me to declare a finite number of classes— pf-rotate-10 through pf-rotate10 —and set the degree of rotation using the transform property.
| .pf-rotate-10{ | |
| transform: rotate(-10deg) translate3d(0, 0, 1px); | |
| } | |
| .pf-rotate10{ | |
| transform: rotate(10deg) translate3d(0, 0, 1px); | |
| } |
The translate3d(0, 0, 1px) was included as a cross-browser solution for anti-aliasing the rotated text. Firefox was especially egregious with the how it rendered rotated text. Chrome and Edge did much better jobs, but the addition of translate3d smoothed the text across all browsers that supported the transform property.
One tangent—I included a
rangeslider on my demo page to demonstrate the Polaroid Effect. In Javascript, I have a listener associated with therangeslider that dynamically assigns mypf-rotateclasses. However, I had a helluva time finding a regular expression that removed any existingpf-rotateclasses before assigning a new class. This was because my class names included hyphens. I finally found the right combination to remove class names with hyphens:
| var regx = new RegExp( '\\b' + 'pf-rotate' + '(.*)?\\b', 'g' ); |
The parentheses surrounding the .* was the key, indicating the string after “pf-rotate” may or may not include hyphens.
Finally, on the administrator site, Joomla’s built-in range form field type is the barebones implementation. In order to spruce it up with numeric labels and the datalist element, you have to create a custom form field type. By extending Joomla’s JFormFieldRange class, I could modify the output as follows:
| // no direct access | |
| defined( '_JEXEC' ) or die( 'Restricted access' ); | |
| require_once JPATH_LIBRARIES . '/joomla/form/fields/range.php'; | |
| class JFormFieldPFRange extends JFormFieldRange { | |
| function getInput() { | |
| $input = $this->min . ' <input id="' . $this->id . '" name="' . $this->name . '" value="' . $this->value . '" max="' . $this->max . '" min="' . $this->min . '" step="' . $this->step . '" list="' . $this->id . '-options" type="range" /> ' . $this->max; | |
| $input .= '<datalist id="' . $this->id . '-options">'; | |
| for( $i = $this->min; $i <= $this->max; $i++ ){ | |
| $input .= '<option>' . $i . '</option>'; | |
| } | |
| $input .= '</datalist>'; | |
| return $input; | |
| } | |
| } |