Export and Editing using the same project structure.

Ideas
1

Hello,

When you're editing your project, the project structure isn't the same. For exemple :

Editing img : src="folder/picture.png"

Exported : src="assets/img/folder/picture.png"

When doing some static page without animation, this isn't a problem. But when you reference some file in a JS file, you need to make 2 versions of your JS to make it to work

Exemple :

Editing/Preview $(".img").attr("src", "folder/picture.png");

Exported $(".img").attr("src", "folder/picture.png"); <-- Should be "assets/img/folder/picture.png"

For the moment I've been using small JS file, but on big one, this can be really annoying to change all path. I think the Editing and Preview part should use the "assets/xxx" structure to make things easier

2

I can see how this could be difficult to manage in a large project so I agree with this.

+1 ?

3

File structure has been asked for numerous times over the past couple years. For the most part, the in app structure should be exactly the same as the exported structure.

+1 although I hesitate to bother since we haven't gotten any feedback on file structure, page supporting files control, and a bunch of other requests that all fall into the structure and control of the pages and files. I do hope we see something on this soon.

4

I agree it would be nicer to have the app resemble the exported paths. However, that seems to me not an ideal way to target your images in the script.

You should target them by way of an ID or Class or Data- attributes. Then the path issue is null and void.

CSS

img {
  position:relative; // used to allow the image to move in my example
}

Example #1 HTML

<div>< img src="image.png" id="animate-left" /></div>
<div>< img src="image.png" id="animate-right" /></div>

JS

$(function() {
    $("#animate-left").click(function(){
        $(this).animate({ "left": "-=50px" }, "slow" );
    });
    $("#animate-right").click(function(){
        $(this).animate({ "left": "+=50px" }, "slow" );
    });
});

Example #2 HTML

<div>< img src="image.png" class="animate left" /></div>
<div>< img src="image.png" class="animate right" /></div>

JS

$(function() {
    $(".animate").click(function(){
        var $this = $(this);
        var $animLeft = $this.hasClass("left");
        var $animRight = $this.hasClass("right");
        if ($animLeft) {
            $(this).animate({ "left": "-=50px" }, "slow" );
        } else if ($animRight) {
            $(this).animate({ "left": "+=50px" }, "slow" );
        }
    });
});

Example #3 HTML

<div>< img src="image.png" data-animate="left" /></div>
<div>< img src="image.png" data-animate="right" /></div>

JS

$(function() {
    $("[data-animate]").click(function(){
        var $this = $(this);
        var $animDir = $this.data("animate");
        if ($animDir == "left") {
            $(this).animate({ "left": "-=50px" }, "slow" );
        } else if ($animDir == "right") {
            $(this).animate({ "left": "+=50px" }, "slow" );
        }
    });
});

Each example was tested to work.

I'd personally would probably go with Example #3 because unlike Example #1 you can only use the ID once per page. Unlike Example #2 the classes might get a little muddied up, left/right could mean more than something related to the animate. Example #3 like Example #2 can be used over an over on the same page but it also makes it easier to be more complex like Example #4 you can set the distance to move on each image separately as well as the speed.

Example #4 HTML

<div>< img src="image.png" data-animate2="left"  data-distance="-=100px"  data-speed="slow" /></div>
<div>< img src="image.png" data-animate2="right"  data-distance="+=120px"  data-speed="fast" /></div>

JS

$(function() {
    $("[data-animate2]").click(function(){
        var $this = $(this);
        var $animDir = $this.data("animate2");
        var $animDist = $this.data("distance");
        var $animSpd = $this.data("speed");
        if ($animDir == "left") {
            $(this).animate({ "left": $animDist }, $animSpd );
        } else if ($animDir == "right") {
            $(this).animate({ "left": $animDist }, $animSpd );
        }
    });
});

Saj

P.S. Hopefully the forum doesn't remove the IDs/Classes/Data attributes on this edit. P.S.S I had to fix the script for the class on because I was using an old version that had the test wrong.

5

I added these (using icons) examples to my BSS testbed site. http://saj.bss.design/animate-examples.html

Saj

6

Hello Saj,

I'm using pictures in my script mainly to change the src attribute of an img tag, not to animate it. And I think I'm not alone to use JS like this.

7

The point wasn't really about animation or if others are doing it this way, it was about looking at targeting an element in a more ideal way.

So if you are trying to swap between two images you could do something like this. Add a Data- of the swap to image and then another Data- of the original image to return to on next click.

HTML

< img src="path/image1.png" data-iswap="image2.jpg" data-oswap="image1.png" />
< img src="path/image3.gif" data-iswap="image4.jpg" data-oswap="image3.gif" />

JS

$(function(){
    $("[data-iswap]").on("click", function(){
        var $this = $(this);
        var $iSRC = $this.attr("src");
        var $newSRC = $this.data("iswap");
        var $oldSRC = $this.data("oswap");
        var $newImgSrc = $iSRC.replace(/\w+\.(?![com|net|org|biz|info|live|me])\w+/g, $newSRC);
        var $oldImgSrc = $iSRC.replace(/\w+\.(?![com|net|org|biz|info|live|me])\w+/g, $oldSRC);
        if ($newImgSrc.indexOf($iSRC) === -1){
            $this.attr("src", $newImgSrc);
        }else{
            $this.attr("src", $oldImgSrc);
        }
    });
});

This will swap between 2 images each time the image is clicked and it shouldn't care about the SRC's path. Obviously all the images should exist in the same path because of that. It singles out the object being clicked, gets it's SRC and the 2 Data- attribute values then it replaces the end of the SRC and based on which is in the SRC it applies the other Data- attribute.

I had to rewrite this a couple times because I kept improving the JS code and it no longer is limited to a single files type extension as well as it should accounts for absolute URLs too.

The overall point was to show a better way of targeting something that's not based on something that is as volatile as something like an IMG SRC. Because who knows you could have some other JS code that on page load changes the SRC and now you have another script expecting one thing and now getting another and your all messed up.

And even so with all this you don't have to target it based on a specific SRC url when you can target it based on the SRC containing a specific word. i.e.

$("img[src*='image1']").on("click", function(){... https://api.jquery.com/attribute-contains-selector/

Now to use the JS code, you'll need to be aware of URLs your using and update the JS accordingly so that you only end up with the targeted image.ext wording.

So if you have an image like < img src="http://www.something.com/some/pic.png">

You need to update this part of the JS to also omit the domain like I did with the word "some" because it's proceeded by the ".". /\w+\.(?![com|net|org|biz|info|live|me|some])\w+/g

I'm sure there's a better regex that can be used to find just the image.ext, but this has taken a good bit of time to work this out for me. Not really something I do well with :)

And I just want to restate that I too would like the app to resemble exported pathing as well as being able to dictate the path I want.

The exported path for html/css/js and images that I need are nothing like what the app does. So I have to use Notepad++ and load up all the html/css files and do a search/replace for all the paths. Which is quick anyways.

Saj

8

Hello Saj,

Thanks for your help. Even if your code is 100% working, I think this is just a workaround. For development purposes, this is okay, but I'd like to avoid this in production.

Using regex is more "complex" than just having a structure in both dev & prod. And I agree that choosing a path for all file type would be nice !