2

Is there was a way for a field type to detect if it is being instantiated for the inline editor or even the live preview? I am working on some responsive UI's to make Google Maps for Craft work optimally on all screen sizes, but current smaller screens are posing a problem. Obviously media queries are being used, but was also wondering if I could easily detect where the field type was being instantiated and then I could possible add additional classes to my field type wrapper.

3
  • Maybe this would be a good use for the Element Query Polyfill, so that the elements could adapt themselves to the size of their container rather than the viewport? github.com/marcj/css-element-queries – Patrick Harrington Dec 3 '14 at 0:38
  • I was already thinking the same thing, but the for sake of knowing I was just wondering if this was technically possible to detect in some way without using a size to determine it. And just to clarify, "viewport" was using in the same way you were using "container". Container is probably better wording for it. – Justin Kimbrell Dec 3 '14 at 7:36
  • I think size detection is the better way to do it, Justin. Keep in mind that the Live Preview pane is resizable! – carlcs Dec 3 '14 at 7:55
3

You could check if the whole request is Live Preview using craft.request.isLivePreview.

2
  • What about the inline editing modal? That was the primary question, the live preview was an additional example of what I was asking since it was conceptually the same thing. – Justin Kimbrell Dec 2 '14 at 20:18
  • Oh I see. I misunderstood the question. :-/ still a bit unfamiliar with the plugin side of Craft – Brian Whitton Dec 3 '14 at 5:30
2

You would do that with JS, at least this is how it is done to the core fields (see MatrixInput.js line 152 ff.).

Just check for the container width of your field and then swap your classes / do your responsive design magic.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.