← Back to branch summary

~jstys-z/helioviewer.org/client5

« back to all changes in this revision

Viewing changes to src/php/HelioviewerWebClient.php

  • Committer: Jeff Stys
  • Date: 2015-03-02 21:27:41 UTC
  • Revision ID: jstys@sesda3.com-20150302212741-zlq505s0i2zapr5x
+ Added image area select buttons to SDO AIA/HMI Cut-out Service accordion
+ Added accordion entry for shortening / copying / and/or sharing a link to the current Viewport state
+ Added social sharing buttons for Twitter, Facebook, and Pinterest

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/php/HelioviewerWebClient.php
319
319
 
320
320
 
321
321
        <div id="scale">
322
 
            <div id="mouse-cartesian" class="viewport-action segmented-left fa fa-cubes" title="Toggle Mouse Coordinates (Cartesian)"></div><div id="mouse-polar" class="viewport-action segmented-right fa fa-dot-circle-o" style="border-left: 0;" title="Toggle Mouse Coordinates (Polar)"></div>
 
322
            <div id="mouse-cartesian" class="viewport-action segmented-left fa fa-cube" title="Toggle Mouse Coordinates (Cartesian)"></div><div id="mouse-polar" class="viewport-action segmented-right fa fa-dot-circle-o" style="border-left: 0;" title="Toggle Mouse Coordinates (Polar)"></div>
323
323
 
324
324
            <div id="earth-button" class="viewport-action fa fa-globe" title="Toggle Earth-Scale Indicator"></div>
325
325
 
714
714
 
715
715
                            <br />
716
716
 
 
717
 
 
718
                            <div class="row">
 
719
                                <div id='movie-manager-build-btns' class='media-manager-build-btns' style="font-size: 1.4em;">
 
720
                                    <div style="width: 70%; margin: 0 auto;">
 
721
                                        <div id='movie-manager-full-viewport' class='text-btn qtip-left' title='Create a movie using the entire viewport.'>
 
722
                                            <span class='fa fa-arrows-alt fa-fw'></span>
 
723
                                            <span style='line-height: 1.6em'>Full Viewport</span>
 
724
                                        </div>
 
725
                                        <div id='movie-manager-select-area' class='text-btn qtip-left' style='float:right;' title='Create a movie of a sub-region of the viewport.'>
 
726
                                            <span class='fa fa-crop fa-fw'></span>
 
727
                                            <span style='line-height: 1.6em'>Select Area</span>
 
728
                                        </div>
 
729
                                    </div>
 
730
                                </div>
 
731
                            </div>
 
732
 
 
733
 
717
734
                            <div class="row">
718
735
                                <div class="label inactive">Center (x,y):</div>
719
736
                                <div class="field">
762
779
    <div id="hv-drawer-share" class="hv-drawer-right user-select-none">
763
780
        <div class="drawer-contents">
764
781
 
765
 
            <div id="accordion-share" class="accordion">
 
782
            <div id="accordion-link" class="accordion">
766
783
                <div class="header">
767
784
                    <div class="disclosure-triangle closed">►</div>
768
785
                    <h1>Share Link to Current Viewport</h1>
770
787
                </div>
771
788
                <div class="content">
772
789
                    <div class="section">
773
 
                        <div id="social-panel" class="ui-widget ui-widget-content ui-corner-all"></div>
 
790
                        <div id="helioviewer-url-box" style="font-size: 1em;">
 
791
                            <span id="helioviewer-url-box-msg"></span>
 
792
                            <form style="margin-top: 5px; text-align: center;">
 
793
                                <input type="text" id="helioviewer-url-input-box" style="width:98%;" value="http://helioviewer.org" />
 
794
                                <label for="helioviewer-url-shorten">Shorten with bit.ly? </label>
 
795
                                <input type="checkbox" id="helioviewer-url-shorten" />
 
796
                                <input type="hidden" id="helioviewer-short-url" value="" />
 
797
                                <input type="hidden" id="helioviewer-long-url" value="" />
 
798
                            </form>
 
799
                        </div>
 
800
 
 
801
                        <br />
 
802
 
 
803
                        <div id='movie-manager-build-btns' class='media-manager-build-btns'>
 
804
                            <div style="width: 65%; margin: 0 auto; font-size: 1.5em;">
 
805
                                <div id='movie-manager-full-viewport' class='text-btn qtip-left' title=''>
 
806
                                    <span class='fa fa-copy fa-fw'></span>
 
807
                                    <span style='line-height: 1.6em'>Copy Link</span>
 
808
                                </div>
 
809
                                <div id='movie-manager-select-area' class='text-btn qtip-left' style='float:right;' title=''>
 
810
                                    <span class='fa fa-envelope fa-fw'></span>
 
811
                                    <span style='line-height: 1.6em'>Email Link</span>
 
812
                                </div>
 
813
                            </div>
 
814
                        </div>
 
815
 
 
816
                    </div>
 
817
                </div>
 
818
            </div>
 
819
 
 
820
            <div id="accordion-social" class="accordion">
 
821
                <div class="header">
 
822
                    <div class="disclosure-triangle closed">►</div>
 
823
                    <h1>Share to Social Networks</h1>
 
824
                    <div class="right fa fa-question-circle contextual-help" title="Share Link to Current Viewport"></div>
 
825
                </div>
 
826
                <div class="content">
 
827
                    <div class="section">
 
828
                        <div id="social-panel" class="ui-widget ui-widget-content ui-corner-all">
 
829
 
 
830
                            <div id='twitter' class='social-btns'>
 
831
                                <div style="width: 50%; margin: 0 auto; font-size: 1.5em;">
 
832
                                    <div id='' class='text-btn qtip-left' style="width: 100%;" title=''>
 
833
                                        <span class='fa fa-twitter-square fa-fw'></span>
 
834
                                        <span style='line-height: 1.6em'>Tweet Screenshot</span>
 
835
                                    </div>
 
836
                                </div>
 
837
                            </div>
 
838
 
 
839
                            <div id='facebook' class='social-btns'>
 
840
                                <div style="width: 50%; margin: 0 auto; font-size: 1.5em;">
 
841
                                    <div id='' class='text-btn qtip-left color-facebook' style="width: 100%;" title=''>
 
842
                                        <span class='fa fa-facebook-square fa-fw'></span>
 
843
                                        <span style='line-height: 1.6em'>Share Screenshot</span>
 
844
                                    </div>
 
845
                                </div>
 
846
                            </div>
 
847
 
 
848
                            <div id='pinterest' class='social-btns'>
 
849
                                <div style="width: 50%; margin: 0 auto; font-size: 1.5em;">
 
850
                                    <div id='' class='text-btn qtip-left' style="width: 100%;" title=''>
 
851
                                        <span class='fa fa-pinterest-square fa-fw'></span>
 
852
                                        <span style='line-height: 1.6em'>Pin Screenshot</span>
 
853
                                    </div>
 
854
                                </div>
 
855
                            </div>
 
856
 
 
857
 
 
858
                        </div>
774
859
                    </div>
775
860
                </div>
776
861
            </div>
893
978
            <!-- Image area select boundary container -->
894
979
            <div id="image-area-select-container"></div>
895
980
        </div>
896
 
 
897
981
    </div>
898
982
</div>
899
983