Jump to content
tpr

AdminOnSteroids

Recommended Posts

You mean mark deleted all + sorting buttons?

The first one alone seems superfluous as there is already a way to do it, even if it's not that obvious (double click on trash icon). But with sorting buttons it makes more sense. So you give me permission to use your module's code?

  • Like 1

Share this post


Link to post
Share on other sites

Sure! Feel free to take (and improve) it

  • Like 1

Share this post


Link to post
Share on other sites

... and what is about a text input filter box, like with my experiment on the croppable image input?

new-imagefield-and-extensions-01.gif

Share this post


Link to post
Share on other sites

I've already thought of a filter box. Here's a screencap of its current state but it's still in an early stage. It's capable of searching image names, descriptions (multilanguage) and tags, and multiple strings at once (separated by spaces).

Filtering worked fine only until name/tag/description were unchanged because filter targets were added on load. I solved this by clicking or focusing on the filter box re-adds all the filter targets. In fact all the filters are added only on the first click so if you don't use the filter it won't add too much overhead.

post-3156-0-66280600-1464901467_thumb.gi

  • Like 5

Share this post


Link to post
Share on other sites

! This sounds very good ! - Multilanguage and Descriptions and Tags and multiple Searchphrases - !

Man, you are awesome! ^-^  

I have seen some third party JS / jQuery scripts that do sorting and filtering, but the good ones wasn't OpenSource, and / or to bloated. Your solution sounds very good.

There are one thing I thought of while playing with that: would it be possible to filter for portrait and landscape oriented images? - or for the smallest / highest height or width?

And ahm, if you need beta tester, just call. :)

Share this post


Link to post
Share on other sites

Nothing extraordinary here :) I will try to polish things a bit today and upload a new version. There are a few additions I have in mind to the filter but it's main feature should work fine.

Landscape/portrait and size filters could go to the sorting buttons bernhard suggested, once I get to that.

  • Like 1

Share this post


Link to post
Share on other sites

v012 is uploaded with the new filterbox feature. I get the onleave confirmation message after using the field and tryng to leave the page, if anyone knows an easy way to solve this that would be welcomed.

post-3156-0-92713400-1464945544_thumb.gi

  • Like 5

Share this post


Link to post
Share on other sites

Another cosmetic fix for the filterbox: show only if there are at least 2 items to filter. It's evaluated dynamically on uploading images, so if the field is empty or contains only one image it will be hidden.

post-3156-0-40507400-1465045066_thumb.gi

Now it's "close to perfect" according to my set of standards :)

  • Like 3

Share this post


Link to post
Share on other sites

@tpr: I have one wish and an observation to share. :)

My wish is: "Please can we have in AdminReno-CompactHeader-view the toggle icon for the sidebar?" If one do not use autohide for the sidebar it currently is missing with the compact header view.

---

For me, on Windows 7 with Firefox, I do not have a sticky header with the default Admintheme.

The mastheads position is set to relative, I think it must be fixed. The classes of the html element are

<html class="aos_fixScrollbarJump aos_fileFieldToolbar aos_filterbox aos_stickyHeader aos_PagePreviewLink" lang="en">

Do you need more Infos?

  • Like 1

Share this post


Link to post
Share on other sites

I'll check the fixed pos, thanks.

You can toggle the sidebar with the right-left arrows in the Reno theme, isn't that suffice? I agree that it's not very obvious.

  • Like 2

Share this post


Link to post
Share on other sites

Oh! Thats perfect! I didn't know it. - Now I don't need the toggle-icon anymore. :)

Many thanks!

  • Like 2

Share this post


Link to post
Share on other sites

Haha that was worth the question :) It's 1/2 request done and I haven't even got home :)

  • Like 1

Share this post


Link to post
Share on other sites

Filterbox everywhere!

A major update to the filterbox: now available for file fields too. This was my original intention and now it's real :)

Admin theme default sticky header is also fixed. I switched to array an of classes instead simple string concat but forgot to update the default admin theme part.

  • Like 3

Share this post


Link to post
Share on other sites

It's me again :) - Thanks for the changes and new additions.

The sticky header in DefaultAdminTheme is working now, but only for screens >= 960px :)

Share this post


Link to post
Share on other sites

Here is perhaps one of the last additions to filterbox - datalist:

post-3156-0-04082600-1465295064_thumb.gi

Only image name or file name is displayed because using value+text didn't work in Firefox. Anyway, it can be a handy helper as it is.

  • Like 2

Share this post


Link to post
Share on other sites

Well, for filtering items :) E.g if you have many images or documents uploaded and you would like to find a specific one. Or if you go to the Language Translator, there can be many translation files and it can be hard finding the one you need without filtering.

  • Like 2

Share this post


Link to post
Share on other sites

i get the point for files. but i've never needed to filter images :) but the day will come, i'm sure ;)

Share this post


Link to post
Share on other sites

Maybe it makes more sense if you use image tags, or descriptions.

Share this post


Link to post
Share on other sites

v016 is uploaded to GitHub, containing the datalist feature for filterbox + a display bug fix reported by matjazp.

  • Like 2

Share this post


Link to post
Share on other sites

Filtering for filenames with images will / is be one of the most used functions of all for me. :)

If you have done the images your self and use a naming convention, this is the fasted way to find specific images / images groups out of hundreds. Also, with an own naming convention, (and knowing the images), you don't need to tag the images. :lol:

Thanks @tpr!

  • Like 3

Share this post


Link to post
Share on other sites

@tpr, maybe a new feature request:

In Editpage mode, a HotKey for saving: ctrl+s

But one that alltimes work, regardless if one are on the edit page, in a CKeditor field or another Editorfield. I know that there is a module from Soma with AdminHotkeys, but IIRR, it doesn't work when editing in a CKEditor field. But most of all, I would need it there!

Share this post


Link to post
Share on other sites

Thanks! Glad to hear you can make use of it.

Just tried the ctrl-s combo and I got it working. Here is a snippet I have atm if you can't wait:

$(document).ready(function () {

    var saveButton = $('#submit_save');

    CKEDITOR.on('instanceReady', function (evt) {

        var editor = evt.editor;

        editor.document.on('keydown', function (e) {

            if (e.data.getKeystroke() == CKEDITOR.CTRL + 83) {

                e.data.$.preventDefault();

                saveButton.trigger('click');
                return false;
            }
        });
    });
});
  • Like 3

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 Macrura
      PrevNextTabs Module
      Github: https://github.com/outflux3/PrevNextTabs
      Processwire helper modules for adding page navigation within the editor.
      Overview
      This is a very simple module that adds Previous and Next links inline with the tabs on the page editor. Hovering over the tab shows the title of the previous or next page (using the admin's built in jqueryUI tooltips.)
      Usage
      This module is typically used during development where you or your editors need to traverse through pages for the purpose of proofing, flagging and/or commenting. Rather than returning to the page tree or lister, they can navigate with these links.
      Warnings
      If you are using PW version 2.6.1 or later, the system will prevent you from leaving the page if you have unsaved edits.
      For earlier versions, to avoid accidentally losing changes made to a page that might occur if a user accidentally clicks on one of these, make sure to have the Form Save Reminder module installed.
      http://modules.processwire.com/modules/prev-next-tabs/
    • By Gadgetto
      SnipWire - Snipcart integration for ProcessWire
      Snipcart is a powerful 3rd party, developer-first HTML/JavaScript shopping cart platform. SnipWire is the missing link between Snipcart and the content management framework ProcessWire.
      With SnipWire, you can quickly turn any ProcessWire site into a Snipcart online shop. The SnipWire plugin helps you to get your store up and running in no time. Detailed knowledge of the Snipcart system is not required.
      SnipWire is free and open source licensed under Mozilla Public License 2.0! A lot of work and effort has gone into development. It would be nice if you could donate an amount to support further development:

      Status update links (inside this thread) for SnipWire development
      2020-03-21 -- SnipWire 0.8.5 (beta) released! Improves SnipWires webhooks interface and provides some other fixes and additions 2020-03-03 -- SnipWire 0.8.4 (beta) released! Improves compatibility for Windows based Systems. 2020-03-01 -- SnipWire 0.8.3 (beta) released! The installation and uninstallation process has been heavily revised. 2020-02-08 -- SnipWire 0.8.2 (beta) released! Added a feature to change the cart and catalogue currency by GET, POST or SESSION param 2020-02-03 -- SnipWire 0.8.1 (beta) released! All custom classes moved into their own namespaces. 2020-02-01 -- SnipWire is now available via ProcessWire's module directory! 2020-01-30 -- SnipWire 0.8.0 (beta) first public release! (module just submitted to the PW modules directory) 2020-01-28 -- added Custom Order Fields feature (first SnipWire release version is near!) 2020-01-21 -- Snipcart v3 - when will the new cart system be implemented? 2020-01-19 -- integrated taxes provider finished (+ very flexible shipping taxes handling) 2020-01-14 -- new date range picker, discount editor, order notifiactions, order statuses, and more ... 2019-11-15 -- orders filter, order details, download + resend invoices, refunds 2019-10-18 -- list filters, REST API improvements, new docs platform, and more ... 2019-08-08 -- dashboard interface, currency selector, managing Orders, Customers and Products, Added a WireTabs, refinded caching behavior 2019-06-15 -- taxes provider, shop templates update, multiCURL implementation, and more ... 2019-06-02 -- FieldtypeSnipWireTaxSelector 2019-05-25 -- SnipWire will be free and open source Plugin Key Features
      Fast and simple store setup Full integration of the Snipcart dashboard into the ProcessWire backend (no need to leave the ProcessWire admin area) Browse and manage orders, customers, discounts, abandoned carts, and more Multi currency support Custom order and cart fields Process refunds and send customer notifications from within the ProcessWire backend Process Abandoned Carts + sending messages to customers from within the ProcessWire backend Complete Snipcart webhooks integration (all events are hookable via ProcessWire hooks) Integrated taxes provider (which is more flexible then Snipcart own provider) Useful Links
      SnipWire in PW modules directory SnipWire Docs (please note that the documentation is a work in progress) SnipWire @GitHub (feature requests and suggestions for improvement are welcome - I also accept pull requests) Snipcart Website  
      ---- INITIAL POST FROM 2019-05-25 ----
       
    • By horst
      Croppable Image 3
      for PW 3.0.20+
      Module Version 1.2.0
      Sponsored by http://dreikon.de/, many thanks Timo & Niko!
      You can get it in the modules directory!
      Please refer to the readme on github for instructions.
       
      - + - + - + - + - + - + - + - + - + - NEWS - 2020/03/19 - + - + - + - + - + - + - + - + - + - 
      There is a new Version in the pipe, that supports WebP too: 
       
      - + - + - + - + - + - + - + - + - + - NEWS - 2020/03/19 - + - + - + - + - + - + - + - + - + - 
       
       
      -------------------------------------------------------------------------
       
      Updating from prior versions:
       
      Updating from Croppable Image 3 with versions prior to 1.1.7, please do this as a one time step:
      In the PW Admin, go to side -> modules -> new, use "install via ClassName" and use CroppableImage3 for the Module Class Name. This will update your existing CroppableImage3 module sub directory, even if it is called a new install. After that, the module will be recogniced by the PW updater module, what makes it a lot easier on further updates.
      -------------------------------------------------------------------------
       
      For updating from the legacy Thumbnail / CropImage to CroppableImage3 read on here.
       
      -------------------------------------------------------------------------
       
    • By Robin S
      Inspired by a recent question.
      Image Crop Ratios
      Allows preset aspect ratios to be defined per image field for the ProcessWire image crop tool.
      The module adds a select dropdown to the crop tool. Choose an aspect ratio and the crop area will be fixed to that ratio.
      Screencast

      Installation
      Install the Image Crop Ratios module.
      Configuration
      Default aspect ratios for all image fields can be defined in the module config. Aspect ratios for specific image fields can be defined on the Input tab of the field settings. You can override the ratio settings in template context if needed. Insert a hyphen as the first item in the ratio settings unless you want to force a ratio to be applied to the crop tool. The hyphen represents a blank option that allows a free crop area to be drawn. Usage
      Click the "Crop" link on the details view of an image thumbnail. Click the "Crop" icon at the top of the editor window. Choose an option from the "Ratio" select dropdown.  
      https://github.com/Toutouwai/ImageCropRatios
      https://modules.processwire.com/modules/image-crop-ratios/
×
×
  • Create New...