diff --git a/dist/main.css b/dist/main.css index e2ed91e..f846909 100644 Binary files a/dist/main.css and b/dist/main.css differ diff --git a/dist/main.js b/dist/main.js index 124f86c..00a4fb3 100644 Binary files a/dist/main.js and b/dist/main.js differ diff --git a/src/scripts/album.js b/src/scripts/album.js index 3b28656..7760237 100644 --- a/src/scripts/album.js +++ b/src/scripts/album.js @@ -230,7 +230,9 @@ album.delete = function(albumIDs) { album.setTitle = function(albumIDs) { var oldTitle = '', - input; + input = '', + msg = '', + action; if (!albumIDs) return false; if (albumIDs instanceof Array===false) albumIDs = [albumIDs]; @@ -292,8 +294,8 @@ album.setTitle = function(albumIDs) { input = ""; - if (albumIDs.length===1) msg = "

Enter a new title for this album: " + msg + "

"; - else msg = "

Enter a title for all " + albumIDs.length + " selected albums: " + msg +"

"; + if (albumIDs.length===1) msg = "

Enter a new title for this album: " + input + "

"; + else msg = "

Enter a title for all " + albumIDs.length + " selected albums: " + input +"

"; basicModal.show({ body: msg, @@ -313,37 +315,44 @@ album.setTitle = function(albumIDs) { album.setDescription = function(photoID) { - var oldDescription = album.json.description.replace("'", '''), - description, - params, - buttons; + var oldDescription = album.json.description.replace("'", '''); - buttons = [ - ['Set Description', function() { + action = function(data) { - // Get input - description = $('.message input.text').val(); + var params; - // Remove html from input - description = lychee.removeHTML(description); + basicModal.close(); - if (visible.album()) { - album.json.description = description; - view.album.description(); + // Remove html from input + data.description = lychee.removeHTML(data.description); + + if (visible.album()) { + album.json.description = data.description; + view.album.description(); + } + + params = 'setAlbumDescription&albumID=' + photoID + '&description=' + escape(encodeURI(data.description)); + lychee.api(params, function(data) { + + if (data!==true) lychee.error(null, params, data); + + }); + + } + + basicModal.show({ + body: "

Please enter a description for this album:

", + buttons: { + action: { + title: 'Set Description', + fn: action + }, + cancel: { + title: 'Cancel', + fn: basicModal.close } - - params = 'setAlbumDescription&albumID=' + photoID + '&description=' + escape(encodeURI(description)); - lychee.api(params, function(data) { - - if (data!==true) lychee.error(null, params, data); - - }); - - }], - ['Cancel', function() {}] - ]; - - modal.show('Set Description', "Please enter a description for this album: ", buttons); + } + }); } @@ -356,14 +365,44 @@ album.setPublic = function(albumID, e) { albums.refresh(); - if (!visible.message()&&album.json.public==0) { + if (!basicModal.visible()&&album.json.public==0) { - modal.show('Share Album', "This album will be shared with the following properties:

Visible

Listed to visitors of your Lychee.

Downloadable

Visitors of your Lychee can download this album.

Password protected

Only accessible with a valid password.

", [['Share Album', function() { album.setPublic(album.getID(), e) }], ['Cancel', function() {}]], -170); + var msg = '', + action; - $('.message .choice input[name="password"]').on('change', function() { + action = function() { - if ($(this).prop('checked')===true) $('.message .choice input.text').show(); - else $('.message .choice input.text').hide(); + basicModal.close(); + album.setPublic(album.getID(), e); + + }; + + msg = "

This album will be shared with the following properties:

"; + + msg += "

Listed to visitors of your Lychee.

"; + msg += "

Visitors of your Lychee can download this album.

"; + msg += "

Only accessible with a valid password.

"; + + msg += "
" + + basicModal.show({ + body: msg, + buttons: { + action: { + title: 'Share Album', + fn: action + }, + cancel: { + title: 'Cancel', + fn: basicModal.close + } + } + }); + + $('.basicModal .choice input[name="password"]').on('change', function() { + + if ($(this).prop('checked')===true) $('.basicModal .choice input[data-name="password"]').show(); + else $('.basicModal .choice input[data-name="password"]').hide(); }); @@ -371,18 +410,18 @@ album.setPublic = function(albumID, e) { } - if (visible.message()) { + if (basicModal.visible()) { - if ($('.message .choice input[name="password"]:checked').val()==='password') { - password = md5($('.message input.text').val()); + if ($('.basicModal .choice input[name="password"]:checked').length===1) { + password = md5($('.basicModal .choice input[name="password"]').val()); album.json.password = 1; } else { password = ''; album.json.password = 0; } - if ($('.message .choice input[name="listed"]:checked').val()==='listed') listed = true; - if ($('.message .choice input[name="downloadable"]:checked').val()==='downloadable') downloadable = true; + if ($('.basicModal .choice input[name="listed"]:checked').length===1) listed = true; + if ($('.basicModal .choice input[name="downloadable"]:checked').length===1) downloadable = true; } diff --git a/src/styles/_message.scss b/src/styles/_message.scss index 26076d7..958d7df 100644 --- a/src/styles/_message.scss +++ b/src/styles/_message.scss @@ -33,8 +33,11 @@ text-decoration: none; border-bottom: 1px dashed #888; } + + &.less { padding-bottom: 30px; } } + /* Buttons ------------------------------------------------*/ .basicModal__button { padding: 13px 0 15px; background: black(.02); @@ -57,7 +60,7 @@ } - /* Input ------------------------------------------------*/ + /* Inputs ------------------------------------------------*/ input.text { width: calc(100% - 4px); padding: 9px 2px; @@ -74,6 +77,81 @@ &:focus { border-bottom-color: $colorBlue; } } + /* Radio Buttons ------------------------------------------------*/ + .choice { + padding: 0 30px 15px; + width: calc(100% - 60px); + color: #fff; + + &:last-child { padding-bottom: 40px; } + + label { + float: left; + color: white(1); + font-size: 14px; + font-weight: 700; + text-shadow: $shadow; + } + + label input { + position: absolute; + margin: 0; + opacity: 0; + } + + label .checkbox { + float: left; + display: block; + width: 16px; + height: 16px; + background: black(.5); + border-radius: 3px; + box-shadow: 0 0 0 1px black(.7); + + .iconic { + box-sizing: border-box; + fill: $colorBlue; + padding: 2px; + opacity: 0; + transform: scale(0); + transition: opacity .2s $timing, transform .2s $timing; + } + } + + /* Checked */ + label input:checked ~ .checkbox { + background: black(.5); + .iconic { + opacity: 1; + transform: scale(1); + } + } + + /* Active */ + label input:active ~ .checkbox { + background: black(.3); + .iconic { opacity: .8; } + } + + label .label { margin: 0 0 0 18px; } + + p { + clear: both; + padding: 4px 0 0 35px; + margin: 0; + width: calc(100% - 35px); + color: white(.6); + font-size: 13px; + } + + input.text { + display: none; + margin-top: 5px; + margin-left: 35px; + width: calc(100% - 39px); + } + } + } .message_overlay {