Macrura

module
JqueryIonRangeSlider (pre-release)

4 posts in this topic

Released:

http://modules.processwire.com/modules/jquery-ion-range-slider/

The built in rangeslider is good, but it is somewhat limited if you need really specific slider interfaces, like with pips and showing the value on the handles.

There are many Jquery rangesliders, but one of the best and easiest to implement is the ion.rangeSlider.
http://ionden.com/a/plugins/ion.rangeSlider/en.html

This is a preview of the very simple module that basically allows you to enable the ion.Rangeslider on any text input, and then you type in your params into the textarea field (careful, you can break the page's javascrpt if you are not careful!) There are way too many options to really make this configurable, so the easiest way it to have a free text field where you enter any params. The params are just passed to the instance of the slider.

Features of ion.Rangeslider:

  • Skin support. (5 skins included and PSD for skin creation)
  • Any number of sliders at one page without conflicts and big performance problems
  • Two slider types single (1 slider) and double (2 sliders)
  • Support of negative and fractional values
  • Ability to set custom step and snap grid to step
  • Support of custom values diapason
  • Customisable grid of values
  • Ability to disable UI elements (min and max, current value, grid)
  • Postfixes and prefixes for your numbers ($20, 20 € etc.)
  • Additional postfix for maximum value (eg. $0 — $100+)
  • Ability to prettify large numbers (eg. 10000000 -> 10 000 000 or 10.000.000)
  • Slider writes its value right into input value field. This makes it easy to use in any html form
  • Any slider value can be set through input data-attribute (eg. data-min="10")
  • Slider supports disable param. You can set it true to make slider inactive
  • Slider supports external methods (update, reset and remove) to control it after creation
  • For advanced users slider has callbacks (onStart, onChange, onFinish, onUpdate). Slider pastes all its params to callback first argument as object
  • Slider supports date and time

 

Screenshots comparing Inputfield Rangeslider (Soma) vs. JqueryIonRangeSlider...

1) basic range using currency

58af974cc7343_Edit_Page__Test_Post__localhost.jpg.9da1e2ff2380dcb55d6929f9095d6ec8.jpg'

Same with different skin

58af975383b9d_Edit_Page__Test_Post__localhost.jpg.5ffb7f08af05dd5bafc014b0219ab2a3.jpg

Range of years

58af976072aed_Edit_Page__Test_Post__localhost.jpg.9b6000a901c2d86c42419442d1acdcb4.jpg

Same with narrower column and different skin..

58af976747944_Edit_Page__Test_Post__localhost.jpg.59641cfd93207195bb3427de50b41b6c.jpg

 

the module is functional and being used on 1 site, but some additional testing is needed...

15 people like this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By ethfun
      I've created a Process Module, and its execute() function renders the HTML response to an AJAX request. The AJAX request is being made outside of the admin panel, and in all likelihood will be made by "guest" users.
      Within my ModuleName.info.json file, I have added these lines:
      "permission": "generate-thumbnails", "permissions": { "generate-thumbnails": "Generate Thumbnails" }, Then within the Admin panel, I gave guests access to run that module.
      Unless logged in, the response to the AJAX request is always the login form's HTML, rather than the HTML my execute() function creates.
      So two questions:
      Is it possible to give non-logged-in users the ability to run that function via the AJAX request, or Is there a better ProcessWire way to create HTML to use as an AJAX response? Thank you!
    • By Robin S
      I have had this module sitting in a 95% complete state for a while now and have finally made the push to get it out there. Thanks to @teppo for his Hanna Code Helper module which I referred to and borrowed from during development.
      http://modules.processwire.com/modules/hanna-code-dialog/
      https://github.com/Toutouwai/HannaCodeDialog
      HannaCodeDialog
      A module for ProcessWire CMS/CMF. Provides a number of enhancements for working with Hanna Code tags in CKEditor. The main enhancement is that Hanna tags in a CKEditor field may be double-clicked to edit their attributes using core ProcessWire inputfields in a modal dialog.
      Requires the Hanna Code module.
      Installation
      Install the HannaCodeDialog module using any of the normal methods.
      For any CKEditor field where you want the "Insert Hanna tag" dropdown menu to appear in the CKEditor toolbar, visit the field settings and add "HannaDropdown" to the "CKEditor Toolbar" settings field.
      Module configuration
      Visit the module configuration screen to set any of the following:
      Exclude prefix: Hanna tags named with this prefix will not appear in the CKEditor toolbar dropdown menu for Hanna tag insertion. Exclude Hanna tags: Hanna tags selected here will not appear in the CKEditor toolbar dropdown menu for Hanna tag insertion. Background colour of tag widgets: you can customise the background colour used for Hanna tags in CKEditor if you like. Dialog width: in pixels Dialog height: in pixels Features
      Insert tag from toolbar dropdown menu
      Place the cursor in the CKEditor window where you want to insert your Hanna tag, then select the tag from the "Insert Hanna tag" dropdown.

      Edit tag attributes in modal dialog
      Insert a tag using the dropdown or double-click an existing tag in the CKEditor window to edit the tag attributes in a modal dialog.

      Tags are widgets
      Hanna tags that have been inserted in a CKEditor window are "widgets" - they have a background colour for easy identification, are protected from accidental editing, and can be moved within the text by drag-and-drop.

      Options for tag attributes may be defined
      You can define options for a tag attribute so that editors must choose an option rather than type text. This is useful for when only certain strings are valid for an attribute and also has the benefit of avoiding typos.
      Add a new attribute for the Hanna tag, named the same as the existing attribute you want to add options for, followed by "__options". The options themselves are defined as a string, using a pipe character as a delimiter between options. Example for an existing attribute named "vegetables":
      vegetables__options=Spinach|Pumpkin|Celery|Tomato|Brussels Sprout|Potato You can define a default for an attribute as normal. Use a pipe delimiter if defining multiple options as the default, for example:
      vegetables=Tomato|Potato Dynamic options
      Besides defining static options as above, you can use one Hanna tag to dynamically generate options for another. For instance, you could create a Hanna tag that generates options based on images that have been uploaded to the page, or the titles of children of the page.
      Your Hanna tag that generates the options should echo a string of options delimited by pipe characters (i.e. the same format as a static options string).
      You will probably want to name the Hanna tag that generates the options so that it starts with an underscore (or whatever prefix you have configured as the "exclude" prefix in the module config), to avoid it appearing as an insertable tag in the HannaCodeDialog dropdown menu.
      Example for an existing attribute named "image":
      image__options=[[_images_on_page]] And the code for the _images_on_page tag:
      <?php $image_names = array(); $image_fields = $page->fields->find('type=FieldtypeImage')->explode('name'); foreach($image_fields as $image_field) { $image_names = array_unique( array_merge($image_names, $page->$image_field->explode('name') ) ); } echo implode('|', $image_names); Choice of inputfield for attribute
      For attributes which you have defined options for, you can choose the inputfield that is used to select from the options.
      Inputfields that support the selection of a single option are select (this is the default inputfield for attributes with options so it isn't necessary to specify it if you want it) and radios.
      Inputfields that support the selection of multiple options are selectmultiple, asmselect and checkboxes.
      You can also specify a checkbox inputfield - this is not for attributes with defined options but will limit an attribute to an integer value of 1 or 0.
      The names of the inputfield types are case-insensitive.
      Example for an existing attribute named "vegetables":
      vegetables__type=asmselect Descriptions and notes for inputfields
      You can add a description or notes to an attribute and these will be displayed in the dialog.
      Example for an existing attribute named "vegetables":
      vegetables__description=Please select vegetables for your soup. vegetables__notes=Pumpkin and celery is a delicious combination. Notes
      When creating or editing a Hanna tag you can view a basic cheatsheet outlining the HannaCodeDialog features relating to attributes below the "Attributes" config inputfield.
      Troubleshooting
      HannaCodeDialog includes and automatically loads the third-party CKEditor plugins Line Utilities and Widget. If you have added these plugins to your CKEditor field already for some purpose and experience problems with HannaCodeDialog try deactivating those plugins from the CKEditor field settings.
    • By gRegor
      Updated 2017-03-27:
      Version 1.1.3 released
      Updated 2016-04-11:
      Version 1.1.2 released

      Updated 2016-02-26:
      Officially in the module directory! http://modules.processwire.com/modules/webmention/

      Updated 2016-02-25:
      Version 1.1.0 is now released. It's been submitted to the module directory so should appear there soon. In the meantime, it's available on GitHub: https://github.com/gRegorLove/ProcessWire-Webmention. Please refer to the updated README there and let me know if you have any questions!
      ------------
      Original post:
       
      This is now out of date. I recommend reading the official README.
       
      I've been working on this one for a while. It's not 100%, but it is to the point I'm using it on my own site, so it's time for me to release it in beta. Once I finish up some of the features described below, I will submit it to the modules directory as a stable plugin.
      For now, you can install from Github. It works on PW2.5. I haven't tested on PW2.6, but it should work there.
      Feedback and questions are welcome. I'm in the IRC channel #processwire as well as #indiewebcamp if you have any questions about this module, webmention, or microformats.
      Thanks to Ryan for the Comments Fieldtype which helped me a lot in the handling of webmentions in the admin area.
      ProcessWire Webmention Module
      Webmention is a simple way to automatically notify any URL when you link to it on your site. From the receiver's perspective, it is a way to request notification when other sites link to it.
      Version 1.0.0 is a stable beta that covers webmention sending, receiving, parsing, and display. An easy admin interface for received webmentions is under development, as well as support for the Webmention Vouch extension.
      Features
      * Webmention endpoint discovery
      * Automatically send webmentions asynchronously * Automatically receive webmentions * Process webmentions to extract microformats   Requirements * php-mf2 and php-mf2-cleaner libraries; bundled with this package and may optionally be updated using Composer. * This module hooks into the LazyCron module.   Installation Github: https://github.com/gRegorLove/ProcessWire-Webmention

      Installing the core module named "Webmention" will automatically install the Fieldtype and Inputfield modules included in this package.   This module will attempt to add a template and page named "Webmention Endpoint" if the template does not exist already. The default location of this endpoint is http://example.com/webmention-endpoint   After installing the module, create a new field of type "Webmentions" and add it to the template(s) you want to be able to support webmentions. Sending Webmentions
      When creating or editing a page that has the Webmentions field, a checkbox "Send Webmentions" will appear at the bottom. Check this box and any URLs linked in the page body will be queued up for sending webmentions. Note: you should only check the "Send Webmentions" box if the page status is "published."   Receiving Webmentions This module enables receiving webmentions on any pages that have have "Webmentions" field, by adding the webmention endpoint as an HTTP Link header. If you would like to specify a custom webmention endpoint URL, you can do so in the admin area, Modules > Webmention.   Processing Webmentions (beta) Currently no webmentions are automatically processed. You will need to browse to the page in the backend, click "Edit," and scroll to the Webmentions field. There is a dropdown for "Visibility" and "Action" beside each webmention. Select "Process" to parse the webmention for microformats.   A better interface for viewing/processing all received webmentions in one place is under development.   Displaying Webmentions (beta) Within your template file, you can use `$page->Webmentions->render()` [where "Webmentions" is the name you used creating the field] to display a list of approved webmentions. As with the Comments Fieldtype, you can also generate your own output.   The display functionality is also under development.   Logs This module writes two logs: webmentions-sent and webmentions-received.   Vouch The Vouch anti-spam extension is still under development.   IndieWeb The IndieWeb movement is about owning your data. It encourages you to create and publish on your own site and optionally syndicate to third-party sites. Webmention is one of the core building blocks of this movement.   Learn more and get involved by visiting http://indiewebcamp.com.   Further Reading * http://indiewebcamp.com/webmention * http://indiewebcamp.com/comments-presentation * http://indiewebcamp.com/reply
    • By kixe
      This morning I pushed a module to github which extends the page api with moving and sorting capability.
      https://github.com/kixe/PageSortMove
      /** * CALLABLE * PageSortMove::execute($pageID, $newIndex = 0, $parentID = null); * $modules->get('PageSortMove')->execute($pageID, $newIndex = 0, $parentID = null); * * EXTENDED PAGE API * @property $page->first // under same parent * @property $page->last * * @method $page->first($parentID = null) * @method $page->last($parentID = null) * @method $page->sort($newIndex) * @method $page->move($newIndex, $parentID = null) */ Have a nice weekend.