-
-
Save raglan-road/5585388 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* the css here */ | |
| @include keyframes(fadeIn) { | |
| from { | |
| height: 0; | |
| opacity: 0; } | |
| to { | |
| height: auto; /* Not sure how well this will work */ | |
| opacity: 1; } | |
| } | |
| @include keyframes(fadeOut) { | |
| 0% { opacity: 1; } | |
| 65% { height: 0; opacity: 0.15; } | |
| 100% { opacity: 0; } } | |
| .fade-in { | |
| @include vendor-prefix(animation-name, fadeIn); | |
| @include vendor-prefix(animation-duration, 550ms); | |
| @include vendor-prefix(animation-fill-mode, both); | |
| @include vendor-prefix(animation-timing-function, cubic-bezier(0.950, 0.050, 0.795, 0.035)); | |
| @include vendor-prefix(transform, translate3d(0,0,0)); | |
| } | |
| .fade-out { | |
| @include vendor-prefix(animation-name, fadeOut); | |
| @include vendor-prefix(animation-duration, 350ms); | |
| @include vendor-prefix(animation-fill-mode, both); | |
| @include vendor-prefix(animation-timing-function, ease-out); | |
| @include vendor-prefix(transform, translate3d(0,0,0)); | |
| } | |
| /* Animation for a container's height and opacity, which we use to transition it into and out of the page */ | |
| /* To use this transition, apply height and opacity to the container on which it is being used. */ | |
| $transition: height 0.55s cubic-bezier(0.950, 0.050, 0.795, 0.035), opacity 0.55s cubic-bezier(0.950, 0.050, 0.795, 0.035); | |
| .form-in { | |
| opacity: 1 !important; | |
| } | |
| .form-out { | |
| height: 0 !important; | |
| opacity: 0 !important; | |
| } | |
| #js-inline-reply-form { | |
| @include vendor-prefix(transition, $transition); | |
| } | |
| /* the javascript */ | |
| // Shows or hides the Inline Reply text area. | |
| var toggleInlineReply = function(e) { | |
| e.preventDefault(); | |
| var $actionLinks = $(e.currentTarget).parents('.author-description, .activity-description').find('.reply-line, .activity-item-footer'); | |
| // if the form exists anywhere on the page, we have to remove it. | |
| var $replyForm = $('#js-inline-reply-form'); | |
| if ($replyForm.length > 0) { | |
| $replyForm.find('.js-reply-cancel-action').off('click'); | |
| $replyForm.find('.js-reply-post-action').off('click'); | |
| $replyForm | |
| /*.removeClass('fade-in') | |
| .addClass('fade-out');*/ | |
| .removeClass('form-in') | |
| .addClass('form-out'); | |
| setTimeout(function () { | |
| $replyForm.remove(); | |
| }, 350); | |
| } else { | |
| $(e.currentTarget) | |
| .parents('.author-description, .activity-description') | |
| .find('.js-reply-action-line, .activity-item-footer') | |
| .before(templates.discussionReplyTemplate.template({ discussionId: $('#discussion').data('id'), discussionTitle: $.trim($('#discussion-title').text()) })) | |
| .parents('.author-description, .activity.description') | |
| .find('#js-inline-reply-form') | |
| //.addClass('fade-in'); | |
| .addClass('form-in'); | |
| $replyForm = $(e.currentTarget).parents('.author-description, .activity-description').find('#js-inline-reply-form'); | |
| $replyForm.find('.js-reply-cancel-action').on('click', toggleInlineReply); | |
| $replyForm.find('.js-reply-post-action').on('click', postInlineReply); | |
| setTimeout(function () { $replyForm.find('textarea').focus(); }, 500); | |
| } | |
| toggleReplyLinks($actionLinks); | |
| }; | |
| /* the html (from chrome debugger) */ | |
| <form action="/cafegourmet/discussion/reply" id="js-inline-reply-form" method="post" class="form-in"><input id="DiscussionId" name="DiscussionId" type="hidden" value="e6c4870c-a3b0-46aa-a9d4-3e9483af8a81"><input id="DiscussionTitle" name="DiscussionTitle" type="hidden" value="amet lorem feugiat illum dolore elitr et elitr no ea."> <fieldset class="push-10 grid-85 tablet-grid-85 mobile-grid-60 inline-reply-form"> | |
| <section class="form-element-row"> | |
| <section class="field-value-column"> | |
| <textarea cols="20" id="ReplyDescription" name="ReplyDescription" rows="3"></textarea> | |
| <div class="field-validation-error" style="visibility: hidden;"></div> | |
| </section> | |
| </section> | |
| <footer class="grid-90 tablet-grid-85 mobile-grid-40"> | |
| <input type="file" name="file"> | |
| <input id="IsAnonymous" name="IsAnonymous" type="checkbox" value="true"><input name="IsAnonymous" type="hidden" value="false"> <span>Anonymous</span> | |
| <ul class="reply-actions"> | |
| <li> | |
| <a class="js-reply-cancel-action" href="#">Cancel</a> | |
| </li> | |
| <li> | |
| <a> | |
| <div class="button priority-primary ui-corner-all js-reply-post-action"> | |
| <span class="ui-icon ui-icon-white ui-icon-comment"></span> | |
| Post | |
| </div> | |
| </a> | |
| </li> | |
| </ul> | |
| </footer> | |
| <input name="__RequestVerificationToken" type="hidden" value="NjA7/ZpU1HaGu8+1AOQmN5qLLXeHswssaPGmtFXcWdejxfGrHRq1PzJugHAsYG+zZU5rPNUSsHerwfXVJq6Y5z3N3f3uNTzKPcNkJ1mxMDHm3Vzfu/NPJ7Vnnk0hvyjKtkMiRv6y0ej1KEoH3MnQRxaO8oQvwJ/HjZ7eMJfCo9ohzj1zeR9xt/w9GCaxaP5V0iaOrg=="> | |
| </fieldset> | |
| </form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment